Figma 组件变体生成
将以下提示词粘贴到你的 AI 对话框中：
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_5d52b855/make-variants。
技能介绍
要解决的问题
Figma 里很多组件状态散落在页面帧、普通 FRAME 或旧版本中，手动整理成 ComponentSet 时容易重画节点、替换错图标，或把字符和 emoji 当成 icon，导致最终组件与设计系统脱节。该技能针对“从现有页面提取组件并补齐变体”的场景，减少从零绘制。
技能如何工作
流程先解析 Component name、fileKey、nodeId、variant 描述等参数，再通过 get_screenshot、scan_page.js 与 search_design_system 并行观察页面结构、识别可复用节点、图标候选和疑似文本 icon。若页面已有目标组件，技能优先克隆整个节点，而不是重绘子元素，并尽量保留颜色 token 引用；若发现文本伪 icon，则按同页 INSTANCE、组件库导入、SVG 生成的优先级替换，禁止使用 Unicode、emoji 或色块代替。
变体生成阶段会依据截图与参数推断维度，采用 DimensionA=Value, DimensionB=Value 这类 PascalCase 命名，通常覆盖 8–16 个常用状态组合。脚本模板使用 createComponent() 和 combineAsVariants()，避免用 createFrame() 伪造组件结构，并在创建后立即追加到页面、按变体修改颜色、文本和透明度。
适用边界与注意点
该技能适合已有 Figma 页面素材、希望快速规范化组件变体的场景。若页面中完全没有可复用节点，仍需要明确组件结构或设计系统输入；对于高度自定义、非标准 token 的组件，最终截图确认与人工检查仍不可省略。
使用场景
- 设计负责人把 Figma 页面里的旧按钮整理成带状态的组件集。
- 设计工程师复用页内图标，避免用字符或 emoji 代替图标。
- 组件维护者识别按钮尺寸、状态和颜色维度，并按统一命名补齐变体。
- 插件用户基于现有 FRAME 克隆节点，生成可检查的 ComponentSet。
适合人员
- 维护 Figma 设计系统的设计师，需要把散落的旧组件整理成规范变体。
- 负责组件库落地的产品设计师，需要补齐按钮、输入框等常见组件状态。
- 做 Figma 插件开发的前端工程师，需要稳定的组件克隆与变体生成流程。
- 接手旧稿的设计维护者，需要优先复用页面节点并替换伪图标。
相关技能
帮助研究者将论文摘要或稿件内容整理为学术海报的版块结构、图选策略与文字压缩方案，不生成设计文件。
先输出审美方向、配色、字体与布局规范，再按专业图标库生成高保真界面原型。
基于 Remotion 生成带透明背景的贴纸动画视频，支持多种动画预设，并可导出 ProRes 4444 或绿幕 H.264。
用 Playwright 将 HTML/CSS 设计稿截图为高清 PNG，适合生成表格、架构、流程与封面图。