用途
AI Component Metadata Generator 用于为设计系统组件生成结构化、AI 可消费的元数据，以支持智能 UI 生成和组件使用。其目标是让 AI 在生成界面时能够复用已有组件，而不是重新创建，并根据上下文选择正确的变体，同时保持生成代码的无障碍性。
主要能力
该技能可以分析组件结构，识别以下内容：
- 组件组成（插槽、子元素）
- 可用的变体和状态
- Props 及其类型
- 无障碍属性
基于分析结果，生成符合特定 schema 的元数据。元数据 schema 包含以下部分：
- component：组件名称、类别（atoms/molecules/organisms）、描述、类型（interactive/display/container/input/navigation）
- usage：使用场景、必需 Props、常见模式（名称、描述、组合示例）、反模式（场景、原因、替代方案）
- composition：插槽、嵌套组件、常见伙伴组件、父级约束
- behavior：状态、交互、响应式
- accessibility：ARIA 角色、键盘支持、屏幕阅读器行为、焦点管理策略、WCAG 等级
- aiHints：优先级（high/medium/low）、关键词、上下文（何时使用）
使用方式
快速开始
分析组件时，可以使用 scripts/generate_metadata.py 中的元数据 schema 模板，或按照手动流程操作：
自动生成（读取组件文件）：
python scripts/generate_metadata.py path/to/Component.tsx
或直接使用模板：
cp assets/metadata-template.tsx your-component-metadata.tsx
核心工作流
- 分析组件结构：识别组件组成、变体、状态、Props 类型和无障碍属性。
- 生成元数据：按照提供的 schema 创建元数据。
- 验证元数据：通过 AI 生成任务测试、在 Storybook 中验证、确保示例可运行。
组件类别
- atoms：基本构建块（Button、Text、Input）
- molecules：简单组合（Card、Chip、FormField）
- organisms：复杂组件（Header、Table、Form）
高级功能
对于复杂场景，可参考：
- 嵌套组件：NESTED.md
- 集成模式：INTEGRATION.md
- 测试策略：TESTING.md
与 Figma 配合使用
当与 Figma MCP 结合时：
// Figma provides visual context
const figmaContext = await Figma.get_design_context();
// Your metadata provides behavioral context
const componentMetadata = components.Button.metadata;
// AI combines both for complete understanding
适用场景
- 设计系统团队希望让 AI 工具正确理解和使用其组件库。
- 需要为 AI 生成 UI 提供组件行为、使用模式和反模式等上下文信息。
- 与 Figma MCP 等设计工具集成，结合视觉上下文和行为上下文。
最佳实践
- 保持示例真实：使用实际可运行的代码。
- 关注模式：记录常见使用模式。
- 包含反模式：帮助 AI 避免错误。
- 通过使用验证：用实际 AI 生成进行测试。
成功指标
元数据有效时表现为：
- AI 使用现有组件而不是重新创建。
- 根据上下文选择正确的变体。
- 生成代码中保持无障碍性。
- AI 输出中的模式保持一致。
限制
资料中未提供关于收费、价格、平台支持范围、具体效果保证等信息。