# figma mcp + claude code 配置快速修改设计稿

> 不谈玄学，只讲落地。
> 我是一名深耕算法工程化一线的实践者，擅长将 新技术、关键技术、AI/ML 技术从论文和 demo 转化为可规模化部署的生产系统。在这里,你看不到堆砌公式的理论空谈,只有真实项目中踩过的坑、趟过的路,每一篇文章都源自实战经验的提炼。我相信技术的价值在于解决真实问题,而不是制造焦虑。如果你也厌倦了"收藏即学会",渴望掌握让算法真正跑起来的硬核能力,那么这里就是你的技术补给站。


![2026-01-10_21-19.png](https://developer.qcloudimg.com/http-save/yehe-11974962/46425971bd5d4b2cc74e47deba33de7c.png)


# figma mcp + claude code 配置快速修改设计稿

>本文介绍了如何通过 Claude Code 结合 Figma MCP 插件实现 AI 驱动的设计稿快速修改。主要内容包括：克隆并安装 Claude Talk to Figma MCP 插件，启动本地 Socket 服务（端口 3055），将 MCP 服务器添加到 Claude Code 配置中，以及在 Figma 网页端开启 MCP 服务并建立连接通道。最后通过实际案例演示了如何使用自然语言指令（如“修改字体颜色为白色”）让 Claude 自动识别设计稿中的节点并完成样式修改，展示了 AI 辅助设计工作流的高效性。

# 获取mcp插件

```shell
git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp
bun install
```

# Socket 服务启动

```shell
➜  claude-talk-to-figma-mcp git:(main) ✗ bun socket              
$ bun run dist/socket.js
[INFO] Claude to Figma WebSocket server running on port 3055
[INFO] Status endpoint available at http://localhost:3055/status
[DEBUG] Received GET request to /
[INFO] New client connected: client_1768048337141_hx3sth
[DEBUG] Received GET request to /
[INFO] New client connected: client_1768048337142_fy0lm5
[DEBUG] Received GET request to /
[INFO] New client connected: client_1768048337143_g7jt6f
[DEBUG] Received GET request to /
[INFO] New client connected: client_1768048339266_5328s7

```

# 添加mcp到claude code


```shell
# 在项目目录中运行，不加 --scope 默认就是项目级别
claude mcp add claude-talk-to-figma -- npx -y claude-talk-to-figma-mcp


➜  figma_wk claude mcp add claude-talk-to-figma -- npx -y claude-talk-to-figma-mcp
Added stdio MCP server claude-talk-to-figma with command: npx -y claude-talk-to-figma-mcp to local config
File modified: /home/nile/.claude.json [project: /home/nile/bigdata/projects/figma_wk]
➜  figma_wk claude mcp list                                                       
Checking MCP server health...

plugin:context7:context7: npx -y @upstash/context7-mcp - ✓ Connected
plugin:figma:figma: https://mcp.figma.com/mcp (HTTP) - ✓ Connected
plugin:figma:figma-desktop: http://127.0.0.1:3845/mcp (HTTP) - ✗ Failed to connect
plugin:playwright:playwright: npx @playwright/mcp@latest - ✓ Connected
claude-talk-to-figma: npx -y claude-talk-to-figma-mcp - ✓ Connected

```


# 在figma页面开启mcp服务


![](https://developer.qcloudimg.com/http-save/yehe-11974962/110eefcbcdde0d4b44763d5faec247dd.jpg)


# 修改figma相关应用

## 建立通道


![](https://developer.qcloudimg.com/http-save/yehe-11974962/a67098c7ca8c9689bb142a1f14832c8e.jpg)



## 修改设计

![](https://developer.qcloudimg.com/http-save/yehe-11974962/143c128f594c1e2c787a970a98450ee3.jpg)



![](https://developer.qcloudimg.com/http-save/yehe-11974962/ab8e896c02f5d2da116627639ad59ea8.jpg)


```shell

❯ 修改字体颜色为白色，
https://www.figma.com/design/gFJBe3KRQZHsOB6pp7lx6v/Obra-shadcn-ui--Community-?node-i 
  d=83-8890&t=jnzbY9aER4pSC7dD-4                                                                            

● claude-talk-to-figma - get_node_info (MCP)(nodeId: "83-8890")
  ⎿  Error getting node info: Node not found with ID: 83-8890                                              

● 让我尝试使用正确的节点ID格式。

● claude-talk-to-figma - get_node_info (MCP)(nodeId: "83:8890")
  ⎿  {                                                                                                     
       "id": "83:8890",
       "name": "AL",
     … +66 lines (ctrl+o to expand)

● 找到了这个 Frame，它包含两个文本节点。我来将它们的字体颜色都修改为白色。

● claude-talk-to-figma - set_fill_color (MCP)(nodeId: "8:268", r: 1, g: 1, b: 1)
  ⎿  Set fill color of node "Obra shadcn/ui 组件库" to RGBA(1, 1, 1, 1)                                    

● claude-talk-to-figma - set_fill_color (MCP)(nodeId: "8:269", r: 1, g: 1, b: 1)
  ⎿ Set fill color of node "一个精心制作的基于 shadcn/ui 的 Figma 组件库，为您的设计系统提供起点。" to RGBA
    (1, 1, 1, 1)


● 已完成。已将 Frame "AL" 中的两个文本元素的字体颜色修改为白色：

  1. "Obra shadcn/ui 组件库" - 标题文本
  2. "一个精心制作的基于 shadcn/ui 的 Figma 组件库，为您的设计系统提供起点。" - 描述文本


```

参考:

https://github.com/arinspunk/claude-talk-to-figma-mcp

不谈玄学，只讲落地。 我是一名深耕算法工程化一线的实践者，擅长将 新技术、关键技术、AI/ML 技术从论文和 demo 转化为可规模化部署的生产系统。在这里,你看不到堆砌公式的理论空谈,只有真实项目中踩过的坑、趟过的路,每一篇文章都源自实战经验的提炼。我相信技术的价值在于解决真实问题,而不是制造焦虑。如果你也厌倦了"收藏即学会",渴望掌握让算法真正跑起来的硬核能力,那么这里就是你的技术补给站。

figma mcp + claude code 配置快速修改设计稿

本文介绍了如何通过 Claude Code 结合 Figma MCP 插件实现 AI 驱动的设计稿快速修改。主要内容包括：克隆并安装 Claude Talk to Figma MCP 插件，启动本地 Socket 服务（端口 3055），将 MCP 服务器添加到 Claude Code 配置中，以及在 Figma 网页端开启 MCP 服务并建立连接通道。最后通过实际案例演示了如何使用自然语言指令（

人工智能

前端

开发工具

本文介绍FigmaMCP+ClaudeCode配置教程，通过AI实现设计稿快速修改。详细讲解插件安装、Socket服务启动、MCP服务器配置等步骤，并演示如何用自然语言指令自动修改设计元素（如调整字体颜色）。提供完整GitHub项目链接，帮助设计师实现高效AI辅助工作流。

服务器

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

figma mcp + claude code 配置快速修改设计稿-腾讯云开发者社区-腾讯云

figma mcp + claude code 配置快速修改设计稿

figma mcp + claude code 配置快速修改设计稿

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐