figma-to-code

Figma to Code

核心原则

使用项目组件库生成代码，而非 Figma MCP 的原始输出。 MCP 返回的代码有语法问题且不使用项目组件，必须经过修复和转换。

前提条件

1. Figma MCP 已连接
2. 可选：项目配置了 local-code-connect（有组件库时）
   • package.json 中有 localCodeConnect.registry 配置
   • 或项目内存在 .figma-registry.json 文件（通过 glob 搜索发现）
   • 组件库已导出注册表文件
3. 强烈推荐：Figma API Token（用于获取完整组件属性）
   • 环境变量 FIGMA_TOKEN 或 CLI --figma-token
   • 或项目 .env 文件中定义 FIGMA_TOKEN=figd_xxx
   • 没有 Token 时约 60% 的组件 props 会为空，严重影响代码准确性
   • MCP 不返回组件 variant/boolean 属性值，REST API 能补全

何时使用

digraph {
    rankdir=TB;
    
    start [label="收到 Figma URL" shape=oval];
    use [label="使用此 Skill" shape=box style=filled fillcolor=lightgreen];
    skip [label="不需要此 Skill" shape=box];
    
    start -> use [label="要求生成代码"];
    start -> skip [label="只是查看设计"];
}

流程概览

digraph {
    rankdir=TB;

    s1 [label="Step 1\n读取项目上下文" shape=box];
    q1 [label="有 localCodeConnect\n配置?" shape=diamond];
    s2 [label="Step 2\n获取设计稿" shape=box];
    s3 [label="Step 3\n修复 MCP Code" shape=box];
    s4 [label="Step 4\nCLI transform" shape=box style=filled fillcolor=lightyellow];
    s5 [label="Step 5\n下载 MCP 资产" shape=box style=filled fillcolor=lightblue];
    s6a [label="Step 6\n根据 JSON + 注册表\n生成代码" shape=box];
    s6b [label="Step 6\n根据 MCP 代码\n生成代码" shape=box];
    s7 [label="Step 7\n验证" shape=box];

    s1 -> q1;
    q1 -> s2 [label="是"];
    q1 -> s2 [label="否"];
    s2 -> s3;
    s3 -> s4 [label="有组件库"];
    s3 -> s5 [label="无组件库"];
    s4 -> s5;
    s5 -> s6a [label="有组件库"];
    s5 -> s6b [label="无组件库"];
    s6a -> s7;
    s6b -> s7;
}

标注说明：

• 黄色：Step 4 仅在有组件库时执行
• 蓝色：Step 5 下载资产是必须步骤，所有流程都要执行

流程

必须按顺序执行，不允许跳过任何步骤。

Step 1: 读取项目上下文

在调用任何 Figma MCP 之前：

1a. 发现组件注册表

按优先级依次检查，任一方式找到即可：

1. 读取 package.json，检查 localCodeConnect.registry 配置
2. 如果第 1 步未找到：用 glob 搜索项目内的 **/.figma-registry.json 文件
3. 如果找到注册表：读取它，了解可用组件及其 props

// package.json 配置示例（可选，但推荐）
{
  "localCodeConnect": {
    "registry": "./node_modules/@xrs/vue/dist/.figma-registry.json"
  }
}