Figma Specs是什么？怎么用？开放beta开通步骤、MCP接入Cursor/Claude Code与写法踩坑

依据Figma官方博客Introducing Specs（2026-10-15）、Help Center《Guide to Specs in Figma》《Guide to the Figma MCP server》《Figma skills for MCP》、开发者文档与GitHub上figma-spec的SKILL.md整理，核查2026-10-15（新加坡时间）。

主题标签：Figma Specs、Figma Specs怎么用、Figma Specs是什么、Figma MCP、figma-spec skill

Figma Specs是什么？一句话：它是放在Figma画布上的多人协作Markdown文档，用来写需求、设计决策和技术说明，并能直接嵌入Frame、FigJam图、代码层。Figma在2026-10-15发布并开放beta，面向付费计划分批放量；编程Agent（Cursor、Claude Code、Codex等）通过Figma MCP服务器的figma-spec skill就能读、写这份说明。想让Agent“照着设计说明写代码”，复制Spec链接贴进提示词即可。下面讲怎么开、怎么写、哪里容易翻车。

Specs和Frame注释、Dev Mode标注有什么不同

很多团队以前把说明写在画布文本框里，或者在Dev Mode里给图层加标注。这两种对人眼够用，对Agent就差点意思：文本框只是普通图层，Agent分不清哪段是需求；标注挂在单个图层上，讲不了整条流程。Specs把这些收进一份结构化文档：

对比项	画布文本框/便签	Dev Mode标注	Figma Specs
载体	普通文本图层	附在具体图层上	独立的SPEC_BLOCK节点，内容是GFM Markdown
适合写	零散备注	间距、状态、交互细节	PRD、技术方案、验收标准、待定问题
能嵌什么	无	无	Frame或任意节点、FigJam文件、图片、代码层、Code Connect片段
Agent怎么读	当普通文字猜	需额外取图层上下文	figma-spec skill直接按Markdown读取，可定点改写
评论	画布评论	画布评论	评论锚定到具体文字，Figma Agent能回复

它不是要取代Dev Mode。尺寸、样式这类细节仍从图层取；Specs负责“为什么这么做、边界情况怎么处理”。

谁能用、怎么开通

官方博客写的是“付费计划开放beta”，网页、桌面、移动端都有。Help Center两处写法略有出入：《Guide to Specs in Figma》列Professional、Education、Organization、Enterprise；beta功能清单页还多列了Starter。以你账号里能不能看到入口为准。另外要有文件的编辑权限，FAQ也说接下来几周陆续放量，同团队的人可能比你早拿到。

新建独立Spec文件：文件浏览器顶部点Spec，或者在浏览器地址栏输入figma.com/spec/new。
插到设计稿或FigJam里：工具栏点Spec图标，或按快捷键D。
从已有材料生成：FigJam里框选便签点Summarize生成Spec；或者直接把本地.md文件拖到画布上。
写内容：输入/呼出块菜单；#、##、-、1.、[]、>、三个反引号这些Markdown快捷写法都认。图片、Figma文件嵌入、分隔线没有快捷写法，用菜单插。
右上角可切“滚动页”视图或全屏编辑；内容能在Spec和画布之间来回拖。

计费：自己手写、编辑Spec不扣AI积分；让Figma Agent帮你起草、扩写、回评论会扣，每次提示后悬停回执能看消耗。积分怎么算，见此前的Figma Agent怎么用与AI积分，本文不重复。

接到编程Agent：Cursor、Claude Code、Codex

读Spec走Figma MCP服务器。官方推荐远程服务器https://mcp.figma.com/mcp，OAuth登录，不需要装桌面端；写回Spec必须用远程服务器，并且对文件有编辑权限。按客户端：

Claude Code：claude plugin install figma@claude-plugins-official装官方插件（自带skills）；手动则claude mcp add --transport http figma https://mcp.figma.com/mcp，再在会话里输/mcp选figma点Authenticate。想所有项目通用，加--scope user。
Cursor：在Agent对话框输入/add-plugin figma，插件含MCP配置与skills。
Codex CLI：codex mcp add figma --url https://mcp.figma.com/mcp，按提示授权。
VS Code：在mcp.json里加一个type为http、url指向上面地址的figma服务器。

没有官方插件的客户端，要另外下载Figma的skills包放进对应目录，否则Agent连上了也不知道该调哪个工具。官方MCP目录里还有Kiro、Gemini CLI、Warp等，但不是每个都支持写回画布，接之前查一下兼容表。

用法很朴素：在Figma里复制Spec链接，贴进提示词，例如“读这个Spec，按结账流程的需求实现，做完把发现的边界情况补到待定问题一节”。官方博客说，Markdown正文、引用的Frame、图表、代码层和Code Connect片段会一起带过去。Claude Code和Codex怎么选，可看Claude Code和Codex哪个好；skills机制本身见Claude Skills怎么用。

怎么写，Agent一眼就能吃懂

Agent读的是纯Markdown，排版好不好看它不在乎，结构清不清楚它很在乎。我们试下来比较稳的骨架是这样：

H1标题放第一行。figma-spec的SKILL.md明确要求标题块始终在最前面，别在它前面插东西。
目标与非目标：两三句说清要做什么、这次不做什么。不写非目标，Agent常顺手“优化”你没让它碰的模块。
页面与状态清单：每个状态嵌一个对应Frame，比如空态、加载、报错、无权限，各放一张。文字说“报错时显示提示”，不如直接嵌那张报错稿。
验收标准用待办列表：[]一条一条写，可测、可勾选，Agent做完能自己对照。
数据与接口：字段名、示例响应放代码块，链接用GitHub永久链接。SKILL.md专门提醒：不要写本机路径或localhost地址，别人和Agent都打不开。
待定问题单列一节：没拍板的放这里，让Agent遇到时先问或留评论，而不是自己拍脑袋。

常见踩坑

上下文不全：只贴Spec，不嵌Frame，Agent照字面写出来的界面和设计稿对不上。反过来只丢Frame链接、不写边界情况，它会漏掉错误态。
版本不同步：设计改了，Spec没改；或者Agent在代码里做了取舍，没写回Spec。让Agent每轮结束把决策补回文档，团队看的才是同一份。
整篇被覆盖：skill里setContent会清空重建，只适合空白初稿；日常应该用editContent做定点替换，而且要匹配的原文必须恰好出现一次，否则直接失败。
评论丢失：Spec里评论用标记包住对应文字，改写时把标记弄丢，讨论串就脱钩。skill文档也写了评论相关流程“即将支持”，现阶段复杂评论别全交给外部Agent。
权限和计划：skill要求先确认文件所属计划开启了Specs，查不到就停。Agent报“Specs不可用”，多半是计划没放量或你只有查看权限。
代码层免费期：同日开放beta的代码层，release notes写在付费计划上免费创建、编辑到11月4日，之后的计费以官方为准，别把原型全压在上面。

想把说明同步到任务系统，Spec还能借连接器把内容推到Linear议题或GitHub仓库；起草技术方案时也能用GitHub连接器把代码库上下文拉进来。白板讨论阶段可以先在FigJam里发散，再汇总成Spec。

常见问题

Figma Specs免费吗？

开放beta面向付费计划。手写编辑不扣AI积分，用Figma Agent操作Spec会扣积分。

看不到Spec入口怎么办？

官方说接下来几周分批放量，同一团队里的人开通时间可能不同；也检查一下是否有文件编辑权限。

必须用远程MCP服务器吗？

只读可以走已支持的客户端；要让Agent创建或修改Spec，官方写明需要远程服务器和编辑权限。

Spec能导出成本地Markdown吗？

Agent通过skill读到的就是GFM Markdown，可以让它另存到仓库；官方也支持把本地.md拖进画布变成Spec。

和Figma Make是一回事吗？

不是。Make用提示词做可交互原型；Specs是写需求与决策的文档，可以喂给Make、代码层或外部编程Agent。

延伸：AI编程工具怎么选，分类设计创意、AI编程与建站。

来源与核查日期

核查日期：2026-10-15（新加坡时间）。beta可用计划与放量节奏以Figma官方页面为准。

Figma Specs是什么？怎么用：把设计说明交给Cursor、Claude Code等编程Agent