> ## 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 是 AI 設計工具，可以從文字提示生成精美的 UI 畫面。了解它的功能、適用人群，以及你可以用它建立什麼。

<iframe src="https://www.youtube.com/embed/ziyHZVaSbvQ" 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 />

描述你想要的畫面，在幾秒內取得設計好的介面。

對開發者而言，這是在編寫程式碼前規劃 UI 的最快方法。對產品經理和創辦人而言，這是一種無歧義地溝通產品理念的方式。對設計師而言，這是避免空白畫布的起點。

## 你可以用 Flowstep 做什麼

* **從文字生成畫面** — 描述你想要什麼，在幾秒內取得設計好的 UI
* **透過提示詞或直接編輯進行迭代** — 優化版面配置、文案和樣式，無需離開畫布
* **預覽為互動式原型** — Flowstep 自動將你的畫面連結成可點擊的流程。參見 [原型](/zh-Hant/prototypes)。
* **透過 MCP 連接到你的 IDE** — 從 Cursor、Claude Code、Windsurf 或 Claude Desktop 生成和編輯畫面。參見 [MCP Server](/zh-Hant/mcp/overview)。
* **匯出到 Figma、程式碼或圖片檔案** — 直接貼到現有的 Figma 檔案、匯出程式碼或下載畫面為 PNG/JPG
* **用單一連結分享** — 檢閱者無需 Flowstep 帳戶即可檢視或評論

## Flowstep 適合誰

* **開發者** — 在沒有設計師協助的情況下建立產品 UI，或想在實作前以視覺方式規劃畫面
* **產品經理和創辦人** — 以視覺方式溝通理念或驗證構想
* **設計師** — 跳過空白畫布 — 從生成的版面配置開始，從那裡進行編輯

<Note>
  無需設計經驗。只要你能用簡單英文描述畫面，Flowstep 就能生成它。
</Note>

## 接下來去哪裡

<CardGroup cols={2}>
  <Card title="快速入門" icon="rocket" href="/zh-Hant/getting-started">
    在五分鐘內生成你的第一個畫面。
  </Card>

  <Card title="MCP Server" icon="terminal" href="/zh-Hant/mcp/overview">
    從 Cursor、Claude Code 或任何相容 MCP 的客戶端使用 Flowstep。
  </Card>

  <Card title="生成設計" icon="wand-magic-sparkles" href="/zh-Hant/generating-designs">
    如何撰寫提示詞以產生你真正想要的畫面。
  </Card>

  <Card title="Figma 整合" icon="figma" href="/zh-Hant/figma-integration">
    用一個快速鍵將 Flowstep 設計貼到現有 Figma 檔案。
  </Card>
</CardGroup>