> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibeflow.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Export Options

> Export your design system as Claude Code skills or JSON

## 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:**

```bash theme={null}
# 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:**

```json theme={null}
{
  "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