> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# 将 Flowstep 设计导出为 JPG 或 PNG 图像文件
> Flowstep 支持将设计导出为 JPG 或 PNG。了解哪种格式适合你的使用场景，以及如何只需点击几下就能下载你的屏幕。
当你准备好分享或交接设计时，Flowstep 让你可以将其导出为静态图像 — JPG 或 PNG。这两种格式在设计工具、演示软件和浏览器中都得到广泛支持，因此你可以将 AI 生成的设计带往任何你需要的地方。
## 如何导出你的设计
在 Flowstep 中导航到你要导出的设计。
在工具栏或设计面板中找到导出选项。选择它以打开导出设置。
根据你的使用场景选择 **JPG** 或 **PNG**（请参阅下面的比较）。
确认你的选择并将导出的图像下载到你的设备。
## JPG vs PNG：你应该使用哪种格式？
| | JPG | PNG |
| -------- | --------------------- | --------------- |
| **最适合** | 共享预览、演示、利益相关者评审 | 具有透明背景的设计、高保真交接 |
| **文件大小** | 较小 — 可以更快地通过电子邮件或消息共享 | 较大 — 保留完整的图像细节 |
| **透明度** | 不支持 | 支持 |
| **质量** | 略微压缩 | 无损 — 不会降低质量 |
如果你要将设计粘贴到幻灯片演示文稿中或向客户发送快速预览，JPG 通常是正确的选择。如果你需要清晰的边缘或透明背景 — 例如，将设计叠加在另一个图像上 — 请使用 PNG。
## 导出代码
除了图像，**Code** 按钮可以将屏幕导出为 React + Tailwind 代码 — 复制代码片段，或以 ZIP 形式下载完整包。包是自包含的：设计中使用的图像（包括你在聊天面板中附加的图像）包含在 `public/assets/` 文件夹中，代码通过本地路径引用它们，因此导出可以直接运行。
下载的文件 — 图像和代码包 — 都根据它们所属的屏幕命名（如果屏幕未命名，则回退到文件名），这使得在处理多个屏幕时可以轻松识别导出。
如果你需要将设计用于矢量编辑工作流，请改为直接复制到 Figma。请参阅 [立即将 Flowstep 设计复制到 Figma](/zh/figma-integration)。