Flowstep 從自然語言提示詞生成 UI 畫面，讓你在幾秒內從理想變為視覺設計。無論你需要單個畫面來驗證概念，還是覆蓋整個使用者旅程的完整畫面集，編寫好的提示詞就是開始所需的一切。
生成設計
1
開啟新專案
從你的 Flowstep dashboard，建立新專案或開啟現有的專案，你想在其中添加畫面。
2
撰寫你的提示詞
輸入你想要的畫面或畫面的描述。具體說明應用程式的類型、使用者目標和你期望看到的內容。
3
指定你想要多少個畫面
預設情況下，Flowstep 生成單個畫面。如果你想要多個畫面，在你的提示詞中明確說明 — Flowstep 可以從一個提示詞生成最多 6 個畫面。
4
生成
提交你的提示詞。Flowstep 生成你的畫面並在編輯器中顯示，準備好檢視或優化。
單個畫面與多個畫面
你可以從單個提示詞生成一個或最多 6 個畫面。兩種方法都適合設計工作的不同階段。- 一個畫面 — 最適合探索特定的 UI 狀態、元件或集中的概念。
- 多個畫面 — 最適合映射流程、比較版面配置選項或快速覆蓋完整的使用者旅程。
更多提示詞的方式
文字並不是唯一的輸入。你也可以：- 附加檔案 — 透過拖放、檔案選擇器或貼上，將圖片（JPG、PNG、WEBP）或文件（PDF、MD、TXT）（每個最多 3 MB）添加到提示詞。在你的提示詞中參考附加的圖片，Flowstep 會將其納入生成的畫面。參見 使用參考。
- 口述你的提示詞 — 點擊提示詞欄中的麥克風按鈕（或在 Mac 上按 Cmd+Shift+V、在 Windows 上按 Ctrl+Shift+V）並說話最多 60 秒。文字記錄會附加到你已經輸入的內容。
- 讓 Flowstep 研究網路 — 當你的提示詞需要時（例如，「複製 Stripe 定價頁面」），Flowstep 可以搜尋網路並讀取頁面的品牌 — 色彩、字型、標誌、UI 元件 — 並在生成的畫面中使用。Flowstep 自行決定是否研究，所以不一定會在每個提示詞上觸發；請注意，重建的網站使用不同的圖片和導航而不是原始的。
- 設定設計指南 — 定義適用於檔案中每個生成的持續樣式規則。參見 設計指南。
撰寫有效的提示詞
撰寫提示詞時請記住以下原則：- 命名平台（行動、桌面、平板），以便 Flowstep 正確調整畫面大小。
- 描述使用者的目標，不僅僅是 UI 元素 — Flowstep 從意圖推斷版面配置。
- 如果標籤、操作或資料對設計很重要，請包含關鍵內容。
- 使用「生成多個畫面」或「涵蓋完整的使用者旅程」等短語來觸發多畫面輸出。