基于Claude Code + Figma MCP的组件开发尝试

发表于 分类于

Figma前几天推出了Remote Mcp Server，与之前只能在本地Figma客户端内使用的本地MCP不同，这次可以调用远程Figma MCP Server来进行开发了。不过Figma 的远程 MCP 服务同样还是需要Pro以上会员用户才能使用，如果你没有会员的话中国暗网“闲鱼”会帮你解决。

下面给大家介绍一下安装和使用方法，以及分享一下我自己结合真实设计稿的组件开发尝试。

安装Figma Remote MCP

1. Claude Code

对于已经安装了 Claude 的小伙伴来说，直接一条命令即可安装成功

1
2
# 官方的Claude命令
claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

安装成功后，需要进入Claude后完成账户连接

找一个目录，进入后执行Claude命令

1
2
# 官方的Claude命令
claude

然后输入 /mcp 命令，选择Manage MCP servers命令，然后可以看到所有可用的工具，选择figma-remote-mcp后回车，会打开Figma网站链接账号授权，同意即可成功后就可以正常连接了

选择figma-remote-mcp工具，回车会跳转到Figma网站进行连接授权，同意后会显示连接成功

2. Cursor

直接在Cursor打开右上角⚙️设置按钮，选择MCP配置

点击下方New MCP Server，会打开MCP配置文件，直接在json文件最后添加下面的代码配置，添加完保存文件。

1
2
3
4
5
6
7
8
{
  "mcpServers": {
    // ...省略其他MCP配置，下面是需要新增的
    "figmaRemoteMcp": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

保存成功后，MCP Tools下会新增一个服务，点击右侧connect按钮打开Figma网站链接账户登录授权

授权成功后再回到编辑器就可以看到已经可用了

其他安装参考官方教程：

使用MCP

MCP 服务器引入了一套工具，帮助 LLMs 翻译 Figma 中的设计。连接后，您可以提示您的 MCP 客户端访问特定的设计节点。

远程服务器是基于链接的。使用方法如下：

  1. 复制 Figma 中画框或图层的链接

  2. 在你的客户端内粘贴输入提示词帮助您实现所选 URL 的设计

注意：您的客户端无法导航到所选 URL，但会提取 MCP 服务器识别需要返回信息的对象所需的节点 ID。

初次尝试失败，没会员

试了一下，貌似功能需要Figma付费用户才能使用，我去闲鱼安排一个试试看

查看了下官方文档，原来是因为现在是公开测试阶段，需要会员才能用

此处省略去闲鱼安排教育会员的过程，下面接着进行功能测试

解决会员问题后再次尝试

第一次生成

我把设计稿里的一个部分的图层按照官网教程复制了选区对应的link地址

然后继续在Claude会话中尝试，这次不报错了，可以正常使用mcp服务了

1
2
3
这是一个自定义的Tab组件Figma设计稿，
https://www.figma.com/design/Yl7HaQa4NXWlZbZ6laS70X/%E7%9C%8B%E6%9D%BF?node-id=1-727&t=TtEexVQGtTamdSdS-4，
请你帮我使用React Hooks实现一个函数式的Tab组件

Claude Code在自行规划任务

接着代码就生成了，提示是否允许编辑，确认

确认继续编辑之后，Claude Code又继续其他任务了，包括ts接口定义、实现组件主体逻辑以及创建使用示例文档等

最终任务完成，Claude Code输出了任务总结

打开文件夹看了下，成功输出了所有文件

第二次生成

看了下代码，我发现组件样式是使用Tailwind风格实现的，我让他帮我改成单独的less文件，让Claude Code又重新开始了任务

1
请帮我去掉tailwind css写法，请改为使用less文件编写样式

最后同样输出了我们要的文件，README.md文件内容也更新了

文件拷贝到项目文件夹下，发现有React相关提示，组件在最开始未引入React，加上React引入后错误提示消失

效果对比

设计稿效果

生成组件效果

手写一份mock数据，Claude Code生成的组件展示效果如下

按照设计稿自己开发的效果

这是自己开发实现的效果，产品未要求按照数量进行颜色区分标记，选中态产品要求使用蓝色样式，实现效果如下

对比设计稿来看，使用Figma MCP自动生成的组件有下面几个小问题

  1. 有个很明显的问题是Tab选中态的小三角形未实现

  2. 另外背景色和边框色不匹配，

  3. 中间阶段之间的右箭头未增加圆形边框，且水平方向上不居中

  4. 卡片宽度有些小问题，设计稿未固定宽度，AI实现的为自适应宽度

整体上来看，组件的结构和功能都基本没有问题，完成度很高，稍微改一下小问题就基本能用了，另外组件的使用文档也很详细，整体质量还不错。

尝试进一步修改

继续输入提示词让Claude Code修改

1
当前的选中态指示器样式不正确，请仔细查看设计稿效果，为向下的三角箭头，边框与卡片边框无缝连接过度，请帮我修改这部分实现

修改完成后我又把最新的组件拷贝到项目里试了下效果

效果依然不对，我试了下把效果截图贴给他，让他再修改（图片是截图之后，使用ctrl+v粘贴到命令行的，注意别用错了）

1
[Image #1]现在的效果不对，请你参考我上传的图片，仔细检查下图片内的选中指示器三角形

继续修改

再把文件拷进项目试一下

这次有点像了，继续截图要求修改

1
[Image #1]请仔细检查我的截图，现在效果是这样的，与设计稿效果不一致，小三角底部边框颜色需要为卡片背景色#f2f6fd，另外三角形边框线宽需要与卡片边框一致，为1px，请继续修改

由于Claude Code使用的svg实现指示器的小三角形的，逻辑相对麻烦，所以这里修改次数多了一些，这次效果还是不好，我让他改成css实现三角形效果

1
指示器的三角形你可以考虑改为使用正方形旋转45度实现，卡片内部的边框颜色为#f2f6fd，但是其他两条边框为选中卡片的边框颜色#0052D9，你需要精确计算正方形大小实现完美融合。你现在实现的三角形底部边框与卡片边框效果很突兀，你看图片[Image #1]

这次的效果真的可以了

整体感受

目前单看这个效果可能离设计还差一些，不过整个开发工作流变得更简单了，如果设计师按照官方的最佳实践进行设计，我们可以结合落兵台的接口文档生成接口定义，再加上我们优化后的提示词，我觉得不久之后这条开发路径可能真的可以大大提高我们的开发效率。

目前的现状，我认为非组件库实现的页面，如果有Figma设计稿，可以尝试使用MCP直接生成代码，可以一定程度上减少部分工作量。例如C端定制的页面初步搭建，一次性的活动页面等。真正结合内部组件库进行开发还需要限制上下文之类的，可能还需要做很多工作。

有条件的话，建议大家可以自己动手试一试，看看能不能发现其他亮点，目前暂时需要会员，可闲鱼解决。

后续的计划

后边我会好好看看官方的最佳实践，抽时间针对性地做一些优化尝试，顺便编写一些提示词，再试试看效果，看看能不能有一些收获。

附录

官方的优化建议

1. 优化 Figma 文件结构以提升代码质量（设计师关注）

2.2 编写有效的提示词来引导AI

为获得最佳输出效果，官方建议设置规则来引导智能体。官方还提供了一些实用的示例规则。

2.3 根据需要触发特定的工具

2.4 添加自定义规则和说明

2.5 避免选择太多的内容、图层

将屏幕拆分为更小的部分（如组件或逻辑块），以获得更快、更可靠的结果。

MCP提供的工具和提示词