Make Kits生成组件库需构建上下文约束体系：第一步严格命名并放置DS_Tokens和DS_Components组件集；第二步按固定格式输入结构化提示词；第三步通过插件或CONTEXT_ANCHOR绑定上下文；第四步校验Dev Mode兼容性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
当你在Figma中使用Make Kits生成组件库时，发现AI反复输出通用按钮、卡片或表单样式，无法复用已有设计系统Token，或生成的Kit结构松散、命名混乱、无法被Dev Mode识别为可导出组件——这说明你尚未构建有效的上下文约束体系。Make Kits不是无脑点击就能产出可用资产的黑箱，它依赖明确的语义锚点、结构化输入和上下文绑定三者协同生效。
第一步：准备可被AI识别的设计系统基础
确保当前Figma文件中已存在两个关键本地组件集：【DS_Tokens】（含颜色、文字、间距、阴影等命名Token）与【DS_Components】（含Button、Input、Card等已定义变体的主组件）。这两个组件集必须位于页面顶部层级，且名称一字不差——AI仅识别精确匹配的组件集名，大小写或下划线差异都会导致上下文失效。
右键点击组件集 → “Rename” → 严格改为“DS_Tokens”和“DS_Components”。若组件集嵌套在Frame或Group内，先拖出至画布顶层再重命名。
检查每个Token是否带有效命名：如“Color/Primary”“Text/HeadingXL”“Spacing/4”——斜杠分隔的层级命名是Make Kits解析语义的唯一依据。
第二步：构造结构化提示词模板
在Make Kits插件输入框中，按以下顺序逐行输入，**不得合并行、不得添加空行、不得删减字段**：
[Make Kit v2.3 Context]
Scope: DS_Components
Base Tokens: DS_Tokens
Pattern: “{ComponentName} / {Variant} / {State}”
Output Format: Figma Component with Auto Layout, Variant Property, and Dev Mode Ready
请严格按上述命名模式生成全部组件变体，禁用任何未在DS_Tokens中声明的颜色值、字体族名或像素值；所有尺寸必须基于Spacing/4倍数推导；所有文本样式必须映射至Text/开头的Token。
这一步必须完整粘贴，漏掉任意一行都将导致AI忽略Token绑定，退回默认模板生成。
第三步：绑定上下文并触发生成
方法一：通过插件面板绑定
点击Make Kits面板右上角“⋯” → “Add Context” → 勾选“DS_Tokens”和“DS_Components” → 点击“Apply”。此时面板左下角应显示“Context linked: 2 items”。
方法二：手动拖入上下文锚点（适用于复杂Kit）
在画布空白处新建一个Frame，命名为“CONTEXT_ANCHOR”，将其透明度设为0%，不填充、无描边；将DS_Tokens和DS_Components两个组件集拖入该Frame内；运行Make Kits前，在输入框末尾追加指令：“Anchor Frame: CONTEXT_ANCHOR”。
【注意：若未看到CONTEXT_ANCHOR出现在AI生成结果的图层列表顶部，则说明锚点未被识别，需重新拖入并确认Frame名称完全一致】
第四步：校验生成结果的Dev Mode兼容性
生成完成后，立即执行三项验证：
① 选中任意新生成的Button组件 → 右侧面板切换至Dev Mode → 查看是否显示“React”“CSS”“Tokens”三栏；
② 展开Variants面板 → 检查所有变体是否具备“Type”“Size”“State”三个属性，且值为下拉选项而非自由文本；
③ 双击进入组件内部 → 确认所有文字图层的字体设置为“Inter-SemiBold”等具体Token名，而非“Bold 16px”这类硬编码描述。
若任一验证失败，说明上下文未生效，需返回第二步检查提示词格式或第三步确认组件集命名与位置。
