展开本页目录
开始前准备什么
- 下载独立练习包，保留 starter、reference 和原始输入。
- 现代浏览器；改本地React/Radix源码需Node/npm，锁文件已附。
- Figma Make kits当前需Full seat和付费计划，并需访问自有Design库；本地组件参考可独立运行。
- 读人工规范并确认原生权限
- 创建Make kit并查看真实提取CSS
- 运行本地真实组件与单位参考
- 切换开关并量测computed style
- 真实键盘与禁用指针负例
- 区分库更新、指南与反向同步
- 重装组件并核对具体数值
starter、任务提示、具体输入、作者人工可运行参考与独立验证；不含账号/密钥/运行时数据库。
按本文环境运行，再对照原始输入和正反例。
1. 读人工规范并确认原生权限
读 inputs/token-spec.json：作者规范规定 padding16px、语义颜色和两个开关状态。该规范与本地组件不是Figma库导出，原生操作需已有Full seat/付费计划及自有库权限。
2. 创建Make kit并查看真实提取CSS
在 Make Settings 创建kit，加入实际npm组件和已发布Design库；读取实际提取的styles.css，再写单位/状态指南，不假定变量名完整保留。
交给目标 AI 工具的任务提示
使用教学库与其实际提取 CSS，不假定变量名或单位完整保留。先读取 styles.css，写 Guidelines：哪些数值需单位转换、语义颜色优先、focus/disabled 行为。生成通知设置面板，真实使用组件包 API，禁止凭空发明 prop。更改 Make CSS 不应宣称同步回 Figma Design。
3. 运行本地真实组件与单位参考
本地参考使用真实React/Radix Switch。要改源码先 npm ci、npm run build；本题人工--space-4是数字16，CSS中通过calc乘1px。
4. 切换开关并量测computed style
在真实浏览器切换“每周摘要”，点量测读取computed style；padding应16px，颜色应rgb(23,48,71)，不能仅凭外观近似验收。
5. 真实键盘与禁用指针负例
Tab/Shift+Tab聚焦可用开关，按空格切换。用真实指针点disabled安全通知不应改变状态，禁用和焦点不能只画成一张静态图。
6. 区分库更新、指南与反向同步
将原生Make提取CSS与Design源规范分别记录，缺失状态补进guidelines。更新库后按官方重新加入库并还原自写指南，Make样式更改不反写Design。
7. 重装组件并核对具体数值
从ZIP干净安装重跑本地组件/数值检查。官方Make kit图片仅展示原生入口；只有实际导入过的库才能称原生提取，不能把人工token参考当同步结果。
怎样确认已经完成
- 对实际提取 CSS 逐条记录名称/单位差异，没有把部分提取说成完整变量同步。
- 面板具体 padding/color/focus/disabled 与参考规范一致，交互真实，组件 props 可编译。
- Make CSS/guideline 修改不声称反写 Design；原生库更新路径与本地参考来源明确。
常见问题
Figma Make 怎么使用自己的设计系统组件和颜色？
在 Make Settings 创建kit，加入实际npm组件和已发布Design库；读取实际提取的styles.css，再写单位/状态指南，不假定变量名完整保留。
Figma 变量导进 Make 后间距为什么没生效？
本地参考使用真实React/Radix Switch。要改源码先 npm ci、npm run build；本题人工--space-4是数字16，CSS中通过calc乘1px。
哪些结果已执行，哪些仍需原生账号验证？
真实React/Radix Switch的开关、键盘、disabled与computed style已按人工独立规范核对；Figma库/Make kit导入未执行，参考不是提取结果。