先拦错误规范,再生成能实际使用的@theme
本页展示随包原生输入和验收参考。目标产品运行状态:未运行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| group | key | value |
|---|---|---|
| colors | primary | #184A45 |
| typography | body-md.fontSize | 16px |
| spacing | sm | 8px |
| spacing | sm-v2 | 12px |
生成独立CSS文件
reference.csv:作者验收映射,不是目标API回包
| format | consumer | gate | expectation |
|---|---|---|---|
| css-tailwind | Tailwind v4 @theme | ||
| json-tailwind | Tailwind v3 theme.extend | ||
| lint errors | stop export pipeline |
规则与输入文件原文
{
"inputRows": [
{
"group": "colors",
"key": "primary",
"value": "#184A45"
},
{
"group": "typography",
"key": "body-md.fontSize",
"value": "16px"
},
{
"group": "spacing",
"key": "sm",
"value": "8px"
},
{
"group": "spacing",
"key": "sm-v2",
"value": "12px"
}
],
"referenceRows": [
{
"format": "css-tailwind",
"consumer": "Tailwind v4 @theme"
},
{
"format": "json-tailwind",
"consumer": "Tailwind v3 theme.extend"
},
{
"gate": "lint errors",
"expectation": "stop export pipeline"
}
],
"invalidRows": [
{
"input": "{colors.missing}",
"exportSucceeded": true,
"error": "success code does not imply clean lint"
},
{
"format": "json-tailwind",
"consumer": "Tailwind v4 CSS import",
"error": "wrong format"
}
],
"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 \"key\": \"primary\",\n \"value\": \"#184A45\"\n },\n {\n \"group\": \"typography\",\n \"key\": \"body-md.fontSize\",\n \"value\": \"16px\"\n },\n {\n \"group\": \"spacing\",\n \"key\": \"sm\",\n \"value\": \"8px\"\n },\n {\n \"group\": \"spacing\",\n \"key\": \"sm-v2\",\n \"value\": \"12px\"\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考,非模型返回\",\n \"rows\": [\n {\n \"format\": \"css-tailwind\",\n \"consumer\": \"Tailwind v4 @theme\"\n },\n {\n \"format\": \"json-tailwind\",\n \"consumer\": \"Tailwind v3 theme.extend\"\n },\n {\n \"gate\": \"lint errors\",\n \"expectation\": \"stop export pipeline\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例,非实际错误回包\",\n \"rows\": [\n {\n \"input\": \"{colors.missing}\",\n \"exportSucceeded\": true,\n \"error\": \"success code does not imply clean lint\"\n },\n {\n \"format\": \"json-tailwind\",\n \"consumer\": \"Tailwind v4 CSS import\",\n \"error\": \"wrong format\"\n }\n ]\n}\n",
"case.md": "# DESIGN.md转Tailwind v4:先拦错误规范,再生成能实际使用的@theme\n\nDESIGN.md转Tailwind v4要把规范通过与文件导出分开看。官方export即使存在lint findings也可能成功,本课先阻断坏引用,再在小页面中确认生成的色值和间距真的生效。\n\n## 准备三类规范token\n\n在DESIGN.md写primary颜色、body-md字体以及sm间距,组件引用已有路径。\n\n先固定字体可用来源,未安装的字体不能仅靠一个名字就当加载成功。\n\n## 设置导出前检查\n\n执行lint并保存报告,发现error时停止写最终theme.css。\n\n不要用export命令的退出0替代lint,因为两者的成功条件不同。\n\n## 生成独立CSS文件\n\n运行designmd export --format css-tailwind DESIGN.md,把输出保存为theme.generated.css。\n\n不把它误当Tailwind v3的theme.extend JSON导入。\n\n## 核对命名空间\n\n打开输出,查看实际生成的--color、--font和--spacing相关变量。\n\n预览页按实际变量名使用,不凭记忆拼一个不存在的class。\n\n## 接入最小测试页面\n\n在作者页面的构建入口引用生成CSS,显示主按钮、正文和固定间距。\n\n若样式未生效,先检查CSS是否被打包,再查token映射,而不是改规范凑画面。\n\n## 更改一项并重建\n\n只改sm间距后重新lint、export和构建,对照两次元素间距。\n\n主色与字体应保持原样,记录预期变化和非预期漂移。\n\n## 交付可再生成的产物\n\n保留DESIGN.md、生成CSS、导出命令和测试页,不手改生成文件后丢掉来源。\n\n实际未运行Tailwind构建时,仅交付输入与待验证清单,不标样式测试通过。\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",
"DESIGN-spacing-v2.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: 12px\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-invalid.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",
"export-gated.sh": "#!/bin/sh\nset -eu\nnpx -p @google/design.md designmd lint DESIGN.md\nnpx -p @google/design.md designmd export --format css-tailwind DESIGN.md > theme.css\n",
"export-invalid-css.stdout.txt": "@theme {\n --color-primary: #184a45;\n --color-surface: #f7f4ec;\n --font-body-md: \"Arial\";\n --text-body-md: 16px;\n --font-weight-body-md: 400;\n --radius-sm: 8px;\n --spacing-sm: 8px;\n}\n",
"export-invalid-css.stderr.txt": "",
"export-valid-css.stdout.txt": "@theme {\n --color-primary: #184a45;\n --color-surface: #f7f4ec;\n --font-body-md: \"Arial\";\n --text-body-md: 16px;\n --font-weight-body-md: 400;\n --radius-sm: 8px;\n --spacing-sm: 8px;\n}\n",
"export-valid-css.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-invalid-css\",\n \"exitCode\": 0,\n \"stdoutSha256\": \"9eccabc49a1393d7f10f7c9bb4d23bc0eeca0ce54d52a2d8d9c095f1ef374be3\"\n },\n {\n \"case\": \"export-valid-css\",\n \"exitCode\": 0,\n \"stdoutSha256\": \"9eccabc49a1393d7f10f7c9bb4d23bc0eeca0ce54d52a2d8d9c095f1ef374be3\"\n }\n ]\n}\n",
"theme.generated.css": "@theme {\n --color-primary: #184a45;\n --color-surface: #f7f4ec;\n --font-body-md: \"Arial\";\n --text-body-md: 16px;\n --font-weight-body-md: 400;\n --radius-sm: 8px;\n --spacing-sm: 8px;\n}\n"
}
}应当保留的约束
| format | consumer | gate | expectation |
|---|---|---|---|
| css-tailwind | Tailwind v4 @theme | ||
| json-tailwind | Tailwind v3 theme.extend | ||
| lint errors | stop export pipeline |
故意构造的错误样例
| input | exportSucceeded | error | format | consumer |
|---|---|---|---|---|
| {colors.missing} | True | success code does not imply clean lint | ||
| wrong format | json-tailwind | Tailwind v4 CSS import |
先保存真实产品输出,再逐项对照。actualOutput / actualResult 在未执行时保持 not_run,不能把这里的期望值复制成已测结果。