Skip to main content
Flowstep 可以根据自然语言提示词生成 UI 屏幕，让您在几秒钟内从创意走向视觉设计。无论您需要一个屏幕来验证概念，还是需要一组覆盖完整用户旅程的屏幕，只需写好一条提示词即可开始。

​
生成设计

1

打开新项目

在 Flowstep 仪表板中，创建新项目，或打开您想添加屏幕的现有项目。
2

编写提示词

输入您想要的屏幕描述。请明确说明应用类型、用户目标以及您期望看到的内容。
3

指定屏幕数量

默认情况下，Flowstep 只生成一个屏幕。如果您需要多个屏幕，请在提示词中明确说明。Flowstep 最多可以通过一条提示词生成 6 个屏幕。
4

生成

提交提示词。Flowstep 会生成您的屏幕，并在编辑器中显示，方便您审阅或进一步优化。
创建新文件并发送第一条提示词时，Flowstep 会根据该提示词为文件命名，方便您日后查找。已有名称或已有提示词的文件会保留其名称，您也可以随时自行重命名任何文件。

​
停止生成

Flowstep 回复期间，发送按钮会变为停止按钮（Stop Flowstep response）。点击它即可停止生成。在多屏幕请求中，已完成的屏幕会保留在画布上，未完成的屏幕会被移除。Flowstep 开始构建屏幕后再停止，仍会消耗一条消息。请参阅消息与限制。

​
单屏幕与多屏幕

您可以通过一条提示词生成一个屏幕，也可以生成最多 6 个屏幕。两种方式适用于不同的设计阶段。
  • 一个屏幕：最适合探索特定的 UI 状态、组件或聚焦的概念。
  • 多个屏幕：最适合梳理流程、比较布局方案，或快速覆盖完整的用户旅程。
需要生成多个屏幕时，请在提示词中明确说明。Flowstep 会根据提示词的措辞决定生成多少个屏幕，因此模糊的提示词通常只会返回一个屏幕。生成的屏幕会命名为 Screen 1、Screen 2 等。在后续提示词中，您可以使用这些名称来指代特定屏幕。

​
更多提示方式

文本并不是唯一的输入方式。您还可以：
  • 添加文件：将图片（JPG、PNG、WEBP）或文档（PDF、MD、TXT）添加到提示词中，每个文件不超过 3 MB，可通过拖放、文件选择器或粘贴的方式添加。在提示词中引用已附加的图片，Flowstep 会将其融入生成的屏幕中。请参阅设计参考。
  • 语音输入提示词：点击提示栏中的麦克风按钮（或在 Mac 上按 Cmd+Shift+V，在 Windows 上按 Ctrl+Shift+V），最多说 60 秒。转录内容会追加到您已输入的文字之后。
  • 让 Flowstep 搜索网络：当提示词需要时（例如”克隆 Stripe 定价页面”），Flowstep 可以搜索网络，读取页面的品牌信息（颜色、字体、Logo、UI 组件），并将其用于生成的屏幕。Flowstep 会自行判断是否需要搜索，因此并非每条提示词都会触发此功能。请注意，重建的网站所使用的图片和导航可能与原网站不同。
  • 设置设计准则：定义适用于文件中每次生成的常规样式规则。请参阅设计准则。

​
编写有效的提示词

单屏幕提示词示例：“为一款健身追踪应用设计一个移动端登录屏幕，包含邮箱和密码输入框、登录按钮，以及忘记密码链接。”
多屏幕提示词示例：“为一款外卖应用的引导流程生成多个屏幕，涵盖选择菜系偏好、输入配送地址，以及确认首次下单。”
完整旅程提示词示例：“覆盖一款费用报销应用的完整用户旅程，从提交收据到经理审批。”
编写提示词时，请牢记以下原则：
  • 说明平台（移动端、桌面端或平板），以便 Flowstep 正确设置屏幕尺寸。
  • 描述用户目标，而不只是 UI 元素。Flowstep 会根据意图推断布局。
  • 如果标签、操作或数据等关键内容对设计很重要，请一并包含。
  • 使用”生成多个屏幕”或”覆盖完整用户旅程”等表述，以触发多屏幕输出。