Protéger son DS des dérives d'agents IA
Tes agents IA shippent des composants DS-shaped mais hors-DS. Storybook 10.3 MCP donne aux agents le contexte canonique de tes composants, shadcn CLI v4 + Skills + Presets standardise les générations, Chromatic AI bloque les régressions visuelles avant merge, Claude Design garantit une génération AI alignée avec ton brand.
Pourquoi
Protéger ton DS quand 4 agents IA tapent dedans en parallèle. Tu as un design system propre. Tu actives Claude Code, Cursor, v0, Copilot dans ton équipe. Trois semaines plus tard, tu retrouves 6 variantes du Button, 2 systèmes de spacing concurrents, et un dev junior qui demande pourquoi <Button variant="primary"> ne ressemble plus à <Button variant="primary">. Le DS dérive en silence. Ce kit pose des garde-fous lisibles par les agents. Storybook devient l'API du DS, storybook-mcp expose les composants aux agents, chromatic-ai catch les régressions visuelles avant merge,…
Quand
Phase scale, audience DS manager / lead frontend / tech lead avec une équipe ≥3 devs sous Claude Code/Cursor. ✅ Tu sais que c'est ton kit quand Tu vois apparaître des composants shadow : Button2, ButtonNew, ButtonV3 dans les PR Tes tokens sont copiés en hardcode : bg-[#3b82f6] au lieu de bg-primary Ton équipe utilise plusieurs agents : Claude Code + Cursor + v0 sur le même repo ❌ Pas pour ce…
Outils inclus
- Storybook
- Shadcn Cli V4 Skills
- Storybook Mcp
- Chromatic Ai
- Claude Design