关于 deep-component-figma
deep-component-figma 是用于 Figma 的技能，可按指定深度递归读取节点树，包含已解析的设计令牌和交互细节。它面向需要比扁平结构更丰富组件数据的设计系统与代码生成工作。
主要功能
- 01按指定深度递归检查节点
- 02采集布局、视觉和文本属性
- 03将绑定变量解析为令牌名称和语法
- 04读取组件引用、变体及属性
- 05包含原型交互和开发注释
适用场景
- 01根据详细 Figma 组件生成代码
- 02使用设计令牌而非原始颜色值
- 03检查组件变体和交互流程
MCP 相关
该技能通过 `use_figma` 运行脚本，并依赖官方 `figma-use` 技能。它提供的组件树读取深度高于原生 MCP 的 `get_design_context` 或 `get_metadata`。
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/deep-component-figma确认已加载。
附带文件scripts/deep-component.js
详细介绍
deep-component-figma —— 解析令牌的无限深度树
递归遍历一个节点（通常是 COMPONENT / COMPONENT_SET / INSTANCE，但也可以是任何节点），深度由你选择，并在每一层捕获：布局（自动布局、内边距、间距、尺寸）、视觉属性（填充、描边、描边粗细、圆角半径、效果、不透明度）、文本节点的排版、解析为令牌名称 + 代码语法的 boundVariables、INSTANCE 主组件引用（包括主组件是否为变体及其所属集合）、原型 reactions，以及开发模式下的 annotations。这是用于高保真代码生成的最丰富的单组件读取方式。
技能边界
use_figma规则——首先加载官方figma-use技能；它是完整的 Figma Plugin API 参考。这些脚本依赖的要点：使用纯 JS，并在顶层使用await+return（不要使用 IIFE 或figma.closePlugin()；console.log不会作为返回值）；在每个脚本顶部以内联方式定义输入为const；颜色取值范围为 0–1；执行任何文本操作前先加载字体；使用await figma.getNodeByIdAsync(...)；以及原子错误（脚本失败时不会应用任何内容——读取错误、修复并重试）。- 整份文件清单（一次获取所有令牌/组件/样式）→ 使用
design-system-inventory-figma。 - 将变体集合视为 CSS 状态机（逐状态比较差异、映射伪类）→
使用
analyze-component-set-figma。 - 这种深度的树结构 + 解析后的令牌 + reactions 并非原生 MCP 的
get_design_context（单个选中项的渲染摘要）或get_metadata（扁平结构）所能返回——这是构建在其上的设计系统代码生成能力。
工作流
- 获取节点 id。 从选区（
figma_get_selection）、搜索结果或粘贴的 id 获取。 - 选择深度。 设置
const DEPTH（默认值为 10）。深层设计组件通常很少超过约 6 层；先使用较小的数值以控制载荷大小，如有需要再加深。 - 运行
scripts/deep-component.js，通过use_figma执行（skillNames: "deep-component-figma"）。在顶部设置const NODE_ID和const DEPTH。 - 生成代码。 返回的树结构与应构建的 DOM 一致。优先使用
boundVariables令牌名称（及其codeSyntax），而非原始十六进制值；使用mainComponent引用复用已导入的 组件；使用reactions连接交互/导航。 - 如果载荷过大，降低
DEPTH（超过限制的节点会以childCount+_depthLimitReached标记进行摘要），或改为指定较小的子节点 id。
每个节点包含的内容
- 标识：
id、name、type、visible。隐藏的非组件节点会标记为_hidden，且不会递归遍历。 - 布局：
layoutMode、轴向尺寸/对齐、padding*、itemSpacing、counterAxisSpacing、layoutWrap、最小/最大宽高、clipsContent。 - 视觉：
fills、strokes、strokeWeight、cornerRadius、effects、opacity（仅包含非默认值；安全跳过figma.mixed值）。 - 排版（TEXT）：
characters、fontSize、fontFamily/fontStyle、fontWeight、lineHeight、letterSpacing、对齐、截断、大小写、装饰。 - 令牌：每个绑定属性的
boundVariables解析为{ id, name, collection, resolvedType, codeSyntax }。 - 实例：
mainComponent（id、name、key、isVariant、集合名称/id）+componentProperties。 - 定义**（COMPONENT/COMPONENT_SET）：
componentPropertyDefinitions、variantProperties。 - 原型：
reactions（触发条件 + 操作：导航/过渡/目标）。 - 开发模式：
annotations（标签 Markdown + 分类属性）。
说明
- 任何套餐都可使用已解析的令牌——变量查找通过 Plugin API 构建，因此非 Enterprise 文件也能获取令牌名称，而不是不透明的
VariableID:别名。 - 根节点会回显
_variableMapSize和_maxDepthUsed，便于进行合理性检查。 - 即使这是一次读取操作，也会返回
affectedNodeIds: [NODE_ID]——以保持约定统一。
评论
支持 Markdown