> ## 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 設計，並與你的團隊分享 — 一次完成。

<iframe src="https://www.youtube.com/embed/yrmvaLi6Cto" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

開始使用 Flowstep 只需幾分鐘。你免費註冊，描述你想建立的東西，Flowstep 立即生成你的設計。從那裡，你可以透過後續提示詞優化設計、邀請團隊協作，以及與利益相關者分享結果 — 無需設計工具或先前的經驗。

<Steps>
  <Step title="建立免費帳戶">
    前往 [flowstep.ai](https://flowstep.ai) 並用 Google 或電子郵件和密碼註冊。無需信用卡即可開始。

    <Note>
      如果你用電子郵件和密碼註冊，請檢查收件箱中的確認電郵（「確認你的 Flowstep 電郵」），然後點擊連結啟用你的帳戶 — 如果沒有收到，可以從「檢查你的收件箱」頁面重新寄送。不接受一次性電郵地址；請使用工作或個人電郵。
    </Note>

    註冊後，你會進入一個簡短的歡迎畫面：回答三個快速問題，然後在那裡描述你的第一個設計 — 有四個範例提示詞（Dashboard、Landing page、Mobile app、Checkout）可供選擇。
  </Step>

  <Step title="描述你想要的畫面">
    在提示詞欄中輸入用簡單英文描述你心中 UI 的內容。具體說明畫面的目的和它應該包含的任何關鍵元素。

    類似「Project management app 的 Dashboard，包含任務列表、進度列和側邊導航」的提示詞，能讓 Flowstep 足以產生集中、實用的設計。

    <Tip>
      你不需要設計詞彙。專注於畫面的用途以及它應該顯示的資訊 — Flowstep 處理版面配置、排版、間距和色彩選擇。
    </Tip>
  </Step>

  <Step title="生成你的畫面">
    提交你的提示詞，Flowstep 在幾秒內生成你的設計。你可以在一次會話中生成多個畫面以探索不同方向或構建完整的流程。
  </Step>

  <Step title="透過對話優化">
    結果不完全符合預期？輸入後續提示詞以調整設計 — 改變色彩方案、重新排列元素、交換內容或完全要求不同的版面配置。你也可以手動編輯元素或使用選項菜單中的一鍵操作。
  </Step>

  <Step title="匯出或分享你的作品">
    對結果滿意時，選擇如何分享：

    * **匯出**程式碼或透過 MCP
    * **下載**畫面為 JPG 或 PNG 檔案
    * **複製到 Figma** — 使用鍵盤快速鍵直接貼到現有 Figma 檔案
    * **分享連結** — 與團隊成員或利益相關者分享 — 他們無需建立帳戶即可檢視設計

    <Note>
      你可以邀請你的團隊在 Flowstep 檔案上協作。他們可以在幾分鐘內加入並開始貢獻。
    </Note>
  </Step>
</Steps>