用自然语言在 Figma 中画 UIFigma Console MCP 设计创建工作流完整实战figma_execute 视觉验证闭环【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcpFigma Console MCP 是一个把设计系统当 API 用的 MCP 服务器它能连接 AI 与 Figma实现从自然语言直接创建 UI、管理设计令牌并对设计做可复现的校验。本文带你用figma_execute这个「超级工具」配合视觉验证闭环让 AI 真正在 Figma 里把界面画出来并且画得「好看」。为什么普通 AI 画不好 Figma 界面很多 AI 助手能「说」设计却动不了 Figma 的画布。Figma Console MCP 补上了这一环它通过 WebSocket 把 AI 的指令送进 Figma 桌面端的Desktop Bridge 插件让 AI 能真正创建、修改图层。它的设计创建工作流有两大支柱figma_execute运行任意 Figma Plugin API 代码等于给 AI 一把万能钥匙能创建 Frame、形状、文本、组件并应用自动布局、样式和特效。视觉验证闭环创建 → 截图 → 分析 → 修正 → 再验证让 AI 不只「技术上正确」更「看起来对」。这套组合让设计师、前端、产品经理都能不逐帧手画直接口述出完整界面。准备工作最快配置方法想要 AI 动手画 UI需要先搭好本地模式NPX 或 Local Git。三个前提Node.js 18node --version检查Figma 桌面端不是网页版一个 MCP 客户端Claude Desktop、Cursor、Windsurf 等以 Claude Desktop 为例在 MCP 配置中填入启动命令npx -y figma-console-mcplatest并设置环境变量FIGMA_ACCESS_TOKEN与ENABLE_MCP_APPStrue如下图所示接着在 Figma 桌面端导入~/.figma-console-mcp/plugin/manifest.json由服务器自动生成运行插件后它会扫描端口自动连上。完整步骤见 docs/setup.md。 提示连接成功后可对 AI 说「Check Figma status」看到活跃 WebSocket 连接说明写权限已就绪。figma_executeAI 的万能画笔figma_execute是本项目最核心的「power tool」。它的本质是把一段 JavaScript 直接运行在 Figma 插件上下文里拥有完整的figma全局对象。在 write-tools.ts 中可以看到它的定位与内置守则Execute arbitrary JavaScript in Figmas plugin context with full access to the figma API. Use for complex operations not covered by other tools. Requires Desktop Bridge plugin.它不只是「能写代码」更内置了一套创作纪律保证 AI 画出的是干净、专业的界面放置规范组件必须建在 Section 或 Frame 内绝不堆在空白画布上用parent.insertChild(0, bg)让背景垫底。创建前先截图看现有内容找到干净区域。创建后再截图确认无重叠、无错位。失败重试先删掉半成品空 Frame、孤儿图层再重来。这正是它和普通脚本工具拉开差距的地方——它自带「设计师的自觉」。视觉验证闭环让 AI 自己盯着改光会画还不够figma_execute内置了一条验证指令After creating/modifying visuals: screenshot with figma_capture_screenshot, check alignment/spacing/proportions, iterate up to 3x.配合 figma-tools.ts 里的figma_capture_screenshot直接从插件运行时取当前状态比 REST API 更实时可靠AI 会走一个五步循环Create→ 执行设计代码Screenshot→ 捕获结果Analyze→ 检查对齐、间距、视觉平衡Iterate→ 修复发现的问题Verify→ 最终截图确认这个闭环是「画得像样」的关键AI 不是一次性甩出结果而是像设计师一样反复微调直到画面真的舒服。实战用自然语言驱动画布搭好环境后下面这些提示词就能直接跑起来更多场景见 docs/use-cases.md从零创建Design a login card with email and password fields, a Forgot password? link, and a primary Sign In button. Use 32px padding, 16px border radius, and subtle shadow.组合现有组件Build a dashboard header using the Avatar component, Button components for actions, and a Badge for notifications.迭代微调The spacing feels too tight. Increase the gap to 24px and make the heading larger.AI 会先搜索你的组件库figma_search_components实例化合适的变体figma_instantiate_component再对自定义部分用figma_execute补齐全程自动截图验证。核心模块速查功能源码位置figma_execute执行工具write-tools.ts视觉截图验证figma-tools.tsDesktop Bridge 插件figma-desktop-bridge/安装配置指南docs/setup.md场景与提示词docs/use-cases.md 说明写操作依赖 Desktop Bridge 插件因此本地模式NPX/Local Git与云模式可用纯远程 SSE 为只读。小结Figma Console MCP 把「设计系统」变成了可调用的 API而figma_execute 视觉验证闭环正是它让 AI 从「会说」升级到「会画、会改、会自检」的核心工作流。装上 Node.js、导入 Desktop Bridge 插件用一句自然语言你就能在 Figma 里看到 AI 亲手画出的、看起来真正专业的界面。【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考