Protect your DS from AI agent drift
Your AI agents ship DS-shaped components that are off-DS. Storybook 10.3 MCP gives agents canonical component context, shadcn CLI v4 + Skills + Presets standardizes generations, Chromatic AI blocks visual regressions before merge, Claude Design ensures AI generation aligned with your brand.
Why
Protect your DS when 4 AI agents are typing into it in parallel. You have a clean design system. You enable Claude Code, Cursor, v0, Copilot across your team. Three weeks later, you find 6 Button variants, 2 competing spacing systems, and a junior dev asking why <Button variant="primary"> no longer matches <Button variant="primary">. The DS drifts silently. This kit installs agent-readable guardrails. Storybook becomes the DS API, storybook-mcp exposes components to agents, chromatic-ai catches visual regressions pre-merge, shadcn-cli-v4-skills injects an agentic skill into the DS,…
When
Scale phase, audience DS manager / frontend lead / tech lead with a ≥3-dev team on Claude Code/Cursor. ✅ You know it's your kit when Shadow components appear: Button2, ButtonNew, ButtonV3 in PRs Your tokens get hardcoded: bg-[#3b82f6] instead of bg-primary Your team uses multiple agents: Claude Code + Cursor + v0 on the same repo ❌ Not for this kit You don't have a DS yet → start with…
Tools included
- Storybook
- Shadcn Cli V4 Skills
- Storybook Mcp
- Chromatic Ai
- Claude Design