AI+Figma

2025年11月13日 AI

前置条件

登录Figma，左上角点击头像-> 设置-> 安全->生成密钥->勾选需要的权限（不清楚就全部勾选，反正是给AI调用的），复制备用
在编辑器中找到MCP市场，搜索Figma安装
- 提示你输入密钥，粘贴上一步复制的密钥，点击确定进行安装
- 启动时可能会出现报错
- win+r输入cmd打开终端依次输入
  1
  2
  3
  4
  5
  npm cache clean --force
  
  npm install --include=optional sharp
  
  npm install --os=win32 --cpu=x64 sharp
修改编辑器的模型（个人测试似乎得要图片理解的，我选择了Doubao-Seed-Code）
创建一个空白的设计，去社区复制一个模板到你创建的空白设计中
- 看看你的链接是不是：https://www.figma.com/design 开头的，MCP似乎现在只支持 design 这种，其他的可能是没开发API也可能是MCP暂时还没更新
选择你需要写的页面，右击 Copy/Paste as -> Copy link to selection
进入编辑器对话框，选择支持MCP的智能体，选择模型，粘贴地址，并输入提示词：“访问Figma的这个地址，使用html帮我写xxx页面”，回车等待完成
- xxx对应页面上面的标题（最好是唯一的，方便AI读取）
一次成功几乎是不可能的，得反复对话调整，而且AI似乎下图片图标太难成功了，我是让他使用一个我本地的测试图占位，后面再去替换的

全程免费，智能体可以自定义，记得在MCP中勾选好，提示词自行优化