Google Stitch 入门与设计工作流
用 Codex 实现
Stitch 最适合和 Codex 形成一个“先试方向、再工程化”的组合：
- 先用 Stitch 把界面方向试出来
- 再让 Codex 把导出的前端结果重构成更稳定的项目结构
- 最后继续由 Codex 做组件拆分、响应式优化、数据接入和上线准备
可以直接这样说：
我已经用 Stitch 做出了一个页面原型，请你帮我：
1. 判断当前结果更适合用什么技术栈落地
2. 拆出页面、组件、样式 token
3. 给出从原型到正式项目的实现顺序
4. 明确哪些部分要重写，哪些部分可以直接复用建议配合：
🎯 核心问题
Google Stitch 到底适合放在开发流程的哪一步？它和 Figma、Lovable、Codex 应该怎么配合？
1. Stitch 到底是什么
截至 2026-03-23，我查到的 Google 官方公开时间线可以这样理解：
| 日期 | 官方公开信息 | 对学习者意味着什么 |
|---|---|---|
2025-05-20 | Google 首次介绍 Stitch，主打把自然语言、截图或线框图转成 UI 和前端代码 | Stitch 是从“想法到界面”的新入口 |
2025-06-12 | Google 在 I/O 文章里再次强调 Stitch 支持 prompt、图片和 wireframe 输入，并能导出 HTML / CSS 或粘贴到 Figma | 它不是单纯展示图，而是和设计、开发都有关联 |
2025-12-10 | Google 官方更新称 Stitch 已接入 Gemini 3，并新增 Prototypes | Stitch 从静态 UI 探索，进一步走向交互流程演示 |
图示：Google 官方
2025-12-10更新页，说明 Stitch 公开可见的最近一轮重要更新是Gemini 3 + Prototypes。
简单说，Stitch 更像是：
- 一个 AI UI 探索器
- 一个 线框图到界面草图的加速器
- 一个 设计与前端之间的中间层
它不一定替代专业设计工具，但非常适合在“方向还没完全定死”时快速试错。
2. Stitch 最适合解决什么问题
2.1 当你只有一句话想法时
比如你只知道自己想做：
- 校园活动报名页
- 学生作业管理界面
- 宠物相册 App
- 小型 SaaS 首页
这时直接从代码开始，很容易陷入“结构还没想清楚，代码已经写乱了”的状态。Stitch 的价值是先把 页面结构、信息层级和视觉方向 快速试出来。
2.2 当你已经有草图或参考图时
如果你已经有：
- 白板手绘
- 低保真线框图
- 参考网站截图
那么 Stitch 特别适合把“看起来有点像想法”的东西，快速抬升成“更像真正界面”的版本。
2.3 当你还不想过早进入重工程开发时
Stitch 适合先回答这些问题：
- 页面应该有几个区域
- 信息优先级怎样排
- 卡片、列表、导航应该怎么组织
- 桌面版和移动版大概长什么样
等这些方向明确后，再交给 Figma 或 Codex 去做更稳定的落地。
3. 快速上手流程
图示：Stitch 官网首页。实际界面会持续迭代，但入口核心仍然围绕 “prompt / image / wireframe -> UI -> code / Figma” 这条链路。
第一步：先决定你的输入方式
Stitch 比较常见的三类输入是：
- 自然语言：适合从零开始
- 图片或参考界面：适合模仿结构与风格
- 线框图：适合已经有页面草稿的情况
第二步：把需求写成“页面语言”
写 Stitch 提示词时，不要只写“做一个好看的页面”，而要写：
- 页面类型
- 核心用户
- 主要区域
- 视觉风格
- 设备场景
例如：
Create a desktop and mobile UI for a campus event signup page.
Include a hero section, event list, filters, event detail panel, and signup button.
Use a fresh student-friendly style with clear hierarchy and strong CTA.第三步：生成多个方向，不要只看第一版
Stitch 的正确用法不是“出一版就定稿”，而是：
- 先看结构是否合理
- 再看视觉是否匹配场景
- 然后要求它继续改导航、卡片、颜色、布局密度
这一点很重要，因为 Stitch 的强项本来就不是“第一版完美”，而是“快速探索多个版本”。
第四步：进入导出与衔接
根据 Google 官方公开信息，Stitch 可以衔接到两条常见路径：
- 导出前端代码，例如
HTML / CSS - 把设计结果继续带入
Figma
如果你接下来是：
- 继续完善设计协作：优先走
Figma - 直接进开发：优先交给
Codex
4. 一节课里怎么演示 Stitch
如果你想把 Stitch 讲成一节真正能上手的课，我建议用这个课堂案例：
课堂案例：做一个校园活动报名页
你可以先给学生一个简单目标：
- 用户能看到活动列表
- 能筛选活动类型
- 能打开活动详情
- 能点击报名
然后让大家先写第一版提示词：
Design a student event registration page for desktop and mobile.
Need a hero banner, featured events, category filters, event cards, event details, and registration CTA.
The interface should feel energetic, clear, and easy for teenagers to use.接着让学生做三轮迭代：
- 改结构：让活动信息更清楚
- 改风格：更校园、更青春或更专业
- 改交互：增加多页面或多状态感
最后再让他们判断：
- 这一版适不适合直接进 Figma
- 这一版能不能直接交给 Codex 开始做代码
5. Stitch 和 Codex 怎么串起来
我最推荐的组合方式是下面这条链路：
flowchart LR A["想法 / 草图 / 截图"] --> B["Stitch 生成多版 UI"] B --> C["挑出更合理的一版"] C --> D["导出代码或带入 Figma"] D --> E["Codex 拆组件与项目结构"] E --> F["Codex 接数据、做响应式、修细节"]
Codex 在这个环节最擅长的事情包括：
- 判断 Stitch 结果适合
React、Vue还是纯静态页 - 把导出的页面拆成组件树
- 补齐语义化结构和响应式布局
- 替换临时假数据为真实 API
- 把“看起来能跑”的页面变成“结构更稳定”的项目
可以复制这段提示词给 Codex：
这是我用 Stitch 导出的页面结果，请你不要直接整页重写，
而是先帮我做 4 件事：
1. 识别页面区域和组件树
2. 输出样式 token
3. 说明哪些代码可以保留，哪些建议重构
4. 给出最稳妥的工程化落地步骤6. Stitch、Lovable、Figma 的分工怎么记
| 平台 | 更偏哪一步 | 最常见输出 | 更推荐的用法 |
|---|---|---|---|
Stitch | UI 探索 | 多版页面、代码草图、Figma 粘贴结果 | 快速试界面方向 |
Lovable | 产品原型 | 可运行网站、仓库、部署结果 | 快速做全栈原型 |
Figma | 设计沉淀 | 组件、页面、交付信息 | 团队协作和设计 handoff |
Codex | 工程落地 | 项目结构、组件代码、修正与集成 | 把原型推进成真正项目 |
一句话记忆：
Stitch解决“长什么样”Lovable解决“先跑起来”Figma解决“设计怎么沉淀”Codex解决“怎么稳定地做成项目”
7. 使用建议与边界
7.1 Stitch 很强，但不一定是终点
Stitch 很适合前期探索，但如果项目已经进入：
- 大量组件复用
- 多人评审协作
- 复杂设计系统
- 精细化开发交付
那你通常还是会回到 Figma / MasterGo + Codex 这类更稳定的组合。
7.2 学员容易犯的一个错误
很多人会把 Stitch 生成的第一版直接当成最终答案。其实更合理的是：
- 先拿它找方向
- 再把方向稳定下来
- 最后再工程化
它更像“加速想法显形”，不是“自动完成所有后续工作”。