Skip to main content
Flowstep 透過模型上下文協議公開其設計工具，讓您的 AI 助理在不離開編輯器的情況下建立和迭代 UI 畫面。 伺服器託管於 https://api.flowstep.ai/mcp（可串流 HTTP 傳輸）。無本機程序要執行。

​
您可以做什麼

伺服器公開 7 個類別中的 21 個工具：

​
常見使用情況

從提示詞產生畫面 — 呼叫 create-new-design 並提供描述。Flowstep 分步建立檔案和畫面。呼叫 get-screen-image 搭配傳回的 screenIds 以內嵌查看結果。 視覺化 React 元件 — 透過 upload-attachment 上傳您的 .jsx 或 .tsx 檔案（使用 mimeType: text/javascript），然後將傳回的附件傳進 create-new-design，其中包含描述元件的訊息。Flowstep 讀取原始碼並產生相符的設計畫面。 迭代設計 — 呼叫 edit-design 搭配目標 screenId 和修改指令，或呼叫 regenerate-design 以從頭開始重做畫面。 維護設計指南 — 呼叫 get-design-guidelines 以擷取您目前的風格規則（顏色、排版、間距、語調），然後使用 update-design-guidelines 隨著您的設計演進來保持它們同步。將一致的指南傳進 create-new-design 或 edit-design 確保每個產生的畫面保持品牌一致。使用 delete-design-guidelines 以完全重設它們。 從 Figma 匯入 — 呼叫 import-figma 搭配 Figma 框架連結和 fileId 以將框架帶入 Flowstep 檔案作為可編輯元素。檔案的組織必須先在 Flowstep 設定中連接 Figma。 稽核配額 — 呼叫 get-plan-details 以在開始一批產生前查看剩餘的每日和每月使用量。

​
端點

傳輸：可串流 HTTP。工作階段模型：無狀態（每個請求都是獨立的，沒有工作階段 ID）。

​
後續步驟

快速入門

使用 Cursor 在 5 分鐘內首次工具呼叫。

認證

OAuth 2.1 PKCE 如何運作以及權杖如何發行。

工具

所有 21 個工具的完整輸入/輸出參考。

範例

常見工作的端對端工作流程。