生成变体（Make Variants）—— 在 Figma 中提取组件并生成变体 ComponentSet

从 Figma 页面中提取目标组件，分析其变体维度，并生成可用于生产的 ComponentSet。优先复用页面中已有的内容，而非重新绘制。

调用示例

/make-variants 按钮
/make-variants 输入框 fileKey=abc123 nodeId=12:34
/make-variants 标签 页面有三种尺寸：small/medium/large，两种类型：填充/描边
/make-variants 全局提示 根据 oneid-design-system.md 设计系统规范延展变体状态

执行流程

步骤 0 — 解析参数

从 $ARGUMENTS 中提取以下参数：

步骤 1 — 观察页面并识别可复用内容

这是最关键的一步。所有子步骤需并行执行。

1a. 截图观察（get_screenshot）

截取目标节点或当前页面。在审阅过程中识别以下内容：

• 完整的组件结构（背景、图标、文字、圆角、间距等）
• 页面上是否已存在多个状态版本（如 default/hover/selected 等）
• 所有出现的图标 —— 记住其视觉形态（按外观匹配，而非名称）
• 该组件是否已是 COMPONENT 类型，还是仅为普通 FRAME

1b. 扫描页面结构（use_figma）

运行 scripts/scan_page.js（将其中的 __TARGET_NODE_ID__ 和 __COMPONENT_NAME__ 替换为实际值）。

返回结果包括：

• target —— 匹配到的节点信息及其子节点详情
• icons —— 页面上最多 30 个可复用的图标候选对象
• textIcons —— 被误用作图标的文字字符（⚠️ 必须替换）

1c. 检索设计系统（search_design_system）

搜索组件名称及所引用的任何图标名称。

步骤 2 — 确定复用路径

若页面中已存在目标组件的已有构建版本（COMPONENT 或 FRAME）：

完整克隆该节点，不得重绘任何元素。保留克隆节点的颜色 token 引用，并在生成变体时统一应用同一设计系统的颜色 token。

// ✅ 克隆现有节点，仅修改变体特有属性
const source = figma.getNodeById('SOURCE_NODE_ID');
const cloned = source.clone();
// 仅修改：背景色、文字色、图标色、不透明度（用于区分不同状态）
// 所有颜色均优先使用设计系统中的 token 值

适用场景包括：

• 页面中已存在一个或多个状态版本的该组件
• 组件结构清晰，且子节点可直接复用

步骤 3 — 解析图标资源

若在步骤 1b 中检测到 textIcons，须在后续步骤前完成替换。

请查阅 references/icon-resolution-strategy.md 获取完整的、基于优先级的解析流程：

1. 同页 INSTANCE 搜索 —— 运行 scripts/find_real_icon.js
2. 组件库导入 —— 使用 importComponentByKeyAsync
3. SVG 生成 —— 使用 createNodeFromSvg（必须与观察到的视觉风格一致）

绝对禁止行为：不得使用 Unicode 字符、emoji、纯色块或自创图标风格作为替代。

步骤 4 — 分析变体维度

结合截图观察与参数描述，确定组件的变体维度。

查阅 references/design-tokens.md 获取以下信息：

• 设计系统优先级顺序
• Token 值（OneID、Ant Design、Material Design）
• 标准维度定义与命名规范

命名规则：DimensionA=Value, DimensionB=Value —— 逗号分隔，采用 PascalCase，每个变体名称中必须包含全部维度。

最小变体集合：优先覆盖常用状态组合，通常为 8–16 个变体。

步骤 5 — 生成 ComponentSet

以 scripts/generate_component_set.js 为模板。执行前需自定义 variantDefs 数组和源节点 ID。

关键约束条件：

• 必须使用 createComponent() + combineAsVariants() —— 禁止使用 createFrame()
• 每个组件创建后，须立即追加至页面
• 整体代码需包裹于 async function main() 中，并配备 try/catch；结尾必须为 return main()
• 克隆后，再应用变体特有修改（颜色、文字、不透明度等）

常见错误请参阅 references/troubleshooting.md。

步骤 6 — 后处理

ComponentSet 生成完成后执行以下操作：

1. 标准化变体名称 —— combineAsVariants 可能添加非预期前缀；需按索引手动修正
2. 设置 ComponentSet 框架样式 —— 浅灰色填充（r:0.898, g:0.910, b:0.937），cornerRadius: 8
3. 截图确认 —— 调用 figma.viewport.scrollAndZoomIntoView([compSet]) 定位并截图，与原始截图比对

步骤 7 — 质量检查清单

在向用户交付前，请逐项验证：

• 所有变体均为 COMPONENT 类型，父容器为 COMPONENT_SET
• 变体名称符合统一格式，覆盖全部维度组合
• 当存在可用的现有内容时，已采用克隆路径
• 图标来源为页面复用或组件库引入 —— 无自创图标
• 未使用文字字符或 emoji 替代图标
• 颜色、尺寸、字体与原始组件截图完全一致
• 禁用（Disabled）状态下颜色已正确灰化
• ComponentSet 已正确命名（非默认“Component 1”）
• 已拍摄最终截图并提交给用户

配套资源

脚本（scripts/）

参考资料（references/）