CodeBuddy+Figma+MCP，我指挥AI写代码，老板夸我鱼摸得好

先吐槽一下添加mcp服务流程

初次尝试添加MCP服务时，我着实有点摸不着头脑。印象中，这类功能应该会有一个类似"MCP服务市场"的入口，让用户可以方便地选择和添加服务。然而，在这个IDE里，我并没有找到类似的功能。

在Craft模式下，倒是有个Config MCP的按钮。点击之后，看起来似乎可以添加MCP服务，但仅支持手动配置。

点开后，界面上没有我预想中的服务市场，只有一句略带"挑衅"意味的提示：Want to add MCP Servers outside the market? (想添加市场外的MCP服务吗？) ------ 想的话就点右边配置吧！这不废话么，我压根没得选，你根本就没给我提供"市场内"的选项啊！

我之所以放这么多截图，就是想让你体会一下空洞迷茫的感觉。。

在点击了Manual configuration后，左侧弹出了一个空的配置文件。

没错，就是一个空空如也的配置文件，连个注释提示都没有，这体验真是让人服气。无奈之下，我只能硬着头皮开始尝试编写配置。这时，它终于给出了一点提示，提供了一个默认配置示例：

json 复制代码

{
  "mcpServers": {
    "figma": {
      "url": "https://figma.codebuddy.app",
      "token": "figma-token"
    }
  }
}

干活了，figma MCP服务，站起来！

我根据本地服务的地址，修改了上面的配置。神奇的事情发生了，右边的服务列表里，Figma服务自动出现了！

最终配置如下：

能看见配置是这样的：

json 复制代码

{
  "mcpServers": {
    "figma": {
      "url": "http://127.0.0.1:3333/sse"
    }
  }
}

此时，我用了召唤咒语："Figma MCP服务，站起来！"它便立刻开足马力，在几分钟内就将一个设计稿转化成了代码。看到这一幕，初级前端工程师恐怕要当场"阵亡"，高级前端工程师可能也要单膝跪地，吐出一口老血。

看这个配置，你可能已经猜到了，这是一个本地服务。所以，我刚刚其实是用了倒叙的手法。

那么，这个本地Figma MCP服务究竟该如何部署呢？且看下文分解。

如何部署figma MCP本地服务

1、获取Figma的`token`

首先，你得拿到一个figma官网的token。

填写申请信息在弹窗点击Security选项，再点击Generate new token，截止日期写长一点，下面的全选择 read-only。

保存token 把生成的token复制下来备用即可。

2、本地运行`Figma-MCP`

从github下载Figma-Context-MCP Figma-Context-MCP下载地址，在命令行输入:

xshell 复制代码

git clone https://github.com/GLips/Figma-Context-MCP.git

把源码下载到本地保存，安装一下依赖。

修改.env.example 在项目的根目录下，找到.env.example，将文件命名改为.env，将前面保存的key放到FIGMA_API_KEY

启动服务运行npm run dev命令，可以看到 figma MCP Server本地服务已经启动，端口是3333。

获取figma资源link并生成源码

点击对话框的这个按钮，

选择一个你figma资源，打开后右键复制资源link

复制完成后，你会在对话框看见与此相关的链接信息，同时在对话框内会自动生成一句命令：Implement selected figma content （执行选定的Figma内容）。默认情况下，它会用原生的HTML/CSS/JS来实现设计稿。当然，你也可以添加自己的要求，比如指定使用Vue 3等框架来实现。

前端的工作才刚开始

写到这里，你可能会觉得前端要失业了，但我想说，前端的工作其实才刚刚开始。

不可否认，这个工具确实能省掉前端开发近三分之一的工作量。一个典型的前端项目，无非是搭框架、画页面、对接口、写交互这几大块。MCP帮忙搞定了从UI到源码的"画页面"工作。如果未来再出现一个"接口对接MCP"，能自动完成数据联调，那前端的工作就又少了三分之一。最后，似乎只剩下了交互逻辑的实现。而这一部分被AI接管，或许也只是时间问题。

前端的亮点还是要交给高级开发

然而，即便未来MCP能完成大部分前端工作，那些真正考验水平、决定产品体验的亮点，依然要交给高级前端工程师才靠谱。

根据我使用各种AI模型的经验，它们生成的代码有时并非你真正想要的，甚至可能为了修复一个小问题而引入一个更大的问题。如果你不是经验丰富的专业开发者，就算有再得力的AI编程助手，也可能随时手忙脚乱。这就好比F1方程式赛车，赛车性能再强，车手的技术若不专业，也可能在几秒之内就翻车出局。