展开本页目录
开始前准备什么
- Node.js与npm已可运行；练习只需本地文本文件和官方@google/design.md CLI，不需要Stitch账号或付费生成。
- 固定当前CLI版本并保留版本号；DESIGN.md仍为alpha格式，升级前先在练习副本复核。
- 本课给出作者自制规则文件和预期，不把预期JSON冒充已执行的官方CLI返回。
- 保留带错的规则文件
- 先保存原始lint返回
- 回到被点名的组件
- 修复引用而非复制色值
- 检查共用主色的导航
- 重跑并保留负例
- 交付规则和检查记录
1. 保留带错的规则文件
复制DESIGN-broken.md到工作目录，确认colors只有primary和surface。
主按钮backgroundColor故意写成{colors.action}，不要在运行前自行补同名颜色。
2. 先保存原始lint返回
运行designmd lint --format json DESIGN-broken.md，将标准输出保存为lint-before.json。
单独记录退出码，broken-ref是error，不能只看终端有没有打印内容。
3. 回到被点名的组件
按finding中的path定位button-primary.backgroundColor，再核对colors.action确实不存在。
如果报的是另一个路径，先保留现场并检查是否运行了错误文件。
官方界面与功能位置
以下为官方文档配图，具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 修复引用而非复制色值
把按钮引用改为{colors.primary}，保存成DESIGN-fixed.md。
不要把背景直接改为十六进制色值，否则以后主色升级不会跟着统一。
5. 检查共用主色的导航
在同一文件让nav-active继续引用colors.primary，对照按钮与导航的解析值。
若两处视觉不一致，检查是否一个组件仍在使用硬编码旧色。
6. 重跑并保留负例
对修复文件重跑lint，再给负例把primary拼成primay。
正例不应再有该broken-ref，负例应仍能暴露失效目标，不能靠忽略error过关。
7. 交付规则和检查记录
保存两份规则、前后lint原文与一个按钮/导航示例页。
在记录中区分实际退出码与练习预期，尚未执行时保持not_run。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 修复后引用仍使用花括号路径，且目标确实存在。
- 共享主色只改一处即可影响按钮与导航。
- 负例仍出现broken-ref，原始返回未被手工改写。
常见问题
DESIGN.md提示broken-ref，直接改成颜色值行不行？
先运行 designmd lint 的 JSON 报告，从 finding.path 定位 button-primary.backgroundColor，再把不存在的 colors.action 指回批准的 colors.primary。保留共享引用后重跑，不能只把色值写死掩盖错误。
终端有JSON输出，是不是就校验成功了？
不是。lint发现error时仍会输出findings并以1退出；要同时保留退出码、严重级别和具体path，不能把非空输出当通过。