---
spec_name: "Claude Design System Import Spec"
author: "Mike Kwal"
version: 1.0
---

# Claude Design System Import: Setup Spec

This spec guides you through connecting your existing design system to Claude Design to automate your design-to-code workflow. 

## 1. The Manifest File (`design-system-spec.json`)

This is the map that tells Claude how to read your design system. Create a file named `design-system-spec.json` in the root of your GitHub repository and paste this content. **You must edit the `systemName` and `repositoryUrl` fields.**

```json
{
  "schemaVersion": "1.0",
  "systemName": "YourBrand Design System",
  "repositoryUrl": "https://github.com/your-org/your-design-system",
  "paths": {
    "tokens": "/tokens/design-tokens.json",
    "components": "/components/",
    "assets": "/assets/icons/"
  },
  "componentManifest": "/components/manifest.json",
  "framework": "react"
}
```

## 2. Repository Prep Checklist

Before you import, make sure your repository is structured logically. 

- [ ] **Root `design-system-spec.json`:** The file from step 1 is present at the top level of the repo.
- [ ] **Component Directory:** You have a `/components` directory where each component lives in its own sub-directory (e.g., `/components/Button/index.js`).
- [ ] **Tokens File:** You have a `/tokens/design-tokens.json` file that exports your colors, fonts, spacing, etc., in a structured way.
- [ ] **Public Repository:** Your GitHub repository is set to public for the initial connection.
- [ ] **Commit Changes:** All changes, including the new spec file, are committed and pushed to the main branch.

## 3. Import & Sync Workflow

Once your repo is prepped, follow these steps in the Claude interface.

1.  **Start a new Claude Design session.**
2.  **Use the "Import Design System" option.** Paste the full URL to your GitHub repository (e.g., `https://github.com/your-org/your-design-system`).
3.  **Wait for Claude to index.** This might take a minute. Claude will confirm once it has parsed your components.
4.  **Prompt your design.** Use prompts that reference your components. Example:

> "Create a hero section for a SaaS landing page. Use the `PrimaryButton` component for the CTA and the `H1` text style from our tokens. The headline should be 'Build at the Speed of Thought'."

5.  **Sync to code.** Once you're happy with the design, type the command `/design-sync`. This will push the generated code to a new or existing Claude Code session.