跳轉到主要內容
你無需知道字體和字型之間的區別、理解網格系統或以前開啟過任何設計工具。Flowstep 自動處理版面配置、排版、色彩、間距和視覺層級 — 你的任務就是簡單地描述你想要的內容。

無需設計技能的工作原理

當你輸入提示詞時,Flowstep 解釋你的描述並做出設計師通常會做的所有視覺決策:如何在畫面上排列元素、使用哪些字型、添加多少空白,以及如何建立引導視線的視覺層級。你描述目的和內容;Flowstep 生成看起來像專業設計師設計的畫面。
將提示 Flowstep 看作與設計師進行簡報的方式。你不會告訴設計師使用哪個字體大小 — 你會告訴他們畫面的用途和需要溝通什麼。Flowstep 的工作方式相同。

撰寫好提示詞的訣竅

專注於三件事:畫面的目的、它應該顯示的關鍵資訊以及產品或受眾的類型。 以畫面的目的開頭 從畫面應該做什麼開始。「Meal planning app 的註冊畫面」告訴 Flowstep 的資訊遠多於 UI 元素列表。 提及關鍵內容或操作 包括使用者應該看到或做的最重要的事情。你無需列出所有內容 — 只需列出對體驗最重要的元素。 如果有幫助,參考產品類型或受眾 提到產品的類型(例如,消費者行動應用程式、B2B dashboard、電子商務結帳)幫助 Flowstep 匹配正確的視覺語調和約定。
如果你的第一個結果不完全符合預期,不要重新開始 — 只需輸入後續提示詞。說「讓版面配置更簡約」或「使用更深色的色彩方案」足以將設計推向新方向。

範例提示詞可嘗試

以下是幾個效果不錯的提示詞,用簡單英文撰寫,不含設計術語: Fitness app 的啟動流程
“First screen of an onboarding flow for a fitness tracking app. It should welcome the user, briefly explain what the app does, and have a button to get started.”
SaaS 產品的設定頁面
“Settings page for a B2B project management tool. Include sections for profile, notifications, billing, and connected accounts. Use a clean, professional look.”
行動結帳畫面
“Checkout screen for a mobile shopping app. Show an order summary, a field for a promo code, and a prominent button to complete the purchase.”
這些提示詞之所以有效,不是因為它們使用設計語言,而是因為它們清楚地描述了畫面的目的、內容和背景。那就是你所需要的一切。