Claude 直接”看懂”设计图吐代码？这个 Vision AI Skill 有点东西

以前设计师给一张截图，前端要吭哧吭哧量像素、调间距、对颜色，半天憋出一个按钮。现在 Claude 装上这个 Skill，你直接把截图丢给它——它用视觉模型把设计图”读”出来，吐出像素级精确的 React 组件代码。

这就是 Design-to-Code，最近在 GitHub 悄悄攒到 163 颗星的 Claude Skill。

它怎么工作的？

流程分四步：

1. 上传设计图
截图、Figma 导出、Sketch、PS 文件都行，手绘草图也能识别（精度稍低）。

2. Vision AI 解析
Claude 的多模态视觉能力上场，提取完整的设计结构：

{
  "layout": { "type": "flex", "gap": "16px", "padding": "24px" },
  "colors": { "background": "#FFFFFF", "accent": "#2196F3" },
  "typography": [
    { "element": "heading", "size": "24px", "weight": "700" }
  ],
  "elements": [...],
  "states": ["default", "hover", "focused"],
  "responsive": { "mobile": {...}, "desktop": {...} }
}

所有间距、颜色、字体、响应式断点，全部量化输出。

3. 生成组件代码
直接输出带 TypeScript 类型定义、Tailwind CSS 类名的生产级 React 组件。每个设计决策都有注释标注来源：

{/* ✨ Extracted: 24px padding, 16px gap */}
<div className="flex flex-col gap-4 p-6">

4. 提取 Design Token
顺手生成 CSS 变量，设计体系直接复用：

--color-primary: #2196F3;
--color-bg: #FFFFFF;
--font-size-h1: 24px;

什么场景最合适？

• 产品卡片：设计师丢来一张商品卡片截图，两分钟转成可复用的 <ProductCard /> 组件
• 营销落地页：参考竞品页面截图，快速克隆核心区块，省去反复对设计稿的时间
• 组件库建设：把现有产品的设计截图批量处理，积累 Design Token 体系
• Design Sprint：边做原型边出代码，不用等前端排期

安装方式

# Claude Code
/plugin install design-to-code@majiayu000/claude-skill-registry

# 或者手动安装
git clone https://github.com/majiayu000/claude-skill-registry.git
cp -R claude-skill-registry/skills/data/design-to-code ~/.claude/skills/

之后直接说「把这个设计转成代码」，Claude 就知道该调这个 Skill 了。

几点感受

1. 精度超预期。间距、色值、圆角这些都能读出来，不是简单 OCR，是理解布局结构。
2. 对 Figma 用户友好。直接导出帧截图就能用，不需要配置任何 Figma MCP。
3. 输出的是开发友好的代码，不是那种满屏 !important 的妥协产物。

设计到代码这条沟，传统上靠的是 Zeplin、Figma DevMode 这种工具，现在 AI 直接填平了。如果你经常在设计稿和代码之间来回倒，这个 Skill 值得加到自己的工具箱里。

GitHub：majiayu000/claude-skill-registry – design-to-code

GitHub: https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/design-to-code