天度 AI 实战库浏览全部案例 ↗

让智能体在 Figma 中进行设计

一个CLI工具,允许编程智能体在Figma中创建图形、文本、框架和组件,从而让智能体能够构建布局与组件系统。

具体怎么做
Figma使用CLI通过Chrome DevTools Protocol与Figma桌面应用连接,并通过Figma插件API执行命令。智能体要么逐一发出命令,要么将JSX代码直接传入渲染命令中。它们能够构建框架、文本、图标、网格布局、组件及变体。系统为智能体提供了SKILL.md文件以及包含90多种工具的MCP服务器。
做到了什么
演示中展示了按钮组件和 Tailwind UI 日历。README 中未提供任何基准测试数据。Stdin JSX 不包含任何逻辑,因此组件与变体需要 .figma.tsx 文件。
上手要点
Figma 支持 126+ 个块远程调试,因此你需要使用守护进程的管道模式(运行 `figma-use daemon start --pipe`),或者按照 README 中建议的 OpenPencil 方案操作。

你可以这样试

使用 Claude Code

使用如 figma-use 这样的 Figma CLI 工具,在我的 Figma 文件 [文件链接] 中创建[设计类型,例如定价页面布局],包含框架、文本以及可复用的组件(如按钮、卡片等)。遵循以下风格:[颜色、字体、间距]。当布局与组件出现在新页面上时即为完成,并说明你所制作的内容。请勿修改或删除我现有的页面。