Claude + Figma 代码生成实战：从设计稿到可运行代码的自动化实践

1次阅读

没有评论

共计 2487 个字符，预计需要花费 7 分钟才能阅读完成。

最近参与了一个电商后台项目，设计师小张用 Figma 做了个漂亮的表单页面。开发时我发现两个严重问题：

间距数值对不上 – 设计稿标注的 16px 间距，实际开发用了 12px，因为「看起来差不多」
颜色值不一致 – #F5F5F5 被写成 #FFFFFF，设计师说「反正都是白色系」

这类问题导致我们反复走查修改，原本 3 天的工作拖了一周。这促使我研究自动化代码生成方案。

对比当前主流方案：

GPT-4：代码质量高但价格贵（$0.03/1k tokens）
开源模型 ：需自己微调，设计系统适配成本高
传统转换工具 ：如 Anima，只能生成基础 HTML/CSS

Claude 的优势在于：

免费额度充足（每天 100 次 API 调用）
对设计系统理解准确（能识别 Figma 的 Auto Layout 结构）
输出格式稳定（通过 prompt 可严格约束）

获取 Access Token：

登录 Figma 账号
访问【Account Settings】→【Personal access tokens】
点击【Create new token】，勾选【file_read】权限

权限配置要点：

正式环境建议使用 OAuth2.0
开发阶段可用 Personal Token，但不要上传到 GitHub

关键节点提取逻辑：

// 示例：提取 Frame 节点
const extractFrames = (nodes) => {
  return nodes.filter(node => 
    node.type === 'FRAME' && 
    node.visible !== false
  ).map(frame => ({
    id: frame.id,
    name: frame.name,
    width: frame.absoluteBoundingBox.width,
    children: extractElements(frame.children)
  }))
}

典型响应结构：

{
  "document": {
    "children": [{
      "type": "FRAME",
      "name": "Button",
      "fills": [{"type": "SOLID", "color": {"r": 0.2, "g": 0.4, "b": 0.6}}],
      "children": []}]
  }
}

System Prompt 示例：

 你是一个专业的前端代码生成器，请严格按以下规则输出：1. 使用 Tailwind CSS 语法
2. 组件需支持 dark mode
3. 尺寸单位用 rem，基准 16px
4. 输出格式：```jsx
// 组件代码


用户 Prompt 技巧：- 包含设计稿的 JSON 路径（如："padding: {top: 10, right: 20}"）- 指定技术栈（React/Vue）- 要求添加 ARIA 标签

## 完整代码示例

```javascript
// config.js
const FIGMA_TOKEN = process.env.FIGMA_TOKEN
const CLAUDE_API_KEY = process.env.CLAUDE_API_KEY

export const config = {
  figmaFileKey: 'h3jK8F7qV2pL9xW5',
  outputDir: './src/components',
  framework: 'react'
}

// main.js
import {extractComponents} from './parser.js'
import {generateCode} from './claude.js'

export async function convertFigmaToCode() {
  try {const designTree = await fetchFigmaData()
    const components = extractComponents(designTree)

    for (const comp of components) {await generateCode(comp)
      await delay(1000) // 防止 API 限流
    }
  } catch (error) {console.error('转换失败:', error)
    // 重试逻辑...
  }
}

/** 
 * RGB 转 Hex 颜色值
 * @param {{r: number, g: number, b: number}} rgb - RGB 对象
 * @returns {string} Hex 颜色码
 */
function rgbToHex({r, g, b}) {const toHex = (n) => Math.round(n * 255).toString(16).padStart(2, '0')
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase()}

使用 Redis 缓存设计稿数据（TTL 设置 1 小时）
批量请求节点信息（每次最多 100 个节点 ID）

// 分块处理示例
async function processLargeFile(fileId) {
  const PAGE_SIZE = 50
  let offset = 0

  while (true) {const nodes = await getNodesBatch(fileId, offset, PAGE_SIZE)
    if (nodes.length === 0) break

    await processNodes(nodes)
    offset += PAGE_SIZE
  }
}