让Claude Code新增页面沿用项目设计

让 Claude Code 给已有项目加页面，结果却像换了个网站：字体、强调色、按钮都另起一套。dev.to 上一位作者分享了自己的处理流程，用 SKILL.md、提示词和代码搜索，让 Claude Code 先读项目、归纳样式，再复用组件实现页面，最后检查偏离之处。

目前能确认什么

作者在自己的简历生成器和一个 Next.js 应用中反复遇到这类问题，于是把修正重点从生成后的页面，移到了生成前的指令。

这套流程的核心是调整顺序：

1. 先读设计文档、样式变量、组件库，以及两个用途接近的现有页面，同时查看文案和国际化约定。
2. 写出 8–12 行「样式指纹」，明确颜色 token、字体、圆角、间距，以及准备复用的组件。
3. 按现有规则实现，不自行增加字体、强调色或 UI 库；缺少组件时，需要说明新增部分。
4. 用 grep 搜索原始颜色值、不符合约定的配色类名，以及手写按钮等可疑代码。

设计 token 是给颜色、间距等视觉属性起的统一名称，便于全站复用和调整。对模型而言，列出允许使用的名称，比一句「遵循设计系统」更容易执行。没有设计文档时，作者主张先读相近页面，不必先补一整套文档。

我的判断

对已有项目，先确认该复用什么，比继续增加审美形容词更有用。

「样式指纹」尤其适合放进代码生成前的审阅环节：容器宽度、标题尺寸、按钮组件选错了，可以在页面写出来之前纠正。

但 grep 只能找出部分代码信号，无法证明页面视觉一致。即使颜色和组件都复用了，布局密度、响应式表现、交互状态仍可能偏离，需要对照现有页面检查。

节选没有提供完整的最终检查流程，也没有说明这套方法能稳定减少多少返工。SKILL.md 提供的是执行约定，不能据此把设计一致性当成已经得到保证。