先看看示例
作者提供的示例，实际效果取决于你的输入和使用工具。
输入
已有代码按钮：primary/secondary 两种外观，sm/md 两个尺寸，支持 loading 和 disabled；品牌主色 #6750D8。
输出
编辑示例 · 未运行
变量草案：color/action/primary = #6750D8；space/control/sm 与 space/control/md 引用现有间距。
组件属性：variant={primary,secondary}，size={sm,md}，state={default,hover,focus,disabled,loading}。
实例检查：loading 保持原宽度；disabled 不可交互；focus 使用独立可见轮廓。
待核对：现有库是否已有同名组件和变量；复用结论确认后再创建。
方法说明
按变量、基础规范、组件和变体的顺序建立设计系统，便于后续页面保持一致。
具体任务
整理按钮组件的变体规格：按变量、基础规范、组件和变体的顺序建立设计系统，便于后续页面保持一致。
建立明暗主题映射：区分原始色值与语义变量，检查模式切换时组件实例是否正确继承。
必需材料
目标 Figma 文件
代码组件、设计变量与状态清单
可选材料
品牌规范
现有组件库与主题模式
使用门槛
有可用 Figma 工具和目标文件编辑权限，先确认本次覆盖的组件范围。
这个 Skill 额外提供的方法
把代码中的状态和设计变量映射到可复用组件，减少设计稿与实现的命名和行为偏差。
编辑示例（未运行）
整理按钮组件的变体规格
任务：请根据下面的示例材料完成整理按钮组件的变体规格，把判断依据和待确认事项写清楚。
输入：
已有代码按钮：primary/secondary 两种外观，sm/md 两个尺寸，支持 loading 和 disabled；品牌主色 #6750D8。
结果片段：
变量草案：color/action/primary = #6750D8；space/control/sm 与 space/control/md 引用现有间距。
组件属性：variant={primary,secondary}，size={sm,md}，state={default,hover,focus,disabled,loading}。
实例检查：loading 保持原宽度；disabled 不可交互；focus 使用独立可见轮廓。
待核对：现有库是否已有同名组件和变量；复用结论确认后再创建。
把代码中的状态和设计变量映射到可复用组件，减少设计稿与实现的命名和行为偏差。 该片段是编辑示例，用于说明交付形态，未运行上游技能。
首次任务
请使用「为 Figma 建立设计变量和组件库」完成「整理按钮组件的变体规格」。
任务要求：把代码中的状态和设计变量映射到可复用组件，减少设计稿与实现的命名和行为偏差。
我的必需材料：
- 目标 Figma 文件：[请填写或粘贴]
- 代码组件、设计变量与状态清单：[请填写或粘贴]
请基于上述实际材料输出：设计变量、组件集合、变体及基础说明。缺少依据的地方单列为待确认，不编造事实；未执行的操作或测试明确标为未执行。
验收要求：
1. 实际组件属性覆盖约定状态。
2. 语义变量绑定到真实属性而非仅写注释。
3. 实例切换和主题切换结果可见且一致。
验收方法
实际组件属性覆盖约定状态
语义变量绑定到真实属性而非仅写注释
实例切换和主题切换结果可见且一致
依赖与准备
需要可用 Figma MCP 或等价画布工具及编辑权限；来源包含设计系统流程和引用资料，单读 SKILL.md 不会自动连接 Figma。
使用边界
只能操作授权文件和节点，不能把整个工作区默认纳入重建。
组件生成后仍需检查变体、变量绑定和真实实例，不以截图代替结构验证。
排错
变体爆炸难维护：区分真正的 variant 与布尔或文本属性，保留有意义的状态组合。
颜色改了组件不跟随：查找硬编码值和错误变量绑定，再用实例验证。
固定来源
https://github.com/figma/mcp-server-guide/blob/38308b7bbc676a9e9d57795ad4793fa9682d1644/skills/figma-generate-library/SKILL.md