figma的MCP相关设置

登录figma.com

登录后点击左上角进入个人的设置页面

点击security，生成token

在生成token时，提议期限、权限都放开

Trae的MCP相关设置

Cursor和Trae类似

实操，从原型到代码

从figma的交流区中随意找个例子，英文建筑师网站原型：

https://www.figma.com/community/design-templates?editor_type=figma

https://www.figma.com/community/file/891374608655348853

直接在figma中打开，并点击右上角的“share”按钮

复制原型链接，默认anyone应该是可以查看的，若关闭需要打开

重头戏来了，开始整！

打开trae或cursor，粘贴链接后，输入：根据此figma链接新开一个目录，生成相关的网站静态html页面，Trae开始干活，这里选用模型还是claude-3.7-sonnet，目前还是它理解及生成效果最好。

自动生成readme.md，内容如下：

页面效果如下：

基本实现了figma的原型设计，比较NB的是，原型为英文网站，大模型自动进行了语义理解，并中文化处理。

彩蛋

最后放一个彩蛋，用trae的能力美化页面，输入：对实现的html页面，设计美化，对缺失的图片，可从Unsplash获取图片素材；使用 iconfont 或FontAwesome图标库让界面更加精美；如果有图表需求，使用 echarts。

咣咣一阵乱整，效果如下：

总之，通过Trae/Cursor、figma的mcp功能，打通原型设计自动到代码的通道，未来想象空间逐步打开。

效果还是不错，心情却莫名有些复杂。。。