Google Stitch 体验：解决 CC 写 UI 的痛
痛点：Claude Code 写功能一流，UI 设计一言难尽
用 Claude Code 写带 UI 的桌面应用已经是我的日常工作流了。在功能实现上，Claude Code 几乎无可挑剔——给出需求，它能快速生成完整的业务逻辑、API 对接和状态管理代码。
但 UI 设计是它的短板。
Claude Code 直接生成的界面往往是”能用但不好看”的状态：布局单调、配色平淡、缺乏视觉层次。你可以不断描述”我要扁平化风格”、”加点科技感”、”间距再大一点”，但这种纯文字沟通的效率极低——你脑海中的画面和 AI 理解的画面之间总有一道鸿沟。
正好最近想给 MNN 的命令行工具套一层 UI 做成桌面应用，拿这个项目（omnn）来试试。下面是 Claude Code 直接生成的 UI：
Claude Code 直出的 UI：Status、Models、Chat、Benchmark、Settings、Logs 六个页面。功能齐全，但视觉上就是一个标准的”程序员审美”界面。
能用吗？完全能用。好看吗？差点意思。
解法：让专业的工具做专业的事
关键转变在于分工：把 UI 设计从 Claude Code 的职责中剥离出来，交给专门的设计工具。
3 月 18 日，Google 宣布旗下 AI 设计工具 Stitch 支持 Vibe Design——用自然语言描述需求就能生成完整的 UI 设计稿。虽然 Stitch 与 Google 自家的 AI 编程工具配合更紧密，但我日常主力是 Claude Code，所以决定试试跨家搭配。工作流非常简单：
第一步：让 Claude Code 写设计提示词
不要让 Claude Code 直接画 UI，而是让它发挥所长——描述功能。我给 Claude Code 的指令是：
我要使用设计工具为这个 app 设计 UI，请根据现有的功能帮我写一下 UI 的提示词；你只介绍功能，不要介绍设计细节，颜色等；设计交给设计工具负责；另外加一个设计风格的引导：扁平化设计，风格简洁有科技感
Claude Code 很快输出了一份结构清晰的设计文档：包含 6 个页面的功能描述、交互逻辑、以及”Flat design, clean and minimal with a tech-forward aesthetic”的风格引导。注意：这里只描述功能和风格方向，不规定具体的颜色、字号、间距——这些交给设计工具决策。
第二步：把提示词喂给 Stitch
将 Claude Code 生成的提示词粘贴到 Google Stitch，它会自动生成完整的设计稿和对应的前端代码。
Stitch 的能力不止于生成初稿。下面是 Stitch 的工作界面：
Stitch 的可视化编辑界面：左侧是所有页面的设计预览，底部可以输入修改指令，右侧可以设置主题颜色等全局样式。
这才是 Stitch 真正解决痛点的地方——可视化的细节微调。用 Claude Code 时，你想把某个按钮的颜色从蓝色改成紫色，需要描述”把 Status 页面右上角的按钮颜色改成紫色”，然后祈祷 AI 改对了地方。而在 Stitch 中，你可以：
- 圈选修改：直接在设计图上框选某个区域，针对性地提出修改建议，比如”这个卡片的圆角再大一点”
- 主题颜色设置：一键调整全局主题色、背景色、强调色，所有页面同步更新
- 字体微调：调整字体族、字号、字重，实时预览效果
- 颜色精调：针对单个元素修改颜色，不需要用文字描述位置
这种”看到哪里不满意就改哪里”的交互方式，比用文字反复描述 UI 修改高效太多了。对于我们这些非设计专业的开发者来说，很多时候是”看到了才知道要改什么”，Stitch 的可视化编辑恰好满足了这个需求。
生成的效果如下：
Stitch 生成的设计：同样的六个页面，但视觉层次分明、配色统一、布局专业。深色主题搭配紫色强调色，信息密度高但不杂乱。
对比一目了然——Stitch 的设计有明确的视觉层级、合理的信息密度、统一的色彩体系，以及恰到好处的留白。
第三步：让 Claude Code 按设计图编码
把 Stitch 生成的设计图和 HTML 代码下载到项目目录，然后告诉 Claude Code：
根据你的提示词，Google Stitch 已经完成了设计，设计图和网页都放在了 stitch 目录下，请根据这个设计修改 app
Claude Code 拿到视觉参考后，编码工作就回到了它的舒适区。它会参照设计稿中的配色、布局、组件样式来重新实现界面，最终输出的 app 在视觉上和设计稿高度一致。
为什么这个工作流有效
这个组合之所以好用，核心在于各取所长：
| 环节 | 工具 | 原因 |
|---|---|---|
| 功能描述 | Claude Code | 它最懂代码和功能逻辑 |
| 视觉设计 | Stitch | 专业设计工具，所见即所得 |
| 编码实现 | Claude Code | 有设计稿做参考，实现精准 |
传统方式是让 Claude Code 一人包办”设计 + 编码”，结果就是两头都不够精。现在加入 Stitch 做中间层，等于给 AI 编程流程补上了”设计师”这个角色。
总结
如果你也在用 Claude Code 或其他 AI 编程工具写带 UI 的应用，遇到”功能没问题但界面不好看”的困境，试试这个三步工作流：
- Claude Code 写功能描述 —— 发挥 AI 的语言和逻辑能力
- Stitch 做视觉设计 —— 利用专业设计工具的视觉能力，支持圈选修改、字体颜色微调
- Claude Code 按设计编码 —— 有了设计稿，编码实现就是它的主场
工具之间的分工协作，往往比让单一工具硬扛所有任务更高效。在 AI 辅助开发的时代，知道什么时候该用什么工具，本身就是一种重要的能力。
Enjoy Reading This Article?
Here are some more articles you might like to read next: