Export Options - VibeFlow

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:

Click “Export .zip” under Claude Code Skill
Download the .zip file
Extract to your project’s .claude/skills/ directory
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

​Claude Code Skill (.zip)

​JSON Manifest

Claude Code Skill (.zip)

JSON Manifest