【免费下载链接】claude-talk-to-figma-mcpA Model Context Protocol (MCP) that allows Claude Desktop and other AI tools (Claude Code, Cursor, Antigravity, etc.) to read, analyze, and modify Figma designs项目地址https://gitcode.com/gh_mirrors/cl/claude-talk-to-figma-mcp点击查看免费下载claude-talk-to-figma-mcp是一个基于 Model Context ProtocolMCP的开源项目让 Claude Desktop、Claude Code、Cursor 等 AI 工具能够直接读取、分析和修改 Figma 设计。本教程聚焦设计系统自动化如何用自然语言批量创建组件实例、组件变体Component Set和可复用样式文本/颜色/效果样式几分钟就能把手工重复的设计系统工作交给 AI 完成。为什么需要设计系统自动化手动维护设计系统最耗时的三件事批量放置组件实例、切换组件变体、创建并统一样式。用 claude-talk-to-figma-mcp 后这些操作变成一句自然语言指令把文档里所有 Primary 按钮替换为组件库中的按钮实例Hover 状态的变体自动应用阴影效果它还能批量更新样式、审计组件使用、生成设计标注且支持任意 Figma 账号包括免费版无需 Dev Mode 许可证。快速上手5 分钟配置 MCP 环境第一步启动 WebSocket 服务器在终端中运行会自动克隆、安装并启动服务npx claude-talk-to-figma-mcp第二步在 Figma 中导入插件打开 Figma 桌面端进入Menu → Plugins → Development → Import plugin from manifest选择 MCP 安装目录下的 manifest.json点击导入。第三步连接 Channel打开 Figma 插件点击 Connect 后复制绿色框中的 Channel ID在 AI 对话框中输入Connect to Figma, channel {你的Channel ID}第四步配置 AI 客户端以 Cursor 为例在 Cursor 的Settings → Tools Integrations中点击 New MCP Server添加服务器配置并保存重启即可。配置成功后Cursor 的 MCP Tools 列表中会出现ClaudeTalkToFigma条目状态显示39 tools enabled说明读取与修改类工具全部就绪。组件实例创建从节点到可复用组件组件相关能力集中在 component-tools.ts常用工具有三个工具作用典型提示词create_component_from_node把现有 Frame/Group 转成可复用组件把选中的按钮转成名为 Button/Primary 的组件create_component_instance在指定位置创建组件实例在画板顶部按 8pt 间距创建 5 个该组件实例set_instance_variant修改实例变体属性保留覆盖内容把这个实例切到 Hover 变体推荐工作流让 AI 先用get_local_components列出文档中已有组件确认componentKey用create_component_from_node把设计稿中的元素组件化用create_component_instance按坐标批量铺实例需要差异化时用set_instance_variant原地切换变体——它会保留实例上的文字、图片等覆盖修改比删除再新建高效得多。 提示所有创建类命令都需要显式传入parentId参数可先用get_pages工具获取目标页面的节点 ID。组件变体自动化一句话生成 Component SetFigma 的变体机制Component Set是设计系统的核心但手动整理变体属性非常繁琐。claude-talk-to-figma-mcp 提供了两个关键工具见 component-tools.tscreate_component_set把多个已存在的组件节点合并成一个 Component Set并自动统计变体数量set_reactions为组件变体添加交互例如在默认变体上设置 While hovering → Change to hover variant让 Hover/Pressed 变体真正动起来。试试这条组合提示词把按钮的 Default、Hover、Disabled 三个组件合并为一个 Component Set命名为 Button并给 Default 变体添加鼠标悬停切换到 Hover 变体的交互AI 会自动完成合并、命名和反应设置全程无需打开 Figma 操作面板。可复用样式一键创建文本、颜色与效果样式创建工具位于 style-tools.ts覆盖设计系统中最常用的三类本地样式文本样式Typographycreate_text_style支持字体族、字重、字号、字距、行高、大小写等完整排版参数创建三个文本样式Heading/H1Inter Bold 32px、Body/LargeInter Regular 18px行高 24px、CaptionInter Regular 12px颜色样式Paint Stylecreate_paint_style用 0–1 的 RGBA 值创建颜色样式推荐配合命名规范如Brand/Primary、UI/Background批量建立色板按品牌色板创建颜色样式Brand/Primary#E63946、UI/Background#FAFAFA、UI/Text#1A1A1A效果样式Effect Stylecreate_effect_style支持 DROP_SHADOW、INNER_SHADOW、LAYER_BLUR 等效果适合沉淀阴影规范创建阴影样式 Shadow/Medium向下偏移 4px、模糊半径 8px、黑色 15% 透明度创建完成后这些样式会出现在 Figma 的本地样式库中后续用set_text_style_id、set_effect_style_id等工具即可应用到任意节点形成建一次、处处用的闭环。进阶用 Figma Variables 沉淀设计令牌如果团队已经在用 Figma Variables设计令牌variable-tools.ts 提供了完整支持get_variables列出文件中的所有变量集合、模式与变量set_variable创建或更新 COLOR / FLOAT / STRING / BOOLEAN 类型变量apply_variable_to_node把变量绑定到节点实现深浅模式一键切换。示例提示词创建变量集合 DesignTokens加入 primary#E63946和 radius-md8px两个变量并把 primary 应用到所有 Primary 按钮。实用提示词清单场景提示词示例审计现状列出文档中所有本地组件和样式检查命名是否符合 Brand/Component 规范批量组件化把页面里的 6 个图标 Frame 各自转成组件统一命名 Icon/xxx变体维护把所有按钮实例统一切换为大尺寸变体保留各自文字内容样式统一把全文 16px 灰色正文文字统一应用 Body/Regular 文本样式令牌同步读取 DesignTokens 变量集合把所有硬编码为主色 #FF6B6B 的填充替换为变量引用更多完整命令参考 COMMANDS.md提示词技巧见其中 Effective prompt examples 章节。常见问题排查连接失败确认 WebSocket 服务器在运行、Figma 插件端口为 3055且 Channel ID 与 AI 端一致详见 TROUBLESHOOTING.md。创建命令报 parentId 错误多 Agent 并行模式下禁止依赖隐式页面上下文必须显式传parentId页面 ID 可通过get_pages获取。变体切换后样式丢失检查组件 Set 的属性名是否与properties键值完全一致。相关文档完整安装指南INSTALLATION.md测试规范TESTING.md工具实现入口tools/index.tsMCP 服务器主文件server.ts掌握以上四个环节——组件实例、变体、样式、变量——你已可以用一句话驱动 AI 完成过去需要数小时的设计系统维护工作。建议从一个小型文档开始练习逐步建立属于自己团队的自然语言设计系统工作流。赞分享【免费下载链接】claude-talk-to-figma-mcpA Model Context Protocol (MCP) that allows Claude Desktop and other AI tools (Claude Code, Cursor, Antigravity, etc.) to read, analyze, and modify Figma designs项目地址https://gitcode.com/gh_mirrors/cl/claude-talk-to-figma-mcp点击查看免费下载相关推荐Cursor Talk To Figma MCP设计自动化完整指南Cursor Talk To Figma MCP设计自动化完整指南 项目概述 Cursor Talk To Figma MCP是一个革命性的开源项目通过AI技MCP 服务AI 应用GUI 自动化Cursor-Talk-to-Figma-MCP实现AI设计协作的自动化工具Cursor Talk to Figma MCP实现AI设计协作的自动化工具 在数字化设计与开发流程中AI设计协作、Figma自动化及MCP协议ModelMCP 服务AI 应用GUI 自动化如何让Cursor AI秒变Figma设计助手Cursor-Talk-to-Figma-MCP完整指南 如何让Cursor AI秒变Figma设计助手Cursor Talk to Figma MCP完整指南 你是否曾梦想过让AI直接帮你修改Figma设计稿MCP 服务AI 应用GUI 自动化上一篇如何高效获取网盘直链LinkSwift完整使用指南与配置教程下一篇iloader 3分钟侧载SideStore 实测创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
中项-案例分析常见找错题 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/5 1:34:33
漏洞组合拳与JS攻击面的博弈 案例挑选以往攻防、SRC、渗透项目报告有启发性报告形成文章供各位读者师傅学习,漏洞思路并不局限于接口测试，利用现有信息打出组合拳也是不错的选择 案例挑选以往攻防、SRC、渗透项目报告有启发性报告形成文章供各位读者师傅学习,漏洞思路并不局限于接口测试，利用现有信息打出… · 2026/11/5 1:33:33
EasyExcel 进行excel读写操作 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/5 1:33:33
省市县街道四级地址表：SQL建表、导入与联动查询实战 简介：面向需要搭建国内省、市、县、街道乡镇四级联动地址数据的开发者与数据库使用人员，这份地区表着重解决行政区划层级、父子关系与联动标识难以一次性整理的问题。压缩包共6个文件，以xlsx表格和sql数据库文件为主，并配有png示意… · 2026/11/5 2:14:48
LogViewPro中文版安装配置全攻略：大文件打开不卡顿 简介：LogViewPro中文版是一款面向系统管理员、开发人员及运维工程师的超大文本文件查看与分析工具，针对几GB级日志文件加载缓慢、检索困难的痛点，提供快速浏览、全文搜索、条件过滤与统计分析能力。压缩包为zip格式，体积约1.54MB&… · 2026/11/5 2:14:48
Maven仓库机制与可执行JAR打包实战指南 简介：本资源是一份面向Java开发者与Maven初学者的实战型学习包，聚焦Maven核心机制中的仓库管理、本地依赖引入及可执行JAR包构建三大痛点问题，适用于项目构建调试、私有库集成与部署交付等典型开发场景。压缩包为5KB的ZIP格式，共含… · 2026/11/5 2:14:48
ROS无人机YOLO视觉精准投放：从像素到落点的闭环链路设计 简介：面向ROS与PX4无人机开发的学习者与竞赛选手，这套资源围绕物体识别与精准投放任务给出可直接运行的完整工程。方案以YOLO完成目标检测，将识别到的位置信息转化为无人机控制指令，使机体持续保持在目标正上方，并在满… · 2026/11/5 2:14:48
C++标准库头文件正确用法 前言
C 标准库由几十个头文件组成，每个头文件声明一组相关的设施。写代码时 #include 哪几个，看起来是小事，实际上直接影响可移植性、编译速度和代码的可维护性。
最常见的坏习惯是 #include <bits/stdc.h>。GCC 提供了这样一个扩展头&… · 2026/11/5 2:14:48
东南亚SHP文件诊断与修复：GDAL+GeoPandas实战指南 简介：本资源是一套完整的东南亚区域GIS矢量数据集，面向地理信息科学、城市规划、环境研究及区域经济分析等领域的初学者与专业用户，解决高精度行政区划、水系与城市空间分布数据缺失问题。压缩包共53个文件，包含6个核心SHP主文件&… · 2026/11/5 2:13:48
双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 6:59:29
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 7:02:38
多智能体协作系统架构设计与实践优化 1. 多智能体协作系统的时代背景2017年Transformer架构的诞生彻底改变了人工智能的发展轨迹。当行业还沉浸在单一大模型带来的性能突破时，Anthropic的研究团队已经将目光投向了更前沿的领域——如何让多个智能体通过协作产生超越单体能力的系统智能。这就像交响乐团中… · 2026/11/5 0:00:39
大模型系统性入门实战指南：从原理到部署微调的全链路路线 提到大模型的系统性入门，我先说个结论：这事真不难，难的是资料太散、路线太多，今天这个框架明天那个工具，新人很容易在“收藏夹吃灰”和“教程看到一半放弃”之间反复横跳。市面上关于大模型的内容少说有几十万篇&#… · 2026/11/5 0:00:39
鸿蒙文件系统沙箱机制解析与开发实践 1. 鸿蒙文件系统沙箱机制深度解析作为一名从Android转向鸿蒙开发的工程师，我深刻体会到文件系统访问是迁移过程中最先遇到的"拦路虎"。在Android上运行良好的文件读写代码，在鸿蒙真机环境却频频出现文件写入后神秘消失或直接抛出权限拒绝错误的… · 2026/11/5 0:00:39
双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 6:59:29
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 7:02:38
