> ## Documentation Index > Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt > Use this file to discover all available pages before exploring further. # Flowstep MCP 伺服器 > 使用 Flowstep 作為 MCP 伺服器，直接從 Cursor、Claude Code 或任何相容 MCP 的用戶端生成、檢視和管理 UI 設計。 Flowstep 透過 [Model Context Protocol](https://modelcontextprotocol.io/) 公開其設計工具，讓你的 AI 助手在不離開編輯器的情況下建立和反覆運算 UI 畫面。 伺服器裝載在 `https://api.flowstep.ai/mcp`（可串流 HTTP 傳輸）。無需執行本地程序。 ## 你能做什麼 伺服器透過七個類別公開 20 個工具： | 類別 | 工具 | | --------- | --------------------------------------------------------------------------------------------- | | **檔案** | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file` | | **畫面** | `list-screens`, `get-screen`, `get-screen-image`, `add-screen` | | **AI 生成** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` | | **聊天** | `get-chat-history` | | **設計** | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines` | | **Figma** | `import-figma` | | **計費** | `get-plan-details` | ## 常見使用案例 **從提示詞生成畫面** — 使用描述呼叫 `create-new-design`。Flowstep 在一個步驟中建立檔案和畫面。使用傳回的 `screenIds` 呼叫 `get-screen-image` 以內聯方式查看結果。 **視覺化 React 元件** — 透過 `upload-attachment` 上載你的 `.jsx` 或 `.tsx` 檔案（使用 `mimeType: text/javascript`），然後將傳回的附件傳入 `create-new-design`，附上描述元件的訊息。Flowstep 讀取原始碼並生成匹配的設計畫面。 **反覆運算設計** — 使用目標 `screenId` 和修改它的指令呼叫 `edit-design`，或呼叫 `regenerate-design` 以從頭開始重做畫面。 **維護設計指南** — 呼叫 `get-design-guidelines` 以檢索你目前的樣式規則（顏色、排版、間距、語氣），然後使用 `update-design-guidelines` 讓它們隨著設計演進而保持同步。將一致的指南傳入 `create-new-design` 或 `edit-design` 可確保每個生成的畫面都保持品牌一致。使用 `delete-design-guidelines` 完全重設它們。 **從 Figma 匯入** — 使用 Figma 畫面連結和 `fileId` 呼叫 `import-figma`，將畫面帶入 Flowstep 檔案作為可編輯的元素。檔案的組織必須首先連接 Figma。 **審核配額** — 呼叫 `get-plan-details` 查看開始一批生成前的剩餘日次和月次使用量。 ## 端點 ``` https://api.flowstep.ai/mcp ``` 傳輸：Streamable HTTP。工作階段模型：無狀態（每個請求獨立，無工作階段 ID）。 ## 下一步 5 分鐘內使用 Cursor 進行第一次工具呼叫。 OAuth 2.1 PKCE 如何運作以及令牌如何發行。 全部 20 個工具的完整輸入/輸出參考。 常見任務的端對端工作流程。