分开审阅设计token变化与用途说明变化
本页展示随包原生输入和验收参考。Stitch云端运行状态:未运行;下方CLI区域保留实际本地执行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| file | primary | rationale | hover |
|---|---|---|---|
| v1 | #184A45 | 按钮和导航 | |
| prose | #184A45 | 只用于主要操作 | |
| v2 | #364C91 | {colors.missing} |
制造一次真正token变化
reference.csv:作者验收映射,不是目标API回包
| comparison | tokenChange | colorChange | newFinding |
|---|---|---|---|
| v1→prose | none intended | ||
| v1→v2 | #184A45→#364C91 | ||
| v1→v2 | broken-ref expected |
规则与输入文件原文
{
"inputRows": [
{
"file": "v1",
"primary": "#184A45",
"rationale": "按钮和导航"
},
{
"file": "prose",
"primary": "#184A45",
"rationale": "只用于主要操作"
},
{
"file": "v2",
"primary": "#364C91",
"hover": "{colors.missing}"
}
],
"referenceRows": [
{
"comparison": "v1→prose",
"tokenChange": "none intended"
},
{
"comparison": "v1→v2",
"colorChange": "#184A45→#364C91"
},
{
"comparison": "v1→v2",
"newFinding": "broken-ref expected"
}
],
"invalidRows": [
{
"before": "v2",
"after": "v1",
"error": "reversed chronology"
},
{
"finding": "modified color",
"claim": "always regression",
"error": "confuses change and finding regression"
}
],
"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 \"file\": \"v1\",\n \"primary\": \"#184A45\",\n \"rationale\": \"按钮和导航\"\n },\n {\n \"file\": \"prose\",\n \"primary\": \"#184A45\",\n \"rationale\": \"只用于主要操作\"\n },\n {\n \"file\": \"v2\",\n \"primary\": \"#364C91\",\n \"hover\": \"{colors.missing}\"\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考,非模型返回\",\n \"rows\": [\n {\n \"comparison\": \"v1→prose\",\n \"tokenChange\": \"none intended\"\n },\n {\n \"comparison\": \"v1→v2\",\n \"colorChange\": \"#184A45→#364C91\"\n },\n {\n \"comparison\": \"v1→v2\",\n \"newFinding\": \"broken-ref expected\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例,非实际错误回包\",\n \"rows\": [\n {\n \"before\": \"v2\",\n \"after\": \"v1\",\n \"error\": \"reversed chronology\"\n },\n {\n \"finding\": \"modified color\",\n \"claim\": \"always regression\",\n \"error\": \"confuses change and finding regression\"\n }\n ]\n}\n",
"case.md": "# DESIGN.md diff教程:分开审阅设计token变化与用途说明变化\n\nDESIGN.md diff教程不是把两份文本的每一行都当设计变化。本课先做只改说明的版本,再做改主色并新增坏引用的版本,让机器差异与视觉复查各自承担清楚的任务。\n\n## 保存不可变的旧版本\n\n把基线规则存为DESIGN-v1.md,记录primary与button-primary的引用。\n\n另存副本再修改,不在原文件上覆盖后声称还能回看旧版。\n\n## 只修改用途说明\n\n在prose版本中把主色说明从“按钮和导航”改为“只用于主要操作”。\n\n所有YAML token保持相同,先用这个版本确认文本变化不等于色值变化。\n\n## 制造一次真正token变化\n\n在v2中改primary并新增一个指向不存在颜色的悬浮按钮。\n\n保留修改清单,只让这两个变化参与第二轮比较。\n\n## 运行两次diff\n\n分别比较v1到prose、v1到v2,保存两份原始JSON。\n\n命令的before与after顺序不能反过来,否则新增和移除会颠倒。\n\n## 检查tokens分类\n\n查看colors的modified和components的added,不用整段JSON长度推断变化大小。\n\n如果说明修改影响了其他结构,回查是否误动了YAML围栏。\n\n## 审阅findings差额\n\n核对before、after和delta,确认新增坏引用如何影响regression。\n\ndiff用新增error或warning判断回归,颜色不同本身并不自动等于失败。\n\n## 合并人工批准的变更\n\n修复坏引用后再做一次diff,把主色批准理由与真实渲染截图关联。\n\n保留说明版本和最终版本,避免下次把未经批准的色值当既有基线。\n\n身份:输入与参考为作者材料;localCli有实测记录时仅证明对应CLI运行,目标云端与模型推理未执行。\n",
"DESIGN-v1.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---\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-prose.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---\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-v2.md": "---\nversion: alpha\nname: Field Kit\ncolors:\n primary: \"#364C91\"\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 button-hover:\n backgroundColor: \"{colors.missing}\"\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",
"diff-prose.stdout.txt": "{\n \"tokens\": {\n \"colors\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n },\n \"typography\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n },\n \"rounded\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n },\n \"spacing\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n },\n \"components\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n }\n },\n \"findings\": {\n \"before\": {\n \"errors\": 0,\n \"warnings\": 0,\n \"infos\": 1\n },\n \"after\": {\n \"errors\": 0,\n \"warnings\": 0,\n \"infos\": 1\n },\n \"delta\": {\n \"errors\": 0,\n \"warnings\": 0\n }\n },\n \"regression\": false\n}\n",
"diff-prose.stderr.txt": "",
"diff-new-error.stdout.txt": "{\n \"tokens\": {\n \"colors\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": [\n \"primary\"\n ]\n },\n \"typography\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n },\n \"rounded\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n },\n \"spacing\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n },\n \"components\": {\n \"added\": [\n \"button-hover\"\n ],\n \"removed\": [],\n \"modified\": [\n \"button-primary\"\n ]\n }\n },\n \"findings\": {\n \"before\": {\n \"errors\": 0,\n \"warnings\": 0,\n \"infos\": 1\n },\n \"after\": {\n \"errors\": 1,\n \"warnings\": 0,\n \"infos\": 1\n },\n \"delta\": {\n \"errors\": 1,\n \"warnings\": 0\n }\n },\n \"regression\": true\n}\n",
"diff-new-error.stderr.txt": "",
"diff-color-only.stdout.txt": "{\n \"tokens\": {\n \"colors\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": [\n \"primary\"\n ]\n },\n \"typography\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n },\n \"rounded\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n },\n \"spacing\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": []\n },\n \"components\": {\n \"added\": [],\n \"removed\": [],\n \"modified\": [\n \"button-primary\"\n ]\n }\n },\n \"findings\": {\n \"before\": {\n \"errors\": 0,\n \"warnings\": 0,\n \"infos\": 1\n },\n \"after\": {\n \"errors\": 0,\n \"warnings\": 0,\n \"infos\": 1\n },\n \"delta\": {\n \"errors\": 0,\n \"warnings\": 0\n }\n },\n \"regression\": false\n}\n",
"diff-color-only.stderr.txt": "",
"local-cli-receipt.json": "{\n \"status\": \"executed\",\n \"package\": \"@google/design.md\",\n \"version\": \"0.4.0\",\n \"cases\": [\n {\n \"case\": \"diff-prose\",\n \"exitCode\": 0,\n \"stdoutSha256\": \"7b4c3d9aab5c49a493dd89c82c3ca2dd7e318cc6ff870088725af9b05f219281\"\n },\n {\n \"case\": \"diff-new-error\",\n \"exitCode\": 1,\n \"stdoutSha256\": \"5fe968ddc61521ac91f81b48813ccb92055ac2e18e16f5b5f113fa0a262fd0b4\"\n },\n {\n \"case\": \"diff-color-only\",\n \"exitCode\": 0,\n \"stdoutSha256\": \"f1b165087a6b20d183477871c887bbd31321aeedb6180461c43e596d38fd11a2\"\n }\n ]\n}\n"
}
}官方CLI本地实测 · 0.4.0
以下stdout由当前包内同字节输入实际执行,退出码单独保留。Stitch云端生成未运行。
diff-prose / exit 0
{
"tokens": {
"colors": {
"added": [],
"removed": [],
"modified": []
},
"typography": {
"added": [],
"removed": [],
"modified": []
},
"rounded": {
"added": [],
"removed": [],
"modified": []
},
"spacing": {
"added": [],
"removed": [],
"modified": []
},
"components": {
"added": [],
"removed": [],
"modified": []
}
},
"findings": {
"before": {
"errors": 0,
"warnings": 0,
"infos": 1
},
"after": {
"errors": 0,
"warnings": 0,
"infos": 1
},
"delta": {
"errors": 0,
"warnings": 0
}
},
"regression": false
}
diff-new-error / exit 1
{
"tokens": {
"colors": {
"added": [],
"removed": [],
"modified": [
"primary"
]
},
"typography": {
"added": [],
"removed": [],
"modified": []
},
"rounded": {
"added": [],
"removed": [],
"modified": []
},
"spacing": {
"added": [],
"removed": [],
"modified": []
},
"components": {
"added": [
"button-hover"
],
"removed": [],
"modified": [
"button-primary"
]
}
},
"findings": {
"before": {
"errors": 0,
"warnings": 0,
"infos": 1
},
"after": {
"errors": 1,
"warnings": 0,
"infos": 1
},
"delta": {
"errors": 1,
"warnings": 0
}
},
"regression": true
}
应当保留的约束
| comparison | tokenChange | colorChange | newFinding |
|---|---|---|---|
| v1→prose | none intended | ||
| v1→v2 | #184A45→#364C91 | ||
| v1→v2 | broken-ref expected |
故意构造的错误样例
| before | after | error | finding | claim |
|---|---|---|---|---|
| v2 | v1 | reversed chronology | ||
| confuses change and finding regression | modified color | always regression |
先保存真实产品输出,再逐项对照。actualOutput / actualResult 在未执行时保持 not_run,不能把这里的期望值复制成已测结果。