ai-component-metadata

AI Component Metadata Generator

Generate structured, AI-consumable metadata for design system components to enable intelligent UI generation and component usage.

Quick Start

When analyzing a component, use the metadata schema template in scripts/generate_metadata.py or follow the manual process below:

# 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

Core Workflow

1. Analyze Component Structure

Identify:

• Component composition (slots, children)
• Available variants and states
• Props and their types
• Accessibility attributes

2. Generate Metadata

Create metadata following this schema:

3. Validate Metadata

• Test with AI generation tasks
• Verify in Storybook
• Ensure examples are runnable

Component Categories

• atoms: Basic building blocks (Button, Text, Input)
• molecules: Simple combinations (Card, Chip, FormField)
• organisms: Complex components (Header, Table, Form)

Advanced Features

For complex scenarios, see:

• Nested components: NESTED.md
• Integration patterns: INTEGRATION.md
• Testing strategies: TESTING.md

Working with Figma

When combining with Figma MCP:

Best Practices

1. Keep examples real - Use actual, runnable code
2. Focus on patterns - Document common usage patterns
3. Include anti-patterns - Help AI avoid mistakes
4. Validate through usage - Test with actual AI generation

Success Metrics

Your metadata is effective when:

• AI uses existing components instead of recreating
• Correct variants are selected based on context
• Accessibility is maintained in generated code
• Patterns are consistent across AI outputs