·9 分钟阅读

Google Stitch AI UI 设计指南：从提示词到界面

用 Google Stitch 做 AI UI 设计：从提示词结构、风格选择到 Web App 布局与设计转代码，附可复用提示词示例和检查清单。

S
Stitch Prompt Team
Content Team
提示词设计风格入门

Google Stitch 常被描述为“文本生成 UI”的工具，但更准确的理解是：它是一个 AI UI 设计搭档。它可以把一段简短需求变成完整界面，但界面质量取决于你是否清楚描述了产品、页面、视觉系统和约束。本文给出一套可重复的方法，从第一条提示词一直走到设计交付。

目标不是生成更多屏幕，而是生成正确的屏幕，再把它收敛成一套可以交给开发者的系统。

Stitch 里的 AI UI 设计是什么

AI UI 设计是一个循环：生成、评审、细化、系统化。Stitch 最擅长前两步。它可以在几秒内给出几个方向，但它不知道你的产品策略、无障碍要求，也不知道界面需要哪些状态。最终决策仍然在你手里。

适合用 Stitch 做这些事：

  • 在确定设计系统之前，探索布局和视觉方向；
  • 用颜色、字体、间距和组件模式给设计系统打底；
  • 把文字产品想法变成可评审的第一版；
  • 为编码智能体或前端团队创建设计参考。

在建立提示词库之前，先读 Stitch 关于提示词和设计模式的说明。

五段式 AI UI 提示词

一条有用的 AI UI 提示词要回答五个问题。少写一个，Stitch 就会用通用假设替你补上。

1. 平台与设备

先说明界面载体：Web App、营销落地页、仪表盘、iOS 或 Android。同一个产品在不同载体上的导航、信息密度和触控目标都不同。如果不确定 Stitch 如何处理设备，请看设备类型。

2. 产品上下文

描述谁在使用产品，以及他们要完成什么。“一个项目管理工具”很弱；“一个面向运营团队、用于每天早上检查阻塞项目的项目管理工具”才能给 Stitch 一个真实的设计任务。

3. 页面目标

每个屏幕只给一个主要动作。仪表盘可能有很多组件，但页面目标可以是“找到被阻塞的项目并打开它”。落地页的目标可能只有一个：“开始免费试用”。

4. 布局与组件

写清楚导航模型和主要内容块。Web App 可能是左侧边栏、带搜索的顶栏、KPI 卡片、图表和数据表格；移动 App 可能是底部标签栏和卡片信息流。

5. 视觉风格与约束

只写“极简”或“高端”不够，还要补颜色规则、字体、圆角、间距和无障碍约束。如果想要一个已知方向，从风格库里的风格出发，做适配而不是照搬。例如，Linear 是深色、精准的 SaaS 界面参考；Stripe 是金融科技清晰感的参考。

可复用的提示词公式

把下面这段当作起点，把方括号替换成产品细节。

Design a [platform] [page type] for [product] used by [audience].
Primary goal: [one action the page should make easy].
Layout: [navigation model] + [main content structure].
Components: [4-6 components, in priority order].
Data: [key fields, data volume, loading / empty / error states].
Style: [visual direction, color rules, typography, spacing, radius].
Constraints: [responsive behavior, accessibility, brand rules].

这个公式故意写得很“无聊”。它的作用是逼你在 Stitch 之前先做决定。

选择正确的风格

SaaS 与效率工具

SaaS 产品优先选择能承载高信息密度的风格。Linear 和 Notion 是很好的参考：一个精准、深色，一个平静、内容优先。用它们来设定约束，而不是复制品牌。

金融科技与企业产品

金融科技界面需要信任感、清晰层级和可读的数字。Stripe 是间距和字体的强参考。企业产品可能需要更常规的导航模型和更严格的对比度。

消费级与 AI 产品

消费级和 AI 产品可以有更多个性，但界面仍然需要明确的主要动作。浏览风格库，挑两三个参考，并写清楚你从每个参考里拿走了什么：颜色、字体、间距和组件行为。

Web App、仪表盘和移动端不是一回事

仪表盘不是“卡片更多的 Web App”，移动 App 也不是变窄的桌面布局。仪表盘优先扫描和对比；Web App 会增加导航、权限、设置和长任务；移动 App 优先触控、单手操作和短会话。如果用桌面提示词生成移动屏幕，结果通常会在错误的地方过密或过疏。

同一个产品分别生成不同载体，再比较导航、信息密度和状态。Stitch 的变体可以帮助探索差异，但提示词仍然要写清楚载体。

可重复的 AI UI 工作流

第一步：生成 2–3 个方向

保持产品上下文和页面目标不变，只改变布局或视觉方向。这样得到的是可比较的方案，而不是随机屏幕。

第二步：评审与细化

检查层级、间距、对比度、组件数量和缺失状态。然后提出有针对性的修改：“保留布局，提高表格密度；补一个清晰的空状态。”不要每次从零重来。

第三步：统一系统

方向确定后，提取颜色、字号层级、圆角和间距，并应用到下一个屏幕。一致性来自共享约束，而不是把所有屏幕塞进一条提示词。

第四步：交付到代码

把规则写进 DESIGN.md，或者用 Stitch SDK 和 CLI 从设计走向代码。可以参考把 URL 变成设计系统和从代码到设计的工作流。导出细节见下载产物。

三个提示词示例

SaaS 分析仪表盘

Design a desktop SaaS analytics dashboard for a B2B project management tool.
Users: operations leads who check pipeline health every morning.
Primary goal: spot blocked projects and open the right one.
Layout: left sidebar (Home, Projects, Reports, Settings), top bar with search and avatar, main content grid.
Components: four KPI cards, a line chart, a stacked bar chart, and a project table with status and owner.
Data: include loading, empty, and error states for the table.
Style: Linear-inspired dark interface, near-black surfaces, one indigo accent, tight typography.
Constraints: 1440px desktop first, responsive down to 1024px; WCAG AA contrast.

金融科技引导流程

Design a three-step onboarding flow for a personal finance app.
Users: first-time savers who want to set a monthly budget.
Primary goal: finish setup and see a personalized budget.
Layout: progress indicator, one question per step, primary button at the bottom.
Components: goal selector, income input, spending category chips, summary card.
Data: show validation errors and a final confirmation state.
Style: Stripe-inspired clarity, white canvas, restrained blue accent, generous spacing.
Constraints: mobile web first; keyboard accessible; no more than five choices per step.

AI 聊天 Web App

Design a web app for an AI research assistant.
Users: analysts who need to compare sources and save findings.
Primary goal: ask a question, review cited answers, and save a finding.
Layout: left conversation list, center chat, right source panel.
Components: message thread, citation cards, source preview, save button.
Data: show streaming, empty, and error states for answers.
Style: calm editorial interface with warm neutrals and a single accent.
Constraints: 1280px desktop; readable line length; citations must remain visible.

常见错误与检查清单

常见错误：

  • 一个屏幕放三个主要动作；
  • 只写风格形容词，不写布局和内容规则；
  • 忘记空状态、加载、错误和权限状态；
  • 照搬参考品牌，而不是提取它的约束；
  • 每个屏幕孤立生成，最后失去一致性。

在认为一个屏幕完成之前，检查：

  • 是否只有一个清晰的主要动作；
  • 导航模型是否匹配载体；
  • 是否有 4–6 个层级清晰的核心组件；
  • 是否覆盖空、加载、错误和成功状态；
  • 对比度和字号是否可读；
  • 是否为下一个断点准备了响应式方案；
  • 颜色、字体、间距和圆角是否可复用。

常见问题

AI UI 设计和传统 UI 设计有什么区别？

传统 UI 设计通常从空白画布和设计系统开始；AI UI 设计从描述和约束开始。工作重点从“画每个元素”转向“定义规则、评审结果、细化系统”。

Google Stitch 能生成生产代码吗？

Stitch 可以产出设计参考和面向代码的结果，但上线前仍需评审。把生成的代码当作起点，再套用你的架构、无障碍和测试标准。

如何让多个屏幕保持一致？

写一段共享的提示词前缀，包含产品上下文、风格规则和约束。每个屏幕复用同一套 token 和组件词汇。屏幕跑偏时，修约束，而不是靠提示词绕过去。

下一步

如果你正在设计 Web App，继续阅读 Google Stitch Web App 设计指南。也可以浏览风格库、试用编辑器，或按照教程进行系统练习。

← ← 返回博客