展开本页目录
开始前准备什么
- 本地练习资料可免费编辑与检查；执行Stitch需要可访问账号和已配置的官方MCP或SDK，云端额度/计划以账户页面为准。
- 在隔离练习项目操作，保留projectId、screenId和版本；本稿未调用目标云端，不能据此声称生成完成。
- 列出采样组件
- 运行官方提取工作流
- 归并重复实值
- 保留组件例外
- 校验规范结构
- 做反向追溯
- 交付来源矩阵
1. 列出采样组件
准备InfoCard、AlertCard与ActionButton的源码，各保留颜色和间距实值。
先列出文件路径，避免代理只读根样式漏掉组件覆盖。
2. 运行官方提取工作流
按extract-design-md读取组件、主题配置和样式文件，再形成.stitch/DESIGN.md。
这是分析源码，不需要先重新生成整个应用。
3. 归并重复实值
把InfoCard与按钮共用的16px归到常规间距；primary=#184A45仅溯源ActionButton，InfoCard的#F7F4EC归为surface，记录各自使用位置。
AlertCard的橙色是业务警示，不按出现次数强行归入主色。
官方界面与功能位置
以下为官方文档配图，具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 保留组件例外
为AlertCard的12px间距写明适用范围，常规卡片仍为16px。
不要为追求整齐把所有组件padding一律改成同一值。
5. 校验规范结构
使用当前DESIGN.md schema校验颜色、尺寸和引用。
prose里的例外说明不等于已生成可消费token，必要时补对应条目。
6. 做反向追溯
随机选一个token，从规范找回原文件和属性位置。
找不到来源的值先标推断，不写成源代码本来如此。
7. 交付来源矩阵
保存规范、组件路径和例外清单，交给下一个设计任务。
源码未修改，不把提取报告称作组件迁移完成。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 共享绿色只有一个语义token。
- AlertCard的橙色与12px例外保留。
- 每个主要token可回到源码使用位置。
常见问题
从代码提取设计系统会自动改我的网页吗？
准备 InfoCard、AlertCard 与 ActionButton 的真实源码，按官方提取流程读取主题与样式。把重复值归为语义 token，保留局部例外与代码位置；手写规范不能冒充工具自动提取结果。
出现最多的颜色就是primary吗？
不是。频率可辅助发现重复，但语义仍要看按钮、文字与警告用途；本课要求把使用位置记入矩阵后再命名。