展开本页目录
开始前准备什么
- 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. 交付状态对照表
打包规则、状态映射和三张真实界面截图，逐项记录交互。
若只制作了静态示意图，必须写示意，不标鼠标键盘测试通过。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 状态在规范里是三个可定位的独立条目。
- 消费端清楚映射hover/active，释放后回默认。
- 三状态文字尺寸一致，引用无失效。
常见问题
DESIGN.md能直接写一个states对象吗？
将三个按钮状态建为独立组件条目，连接已有语义色引用，先 lint 再在实际页面触发悬停与按下。核对默认态没有被覆盖，不把未知嵌套属性当作已支持状态语法。
为什么三种状态都写了，页面还是只有一种颜色？
规范只定义数据。还要让页面的:hover和:active分别消费对应值，并检查是否有硬编码样式覆盖；不能以文件里存在条目代替实际交互验收。