DESIGN.md转Tailwind v4:先拦错误规范,再生成能实际使用的@theme 素材身份:作者原创输入/可编辑参考。目标工具未在本轮执行。 先打开 index.html;input.csv 是原始字段,reference.csv 是验收基准,negative.csv 是故意构造的坏样例。 actual-results.csv 保留未测状态,实际执行后再填写。 前置条件: Node.js与npm已可运行;练习只需本地文本文件和官方@google/design.md CLI,不需要Stitch账号或付费生成。 固定当前CLI版本并保留版本号;DESIGN.md仍为alpha格式,升级前先在练习副本复核。 本课给出作者自制规则文件和预期,不把预期JSON冒充已执行的官方CLI返回。 操作步骤: 1. 准备三类规范token 在DESIGN.md写primary颜色、body-md字体以及sm间距,组件引用已有路径。 先固定字体可用来源,未安装的字体不能仅靠一个名字就当加载成功。 2. 设置导出前检查 执行lint并保存报告,发现error时停止写最终theme.css。 不要用export命令的退出0替代lint,因为两者的成功条件不同。 3. 生成独立CSS文件 运行designmd export --format css-tailwind DESIGN.md,把输出保存为theme.generated.css。 不把它误当Tailwind v3的theme.extend JSON导入。 4. 核对命名空间 打开输出,查看实际生成的--color、--font和--spacing相关变量。 预览页按实际变量名使用,不凭记忆拼一个不存在的class。 5. 接入最小测试页面 在作者页面的构建入口引用生成CSS,显示主按钮、正文和固定间距。 若样式未生效,先检查CSS是否被打包,再查token映射,而不是改规范凑画面。 6. 更改一项并重建 只改sm间距后重新lint、export和构建,对照两次元素间距。 主色与字体应保持原样,记录预期变化和非预期漂移。 7. 交付可再生成的产物 保留DESIGN.md、生成CSS、导出命令和测试页,不手改生成文件后丢掉来源。 实际未运行Tailwind构建时,仅交付输入与待验证清单,不标样式测试通过。 验收: 产物是Tailwind v4 @theme而非v3 JSON。 坏引用会被项目的lint步骤阻断。 只改sm时实际间距变化,颜色与字体未漂移。 官方资料: https://github.com/google-labs-code/design.md 图片身份:assets/ 为内置image_gen生成的原创练习输入缩略版,原始文件保留在网站图片来源地址。可编辑SVG为作者原生排版。