> ## 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 生成 UI 屏幕
> 使用 Flowstep 通过单个文本提示词一次生成 1 至 6 个屏幕，适合快速 UI 构思和探索完整用户流程。
Flowstep 可以从自然语言提示词生成 UI 屏幕，让你在几秒内从想法转变为视觉设计。无论你需要单个屏幕来验证概念，还是需要一整套屏幕来覆盖完整的用户旅程，只需一个精心编写的提示词就可以开始。
## 生成设计
从你的 Flowstep 仪表板，创建一个新项目或打开一个现有项目，在其中添加屏幕。
输入你想要的屏幕的描述。要具体说明应用类型、用户目标和你期望看到的内容。
默认情况下，Flowstep 生成单个屏幕。如果需要多个屏幕，在提示词中明确说明 — Flowstep 可以从一个提示词生成最多 6 个屏幕。
提交你的提示词。Flowstep 生成你的屏幕并在编辑器中显示它们，准备好供你审查或完善。
## 单屏幕 vs. 多屏幕
你可以从单个提示词生成单个屏幕或最多 6 个屏幕。两种方法都适合设计工作的不同阶段。
* **单个屏幕** — 最适合探索特定的 UI 状态、组件或聚焦的概念。
* **多个屏幕** — 最适合映射流程、比较布局选项或快速覆盖完整用户旅程。
如果需要多个屏幕，在提示词中明确说明。Flowstep 使用提示词的措辞来决定生成多少个屏幕，因此含糊的提示词通常会返回单个屏幕。生成的屏幕被命名为 **Screen 1**、**Screen 2** 等 — 在后续提示词中使用这些名称来指代特定屏幕。
## 更多提示词方法
文本不是唯一的输入。你还可以：
* **附加文件** — 通过拖放、文件选择器或粘贴，将图像（JPG、PNG、WEBP）或文档（PDF、MD、TXT）添加到提示词，每个最大 3 MB。在提示词中引用附加的图像，Flowstep 会将其纳入生成的屏幕中。参见 [设计参考](/zh/design-references)。
* **口述提示词** — 点击提示词栏中的麦克风按钮（或在 Mac 上按 **Cmd+Shift+V**，在 Windows 上按 **Ctrl+Shift+V**）并说话最多 60 秒。转录文本会附加到你已经输入的内容中。
* **让 Flowstep 搜索网络** — 当你的提示词需要时（例如，"复制 Stripe 定价页面"），Flowstep 可以搜索网络并读取页面的品牌设计 — 颜色、字体、徽标、UI 组件 — 并在生成的屏幕中使用它。Flowstep 会自行决定是否研究，所以不一定会在每个提示词上触发；请注意，重新创建的网站使用不同的图像和导航，与原始网站不同。
* **设置设计准则** — 定义适用于文件中每次生成的常规样式规则。参见 [设计准则](/zh/design-guidelines)。
## 撰写有效的提示词
**单屏幕提示词示例：** "为健身追踪应用设计移动登录屏幕，包含电子邮件和密码字段、登录按钮和忘记密码链接。"
**多屏幕提示词示例：** "为美食配送应用生成多个入门流程屏幕 — 覆盖选择美食偏好、输入配送地址和确认首单。"
**完整旅程提示词示例：** "覆盖费用报告应用中的完整用户旅程，从提交收据到经理批准。"
编写提示词时，请牢记这些原则：
* 指明平台（移动、桌面、平板电脑），以便 Flowstep 正确调整屏幕大小。
* 描述用户目标，而不仅仅是 UI 元素 — Flowstep 从意图推断布局。
* 包含关键内容，如标签、操作或数据（如果它们对设计很重要）。
* 使用"生成多个屏幕"或"覆盖完整用户旅程"等短语来触发多屏幕输出。