Skip to main content
Flowstep 透過 Model Context Protocol 公開其設計工具，讓你的 AI 助手在不離開編輯器的情況下建立和反覆運算 UI 畫面。 伺服器裝載在 https://api.flowstep.ai/mcp（可串流 HTTP 傳輸）。無需執行本地程序。

​
你能做什麼

伺服器透過七個類別公開 20 個工具：

​
常見使用案例

從提示詞生成畫面 — 使用描述呼叫 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 查看開始一批生成前的剩餘日次和月次使用量。

​
端點

傳輸：Streamable HTTP。工作階段模型：無狀態（每個請求獨立，無工作階段 ID）。

​
下一步

快速入門

5 分鐘內使用 Cursor 進行第一次工具呼叫。

身份驗證

OAuth 2.1 PKCE 如何運作以及令牌如何發行。

工具

全部 20 個工具的完整輸入/輸出參考。

範例

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