第一张页面很好看，做到第二张，颜色、间距和按钮就全变了。

原因通常不神秘：设计意图只留在一张图里。编码Agent只能凭眼睛猜主色叫什么、标题用哪档字号、错误状态该怎么画。页面越往后做，越像几个不同产品临时拼在一起。

Stitch Skills把这段交接写成了可复用流程。它是一组配合Stitch MCP使用的Agent Skills，项目目前约有7300颗星，能参与生成设计方向、提取设计系统、整理DESIGN.md，以及把静态页面继续转换成React组件。

做活动页时，可以先拉开几个视觉方向，人选定其中一个，再把颜色、字体、间距和组件规则整理进DESIGN.md。后面的报名页继续读取同一份规则，Agent就少猜几次。效果图是一时结果，规则文件才能跟着项目往下走。

团队已经有组件库的话，这份提取结果还得对照现有设计令牌和命名。最怕的是旧规则没退、新规则又进来，两套按钮都叫「主要按钮」，代码里却长得完全不同。先拿一两个页面试接，比整站一次转换容易发现问题。

这里还要纠正一个容易被标题带偏的地方：仓库位于google-labs-code组织下，但README明确写着，它不是受Google官方支持的产品。使用前也要配好Stitch MCP、环境变量和凭证，编码工具得兼容相应的技能结构。

从设计到代码之后，无障碍、响应式、加载性能、真实数据和异常状态仍要逐项验收。它负责保存与传递设计上下文；生产效果要看页面在这些检查里能不能过关。

这套技能由google-labs-code开源，GitHub项目全名是google-labs-code/stitch-skills。
#马力的AI知识分享#
#马力的AI开源项目分享#