figma-deep-component

figma-deep-component — 无限深度树及已解析令牌

递归遍历一个节点（通常为 COMPONENT / COMPONENT_SET / INSTANCE，但任何节点均可），深度由你选择；在 每一 层捕获：布局（自动布局、内边距、间距、尺寸）、视觉属性（填充、描边、描边粗细、圆角半径、效果、不透明度）、文本节点的排版、解析为令牌名称 + 代码语法的 boundVariables、INSTANCE 主组件引用（包括主组件是否为变体及其所属集合）、原型 reactions，以及开发模式下的 annotations。这是用于高保真代码生成的最丰富的单组件读取方式。

技能边界

• use_figma 规则 — 首先加载官方 figma-use 技能；它是完整的 Figma Plugin API 参考。这些脚本依赖的要点：使用纯 JS，并在顶层使用 await + return（不要使用 IIFE 或 figma.closePlugin()；console.log 不会作为返回值）；在每个脚本顶部以内联方式定义输入常量；颜色值范围为 0–1；执行任何文本操作前先加载字体；使用 await figma.getNodeByIdAsync(...)；以及原子错误（脚本失败时不会应用任何内容——读取错误、修复后重试）。
• 整个文件的清单（一次性列出所有令牌 / 组件 / 样式）→ 使用 figma-design-system-inventory。
• 将变体集作为 CSS 状态机（逐状态差异、伪类映射）→ 使用 figma-analyze-component-set。
• 这种深度的树 + 已解析令牌 + reactions 并非原生 MCP 的 get_design_context（渲染后的单选内容摘要）或 get_metadata（扁平结构）所能返回——这是叠加在原生能力之上的设计系统代码生成能力。

工作流

1. 获取节点 ID。 从所选内容（figma_get_selection）、搜索结果或粘贴的 ID 获取。
2. 选择深度。 设置 const DEPTH（默认为 10）。深层设计组件很少超过约 6 层；先使用较小的数值以控制载荷大小，需要时再加深。
3. 运行 scripts/deep-component.js，通过 use_figma 执行（skillNames: "figma-deep-component"）。在顶部设置 const NODE_ID 和 const DEPTH。
4. 生成代码。 返回的树结构与应构建的 DOM 一致。优先使用 boundVariables 令牌名称（及其 codeSyntax），而非原始十六进制值；使用 mainComponent 引用复用导入的组件；使用 reactions 连接交互 / 导航。
5. 如果载荷过大， 降低 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]——以保持约定统一。