Skip to main content

​
Claude Code Skill (.zip)

Export your design system as a Claude Code skill for use with the Claude Code CLI. What’s included:
  • All component JSX code
  • Design guidelines in markdown
  • Skill configuration files
  • README with usage instructions
Installation:
  1. Click “Export .zip” under Claude Code Skill
  2. Download the .zip file
  3. Extract to your project’s .claude/skills/ directory
  4. Claude Code will automatically detect the skill
Example usage: 
# In your project directory
claude "Create a user dashboard using the Company Dashboard design system"
What Claude Code does with your design system:
  • Reads your design guidelines
  • References your component library
  • Generates new screens matching your design language
  • Maintains consistency across the application

​
JSON Manifest

Export complete design system data in JSON format. What’s included: 
{
  "name": "Stripe UI",
  "description": "Stripe-inspired design system",
  "tags": ["SaaS", "Minimal", "Professional"],
  "guidelines": "# Design Principles...",
  "components": [
    {
      "name": "PricingCard",
      "jsxCode": "<div>...</div>",
      "description": "Pricing tier card component",
      "props": {...}
    }
  ]
}
Use cases:
  • Backup and versioning
  • Sharing with external tools
  • Custom integrations
  • Migration to other platforms