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 生成功能。

📄 許可證

[在此處指定許可證信息]

⚠️ 重要提示

此工具是為測試目的創建的，不建議在生產環境中使用。