概述

通过 Figma API/MCP 读取设计稿节点，生成可运行的前端组件代码骨架。

触发词

设计稿转码、figma 转码、figma转代码、设计转组件、稿转代码、Figma MCP

工作流

1. 从环境变量读取 FIGMA_MCP_TOKEN（或本地 MCP 免 token）。
2. 读取 Figma 文件节点（布局/文本/颜色）。
3. 生成对应前端组件（React/Vue 骨架）。
4. 输出组件代码文件。

产出物（生成即用·前端组件代码）

import os, requests

TOKEN = os.environ["FIGMA_MCP_TOKEN"]     # desktop 本地 MCP 可免
FILE_KEY = os.environ.get("FIGMA_FILE_KEY", "YOUR_FILE_KEY")
node = os.environ.get("FIGMA_NODE", "YOUR_NODE_ID")

r = requests.get(f"https://api.figma.com/v1/files/{FILE_KEY}/nodes?ids={node}",
                 headers={"X-Figma-Token": TOKEN}).json()

# 依据节点生成组件骨架（示例输出 React）
comp = """// 由 Figma 节点 %s 生成
export function Component() {
  return <div style={{padding:16}}>/* 按设计稿补充 */</div>;
}
""" % node
open("Component.jsx","w",encoding="utf-8").write(comp)
print("已生成 Component.jsx（骨架，按设计稿补全）")
# 更完整输出建议使用 Figma MCP 直接转码

使用示例

设 FIGMA_FILE_KEY + FIGMA_NODE → 生成 Component.jsx 骨架。

红线（必须遵守）

• token/file key 来自环境变量，禁止硬编码。
• FILE_KEY 用 YOUR_FILE_KEY 占位。

大白话说明

你给 Figma 设计稿链接和 token，我把页面转成前端组件代码，省去手写。