审查应用 UI

在持续交付功能的过程中，实现很容易逐渐偏离设计系统。这里改了个字重，那里冒出一条缺乏依据的卡片边框，或者某个十六进制色值被近似处理。

借助 Stitch CLI 和 /stitch 技能，你可以在本地运行设计审查，把正在运行的应用与 DESIGN.md 进行对比。审查的每一步都在你的机器上本地执行，不会发起云端调用。

用 /stitch 技能运行审查

仓库中已有 DESIGN.md、并且安装了 Stitch 技能（stitch agent-skills add）后，启动开发服务器，让你的编码智能体审查某条路由：

智能体会探测正在运行的本地开发服务器，捕获实时的水合 DOM（.stitch/captured-dom.html）以及一张 1280x800 的校验截图（.stitch/verify-capture.png），并将两者与 DESIGN.md 进行比对。

你得到的不是泛泛的建议，而是一份按优先级排列的问题清单，每一条都基于真实的 CSS 选择器、截图区域和 DESIGN.md 规则——智能体会在此暂停，让你先选择要优先应用哪些修复。

从终端捕获页面

你也可以先自己捕获快照，再交给智能体：

stitch capture browser \
  --url "http://localhost:5173/dashboard" \
  -o .stitch/captured-dom.html

运行 stitch capture browser 会在本地写出两个文件：

• .stitch/captured-dom.html — 水合后的 DOM，包含计算样式和结构标记。
• .stitch/verify-capture.png — 一张 1280x800 的截图，记录视口中实际渲染的内容。

如果截图显示登录页或弹窗挡住了页面，请直接在打开的浏览器标签页中登录，然后在不重新加载的情况下重新捕获该活动标签页：

stitch capture browser --page 1 -o .stitch/captured-dom.html

审查时该关注什么

无论你是让 /stitch 执行审查，还是自己检查快照，都请聚焦四项检查：

• 颜色与表面令牌 — 背景、边框和主要强调色是否使用了 DESIGN.md 中的精确十六进制值，还是混入了随意的灰色？
• 字体排版与数字 — 标题、正文和数据读数是否符合你的字号体系和表格数字规则？
• 空间节奏 — 内边距和间隙值是否遵循 4px/8px 网格，还是元素紧贴容器边缘、显得局促？
• 视觉克制 — 在纯文字排版更干净的地方，是否多出了状态圆点、胶囊徽章或嵌套边框？

在 Stitch 画布上测试视觉修复

如果审查发现了布局问题，而你想在改动应用代码之前先探索几种视觉方案，可以把捕获的快照直接上传到 Stitch 画布项目：

stitch upload screen .stitch/captured-dom.html \
  --route "/dashboard" \
  --title "Dashboard Current"

接着，用 stitch edit screen 或 stitch generate variants 在画布上尝试布局改动，再把胜出的设计带回代码库。