故事书 MCP 服务器

⚠️ 此工具是为测试目的创建的，不建议在生产环境中使用。

目标

此 MCP 服务器旨在：

• 帮助 AI 模型根据设计上下文建议可使用的 UI 组件
• 允许设计师无需编写代码即可访问组件使用情况
• 加速将 Figma 设计实现为 Storybook 组件的过程
• 使用自然语言连接设计和开发

开始指南

在开始之前，您需要准备您的 Storybook 静态文件。 https://storybook.js.org/docs/sharing/publish-storybook

1. 克隆仓库

git clone https://github.com/m-yoshiro/storybook-mcp.git
cd storybook-mcp

2. 安装依赖项

我们推荐使用 Bun

bun install
# 或者
npm install

3. 构建

bun run build
# 或者
npm run build

4. 设置

在您的 package.json 中添加以下内容：

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "node",
      "args": [
        "/< your path>/index.js",
        // 可选：到您的 Storybook 静态 json 文件的路径
        "/< your path>/index.json"
      ]
    }
  }
}

服务器将加载您的 Storybook 数据并为外部代理暴露 MCP 工具。

可用工具

示例用例

🔍 找到与 Figma 元素匹配的组件

向 AI 询问：

"这个 Figma 中的 'CTA 按钮' 在我的设计中有对应的 Storybook 组件吗？"

➡️ MCP 服务器执行以下操作：

• find-component-by-name("cta button")
• get-component-details("PrimaryButton")
• get-component-usage-examples("PrimaryButton")

✨ 自动生成基于 Figma 部分的 UI 代码

向 AI 询问：

"使用我们的设计系统生成一个联系我们表单"

➡️ MCP 服务器：

• 建议使用 TextField、Textarea、PrimaryButton
• 提供使用这些组件的 JSX 示例

为什么选择 MCP？

MCP（模型上下文协议）为大型语言模型提供了一个标准接口，以便安全且高效地访问上下文信息，例如 UI 组件、文档和代码。

通过将您的 Storybook 与 MCP 集成：

• AI 代理可以智能地建议组件
• 设计师和开发人员有一个共享的真相来源
• 自然语言足以驱动 UI 生成功能

项目结构

storybook-mcp/
├── tools/
│   ├── list-components.ts
│   ├── get-component-details.ts
│   ├── get-component-usage-examples.ts
│   └── get-component-variants.ts
└── index.js

贡献者

[在此处列出贡献者]

许可证

[在此处指定许可证信息]