Google Stitch 提示词指南：从入门到精通

Stitch 是什么

Google Stitch 是 Google Labs 的 AI 原生设计画布。它的核心不是让你先学一套设计软件，而是让你用自然语言、图片或代码作为上下文，直接生成和迭代高保真界面。官方文档把它描述为一个从想法到界面的工作空间：你可以生成屏幕、继续编辑、把多个页面串成流程，并通过 DESIGN.md、MCP、CLI 和 Agent Skills 把设计上下文交给后续工具。

理解这一点很重要：Stitch 最擅长的是“快速把方向做出来”，而不是替代完整的设计系统管理或生产级代码审查。好的提示词不是一次写出完美页面，而是让你更快进入“生成、观察、修正”的循环。

官方提示词公式

Stitch 官方文档建议第一版提示词包含四个部分：

Idea：你要做什么，例如一个跑步播客的落地页。
Theme：整体气质，例如现代、强烈对比、黑白、硬朗角度。
Content：页面上要出现什么内容，例如标题、播客平台链接、节目列表。
Image：可选参考图，用来表达你想要的视觉方向。

第一版不需要写具体字体或十六进制色值。先让 Stitch 理解产品、内容和氛围，再在后续迭代中收紧细节。

Idea: A landing page for a running podcast called "The Pacing Project".
Theme: Modern, edgy, high contrast. Black and white with hard angles.
Content: A hero section with the headline and links to podcast platforms.
Image: Optional reference image.

选择设备类型

生成前先决定是 App 还是 Web。官方文档的建议是“先快速判断哪个更合适”，不用在第一版就纠结所有断点。Stitch 支持在后续迭代中转换设备类型，所以你可以先生成移动端方向，再改成 Web，或者反过来。

App：更适合移动端导航、单手操作、卡片列表和底部标签栏。
Web：更适合侧边栏、顶部导航、宽屏网格和多列内容。
Dashboard：如果页面是数据密集型后台，明确写出侧边栏、表格、图表和筛选区。

设备类型会影响导航、信息密度和组件形态。提示词里写清楚平台，能减少后面反复修改布局的成本。

第一版提示词

第一版的目标是“结构完整”，不是“视觉最终”。先写清楚用户、任务、页面区块和最重要的信息，再让 Stitch 生成一个可以讨论的版本。官方文档建议从具体内容和整体氛围开始，不要一开始就堆满字体、色值和微交互。

Design an iOS mobile app for tracking daily water intake.
Include a circular progress indicator, quick-add buttons for common bottle sizes,
a weekly history chart, and a bottom tab bar.
Use a calm, minimal style with blue and white colors and generous whitespace.

这段提示词包含了平台、产品、核心功能、页面结构和视觉方向。它没有规定每个像素，但已经足够让 Stitch 生成一个有意义的起点。

迭代：一次只改一个主要部分

生成之后，先检查结构：信息层级是否清楚、主操作是否突出、页面是否覆盖了任务、移动端和宽屏是否成立。然后再看视觉：颜色是否服务于层级、字体是否易读、间距是否一致。

官方文档的建议是：选中要修改的屏幕，进入编辑或聊天，写一条具体、可执行的修改指令，并且一次只做一个主要改动。例如：

“把中间的价格卡片放大，增加容器高度和阴影，同时缩小两侧卡片，建立更清晰的层级。”
“把侧边栏缩窄到 220px，并让主内容区在小屏幕上变成单列。”
“给空列表增加引导文案和一个主操作按钮。”

一次改五件事，输出变好或变坏都无法归因。一次改一件事，你才能知道下一步该保留什么。

Edit Theme

如果改动属于整体主题，而不是单个组件，使用 Edit Theme 更快。官方文档说明，Edit Theme 可以调整明暗模式、强调色、组件圆角和字体。它适合在方向已经确定后统一视觉语言，而不是用来替代页面结构上的修改。

一个实用的顺序是：先确定布局和信息结构，再用 Edit Theme 调整明暗、强调色、圆角和字体，最后处理局部组件和状态。

Design Modes

Stitch 不是一个单一模型，而是一组设计引擎。官方文档列出了多种 Design Mode：

Thinking with 3 Pro：适合复杂逻辑、深层推理和更接近生产候选的界面。
Redesign（Nano Banana Pro）：适合把旧界面改成特定风格，或用风格关键词快速改变视觉气质。
2.5 Pro：适合高保真 HTML 和 A/B 对比，可以用同一个提示词比较两种高层理解。
Fast：适合快速线框和导出到 Figma 做后续精修。

选择模式时，不要只看“哪个更强”，而要看当前任务：是要快速看方向、比较两个解释，还是把页面推进到更严谨的结构。复杂页面可以先用 Thinking with 3 Pro 生成，再用 2.5 Pro 跑同一个提示词做对比。

Variations 与 Creative Range

当你不知道下一步该改什么，或者想一次看多个方向时，使用 Variations。官方文档说明，Stitch 一次可以生成 1–5 个不同选项，并通过 Creative Range 控制偏离当前设计的程度：

Refined（低范围）：保持结构不变，只调整字体、间距和颜色，适合打磨。
Creative（高范围）：允许彻底重构布局、替换图片和改变主题，适合探索“如果换一个方向会怎样”。

Variations 适合做大范围探索；确定赢家后，再回到单变量迭代做精细调整。你也可以在一个变体上继续生成变体，把不同版本里喜欢的布局和配色组合起来。

Design to Prototype

页面看起来不错，不代表交互成立。Stitch 可以把设计转成可滚动、可交互的 Prototype，用来检查 hover、按钮状态、文本输入和页面之间的跳转。官方文档建议在这个阶段检查那些静态设计里看不到的状态，例如按钮悬停、链接样式、输入框在不同文本长度下的表现。

如果原型暴露出结构问题，回到提示词修改布局；如果只是状态缺失，补充明确的交互描述。不要用视觉微调掩盖流程问题。

DESIGN.md 与设计系统

当页面从一个变成五个，最大的问题不再是单页好不好看，而是颜色、字体、间距和组件规则是否一致。Stitch 通过 DESIGN.md 把设计系统变成 AI 和人都能读的上下文：YAML front matter 保存机器可读的设计 token，Markdown 正文解释这些值为什么存在、应该在什么场景使用。

官方文档给出三种创建方式：

让 Stitch 根据提示词生成一套设计系统。
从品牌网址或图片提取颜色、字体和风格模式。
由高级用户直接手写 DESIGN.md。

生成第二个页面时，不要重新描述所有视觉细节，而是说“遵循项目 DESIGN.md 中的颜色、字体、间距和组件规则，不要引入新的强调色、阴影或圆角”。这样多个页面才会像同一个产品，而不是五次独立生成。

导出代码与图片

方向确定后，可以选中屏幕或拖选多个屏幕，下载 HTML 和图片。官方文档说明，Stitch 会同时生成图片和 HTML 输出；HTML 可以作为基础，由 LLM 进一步转换成 React、Angular、Vue、Jetpack Compose、Flutter 或 SwiftUI 等格式。

导出的代码仍然需要工程检查：类名、响应式、可访问性、状态和真实数据都不会因为生成而自动正确。把 Stitch 的输出当成高质量的起点，而不是跳过代码审查的理由。

常见错误

提示词太模糊：只写“做一个好看的应用”，没有平台、用户、任务和内容。
一次要求太多：把多个页面、多个风格和多个交互塞进一条提示词。
没有指定平台：移动端和 Web 的导航、密度和组件完全不同。
只写视觉，不写状态：空列表、加载失败、权限差异和禁用状态都需要明确说明。
趋势堆叠：玻璃拟态、渐变、3D 图标、粗描边全部一起上，页面会失去重点。
把第一版当最终稿：Stitch 的价值在迭代，不在一次命中。

示例：从基础到高级

基础提示词只需要让 Stitch 理解页面类型和核心任务；中级提示词补充页面区块和视觉方向；高级提示词再补充组件、状态、密度和明确约束。下面是一个高级示例：

Design a professional SaaS analytics dashboard for a small product team.
Include a collapsible sidebar, a top bar with search and notifications,
four KPI cards, a weekly revenue line chart, a bar chart for channel comparison,
and a sortable data table. Use a light canvas, dark text, one blue accent,
compact spacing, 8px card radius, and clear focus states.
Include an empty state for the table and an error state for failed data loading.

这条提示词没有规定每个像素，但它把平台、用户、结构、视觉和状态都写清楚了。生成后仍然要检查层级、对比度和真实内容下的表现。

总结

写好 Stitch 提示词的关键不是记住更多形容词，而是建立稳定的结构：先说明平台、用户和任务，再描述页面区块、视觉语言和状态；生成后一次只改一个主要部分，用 Variations 探索方向，用 DESIGN.md 保持一致性，最后把设计上下文交给 Figma、MCP、CLI 或 Coding Agent。

Google Stitch 提示词完整指南：从入门到精通