修复按钮引用的不存在颜色，保住共享色值
本页展示随包原生输入和验收参考。Stitch云端运行状态：未运行；下方CLI区域保留实际本地执行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| token | value |
|---|---|
| colors.primary | #184A45 |
| colors.surface | #F7F4EC |
| components.button-primary.backgroundColor | {colors.action} |
| components.nav-active.backgroundColor | {colors.primary} |
回到被点名的组件
reference.csv：作者验收映射，不是目标API回包
| path | target | expected | rule | fixedFileExpected |
|---|---|---|---|---|
| components.button-primary.backgroundColor | colors.primary | #184A45 | ||
| components.nav-active.backgroundColor | colors.primary | #184A45 | ||
| broken-ref | absent |
规则与输入文件原文
{
"inputRows": [
{
"token": "colors.primary",
"value": "#184A45"
},
{
"token": "colors.surface",
"value": "#F7F4EC"
},
{
"token": "components.button-primary.backgroundColor",
"value": "{colors.action}"
},
{
"token": "components.nav-active.backgroundColor",
"value": "{colors.primary}"
}
],
"referenceRows": [
{
"path": "components.button-primary.backgroundColor",
"target": "colors.primary",
"expected": "#184A45"
},
{
"path": "components.nav-active.backgroundColor",
"target": "colors.primary",
"expected": "#184A45"
},
{
"rule": "broken-ref",
"fixedFileExpected": "absent"
}
],
"invalidRows": [
{
"reference": "{colors.primay}",
"error": "undefined target"
},
{
"reference": "#184A45",
"error": "hardcoded, does not meet shared-reference exercise"
}
],
"notes": [
"作者自制可编辑输入与验收参考，非官方CLI或云端返回。",
"完整合法基础稿采用官方frontmatter schema；仅按本课故意更改对应字段。"
],
"designMdTemplate": "---\nversion: alpha\nname: Field Kit\ncolors:\n primary: \"#184A45\"\n surface: \"#F7F4EC\"\ntypography:\n body-md:\n fontFamily: Arial\n fontSize: 16px\n fontWeight: 400\n lineHeight: 1.6\nrounded:\n sm: 8px\nspacing:\n sm: 8px\ncomponents:\n button-primary:\n backgroundColor: \"{colors.primary}\"\n textColor: \"#FFFFFF\"\n typography: \"{typography.body-md}\"\n rounded: \"{rounded.sm}\"\n padding: \"{spacing.sm}\"\n---\n## Overview\nField Kit的预约界面。\n## Colors\n主色用于主要操作。\n## Typography\n正文使用body-md。\n## Layout\n使用8px间距。\n## Shapes\n使用8px圆角。\n## Components\n主要按钮统一消费语义引用。\n",
"officialSchemaUrl": "https://github.com/google-labs-code/design.md/blob/main/docs/spec.md",
"files": {
"input.json": "[\n {\n \"token\": \"colors.primary\",\n \"value\": \"#184A45\"\n },\n {\n \"token\": \"colors.surface\",\n \"value\": \"#F7F4EC\"\n },\n {\n \"token\": \"components.button-primary.backgroundColor\",\n \"value\": \"{colors.action}\"\n },\n {\n \"token\": \"components.nav-active.backgroundColor\",\n \"value\": \"{colors.primary}\"\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考，非模型返回\",\n \"rows\": [\n {\n \"path\": \"components.button-primary.backgroundColor\",\n \"target\": \"colors.primary\",\n \"expected\": \"#184A45\"\n },\n {\n \"path\": \"components.nav-active.backgroundColor\",\n \"target\": \"colors.primary\",\n \"expected\": \"#184A45\"\n },\n {\n \"rule\": \"broken-ref\",\n \"fixedFileExpected\": \"absent\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例，非实际错误回包\",\n \"rows\": [\n {\n \"reference\": \"{colors.primay}\",\n \"error\": \"undefined target\"\n },\n {\n \"reference\": \"#184A45\",\n \"error\": \"hardcoded, does not meet shared-reference exercise\"\n }\n ]\n}\n",
"case.md": "# DESIGN.md token引用报错：修复按钮引用的不存在颜色，保住共享色值\n\nDESIGN.md token引用报错先看引用目标，不要把报错位置的花括号直接删掉。本课把主按钮误指向colors.action，保留colors.primary供它与导航共用，并用反例检查是否偷偷写死颜色。\n\n## 保留带错的规则文件\n\n复制DESIGN-broken.md到工作目录，确认colors只有primary和surface。\n\n主按钮backgroundColor故意写成{colors.action}，不要在运行前自行补同名颜色。\n\n## 先保存原始lint返回\n\n运行designmd lint --format json DESIGN-broken.md，将标准输出保存为lint-before.json。\n\n单独记录退出码，broken-ref是error，不能只看终端有没有打印内容。\n\n## 回到被点名的组件\n\n按finding中的path定位button-primary.backgroundColor，再核对colors.action确实不存在。\n\n如果报的是另一个路径，先保留现场并检查是否运行了错误文件。\n\n## 修复引用而非复制色值\n\n把按钮引用改为{colors.primary}，保存成DESIGN-fixed.md。\n\n不要把背景直接改为十六进制色值，否则以后主色升级不会跟着统一。\n\n## 检查共用主色的导航\n\n在同一文件让nav-active继续引用colors.primary，对照按钮与导航的解析值。\n\n若两处视觉不一致，检查是否一个组件仍在使用硬编码旧色。\n\n## 重跑并保留负例\n\n对修复文件重跑lint，再给负例把primary拼成primay。\n\n正例不应再有该broken-ref，负例应仍能暴露失效目标，不能靠忽略error过关。\n\n## 交付规则和检查记录\n\n保存两份规则、前后lint原文与一个按钮/导航示例页。\n\n在记录中区分实际退出码与练习预期，尚未执行时保持not_run。\n\n身份：输入与参考为作者材料；localCli有实测记录时仅证明对应CLI运行，目标云端与模型推理未执行。\n",
"DESIGN-broken.md": "---\nversion: alpha\nname: Field Kit\ncolors:\n primary: \"#184A45\"\n surface: \"#F7F4EC\"\ntypography:\n body-md:\n fontFamily: Arial\n fontSize: 16px\n fontWeight: 400\n lineHeight: 1.6\nrounded:\n sm: 8px\nspacing:\n sm: 8px\ncomponents:\n button-primary:\n backgroundColor: \"{colors.action}\"\n textColor: \"#FFFFFF\"\n typography: \"{typography.body-md}\"\n rounded: \"{rounded.sm}\"\n padding: \"{spacing.sm}\"\n nav-active:\n backgroundColor: \"{colors.primary}\"\n---\n## Overview\nField Kit的预约界面。\n## Colors\n主色用于主要操作。\n## Typography\n正文使用body-md。\n## Layout\n使用8px间距。\n## Shapes\n使用8px圆角。\n## Components\n主要按钮统一消费语义引用。\n",
"DESIGN-fixed.md": "---\nversion: alpha\nname: Field Kit\ncolors:\n primary: \"#184A45\"\n surface: \"#F7F4EC\"\ntypography:\n body-md:\n fontFamily: Arial\n fontSize: 16px\n fontWeight: 400\n lineHeight: 1.6\nrounded:\n sm: 8px\nspacing:\n sm: 8px\ncomponents:\n button-primary:\n backgroundColor: \"{colors.primary}\"\n textColor: \"#FFFFFF\"\n typography: \"{typography.body-md}\"\n rounded: \"{rounded.sm}\"\n padding: \"{spacing.sm}\"\n nav-active:\n backgroundColor: \"{colors.primary}\"\n---\n## Overview\nField Kit的预约界面。\n## Colors\n主色用于主要操作。\n## Typography\n正文使用body-md。\n## Layout\n使用8px间距。\n## Shapes\n使用8px圆角。\n## Components\n主要按钮统一消费语义引用。\n",
"DESIGN-negative.md": "---\nversion: alpha\nname: Field Kit\ncolors:\n primary: \"#184A45\"\n surface: \"#F7F4EC\"\ntypography:\n body-md:\n fontFamily: Arial\n fontSize: 16px\n fontWeight: 400\n lineHeight: 1.6\nrounded:\n sm: 8px\nspacing:\n sm: 8px\ncomponents:\n button-primary:\n backgroundColor: \"{colors.primay}\"\n textColor: \"#FFFFFF\"\n typography: \"{typography.body-md}\"\n rounded: \"{rounded.sm}\"\n padding: \"{spacing.sm}\"\n nav-active:\n backgroundColor: \"{colors.primary}\"\n---\n## Overview\nField Kit的预约界面。\n## Colors\n主色用于主要操作。\n## Typography\n正文使用body-md。\n## Layout\n使用8px间距。\n## Shapes\n使用8px圆角。\n## Components\n主要按钮统一消费语义引用。\n",
"broken-ref.stdout.txt": "{\n \"findings\": [\n {\n \"severity\": \"error\",\n \"path\": \"components.button-primary\",\n \"message\": \"Reference {colors.action} does not resolve to any defined token.\",\n \"rule\": \"broken-ref\"\n },\n {\n \"severity\": \"info\",\n \"message\": \"Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 2 components.\",\n \"rule\": \"token-summary\"\n }\n ],\n \"summary\": {\n \"errors\": 1,\n \"warnings\": 0,\n \"infos\": 1\n }\n}\n",
"broken-ref.stderr.txt": "",
"fixed-ref.stdout.txt": "{\n \"findings\": [\n {\n \"severity\": \"info\",\n \"message\": \"Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 2 components.\",\n \"rule\": \"token-summary\"\n }\n ],\n \"summary\": {\n \"errors\": 0,\n \"warnings\": 0,\n \"infos\": 1\n }\n}\n",
"fixed-ref.stderr.txt": "",
"local-cli-receipt.json": "{\n \"status\": \"executed\",\n \"package\": \"@google/design.md\",\n \"version\": \"0.4.0\",\n \"cases\": [\n {\n \"case\": \"broken-ref\",\n \"exitCode\": 1,\n \"stdoutSha256\": \"24d8b31a513032efd5b0c18043244ebb41c755664e4d20d36a1c3843a78da110\"\n },\n {\n \"case\": \"fixed-ref\",\n \"exitCode\": 0,\n \"stdoutSha256\": \"f7b9b4bca3a76d921eacbf23f934edcb523eb205188e9056bc210717c67ddca4\"\n }\n ]\n}\n",
"lint-before.json": "{\n \"findings\": [\n {\n \"severity\": \"error\",\n \"path\": \"components.button-primary\",\n \"message\": \"Reference {colors.action} does not resolve to any defined token.\",\n \"rule\": \"broken-ref\"\n },\n {\n \"severity\": \"info\",\n \"message\": \"Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 2 components.\",\n \"rule\": \"token-summary\"\n }\n ],\n \"summary\": {\n \"errors\": 1,\n \"warnings\": 0,\n \"infos\": 1\n }\n}\n",
"lint-after.json": "{\n \"findings\": [\n {\n \"severity\": \"info\",\n \"message\": \"Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 2 components.\",\n \"rule\": \"token-summary\"\n }\n ],\n \"summary\": {\n \"errors\": 0,\n \"warnings\": 0,\n \"infos\": 1\n }\n}\n"
}
}官方CLI本地实测 · 0.4.0
以下stdout由当前包内同字节输入实际执行，退出码单独保留。Stitch云端生成未运行。
broken-ref / exit 1
{
"findings": [
{
"severity": "error",
"path": "components.button-primary",
"message": "Reference {colors.action} does not resolve to any defined token.",
"rule": "broken-ref"
},
{
"severity": "info",
"message": "Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 2 components.",
"rule": "token-summary"
}
],
"summary": {
"errors": 1,
"warnings": 0,
"infos": 1
}
}
fixed-ref / exit 0
{
"findings": [
{
"severity": "info",
"message": "Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 2 components.",
"rule": "token-summary"
}
],
"summary": {
"errors": 0,
"warnings": 0,
"infos": 1
}
}
export-invalid-css / exit 0
@theme {
--color-primary: #184a45;
--color-surface: #f7f4ec;
--font-body-md: "Arial";
--text-body-md: 16px;
--font-weight-body-md: 400;
--radius-sm: 8px;
--spacing-sm: 8px;
}
应当保留的约束
| path | target | expected | rule | fixedFileExpected |
|---|---|---|---|---|
| components.button-primary.backgroundColor | colors.primary | #184A45 | ||
| components.nav-active.backgroundColor | colors.primary | #184A45 | ||
| broken-ref | absent |
故意构造的错误样例
| reference | error |
|---|---|
| {colors.primay} | undefined target |
| #184A45 | hardcoded, does not meet shared-reference exercise |
先保存真实产品输出，再逐项对照。actualOutput / actualResult 在未执行时保持 not_run，不能把这里的期望值复制成已测结果。