3分钟教会你如何figma的原型图一键转化为前端代码(详细教程)原创

第一步，打开自己的创作空间。找到账号设置，选择安全，点击生成zkeon。可输入任意的token名字。然后把权限放开，可以全部设置为可读。点击生成即可得到一串密钥，把这个密钥复制先保存起来。然后在项目中找到想自动生成代码的页面。

右键进行链接复制，把该链接保存起来。打开LIS code, 打开cold body.在右上角点击MCP server按钮。输入figma，点击安装。打开其配置文件，填入刚才的复制的密钥。回到code body输入框。在这里输入让其将链接转为代码的命令。然后等待其自动生成即可。

看到调用MCP并自动生成HTML代码。

找到自动生成的文件，然后用浏览器打开。发现生成的样式和设计图中的相同。验证成功，极大提升工作效率。