展开本页目录
开始前准备什么
- Node.js与npm已可运行；练习只需本地文本文件和官方@google/design.md CLI，不需要Stitch账号或付费生成。
- 固定当前CLI版本并保留版本号；DESIGN.md仍为alpha格式，升级前先在练习副本复核。
- 本课给出作者自制规则文件和预期，不把预期JSON冒充已执行的官方CLI返回。
- 建立误拼和扩展两个副本
- 逐份运行lint
- 回查有效设计状态
- 修正误拼的顶层键
- 导出验证真实消费
- 保留合法扩展文本
- 交付两类处理依据
1. 建立误拼和扩展两个副本
在typo版把colors写成colours，在extension版保留colors并添加x-brand-note。
两份文件的品牌说明与组件内容保持相同，便于区分触发原因。
2. 逐份运行lint
分别保存原始finding，查看unknown-key或token-like-ignored是否命中。
不预先把所有未知键都当error，官方对扩展与像token的误放有不同处理。
3. 回查有效设计状态
CLI的JSON报告主要含findings与summary；根据unknown-key、token-like-ignored和broken-ref定位误拼，再用修复后的真实export确认primary进入消费产物。
若界面恰好用了相近颜色，也不能证明被忽略的字段已正确读取。
官方界面与功能位置
以下为官方文档配图，具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 修正误拼的顶层键
只把colours改回colors，保留原值与组件引用。
不要顺手删除x-brand-note，除非它确实不再需要。
5. 导出验证真实消费
对修复文件导出CSS，查primary的实际输出值。
若报告仍提示缺主色，检查是不是另一份文件被命令使用。
6. 保留合法扩展文本
把x-brand-note内容写入交付说明，确认规范工具没有强迫它变成颜色。
扩展能保留不代表任何下游生成器都会执行其中的自然语言要求。
7. 交付两类处理依据
整理误拼修复前后、合法扩展和导出结果三份证据。
说明每个字段属于规范token还是项目自定义上下文，避免团队后续误删。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 误拼的颜色被修复并进入实际导出。
- 合法扩展未被当作需要删除的错误。
- 文档清楚区分已消费token与保留说明。
常见问题
DESIGN.md不认识的字段都得删掉吗？
分别 lint 顶层 colours 误拼版与合法扩展版，读取 unknown-key、token-like-ignored、broken-ref。修正为有效 colors 后导出并确认 primary 真的进入消费文件；未知字段不能一律删除。
AI已经生成了正确颜色，还需要修colours吗？
需要。那可能是AI从文字或默认值猜出的结果；应让主色进入规范状态和导出文件，再把实际值作为可重现依据。