# 策展 · X (Twitter) 🔥

> 作者：Storybook (@storybookjs) · 平台：X (Twitter) · 日期：2026-03-25

> 原始來源：https://x.com/storybookjs/status/2036465962669711673

## 中文摘要

Storybook MCP for React 是一套為人工智慧 Agent 提供結構化元件和設計系統上下文的工具，使其能更好地在首次嘗試時建構 UI。該工具透過強制 Agent 使用既有元件而非憑空捏造程式，提高程式品質、加快開發速度並減少 token 消耗。

**解決的核心問題**

不具備元件知識的 Agent 會生成無法合併的程式，存在渲染錯誤、視覺缺陷與虛構 API。原因在於大語言模型從訓練資料的模式預測，沒有明確指引時會從概率中心採樣，導致「安全但缺乏個性」的輸出（如 Inter 字型、紫色漸層與最小動畫）。Storybook MCP 透過提供元件 API、故事、使用模式與測試等上下文，讓 Agent 生成符合系統的程式。

**主要功能與能力**

- 為 Agent 提供元件中繼資料（故事、API、文件）以重用既有元件
- 指引 Agent 撰寫故事並預覽其工作成果
- 讓 Agent 執行測試並自我修正問題
- 將測試執行整合到反饋迴圈中，Agent 偵測到錯誤時可自行修復，需要人工判斷（如色彩對比問題）時會主動詢問
- 在聊天介面中嵌入即時故事預覽，讓使用者無需離開對話窗口即可驗證生成 UI 的外觀與互動狀態

**跨團隊協作能力**

Storybook MCP 支援「組合」功能，使 Agent 能從多個已發佈的遠端 MCP 伺服器讀取資料，無需連接多個端點。這對於分散應用程式與設計系統為不同 Storybook 的團隊特別實用，也允許產品團隊在使用多個設計系統與元件庫的情況下，讓 Agent 自動尋找並參考來自所有組合 Storybook 的元件。

**發佈與團隊共享**

Chromatic 支援免費發佈 Storybook MCP 伺服器，讓整個組織存取共享的 MCP 實例以改進生成程式品質。關鍵特性包括：

- **自動部署**：發佈啟用 MCP 的 Storybook 時，MCP 伺服器自動部署在 `/mcp` 端點
- **內建驗證**：透過既有的 Chromatic 帳戶進行驗證，鏡像 GitHub Organization、Bitbucket Group 或 GitLab Team 的權限設定，Enterprise 計畫支援 SSO
- **版本與分支管理**：為每次 Storybook 部署發佈 MCP 伺服器，特別適用於支援多版本或長期分支的專案，可使用永久連結指引 Agent 特定分支的上下文
- **組合多個伺服器**：支援將本地 Storybook MCP 與多個遠端已發佈 MCP 合併，避免 Agent 連接多個端點的不可預測性

**效能優勢與現狀**

使用 Reshaped 元件庫的基準測試顯示，使用 Storybook MCP 時，程式生成速度更快且 token 消耗更少。該工具目前可用於 React 專案，其他框架支援預計於今年稍後推出。使用者可透過升級至 Storybook 10.3 版本並安裝 `@storybook/addon-mcp` 外掛程式來開始使用。

## 標籤

MCP, Agent, 開源專案, Storybook