简介
让 AI 写前端最常见的坑，不是它不会写代码，而是它不认识你的组件库。
你有一个封装好的 <Button variant="danger" size="sm">，AI 却生成一个自己写的蓝色圆角 div；你有一个 <DataTable> 组件，AI 却又内联一份 HTML 表格。结果就是代码越写越杂，设计系统形同虚设。
Storybook MCP 解决的正是这件事：它把 Storybook 作为 MCP 服务暴露出来，AI Agent 在写代码前可以先”查一查”——有哪些组件、每个 props 是什么类型、有没有现成的示例 Story、能不能跑测试验证。
核心能力
- 组件清单查询：Agent 能列出组件库中的组件与各自签名
- 真实示例参考：把团队写好的 Story 作为生成模板
- 测试闭环：生成后调用组件测试，失败就自己修
- 协议标准：走 MCP，不绑定某一个 AI 客户端
适合谁
- 有自建设计系统、正在推 AI 编码的团队
- 使用 Claude Code、Cursor、Codex CLI 并已接入 MCP 的前端工程师
- 想把”AI 写的代码必须用公司组件”这条规范真正落地的人
使用建议
先把核心 20% 的组件（按钮、输入、表格、弹窗）补齐 Story，收益最明显。组件覆盖不全时，Agent 依然会退化成自由发挥。
价格
开源免费。
优缺点
优点：把设计系统的约束真正喂给了 AI，而不是写在规范文档里没人看。
缺点：前置条件是团队本来就有维护良好的 Storybook；否则先补 Story 的成本不低。
