技能：图像转代码
从视觉参考中重建设计，使其成为真正的设计系统，而非一次性复制品。匹配其系统（颜色/字体/间距语言），切勿复制受版权保护的图像或品牌资产。
步骤
- 像设计师一样阅读参考。 推断并记录：
- 调色板 — 1个主表面系列、文本颜色、1个主要操作色 + 最多1个强调色（取样色相；不要猜测随机十六进制值）。
- 字体 — 字体风格（几何/无衬线/衬线）、字阶跳跃、展示文本与正文的对比、字重。
- 间距与密度 — 基础单位、章节节奏、卡片内边距；宽松与紧凑。
- 圆角与深度 — 圆角语言（锐利/柔和/药丸形）、阴影与发丝线分隔。
- 布局原型与序列 — 全出血英雄区 / 不对称分割 / 便当盒 / 编辑堆叠（
taste/design-taste.md→ 差异原则）。
- 如果接近某个已知系统，则锚定到该系统 — 浏览
taste/aesthetic-systems.md/python3 scripts/design_systems.py search <术语>并采用该方案来稳定决策。 - 根据推断的值构建令牌主题 → 3层 DTCG（
design-tokens技能）；生成一个theme.css。用scripts/contrast.py/scripts/validate_contrast.py验证每对颜色（浅色 + 深色）—— 如果采样的品牌颜色未通过 AA 标准，则进行调整；品味绝不能超越 POUR 原则。 - 通过令牌驱动重建布局和组件，使用
frameworks/adapter-protocol.md+components/*：一个共享的基元层，所有 8 种状态，连接了无障碍（a11y），不使用 emoji（使用 lucide），单一主题。应用品味（design-taste.md）以确保不会退化为通用设计。 - 对照参考进行验证 — 渲染并截图，将结果与参考并排比对；运行
node scripts/measure_render.mjs、lint_hardcodes.py、taste_audit.mjs以及npm run verify。
验证（完成定义）
npm run verify通过率为 100%（令牌解析正确，对比度满足浅色+深色 AA 标准，无硬编码/emoji，真实渲染符合 WCAG）。- 重建的 UI 仅使用一个推断出的令牌主题 — 没有按部分设置的调色板。
- 结果的截图在视觉上与参考的设计语言匹配。
诚实限制：此技能匹配设计的系统，而不是像素级完美的复制。不要复制参考中的照片、徽标或受版权保护的文案 — 用你自己的替代品或通用的占位符替换它们。