MCP 範例

1. 產生並預覽畫面

最常見的工作流程：產生畫面（同時在同一步驟中建立檔案），然後檢視結果。

1. list-files         {}
                      → { "files": [ ... ] }          // check for an existing file first

2. ai-design-screens  { "message": "Mobile sign-in screen for a developer tool.
                                    Email/password fields, Google SSO button, dark theme." }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"],
                          "designGuidelinesUpdated": null }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

省略 fileId 會自動建立新檔案。若改傳入現有的 fileId，則會將畫面新增到該檔案。 給 AI 助理的提示詞：

產生一個 Flowstep 設計：為開發者工具設計一個行動版登入畫面，包含電子郵件/密碼欄位與 Google SSO 按鈕，採深色主題，然後顯示圖片給我看。

2. 將 React 元件視覺化

將 .jsx 或 .tsx 檔案作為附件上傳，並要求 Flowstep 產生相符的設計。Flowstep 會讀取原始碼並產生畫面，無需執行應用程式。

1. upload-attachment  { "text": "<UTF-8 contents of ApiKeys.tsx>",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "assetUrl": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. ai-design-screens  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

若原始碼檔案超過 64,000 個字元，請改用 upload-attachment 並搭配 mimeType 與 fileName，然後執行回傳的 uploadCommand。請參閱 upload-attachment。 給 AI 助理的提示詞：

讀取 src/components/settings/ApiKeys.tsx，將它作為附件上傳，並產生一個與該元件版面相符的 Flowstep 畫面。請顯示渲染後的圖片給我看。

3. 反覆調整畫面

使用自由格式的指示修改現有畫面，並在同一次呼叫中新增一個與之相符的新畫面。

1. list-screens       { "fileId": "FILE_ID" }
                      → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
   get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]

screenIds 會列出此次呼叫建立或變更的每個畫面，因此請針對每個畫面各呼叫一次 get-screen-image。若只想修改現有畫面，請省略訊息的最後一句。若只想修改畫面的一部分，請先呼叫 get-screen-jsx 並設定 "includeIds": true，然後將你要修改的元素之 data-id 傳入 elementIds。若要對整個畫面套用一鍵預設，請改呼叫 ai-edit-screen-variant，例如 "operationVariant": "light_theme" 或 "different_layout"。 給 AI 助理的提示詞：

在我的「Login flow」Flowstep 檔案中，將登入畫面切換為深色模式，在密碼欄位下方新增「Remember me」核取方塊，並新增一個相符的忘記密碼畫面。請顯示結果給我看。

4. 將畫面擴展為完整流程

在現有設計中新增後續畫面。

1. list-screens                { "fileId": "FILE_ID" }
                               → { "screens": [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }] }

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"], ... }

3. get-screen-image            { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                               → [inline PNG]

重複步驟 2，並使用 operationVariant: "error_state" 或 "empty_state" 來新增邊界情況的畫面，或使用 "web_version" / "tablet_version" 來產生其他平台的版本。

ai-generate-screen-variant 必須提供 operationVariant，且此工具只接受一個 screenId。若要新增並非現有畫面變體的畫面，請搭配 fileId 使用 ai-design-screens。

5. 將畫面交給程式碼，再寫回變更

以 JSX 讀取畫面、以此為基礎進行開發，然後將你編輯後的 JSX 推送回畫布，全程無需使用訊息額度。

1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

3. get-screen-image    { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → [inline PNG]

省略的欄位（name、fidelity、screenType、colorTheme、fragments）會保留目前的值。若要保留原始畫面，並在旁邊新增你的版本，請改用 add-screen-jsx 並搭配 screenType 與 jsx，而不要使用 replace-screen-jsx。若要在畫面中顯示你自己的圖片，請使用 upload-attachment 上傳，並將回傳的 assetUrl 放入 JSX 的 img src。請參閱JSX 中的圖片。

6. 批次作業前檢查你的額度

在啟動多次產生作業前，請先檢查剩餘額度。呼叫 get-plan-details 無需付費。

get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }

若 remaining.messages.daily 偏低，請將批次作業排在 00:00 UTC 重置之後再執行。

快速開始

使用 Flowstep

團隊與組織

匯出與整合

MCP 伺服器

計費與方案

安全與隱私

1. 產生並預覽畫面

2. 將 React 元件視覺化

3. 反覆調整畫面

4. 將畫面擴展為完整流程

5. 將畫面交給程式碼，再寫回變更

6. 批次作業前檢查你的額度

​1. 產生並預覽畫面

​2. 將 React 元件視覺化

​3. 反覆調整畫面

​4. 將畫面擴展為完整流程

​5. 將畫面交給程式碼，再寫回變更

​6. 批次作業前檢查你的額度

1. 產生並預覽畫面

2. 將 React 元件視覺化

3. 反覆調整畫面

4. 將畫面擴展為完整流程

5. 將畫面交給程式碼，再寫回變更

6. 批次作業前檢查你的額度