> ## 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

> 你無需設計背景即可用 Flowstep 建立出色的 UI 畫面。了解如何描述你想要的內容，並讓 Flowstep 完成其餘的工作。

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

## 無需設計技能的工作原理

當你輸入提示詞時，Flowstep 解釋你的描述並做出設計師通常會做的所有視覺決策：如何在畫面上排列元素、使用哪些字型、添加多少空白，以及如何建立引導視線的視覺層級。你描述目的和內容；Flowstep 生成看起來像專業設計師設計的畫面。

<Tip>
  將提示 Flowstep 看作與設計師進行簡報的方式。你不會告訴設計師使用哪個字體大小 — 你會告訴他們畫面的用途和需要溝通什麼。Flowstep 的工作方式相同。
</Tip>

## 撰寫好提示詞的訣竅

專注於三件事：畫面的目的、它應該顯示的關鍵資訊以及產品或受眾的類型。

**以畫面的目的開頭**

從畫面應該做什麼開始。「Meal planning app 的註冊畫面」告訴 Flowstep 的資訊遠多於 UI 元素列表。

**提及關鍵內容或操作**

包括使用者應該看到或做的最重要的事情。你無需列出所有內容 — 只需列出對體驗最重要的元素。

**如果有幫助，參考產品類型或受眾**

提到產品的類型（例如，消費者行動應用程式、B2B dashboard、電子商務結帳）幫助 Flowstep 匹配正確的視覺語調和約定。

<Tip>
  如果你的第一個結果不完全符合預期，不要重新開始 — 只需輸入後續提示詞。說「讓版面配置更簡約」或「使用更深色的色彩方案」足以將設計推向新方向。
</Tip>

## 範例提示詞可嘗試

以下是幾個效果不錯的提示詞，用簡單英文撰寫，不含設計術語：

**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."

<Note>
  這些提示詞之所以有效，不是因為它們使用設計語言，而是因為它們清楚地描述了畫面的目的、內容和背景。那就是你所需要的一切。
</Note>