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