DESIGN.md diff教程:分开审阅设计token变化与用途说明变化 素材身份:作者原创输入/可编辑参考。目标工具未在本轮执行。 先打开 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. 保存不可变的旧版本 把基线规则存为DESIGN-v1.md,记录primary与button-primary的引用。 另存副本再修改,不在原文件上覆盖后声称还能回看旧版。 2. 只修改用途说明 在prose版本中把主色说明从“按钮和导航”改为“只用于主要操作”。 所有YAML token保持相同,先用这个版本确认文本变化不等于色值变化。 3. 制造一次真正token变化 在v2中改primary并新增一个指向不存在颜色的悬浮按钮。 保留修改清单,只让这两个变化参与第二轮比较。 4. 运行两次diff 分别比较v1到prose、v1到v2,保存两份原始JSON。 命令的before与after顺序不能反过来,否则新增和移除会颠倒。 5. 检查tokens分类 查看colors的modified和components的added,不用整段JSON长度推断变化大小。 如果说明修改影响了其他结构,回查是否误动了YAML围栏。 6. 审阅findings差额 核对before、after和delta,确认新增坏引用如何影响regression。 diff用新增error或warning判断回归,颜色不同本身并不自动等于失败。 7. 合并人工批准的变更 修复坏引用后再做一次diff,把主色批准理由与真实渲染截图关联。 保留说明版本和最终版本,避免下次把未经批准的色值当既有基线。 验收: before/after顺序与版本文件一致。 颜色和组件差异可定位,说明-only版本不冒充色值变化。 新增问题修复后重跑,报告与批准理由对应。 官方资料: https://github.com/google-labs-code/design.md 图片身份:assets/ 为内置image_gen生成的原创练习输入缩略版,原始文件保留在网站图片来源地址。可编辑SVG为作者原生排版。