> ## 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 的最快方式。对于 PM 和创始人来说，这是一种无歧义地沟通产品想法的方式。对于设计师来说，这是一个跳过空白画布的起点。

## Flowstep 可以做什么

* **从文本生成屏幕** — 描述你想要的内容，几秒钟内获得设计好的 UI
* **通过提示词或直接编辑进行迭代** — 在不离开画布的情况下优化布局、文案和样式
* **作为交互式原型预览** — Flowstep 自动将你的屏幕链接成可点击的流程。参见 [原型](/zh/prototypes)。
* **通过 MCP 连接到你的 IDE** — 从 Cursor、Claude Code、Windsurf 或 Claude Desktop 生成和编辑屏幕。参见 [MCP Server](/zh/mcp/overview)。
* **导出到 Figma、代码或图像文件** — 粘贴到现有的 Figma 文件中、导出代码或将屏幕下载为 PNG/JPG
* **通过一个链接分享** — 审阅者无需 Flowstep 账户即可查看或评论

## Flowstep 适合谁

* **开发人员** 在没有设计师随时可用的情况下构建产品 UI，或希望在实现前以视觉方式规划屏幕
* **产品经理和创始人** 以视觉方式沟通想法或验证想法
* **设计师** 跳过空白画布——从生成的布局开始并从那里编辑

<Note>
  无需设计经验。如果你可以用简单英文描述一个屏幕，Flowstep 就能生成它。
</Note>

## 接下来去哪里

<CardGroup cols={2}>
  <Card title="快速开始" icon="rocket" href="/zh/getting-started">
    在五分钟内生成你的第一个屏幕。
  </Card>

  <Card title="MCP Server" icon="terminal" href="/zh/mcp/overview">
    从 Cursor、Claude Code 或任何 MCP 兼容客户端使用 Flowstep。
  </Card>

  <Card title="生成设计" icon="wand-magic-sparkles" href="/zh/generating-designs">
    如何编写提示词以生成你实际想要的屏幕。
  </Card>

  <Card title="Figma 集成" icon="figma" href="/zh/figma-integration">
    使用一个快捷键将 Flowstep 设计粘贴到现有的 Figma 文件中。
  </Card>
</CardGroup>