展开本页目录
开始前准备什么
- 本地练习资料可免费编辑与检查；执行Stitch需要可访问账号和已配置的官方MCP或SDK，云端额度/计划以账户页面为准。
- 在隔离练习项目操作，保留projectId、screenId和版本；本稿未调用目标云端，不能据此声称生成完成。
- 锁定来源页面
- 记录源样式
- 启动设计系统提取
- 标出推断与实值
- 核验第二页面
- 制作消费样例
- 交付来源台账
1. 锁定来源页面
使用作者活动站的首页与票务页，记录完整URL和查看日期。
页面需要登录时先改用自制公开样本，不向工具提供登录凭据。
2. 记录源样式
从自有源码或浏览器样式记录主色、正文和卡片间距。
截图只能证明外观，不能凭肉眼断言一个渐变像素就是品牌主色。
3. 启动设计系统提取
在Stitch使用URL作为设计上下文，选择提取设计系统的入口。
账户没有该功能时保留未执行状态，不改走已退役的Mixboard或Whisk。
官方界面与功能位置
以下为官方文档配图，具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 标出推断与实值
逐项对比生成的DESIGN.md和源CSS，给无法直接对应的命名加上待确认。
若页面使用多个相近绿色，先按实际用途区分，而非全合并primary。
5. 核验第二页面
用票务页检查主按钮与警示条，查看它们是否应该共享同一语义色。
发现生成规范把警示色当主色时只修正该映射。
6. 制作消费样例
在本地用已确认token制作小卡片和购买按钮。
保留源站与样例的相同文字和宽度，便于对照。
7. 交付来源台账
保存URL、源CSS、规范和待确认项，逐项写出采用理由。
生成画面仅在实际取得后保存，不能用作者样例冒充Stitch结果。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- primary可追溯到源CSS#184A45。
- 警示色#A74718没有被误作品牌主色。
- 推断值和确认值有分栏。
常见问题
Stitch给我提取的主色不对怎么办？
从可访问的自有首页和票务页记录样式基线，再使用实际 URL 提取入口。把生成规范中的色值、字体和间距分别连回源页面，推断项另标；截图近似色不能冒充源码实值。
直接给一个网页地址就能百分百还原品牌规范吗？
不能保证。网页可能有加载、权限和多主题差异；本课要求记录实际读取到的证据，并把推断命名与确认值分开。