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 个字符的源文件，请改用带有 mimeType 和 fileName 的 upload-attachment，并运行返回的 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。如果只想修改现有屏幕，请省略消息的最后一句。如果只想修改屏幕的一部分，请先调用带有 "includeIds": true 的 get-screen-jsx，然后在 elementIds 中传入您想修改的元素的 data-id。如需对整个屏幕应用一键预设，请改为调用 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）将保留其当前值。如需保留原始屏幕并在旁边添加您的版本，请使用带有 screenType 和 jsx 的 add-screen-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. 批处理前检查您的配额