一、前端开发工程师之痛

在日常软件开发过程中，开发人员与产品经理之间，总是一对欢喜冤家。鉴于前端页面修改的频繁，所以这个“矛盾”在前端工程师与产品经理的原型图之间，显得格外突出。
前端工程师需要把产品经理的Figma原型图转化为前端代码，这看似是开发流程中顺理成章的环节，实则是一项低效率、极度消耗时间与体力的工作。
首先，仅 “理解设计” 这一步就暗藏大量隐性成本。产品经理的Figma原型图往往包含成百上千个元素，从导航栏的图标间距到表单的输入提示样式，从弹窗的阴影层级到列表的hover动效，每一个细节都需要工程师逐像素核对。整个过程，都需要前端开发同学反复与产品、设计沟通确认，光是对齐需求就可能占用大半天时间。
进入代码编写阶段后，体力消耗更是成倍增加。工程师需要用HTML搭建页面骨架，再通过 CSS精准还原设计稿的视觉效果。比如为了让按钮的渐变色与原型图完全一致，可能要反复调整色值参数。一些看似简单的效果，往往需要编写数十行甚至上百行 css代码，且每一步都要手动测试是否符合预期。
更棘手的是，一旦产品经理调整设计方案，比如临时修改某个模块的布局，或是更换一套字体样式。工程师此前编写的代码可能需要大面积重构。
这种 “重复劳动” 不仅拉长了开发周期，还会让工程师在机械性的调整中逐渐消耗精力。长时间盯着屏幕核对像素差异、在代码与设计稿之间反复切换、为修复微小的视觉偏差调试几小时，这些场景早已成为前端工程师的工作常态，也让这项工作成为开发流程中难以忽视的 “时间黑洞”。

二、提效之解：CodeBuddy

CodeBuddy是由腾讯云自研的一款开发编程提效辅助工具，基于腾讯混元 + DeepSeek 双轮模型驱动，构建对开发者友好，好用易用的代码助手，为开发者提供AI技术问答、Craft软件编码智能体、智能代码补全、单元测试、智能评审、代码修复等Agent智能体拓展能力，兼容 MCP 开放生态，并可支持团队知识库管理、自定义智能体与指令管理、多模型接入、企业账号集成等功能，辅助开发者提升编码效率和质量，助力研发团队提质增效。

全量MCP广场，可见：https://cloud.tencent.com/developer/mcp?from=article

在这个场景中，我们使用CodeBuddy的优质MCP来解决上面的痛点。
CodeBuddy MCP是一款基于MCP（Meta Copilot Protocol）的智能工具，CodeBuddy MCP提供了多种功能的MCP。
其中，Framelink Figma MCP Server专门为Figma设计稿到前端代码的自动化转换而设计。它通过深度解析Figma文件的层级结构、样式属性和组件关系，结合AI能力生成高质量的前端代码，显著减少手动还原的工作量，同时保证设计还原度与代码可维护性。

三、具体实现过程

1. 安装CodeBuddy

此处以VSCode为例，如下图所示。
先点击Extensions按钮，搜索框中输入CodeBuddy，点击Install按钮进行安装。安装完成后，会在Extensions按钮之下，会多出一个CodeBuddy按钮，表示CodeBuddy安装成功。

2. 获取MCP Server - Framelink Figma

获取CodeBuddy MCP也非常方便，只需点击右上角MCP市场，搜索Figma，看到Figma MCP Server，点击Install。


安装完成后，点击Installed选项卡，再点击+，看到MCP配置文件。其中红色框内的"YOUR-KEY"是需要被替换的内容（需要替换为用户的Figma Token）

3. 获取 Figma 的 Key

登录 Figma，进入设置选项

在弹出来的配置页面中，依次点击Security，Generate New Token

在下个页面当中，输入一个token name(任意)，设置过期时间，将权限可以都先修改为可读，最后点击 Generate Token

看到系统生成了一个token，点击copy按钮，完成复制操作

4. 修改CodeBuddy的MCP配置文件

回到CodeBuddy中，选择对应的位置，进行粘贴替换

5. 用MCP完成代码自动生成

在Figma中，选择需要转为代码的页面，右键进行链接复制

回到VScode当中，点击CodyBuddy，输入：

https://www.figma.com/design/LK8lb8OasxVIhIeioKD8kL/Figma-basics?node-id=4368-321123&t=dnKdiYiCZO4KFjJv-4
根据提供的figma链接，生成对应的html页面，要求css也放在html当中，且文件名为figmatocode.html

然后，CodeBuddy就开始调用对应的MCP，将我们需要转为代码的页面，进行代码生成，如下图所示：

生成完成后，CodeBuddy会提示生成的文件，以及对应的目录，至此，我们没有自己写一行代码，就已经得到了我们期望页面的HTML代码，达到了让前端工程师提升效率，事半功倍的效果。

结果验证

根据CodeBuddy返回的本地路径，可以用浏览器打开页面查看效果

看到生成的效果与我们在Figma当中的页面原型图相差无几，经过上手微调，即可完成一次前端页面生成的工作，整个过程也就3分钟左右。

写在最后

本文展示了使用腾讯CodeBuddy，利用MCP的优质插件，极快地完成了Figma原型图到前端代码转化的过程，大大提升了前端工程师的工作效果，从此不需要再花大量时间做堆样式，写脚本的重复工作。

通过CodeBuddy提效，前端开发过程在AI的加持下，从几小时的工作量，缩短为几分钟，眼见为实。让人不禁再次感叹，科技是第一生产力。也由此可见，在AI浪潮下，找到好的AI工具，享受AI为我们在工作，生活中带来的便利，是何其重要的事。