arrange-component-set-figma

arrange-component-set-figma — 带标签的变体网格

将 COMPONENT_SET 中的变体重新排列为整齐的矩阵：解析每个变体的属性（Size=md, State=hover），将一个属性用作列，其余属性用作行，在每个网格单元格中居中放置变体，并将所有内容包在一个白色容器框架中，添加标题、左侧行标签和顶部列标题。最终呈现的变体表适合用于设计系统文档。

技能范围

• use_figma 规则——先加载官方的 figma-use 技能；其中包含完整的 Figma Plugin API 参考。这些脚本依赖的要点：使用带顶层 await 和 return 的普通 JS（不要用 IIFE 或 figma.closePlugin()；console.log 不会作为返回值）、在每个脚本顶部以内联 const 声明输入、颜色值范围为 0–1、执行任何文本操作前先加载字体、使用 await figma.getNodeByIdAsync(...)，以及原子错误处理（脚本失败时不会应用任何更改——读取错误、修正后重试）。
• 理解变体的含义（状态机、CSS）→ 使用 analyze-component-set-figma。
• 此功能会在画布上写入新的布局——它是设计系统创作功能，而原生 MCP 的 get_design_context / get_metadata（只读）无法实现。

工作流

1. 识别集合。 从选区、搜索结果或粘贴的 ID 中获取 COMPONENT_SET_ID。（也可以将常量留空并在画布上选择集合——脚本会回退到当前选区。）
2. 选择列轴（可选）。 默认将最后一个变体属性用作列（通常是 State）；其余属性用作行。通过 const COLUMN_PROPERTY 覆盖默认值。
3. 运行 scripts/arrange-component-set.js，使用 use_figma（skillNames: "arrange-component-set-figma"）。如有需要，调整 GAP / CELL_PADDING 常量。
4. 目视检查。 截取屏幕截图。脚本会返回 containerId、（重新创建的）componentSetId 和网格形状（行/列、标签）。变体会在各自单元格中居中放置。

工作原理

• 使用 figma.combineAsVariants() 重新创建集合，以获得 Figma 原生的紫色虚线框（#9747FF，虚线样式 [10,5]，内侧描边）。会先移除之前运行时留下的旧标签/容器，因此可以安全重复运行。
• 网格计算：单元格大小 = 最大变体尺寸 + 内边距；调整集合尺寸以适配 cols × (cell+gap)。根据解析出的属性值，将变体放置到对应的行/列索引。
• 标签使用自动布局框架，置于组件集合外部（组件集合不适合嵌套在自动布局中），并分别与每行的垂直中心、每列的水平中心对齐。

备注

• 字体：脚本会为标签加载 Inter Regular + Inter Semi Bold——如果文件中没有 Inter，请在 loadFontAsync 调用中替换字体系列。
• 具有破坏性：脚本会删除原始集合并通过克隆重新构建。变体及其属性会保留，但集合的节点 ID 会改变（通过 componentSetId 返回）。
• 一个属性 → 列：如果集合只有一个属性轴，所有变体都会位于一行中。多轴集合会为非列属性生成所有行组合（笛卡尔积）。