将 Flowstep 设计导出为 JPG 或 PNG 图像文件

当您准备好分享或交付设计时，Flowstep 让您可以将其导出为静态图像 — 可以是 JPG 或 PNG。这两种格式在设计工具、演示软件和浏览器中得到广泛支持，因此您可以将您的 AI 生成的设计带到任何需要的地方。

​

如何导出您的设计

​

JPG 与 PNG：您应该使用哪种格式？

​

导出代码

除了图像外，Code 按钮将您的设计导出为 React + Tailwind 代码 — 复制一个片段，或将完整包下载为 ZIP。您可以导出单个屏幕、多个选定的屏幕或整个文件。当您导出多个屏幕时，每个屏幕都会成为其自己的组件文件，您在屏幕之间设置的任何导航都会接通生成的代码，因此导出的应用从端到端都是可点击的。捆绑包是自包含的：设计中使用的图像（包括您在聊天面板中附加的图像）包含在 public/assets/ 文件夹中，代码通过本地路径引用它们，因此导出可以按原样运行。 下载的文件 — 图像和代码捆绑包 — 都以它们所属的屏幕命名（如果屏幕未命名，则回退到文件名），这使得在处理许多屏幕时导出易于识别。

​

将设计发送到您的编码代理

您可以直接将设计交给 AI 编码助手，而不是下载文件。点击工具栏中的 Send to your coding agent，或打开导出对话框并选择相同的选项，以复制为您的代理准备好的提示词：

您的代理通过 MCP 读取这些屏幕并在您的存储库中构建它们。将此提示词粘贴到 Claude、Cursor 或您首选的代理中。

该提示词告诉您的代理通过 Flowstep MCP 服务器获取屏幕并在您的代码库中重建它们。您可以一次性交付单个屏幕、多个选定的屏幕或整个文件 — 提示词会根据您选择的内容进行调整。 这使用 Flowstep MCP 服务器，因此请先连接 MCP 客户端。查看 MCP 服务器概述 了解支持的客户端和 快速入门 来连接一个。