將 Flowstep 設計下載為 JPG 或 PNG 圖片檔案

當您準備好分享或移交設計時，Flowstep 可讓您將其匯出為靜態圖片 — JPG 或 PNG 任一格式。這兩種格式在設計工具、簡報軟體和瀏覽器中廣泛支援，因此您可以將 AI 產生的設計帶到任何地方。

​

如何匯出您的設計

​

JPG vs PNG：您應該使用哪種格式？

​

匯出程式碼

除了圖片，Code 按鈕可將您的設計匯出為 React + Tailwind 程式碼 — 複製一個程式碼片段，或將完整套件下載為 ZIP。您可以匯出單一畫面、多個選定的畫面，或一次匯出整個檔案。當您匯出多於一個畫面時，每個畫面都會變成其自己的元件檔案，您已設定的任何畫面之間導覽都會接線到產生的程式碼中，因此匯出的應用程式可全面點擊。套件是獨立的：設計中使用的圖片（包括您在聊天面板中附加的圖片）包含在 public/assets/ 資料夾中，程式碼按本機路徑參考它們，因此匯出可依原樣運作。 下載的檔案（圖片和程式碼套件） — 都以所屬的畫面命名（如果畫面未命名則退回到檔案名稱），這讓您在使用許多畫面時更容易識別匯出。

​

將設計傳送至您的編碼代理

您可以直接將設計交給 AI 編碼助理，而不是下載檔案。按一下工具列中的 Send to your coding agent（傳送至您的編碼代理）— 或開啟匯出對話並選擇相同選項 — 以複製為您的代理準備好的提示詞：

您的代理可透過 MCP 讀取這些畫面，並在您的程式庫中建立它們。將此提示詞貼入 Claude、Cursor 或您偏好的代理中。

提示詞告訴您的代理透過 Flowstep MCP 伺服器擷取畫面，並在您的程式庫中重建它們。您可以一次移交單一畫面、多個選定的畫面或整個檔案 — 提示詞會根據您選擇的內容進行調整。 這使用 Flowstep MCP 伺服器，因此請先連接 MCP 用戶端。如需支援的用戶端，請參閱 MCP 伺服器概觀，以及如需連接一個，請參閱 快速入門。