Storybook MCP Server

🚀 故事书 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 工具。

✨ 主要特性

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

📦 安装指南

克隆仓库

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

安装依赖项

推荐使用 Bun

bun install
# 或者
npm install

构建

bun run build
# 或者
npm run build

设置

在 package.json 中添加特定配置：

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

💻 使用示例

基础用法

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

向 AI 询问：

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

服务器执行以下操作：

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

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

向 AI 询问：

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

服务器：

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

📚 详细文档

可用工具

🔧 技术细节

MCP（模型上下文协议）为大型语言模型提供了一个标准接口，以便安全且高效地访问上下文信息，例如 UI 组件、文档和代码。通过将您的 Storybook 与 MCP 集成，AI 代理可以智能地建议组件，设计师和开发人员有一个共享的真相来源，自然语言足以驱动 UI 生成功能。

📄 许可证

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

⚠️ 重要提示

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