> ## 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>
      如果你使用电子邮件和密码注册，请查看收件箱的确认邮件（"Confirm your Flowstep email"）并点击链接激活账户——如果没有收到，可以从"Check your inbox"页面重新发送。不接受一次性电子邮件地址；请使用工作或个人电子邮件。
    </Note>

    注册后，你会看到一个简短的欢迎屏幕：回答三个快速问题，然后在那里描述你的首个设计——如果你需要起点，可以选择四个示例提示词（Dashboard、Landing page、Mobile app、Checkout）。
  </Step>

  <Step title="描述你想要的屏幕">
    输入一个提示词，用简单的英文描述你想要的 UI。要具体说明屏幕的用途和任何关键元素。

    例如，"为项目管理应用创建仪表盘，包含任务列表、进度条和侧边栏导航"这样的提示词能给 Flowstep 足够的上下文来生成有针对性、有用的设计。

    <Tip>
      你不需要设计词汇。专注于屏幕的用途和应显示的信息——Flowstep 处理布局、排版、间距和色彩选择。
    </Tip>
  </Step>

  <Step title="生成你的屏幕">
    提交你的提示词，Flowstep 在几秒内生成你的设计。你可以在单个会话中生成多个屏幕来探索不同方向或构建完整流程。
  </Step>

  <Step title="通过对话优化">
    不完全正确？输入后续提示词来调整设计——改变配色方案、重新排列元素、替换内容或请求完全不同的布局。你也可以手动编辑元素或使用选项菜单中的一键操作。
  </Step>

  <Step title="导出或分享你的工作">
    对结果满意时，选择分享方式：

    * **Export**（导出）代码或通过 MCP
    * **Download**（下载）屏幕为 JPG 或 PNG 文件
    * **Copy to Figma**（复制到 Figma）使用键盘快捷键直接粘贴到现有 Figma 文件中
    * **Share a link**（分享链接）与团队成员或利益相关者分享——他们可以在不创建账户的情况下查看设计

    <Note>
      你可以邀请团队在 Flowstep 文件上协作。他们可以在几分钟内加入并开始贡献。
    </Note>
  </Step>
</Steps>