mcpField
A
ai-component-metadata

ai-component-metadata

github.com/thedesignproject设计与 UI97276 次安装9 周前更新
代码仓库

关于 ai-component-metadata

ai-component-metadata 是用于生成设计系统组件结构化元数据的 Skill，面向构建 AI UI 生成流程的团队。它记录组件属性、状态、用法和无障碍信息，帮助 AI 复用组件并选择合适变体。

主要功能

  1. 01使用 Python 脚本生成元数据
  2. 02记录组件属性、变体和状态
  3. 03描述无障碍信息与组件组合
  4. 04提供可运行示例和反模式
  5. 05通过 AI 任务与 Storybook 验证

适用场景

  1. 01为设计系统组件编写文档
  2. 02帮助 AI 选择组件变体
  3. 03为 UI 生成提供组件上下文

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thedesignproject/agent-skills --skill ai-component-metadata

安装后在 Claude Code 中输入/ai-component-metadata确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE.txt
assets/
metadata-template.tsx
assets/examples/
Button-example.tsx
references/
INTEGRATION.md
NESTED.md
TESTING.md
scripts/
generate_metadata.py

详细介绍

AI 组件元数据生成器

为设计系统组件生成结构化、可供 AI 使用的元数据，以实现智能 UI 生成和组件使用。

快速入门

分析组件时，请使用 scripts/generate_metadata.py 中的元数据架构模板，或按照以下手动流程操作：

# Automatic generation (reads component file)
python scripts/generate_metadata.py path/to/Component.tsx

# Or use the template directly
cp assets/metadata-template.tsx your-component-metadata.tsx

核心工作流

1. 分析组件结构

识别：

  • 组件组成（插槽、子组件）
  • 可用变体和状态
  • Props 及其类型
  • 无障碍属性
2. 生成元数据

按照以下架构创建元数据：

export const componentMetadata = {
  component: {
    name: "ComponentName",
    category: "atoms|molecules|organisms",
    description: "Brief description",
    type: "interactive|display|container|input|navigation"
  },
  
  usage: {
    useCases: ["primary-use", "secondary-use"],
    requiredProps: [],
    commonPatterns: [
      {
        name: "pattern-name",
        description: "When to use",
        composition: "JSX example"
      }
    ],
    antiPatterns: [
      {
        scenario: "what-not-to-do",
        reason: "why",
        alternative: "what-instead"
      }
    ]
  },
  
  composition: {
    slots: {},
    nestedComponents: [],
    commonPartners: [],
    parentConstraints: []
  },
  
  behavior: {
    states: [],
    interactions: {},
    responsive: {}
  },
  
  accessibility: {
    role: "ARIA role",
    keyboardSupport: "description",
    screenReader: "behavior",
    focusManagement: "strategy",
    wcag: "AA"
  },
  
  aiHints: {
    priority: "high|medium|low",
    keywords: [],
    context: "when to use"
  }
}
3. 验证元数据
  • 使用 AI 生成任务进行测试
  • 在 Storybook 中验证
  • 确保示例可以运行

组件类别

  • 原子组件：基本构建块（Button、Text、Input）
  • 分子组件：简单组合（Card、Chip、FormField）
  • 有机体组件：复杂组件（Header、Table、Form）

高级功能

复杂场景请参阅：

与 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

最佳实践

  1. 确保示例真实可用——使用实际、可运行的代码
  2. 聚焦模式——记录常见的使用模式
  3. 包含反模式——帮助 AI 避免错误
  4. 通过实际使用验证——使用实际的 AI 生成进行测试

成功指标

满足以下条件时，说明元数据有效：

  • AI 会使用现有组件，而非重新创建
  • 根据上下文选择正确的变体
  • 生成的代码保持无障碍性
  • AI 输出中的模式保持一致

评论

支持 Markdown