Protéger son DS des dérives d'agents IA
Tes agents IA livrent des composants qui ressemblent au DS sans en faire partie. 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