在 Claude Code / Cursor / Codex 里聊天，让 Agent 直接在你的 Figma 画布上画稿、改稿、出图。
English · 简体中文
liaocao-figmaX 是一个跨 AI 客户端的 Skill（技能包），把"和 AI 聊设计需求 → AI 在 Figma 里把稿子画出来"这条路打通成一份可分发、可复用、可定制的工作流。
它依赖两个 MCP 服务：
- Figma 官方 MCP（读）—— 解析 Figma URL、获取截图、读设计令牌/组件/变量。
- figma_editor MCP + Figma 插件（写）—— 在画布上创建/修改节点、自动布局、变量、组件、导出图片。
你（聊天）
↓
Claude Code / Cursor / Codex
↓
本 Skill（指挥工作流）
↓
Figma 官方 MCP（看） ＋ figma_editor MCP（画）
↓
Figma 桌面端画布
- 经常在 Figma 里做公众号封面 / 小红书卡片 / 海报 / Banner 的内容创作者。
- 想用 AI 加速从概念到 mockup 的产品/独立开发者。
- 已经在用 Claude Code、Cursor、Codex 做开发，想把"出图"也接进对话流。
liaocao-figmaX/
├── SKILL.md # 技能主体，Agent 触发后读它
├── README.md # 本文件
├── AGENTS.md # Codex CLI 入口
├── .claude/skills/figma-access/ # Claude Code 项目级技能
│ └── SKILL.md
├── .cursor/rules/
│ └── figma-access.mdc # Cursor 规则
├── scripts/
│ ├── check_connection.sh # 一键自检 MCP + 插件
│ └── install_guide.md # 安装详解
├── assets/
│ ├── design.md # 设计系统主张模板
│ └── checklist.md # 完工自检清单
├── references/ # 用户参考资产库（可自由扩展）
│ ├── layouts.md # 各场景常用版式与尺寸（自带）
│ ├── brand-*.md # 你自己的品牌设计规范（可选）
│ ├── logo-*.svg / *.png # 品牌 Logo 素材（可选）
│ ├── palette-*.md # 自定义色板 / 字体清单 等（可选）
│ └── assets/ # 任意图片 / 图标 / 插画子目录（可选）
├── commands/
│ ├── faq.md # 高频问题速查
│ ├── optimize.md # 用户驱动的技能优化
│ └── save_template.md # 沉淀模板
└── figma_editor/ # 依赖项的本地副本（仅作参考，发布时剥离）
figma_editor/在打包发布时会被剥离，作为独立 GitHub 仓库分发。Skill 包里只保留安装引导。
详见 scripts/install_guide.md。最短路径：
git clone https://github.com/liaocaoxuezhe/figma_editor.git在 Figma Desktop App 里 Plugins → Development → Import plugin from manifest…，选 figma_editor/figma-plugin/manifest.json。
把 MCP 加到你用的客户端配置里：
{
"mcpServers": {
"figma_editor": {
"command": "npx",
"args": ["-y", "figma_editor"]
}
}
}| 客户端 | 配置文件位置 |
|---|---|
| Claude Code | ~/.claude/settings.json 或项目根 .mcp.json |
| Cursor | ~/.cursor/mcp.json |
| Codex | ~/.codex/config.toml 或 ~/.codex/mcp.json |
按 Figma 官方 MCP 文档 给你的客户端加一个 plugin:figma:figma。Claude Code 用户可以直接 /plugin install 自带的 figma 插件。
把整个 liaocao-figmaX/ 目录放到你的项目里，或打包后通过对应客户端的 Skill/Rule 安装机制装进全局。
打包：
# 在 skill-creator 目录下
python scripts/package_skill.py /path/to/liaocao-figmaX会生成 liaocao-figmaX.zip，分发给其他用户解压使用即可。
在你的 AI 客户端里聊：
帮我用 figma_editor 检查一下连接状态。
Agent 会调用 figma_editor.get_connection_status。期望响应：
{ "connected": true, "pluginConnected": true }如果 pluginConnected: false，去 Figma 桌面端打开插件面板再试。其他报错见 commands/faq.md。
直接说人话：
做一张公众号封面，主题是"AI Agent 自动化清单"，
风格参考极简编辑、黑白配色，主标题占满左半边，右半边留给一段 quote。
Agent 会按 SKILL.md 的工作流：先读 references/layouts.md 选 900×383 公众号封面尺寸 → 读 assets/design.md 定调风格 → 用 figma_editor 创建画框、文本、变量 → 截图自检 → 必要时按你的反馈迭代 → 最后 export_as_image 给你出 PNG。
完成一次任务后，可以手动触发：
commands/faq.md—— 装不上 / 连不上 / 字体不对 / 变量不生效，先翻这里。commands/optimize.md—— 让 Agent 复盘本次执行过程，生成针对你的工作流的改进补丁。commands/save_template.md—— 满意的画稿一键沉淀成assets/templates/下的可复用模板。
详见每个命令文件本身。
| 客户端 | 支持情况 |
|---|---|
| Claude Code | 原生 Skill 系统，自动加载 .claude/skills/figma-access/ |
| Cursor | 通过 .cursor/rules/figma-access.mdc 加载 |
| Codex CLI | 通过仓库根 AGENTS.md 加载 |
三处入口指向同一份正文（本仓库根 SKILL.md + references/ + assets/），不需要分别维护。
- figma_editor —— 本 Skill 依赖的 Figma 写入桥（MCP + Figma 插件）。基于 figsor 二次开发。
- Figma 官方 MCP —— 读取 Figma 文件上下文。
references/ 不只是版式库，更是你自己的参考资产仓库。本 Skill 会在每次动手前主动扫读，看到品牌资产就直接引用，不用你每次都重新解释。
把图片上传到 Figma（set_image_fill）之前，Agent 会先读取原始宽 × 高，以便给容器设置正确的比例，避免主体被裁切或出现意外留白。
macOS（首次使用先安装：brew install imagemagick）：
identify -format "%wx%h\n" /path/to/image.jpg
# 输出示例：1920x1080Windows（两种方式二选一）：
# 方式一：PowerShell 内置，无需安装
Add-Type -AssemblyName System.Drawing
$img = [System.Drawing.Image]::FromFile("C:\path\to\image.jpg")
Write-Output "$($img.Width)x$($img.Height)"
$img.Dispose()# 方式二：已安装 ImageMagick 时（winget install ImageMagick.ImageMagick）
magick identify -format "%wx%h\n" C:\path\to\image.jpg拿到尺寸后的用法：
- 容器需要与图片等比：直接用图片宽高创建 frame，
scaleMode: "FILL"。 - 容器尺寸固定（如公众号封面 900×383）：计算宽高比，选
"FIT"保主体完整，或选"FILL"并说明裁切范围。
可以放进去的东西（命名清晰即可，文件数量随意）：
| 类型 | 示例文件 | 怎么用 |
|---|---|---|
| 版式与尺寸 | layouts.md |
Agent 按产物形态挑模板 |
| 品牌规范 | brand-acme.md、brand-personal.md |
主色 / 辅色 / Logo 用法 / 文案口吻 / 禁用样式 |
| Logo 素材 | logo-acme.svg、logo-acme-mono.png |
落画布时直接 set_image_fill / create_svg_node 引用 |
| 色板 | palette-warm.md、palette-dark.md |
单独维护的十六进制色值，先建 variable 再 bind |
| 字体清单 | typography-zh.md |
中英文字体阶梯、商用授权情况、fallback |
| 图片素材 | references/assets/<brand>/... |
任意图片 / 图标 / 插画子目录 |
| 文案口吻 | voice-xxx.md |
写文案时的语气、长度、禁用词 |
工作流参考 SKILL.md 第 2.3 节，优先级：references/ 你自己的资产 > 当次给的参考站/截图 > assets/design.md 默认主张。
Issue 与 PR 欢迎提到本仓库。如果你定制出了好看的版式或设计系统主张，欢迎 PR 到 references/layouts.md 与 assets/design.md。注意：你自己的私人品牌资产（references/brand-*.md、references/logo-* 等）建议放在自己 fork 的仓库里，不要 PR 回主仓。
MIT