核对颜色、尺寸和引用类型,不把token文件当截图
本页展示随包原生输入和验收参考。Stitch云端运行状态:未运行;下方CLI区域保留实际本地执行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| group | name | value |
|---|---|---|
| colors | primary | #184A45 |
| colors | surface | #F7F4EC |
| rounded | sm | 8px |
消费端作者契约
consumer-map.json定义三项精确验收;check-consumer.py只覆盖本课类型、单位、引用和值,非官方CLI或完整DTCG标准验证器。
导出标准交换文件
reference.csv:作者验收映射,不是目标API回包
| token | expectedType | check | expected | actualCliVersion | sourceTypographyLineHeight | dtcgLineHeightPresent | conclusion |
|---|---|---|---|---|---|---|---|
| primary | color | ||||||
| sm | dimension | ||||||
| reference resolution | primary retained | ||||||
| 0.4.0 | 1.6 | False | not full roundtrip |
规则与输入文件原文
{
"inputRows": [
{
"group": "colors",
"name": "primary",
"value": "#184A45"
},
{
"group": "colors",
"name": "surface",
"value": "#F7F4EC"
},
{
"group": "rounded",
"name": "sm",
"value": "8px"
}
],
"referenceRows": [
{
"token": "primary",
"expectedType": "color"
},
{
"token": "sm",
"expectedType": "dimension"
},
{
"check": "reference resolution",
"expected": "primary retained"
},
{
"actualCliVersion": "0.4.0",
"sourceTypographyLineHeight": 1.6,
"dtcgLineHeightPresent": false,
"conclusion": "not full roundtrip"
}
],
"invalidRows": [
{
"token": "sm",
"type": "color",
"value": "8px"
},
{
"token": "primary",
"type": "dimension",
"value": "#184A45"
}
],
"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 \"group\": \"colors\",\n \"name\": \"primary\",\n \"value\": \"#184A45\"\n },\n {\n \"group\": \"colors\",\n \"name\": \"surface\",\n \"value\": \"#F7F4EC\"\n },\n {\n \"group\": \"rounded\",\n \"name\": \"sm\",\n \"value\": \"8px\"\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考与明确标记的CLI实测边界\",\n \"rows\": [\n {\n \"token\": \"primary\",\n \"expectedType\": \"color\"\n },\n {\n \"token\": \"sm\",\n \"expectedType\": \"dimension\"\n },\n {\n \"check\": \"reference resolution\",\n \"expected\": \"primary retained\"\n },\n {\n \"actualCliVersion\": \"0.4.0\",\n \"sourceTypographyLineHeight\": 1.6,\n \"dtcgLineHeightPresent\": false,\n \"conclusion\": \"not full roundtrip\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例,非实际错误回包\",\n \"rows\": [\n {\n \"token\": \"sm\",\n \"type\": \"color\",\n \"value\": \"8px\"\n },\n {\n \"token\": \"primary\",\n \"type\": \"dimension\",\n \"value\": \"#184A45\"\n }\n ]\n}\n",
"case.md": "# DESIGN.md导出DTCG:核对颜色、尺寸和引用类型,不把token文件当截图\n\nDESIGN.md导出DTCG适合把AI设计规范交给其他工具,但它不包含整个页面布局。本课把token文件与视觉稿分开打包,并用有单位和无单位的反例检查数据类型。\n\n## 列清要交换的token\n\n准备primary、surface和radius-sm三个规则项,另列组件使用关系。\n\n本课只交换设计token,不把交互流程或布局HTML塞进token值。\n\n## 运行源规范校验\n\n先lint源文件,核对引用和尺寸格式。\n\n出现坏引用时先修源规范,不在导出的JSON里补一份临时颜色。\n\n## 导出标准交换文件\n\n运行designmd export --format dtcg DESIGN.md,保存tokens.json。\n\n保留原始输出与CLI版本,后续处理另存副本。\n\n## 检查值与类型对应\n\n逐项核对颜色值、尺寸单位和导出类型字段,确认没有把8px写成普通字符串备注。\n\n引用的表示形式以当前实际输出为准,不假设所有发射器都保留完全相同的字面写法。\n\n## 做一次消费端读取\n\n运行python3 check-consumer.py tokens.json,按consumer-map.json核对primary、surface与rounded.sm三行;这是作者项目门槛,非官方CLI或完整DTCG验证器。\n\n解析失败要保留原异常,不用截图看起来相近代替机器读取成功。\n\n## 比较错误类型反例\n\n分别运行包内negative-type.json、negative-unit.json、negative-reference.json,核对作者检查器的实际非零退出与错误路径;正例及三负例的真实stdout和退出码见consumer-check-receipt.json。\n\n不要擅自把负例接受结果说成官方支持该类型。\n\n## 交付交换范围说明\n\n同时提供规范、tokens.json、类型核对表和一个消费端示例。\n\n本课0.4.0实测DTCG包含颜色、圆角、间距和部分typography,但没有源lineHeight=1.6;必须另记导出缺项,不能承诺完整往返或完整UI页面。\n\n身份:输入与参考为作者材料;localCli有实测记录时仅证明对应CLI运行,目标云端与模型推理未执行。\n",
"DESIGN.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",
"export-dtcg.sh": "#!/bin/sh\nset -eu\nnpx -p @google/design.md designmd lint DESIGN.md\nnpx -p @google/design.md designmd export --format dtcg DESIGN.md > tokens.json\n",
"export-valid-dtcg.stdout.txt": "{\n \"$schema\": \"https://www.designtokens.org/schemas/2025.10/format.json\",\n \"$description\": \"Field Kit\",\n \"color\": {\n \"$type\": \"color\",\n \"primary\": {\n \"$value\": {\n \"colorSpace\": \"srgb\",\n \"components\": [\n 0.094,\n 0.29,\n 0.271\n ],\n \"hex\": \"#184a45\"\n }\n },\n \"surface\": {\n \"$value\": {\n \"colorSpace\": \"srgb\",\n \"components\": [\n 0.969,\n 0.957,\n 0.925\n ],\n \"hex\": \"#f7f4ec\"\n }\n }\n },\n \"spacing\": {\n \"$type\": \"dimension\",\n \"sm\": {\n \"$value\": {\n \"value\": 8,\n \"unit\": \"px\"\n }\n }\n },\n \"rounded\": {\n \"$type\": \"dimension\",\n \"sm\": {\n \"$value\": {\n \"value\": 8,\n \"unit\": \"px\"\n }\n }\n },\n \"typography\": {\n \"body-md\": {\n \"$type\": \"typography\",\n \"$value\": {\n \"fontFamily\": \"Arial\",\n \"fontSize\": {\n \"value\": 16,\n \"unit\": \"px\"\n },\n \"fontWeight\": 400\n }\n }\n }\n}\n",
"export-valid-dtcg.stderr.txt": "",
"local-cli-receipt.json": "{\n \"status\": \"executed\",\n \"package\": \"@google/design.md\",\n \"version\": \"0.4.0\",\n \"cases\": [\n {\n \"case\": \"export-valid-dtcg\",\n \"exitCode\": 0,\n \"stdoutSha256\": \"540e363d90635eb37d4def4a78e8bef6d50954bb212db23baa4353555a79120b\"\n }\n ]\n}\n",
"tokens.json": "{\n \"$schema\": \"https://www.designtokens.org/schemas/2025.10/format.json\",\n \"$description\": \"Field Kit\",\n \"color\": {\n \"$type\": \"color\",\n \"primary\": {\n \"$value\": {\n \"colorSpace\": \"srgb\",\n \"components\": [\n 0.094,\n 0.29,\n 0.271\n ],\n \"hex\": \"#184a45\"\n }\n },\n \"surface\": {\n \"$value\": {\n \"colorSpace\": \"srgb\",\n \"components\": [\n 0.969,\n 0.957,\n 0.925\n ],\n \"hex\": \"#f7f4ec\"\n }\n }\n },\n \"spacing\": {\n \"$type\": \"dimension\",\n \"sm\": {\n \"$value\": {\n \"value\": 8,\n \"unit\": \"px\"\n }\n }\n },\n \"rounded\": {\n \"$type\": \"dimension\",\n \"sm\": {\n \"$value\": {\n \"value\": 8,\n \"unit\": \"px\"\n }\n }\n },\n \"typography\": {\n \"body-md\": {\n \"$type\": \"typography\",\n \"$value\": {\n \"fontFamily\": \"Arial\",\n \"fontSize\": {\n \"value\": 16,\n \"unit\": \"px\"\n },\n \"fontWeight\": 400\n }\n }\n }\n}\n"
}
}本地消费端实测
python3 check-consumer.py tokens.json 实际退出0,解析primary=#184a45、surface=#f7f4ec、rounded.sm=8px。错误类型、错误单位、坏引用三负例均实际退出1。
4次原始退出码与stdout SHA;这是作者检查器结果,不能归给官方CLI。
官方CLI本地实测 · 0.4.0
以下stdout由当前包内同字节输入实际执行,退出码单独保留。Stitch云端生成未运行。
clean / exit 0
{
"findings": [
{
"severity": "info",
"message": "Design system defines 2 colors, 1 typography scale, 1 rounding level, 1 spacing token, 1 component.",
"rule": "token-summary"
}
],
"summary": {
"errors": 0,
"warnings": 0,
"infos": 1
}
}
diff-color-only / exit 0
{
"tokens": {
"colors": {
"added": [],
"removed": [],
"modified": [
"primary"
]
},
"typography": {
"added": [],
"removed": [],
"modified": []
},
"rounded": {
"added": [],
"removed": [],
"modified": []
},
"spacing": {
"added": [],
"removed": [],
"modified": []
},
"components": {
"added": [],
"removed": [],
"modified": [
"button-primary"
]
}
},
"findings": {
"before": {
"errors": 0,
"warnings": 0,
"infos": 1
},
"after": {
"errors": 0,
"warnings": 0,
"infos": 1
},
"delta": {
"errors": 0,
"warnings": 0
}
},
"regression": false
}
export-valid-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;
}
应当保留的约束
| token | expectedType | check | expected | actualCliVersion | sourceTypographyLineHeight | dtcgLineHeightPresent | conclusion |
|---|---|---|---|---|---|---|---|
| primary | color | ||||||
| sm | dimension | ||||||
| reference resolution | primary retained | ||||||
| 0.4.0 | 1.6 | False | not full roundtrip |
故意构造的错误样例
| token | type | value |
|---|---|---|
| sm | color | 8px |
| primary | dimension | #184A45 |
先保存真实产品输出,再逐项对照。actualOutput / actualResult 在未执行时保持 not_run,不能把这里的期望值复制成已测结果。