关于 image-to-code
将视觉参考还原为设计系统和界面的设计技能，面向依据参考图构建 UI 的工作。它提取色彩、字体、间距与布局规律，并通过令牌、组件和视觉验证重建，而非复制图像或品牌素材。
主要功能
- 01分析配色、字体、间距和布局
- 02生成三层 DTCG 令牌主题
- 03使用共享基础组件重建界面
- 04检查浅色与深色配色对比度
- 05渲染截图并运行验证流程
适用场景
- 01从参考截图构建设计令牌主题
- 02将参考界面重建为组件化 UI
- 03对照参考图检查渲染结果
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/image-to-code确认已加载。
详细介绍
技能：图像转代码
步骤 0：工具包是否就位？ 此技能会读取工具包中的文件。请检查一次：
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING仅当出现KIT_MISSING时，说明只安装了技能文件夹，这是npx skills add的操作结果。请明确说明这一点，指引用户使用npx ux-ui-agent-skills init或安装插件，然后停止。不要猜测你无法打开的文件内容。
将视觉参考重建为真正的设计系统，而不是一次性的复制品。匹配其系统（色彩／字体／间距语言），切勿照搬受版权保护的图像或品牌素材。
步骤
- 像设计师一样解读参考图。 推断并记录：
- 配色：1 组主导的表面色系、文字颜色、1 种主要操作色 + 至多 1 种强调色（采样色相；不要随意猜测十六进制值）。
- 字体：字体风格（几何／无衬线／衬线）、字号级差、展示文字与正文的对比、字重。
- 间距与密度：基础单位、区块节奏、卡片内边距；宽松还是紧凑。
- 圆角与层次：圆角风格（锐利／柔和／胶囊形）、阴影与细线分隔。
- 布局原型与顺序：有界 Hero／非对称分栏／密集 Bento／编辑式堆叠（
${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md→ Variance Mandate）。
- 借鉴成熟系统，若风格接近：浏览
${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md/python3 ${CLAUDE_SKILL_DIR}/../../../scripts/design_systems.py search <term>，并采用其中的方案来稳定设计决策。 - 根据推断的值构建令牌主题 → 3 层 DTCG（
design-tokens技能）；生成单个theme.css。使用${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py/${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py验证每组颜色搭配（浅色 + 深色）。采样得到的品牌色若未达到 AA 标准，就应调整；审美不能凌驾于 POUR 之上。 - 通过
${CLAUDE_SKILL_DIR}/../../../frameworks/adapter-protocol.md+${CLAUDE_SKILL_DIR}/../../../components/*，以令牌为驱动重建布局和组件：使用一个共享的基础组件层，覆盖全部 8 种状态，接入无障碍功能，不用表情符号（使用 lucide），仅使用一个主题。应用审美原则（design-taste.md），避免设计退化为千篇一律的风格。 - 对照参考图进行验证：渲染并截图，与参考图并排比较；运行
node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs measure_render.mjs、lint_hardcodes.py、taste_audit.mjs和npm run verify。
验证（完成标准）
npm run verify达到 100%（令牌解析成功、浅色 + 深色模式下对比度达到 AA 标准、无硬编码值／表情符号，真实渲染符合 WCAG）。- 重建后的 UI 使用一个推断得出的令牌主题；各区块不使用各自的配色方案。
- 结果截图明显体现参考图的设计语言。
诚实说明：此方法匹配的是设计系统，不是像素级复制。不要复刻参考图中的照片、标志或受版权保护的文案。请替换为你自己的内容或通用占位内容。
评论
支持 Markdown