🎨
Figma
设计转代码 开发工具安装命令
npx clawhub@latest install figma
安装说明
1
确认环境
确保已安装 Node.js 22+ 和 OpenClaw。在终端运行 openclaw --version 确认 OpenClaw 正常工作。
2
执行安装
在终端中运行上方安装命令，ClawHub 会自动下载并安装 Figma 到 ~/.openclaw/skills/ 目录。
3
验证安装
运行 openclaw skills list 查看已安装技能列表，确认 Figma 已出现在列表中。
4
配置参数（可选）
根据下方介绍中的配置说明，在 ~/.config/openclaw/openclaw.json5 中添加技能的配置项。
手动安装方式：将 Skill 文件夹复制到
~/.openclaw/skills/ 或项目目录下的 skills/ 文件夹，确保文件夹中包含 SKILL.md 文件。
读取Figma设计文件和组件信息
提取样式变量和设计Token
将设计稿转换为可用的代码结构
详细介绍
Figma MCP Server 让 AI 能够直接读取和理解你的 Figma 设计文件，将设计信息无缝转化为代码实现的基础。
核心功能
- 设计文件读取：直接访问 Figma 文件中的页面、画板和图层结构，获取完整的设计层级信息
- 组件与样式提取：读取设计系统中的组件定义、颜色变量、字体样式和间距 Token，确保代码与设计一致
- 布局信息解析：解析 Auto Layout、约束和响应式布局设置，帮助 AI 生成准确的 CSS/样式代码
配置说明
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp"],
"env": {
"FIGMA_API_KEY": "你的Figma个人访问令牌"
}
}
}
}
使用场景
- 从 Figma 设计稿自动生成前端组件代码
- 提取设计 Token 同步到代码仓库的样式系统
- 让 AI 理解设计意图，在编码时保持视觉一致性
- 设计评审时快速获取设计规范数据