DESIGN.md按钮状态：分别定义hover与pressed，检查AI没有覆盖默认按钮

素材身份：作者原创输入/可编辑参考。目标工具未在本轮执行。
先打开 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. 画出三状态目标
准备同一只“加入清单”按钮的默认、hover和pressed示例，不改变文字与宽度。
先注明状态差别仅限背景与边框，避免把三张图当三个按钮类型。

2. 创建独立组件条目
在components中分别写button-primary、button-primary-hover和button-primary-pressed。
官方建议状态用相关名称的独立条目，不假定存在任意嵌套states语法。

3. 复用语义色引用
为三个状态连接已定义的primary及状态色，检查每个路径。
不要在一个条目里反复覆盖backgroundColor，导致最终只有最后一值。

4. 读取解析与警告
运行lint，查看组件条目和未知属性提示。
若为状态添加了自定义说明，单独注明那不是标准可消费属性。

5. 在作者页面实现映射
让演示页的:hover和:active读取各自状态token，并用键盘触发按钮。
这部分是消费端实现，不能说单写DESIGN.md就自动完成交互。

6. 确认默认状态可恢复
鼠标离开、按键释放后检查默认色是否回来。
若状态粘住，先查页面事件或CSS映射，不把问题归给颜色生成。

7. 交付状态对照表
打包规则、状态映射和三张真实界面截图，逐项记录交互。
若只制作了静态示意图，必须写示意，不标鼠标键盘测试通过。

验收：
状态在规范里是三个可定位的独立条目。
消费端清楚映射hover/active，释放后回默认。
三状态文字尺寸一致，引用无失效。

官方资料：
https://github.com/google-labs-code/design.md/blob/main/docs/spec.md

图片身份：assets/ 为内置image_gen生成的原创练习输入缩略版，原始文件保留在网站图片来源地址。可编辑SVG为作者原生排版。