Skip to main content
Flowstep 是面向代理构建软件的设计画布。Flowstep MCP 服务器通过 Model Context Protocol 开放该画布，因此您的团队已在使用的代理可以设计屏幕、查看渲染结果，并据此进行构建——无需离开编辑器或终端。 代理通过 MCP 创建的屏幕会保存在您团队使用的同一个 Flowstep 文件中。它们在画布上依然可编辑、可共享，并可随时导出或复制到 Figma。 该服务器托管在 https://api.flowstep.ai/mcp（Streamable HTTP 传输）。无需运行本地进程，也无需管理 API 密钥——客户端通过 OAuth 使用您的 Flowstep 账户登录。

​
您可以做什么

该服务器共提供 23 个工具，分为八个类别： 四个 AI 设计 工具与 Flowstep 应用共用相同的消息配额。所有其他工具均免费。请参阅用量限制。

​
常见用例

根据提示词生成屏幕：调用 ai-generate-screens 并提供描述。如果省略 fileId，Flowstep 会在一步中创建文件和屏幕。针对每个返回的 screenId 调用 get-screen-image，即可在对话中直接查看结果。 可视化 React 组件：使用 upload-attachment（mimeType: text/javascript）上传您的 .jsx 或 .tsx 源代码，然后将返回的附件连同描述该屏幕的消息一起传入 ai-generate-screens。Flowstep 会读取源代码并生成匹配的设计。 迭代设计：调用 ai-edit-screens，传入一个或多个 screenId（或单个元素 ID）以及自由格式的指令，即可原地修改。如需将预设（例如深色主题或不同布局）应用于整个屏幕，请使用 ai-edit-screen-variant。 扩展流程：调用 ai-generate-screen-variant，即可添加下一屏幕、错误或空状态屏幕，或为现有屏幕生成网页、平板或移动端版本。 代码优先的工作方式：使用 get-screen-jsx 以 JSX 读取任意屏幕，然后使用 add-screen-jsx（新建屏幕）或 replace-screen-jsx（覆盖现有屏幕）写回您自己的 JSX。这些工具均免费。 保持输出符合品牌规范：使用 update-design-guidelines，将您的颜色、字体排版和组件规则以 DESIGN.md 文本的形式存储在文件中。针对该文件的 AI 生成会遵循这些规则。您可以使用 get-design-guidelines 读取它们，或使用 delete-design-guidelines 将其清除。 从 Figma 导入：传入 Figma 框架链接和 fileId，调用 import-figma 将该框架以可编辑元素的形式导入画布。文件所属的组织必须先连接 Figma。 检查您的配额：在执行一批生成任务之前，调用 get-plan-details 查看您的套餐、用量和剩余消息数。

​
端点

传输方式：Streamable HTTP。会话模型：无状态（每个请求相互独立，没有会话 ID）。 该服务器支持 MCP 协议版本 2026-07-28，并在 https://api.flowstep.ai/.well-known/mcp.json 中公布该版本。使用较早的 2025-11-25 协议的客户端可以连接到同一端点。

​
下一步

快速开始

连接客户端并运行您的第一个工具调用。

身份验证

OAuth 2.1 PKCE 登录和授权的工作方式。

工具

全部 23 个工具的完整输入/输出参考。

示例

常见任务的端到端工作流。