区分colours拼写错误与合法扩展,防止主色被悄悄丢掉
本页展示随包原生输入和验收参考。Stitch云端运行状态:未运行;下方CLI区域保留实际本地执行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| key | value |
|---|---|
| colours | {"primary": "#184A45"} |
| x-brand-note | 仅用于预约产品 |
| typography | {"body-md": {"fontFamily": "Arial", "fontSize": "16px"}} |
回查有效设计状态
reference.csv:作者验收映射,不是目标API回包
| key | expectation |
|---|---|
| colors | primary parsed |
| colours | typo warning investigated |
| x-brand-note | prose extension preserved |
规则与输入文件原文
{
"inputRows": [
{
"key": "colours",
"value": {
"primary": "#184A45"
}
},
{
"key": "x-brand-note",
"value": "仅用于预约产品"
},
{
"key": "typography",
"value": {
"body-md": {
"fontFamily": "Arial",
"fontSize": "16px"
}
}
}
],
"referenceRows": [
{
"key": "colors",
"expectation": "primary parsed"
},
{
"key": "colours",
"expectation": "typo warning investigated"
},
{
"key": "x-brand-note",
"expectation": "prose extension preserved"
}
],
"invalidRows": [
{
"fix": "delete all unknown content",
"error": "loses legitimate brand context"
},
{
"fix": "leave colours unchanged",
"error": "intended palette still outside schema"
}
],
"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 \"key\": \"colours\",\n \"value\": {\n \"primary\": \"#184A45\"\n }\n },\n {\n \"key\": \"x-brand-note\",\n \"value\": \"仅用于预约产品\"\n },\n {\n \"key\": \"typography\",\n \"value\": {\n \"body-md\": {\n \"fontFamily\": \"Arial\",\n \"fontSize\": \"16px\"\n }\n }\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考,非模型返回\",\n \"rows\": [\n {\n \"key\": \"colors\",\n \"expectation\": \"primary parsed\"\n },\n {\n \"key\": \"colours\",\n \"expectation\": \"typo warning investigated\"\n },\n {\n \"key\": \"x-brand-note\",\n \"expectation\": \"prose extension preserved\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例,非实际错误回包\",\n \"rows\": [\n {\n \"fix\": \"delete all unknown content\",\n \"error\": \"loses legitimate brand context\"\n },\n {\n \"fix\": \"leave colours unchanged\",\n \"error\": \"intended palette still outside schema\"\n }\n ]\n}\n",
"case.md": "# DESIGN.md自定义字段:区分colours拼写错误与合法扩展,防止主色被悄悄丢掉\n\nDESIGN.md自定义字段不是遇到未知项就全部删掉。本课保留正常品牌备注,同时把像颜色token却放错顶层位置的数据找回来,避免AI消费时改用猜测颜色。\n\n## 建立误拼和扩展两个副本\n\n在typo版把colors写成colours,在extension版保留colors并添加x-brand-note。\n\n两份文件的品牌说明与组件内容保持相同,便于区分触发原因。\n\n## 逐份运行lint\n\n分别保存原始finding,查看unknown-key或token-like-ignored是否命中。\n\n不预先把所有未知键都当error,官方对扩展与像token的误放有不同处理。\n\n## 回查有效设计状态\n\nCLI的JSON报告主要含findings与summary;根据unknown-key、token-like-ignored和broken-ref定位误拼,再用修复后的真实export确认primary进入消费产物。\n\n若界面恰好用了相近颜色,也不能证明被忽略的字段已正确读取。\n\n## 修正误拼的顶层键\n\n只把colours改回colors,保留原值与组件引用。\n\n不要顺手删除x-brand-note,除非它确实不再需要。\n\n## 导出验证真实消费\n\n对修复文件导出CSS,查primary的实际输出值。\n\n若报告仍提示缺主色,检查是不是另一份文件被命令使用。\n\n## 保留合法扩展文本\n\n把x-brand-note内容写入交付说明,确认规范工具没有强迫它变成颜色。\n\n扩展能保留不代表任何下游生成器都会执行其中的自然语言要求。\n\n## 交付两类处理依据\n\n整理误拼修复前后、合法扩展和导出结果三份证据。\n\n说明每个字段属于规范token还是项目自定义上下文,避免团队后续误删。\n\n身份:输入与参考为作者材料;localCli有实测记录时仅证明对应CLI运行,目标云端与模型推理未执行。\n",
"DESIGN-wrong.md": "---\nversion: alpha\nname: Field Kit\ncolours:\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\n## Brand Note\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---\n## Overview\nField Kit的预约界面。\n## Colors\n主色用于主要操作。\n## Typography\n正文使用body-md。\n## Layout\n使用8px间距。\n## Shapes\n使用8px圆角。\n## Components\n主要按钮统一消费语义引用。\n\n## Brand Note\n本练习仅用于预约产品。\n",
"DESIGN-extension.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}\"\nx-brand-note: only-for-booking\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-typo.md": "---\nversion: alpha\nname: Field Kit\ncolours:\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\n## Brand Note\n本练习仅用于预约产品。\n",
"typo-colours.stdout.txt": "{\n \"findings\": [\n {\n \"severity\": \"error\",\n \"path\": \"components.button-primary\",\n \"message\": \"Reference {colors.primary} does not resolve to any defined token.\",\n \"rule\": \"broken-ref\"\n },\n {\n \"severity\": \"info\",\n \"message\": \"Design system defines 1 typography scale, 1 rounding level, 1 spacing token, 1 component.\",\n \"rule\": \"token-summary\"\n },\n {\n \"severity\": \"warning\",\n \"path\": \"colours\",\n \"message\": \"Unknown key \\\"colours\\\" — did you mean \\\"colors\\\"?\",\n \"rule\": \"unknown-key\"\n },\n {\n \"severity\": \"warning\",\n \"path\": \"colours\",\n \"message\": \"\\\"colours\\\" looks like a design-token map but is not a recognized schema key (colors, typography, spacing, rounded, components). It will be silently ignored by export commands. Rename it to a supported key or move its values under a recognized section.\",\n \"rule\": \"token-like-ignored\"\n }\n ],\n \"summary\": {\n \"errors\": 1,\n \"warnings\": 2,\n \"infos\": 1\n }\n}\n",
"typo-colours.stderr.txt": "",
"custom-extension.stdout.txt": "{\n \"findings\": [\n {\n \"severity\": \"info\",\n \"message\": \"Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 1 component.\",\n \"rule\": \"token-summary\"\n }\n ],\n \"summary\": {\n \"errors\": 0,\n \"warnings\": 0,\n \"infos\": 1\n }\n}\n",
"custom-extension.stderr.txt": "",
"local-cli-receipt.json": "{\n \"status\": \"executed\",\n \"package\": \"@google/design.md\",\n \"version\": \"0.4.0\",\n \"cases\": [\n {\n \"case\": \"typo-colours\",\n \"exitCode\": 1,\n \"stdoutSha256\": \"b8f611c02272dc1ae5398978be5e897e080de190ede8a63498e368c8bfe3a192\"\n },\n {\n \"case\": \"custom-extension\",\n \"exitCode\": 0,\n \"stdoutSha256\": \"507468c97879fb6b9353db67609ac5102667c2cbc6d57bdda0f1614c240967fb\"\n }\n ]\n}\n"
}
}官方CLI本地实测 · 0.4.0
以下stdout由当前包内同字节输入实际执行,退出码单独保留。Stitch云端生成未运行。
typo-colours / exit 1
{
"findings": [
{
"severity": "error",
"path": "components.button-primary",
"message": "Reference {colors.primary} does not resolve to any defined token.",
"rule": "broken-ref"
},
{
"severity": "info",
"message": "Design system defines 1 typography scale, 1 rounding level, 1 spacing token, 1 component.",
"rule": "token-summary"
},
{
"severity": "warning",
"path": "colours",
"message": "Unknown key \"colours\" — did you mean \"colors\"?",
"rule": "unknown-key"
},
{
"severity": "warning",
"path": "colours",
"message": "\"colours\" looks like a design-token map but is not a recognized schema key (colors, typography, spacing, rounded, components). It will be silently ignored by export commands. Rename it to a supported key or move its values under a recognized section.",
"rule": "token-like-ignored"
}
],
"summary": {
"errors": 1,
"warnings": 2,
"infos": 1
}
}
应当保留的约束
| key | expectation |
|---|---|
| colors | primary parsed |
| colours | typo warning investigated |
| x-brand-note | prose extension preserved |
故意构造的错误样例
| fix | error |
|---|---|
| delete all unknown content | loses legitimate brand context |
| leave colours unchanged | intended palette still outside schema |
先保存真实产品输出,再逐项对照。actualOutput / actualResult 在未执行时保持 not_run,不能把这里的期望值复制成已测结果。