Importing design systems

preset AI extracts design tokens and scans for components from your existing design system. Import from GitHub, GitLab, or upload a zip file of your codebase.

Quick start

1. Go to Design Systems in the sidebar
2. Click Import Design System
3. Choose your import source: GitHub, GitLab, or upload
4. Enter the repository URL or upload your file
5. Analyze token usage (optional): find missing and unused tokens
6. Review the extracted tokens
7. Click Import to create your design system

Supported formats

preset AI auto-detects and parses these token formats:

preset AI also recognizes Carbon, Material, Primer, and Chakra for optimized extraction.

Component library support

Beyond token extraction, preset AI has built-in support for these libraries with full component and variant mapping:

Theme generation

preset AI generates theme configurations for Tailwind CSS, Radix, DaisyUI, and HeroUI. AI tools then get not just your tokens, but your complete component patterns: generated code uses the right variants, props, and compositions.

Importing from GitHub

You need a public GitHub repository URL (private requires an access token).

1. Click Import Design System
2. Select GitHub
3. Paste your repository URL: https://github.com/owner/repo, https://github.com/owner/repo/tree/main, or owner/repo
4. Click Scan Repository
5. Review the extracted tokens
6. Click Import

Limitations

• Very large repositories may take longer to scan
• GitHub API rate limits apply: 60 requests/hour unauthenticated, 5,000/hour with a token

Importing from GitLab

You need a GitLab repository URL and a Personal Access Token with read_repository scope.

Creating a Personal Access Token

1. Go to GitLab → Settings → Access Tokens
2. Click Add new token
3. Name it (e.g. "preset AI Import")
4. Select scope: read_repository
5. Click Create personal access token
6. Copy the token: you won't see it again

Steps

1. Click Import Design System
2. Select GitLab
3. Paste your repository URL: https://gitlab.com/owner/repo or https://gitlab.com/group/subgroup/repo
4. Enter your Personal Access Token
5. Click Scan Repository
6. Review the extracted tokens
7. Click Import

Your token is used only for this import. It is not stored on our servers.

Uploading a zip file

For local codebases or when GitHub/GitLab isn't an option.

What to include

Any of these files in your zip:

• tokens.json or design-tokens.json
• tailwind.config.js or tailwind.config.ts
• CSS files with custom properties (globals.css, variables.css)
• Token files from your design system

What's skipped automatically

• node_modules/
• .git/
• dist/ and build/
• Test files

Steps

1. Click Import Design System
2. Select Upload
3. Drag and drop your .zip file or click to browse
4. Wait for extraction and parsing
5. Review the extracted tokens
6. Click Import

Preparing your zip

zip -r design-system.zip \
  tailwind.config.js \
  src/styles/globals.css \
  tokens/ \
  -x "node_modules/*" -x ".git/*"

Understanding the preview

After scanning, you'll see a preview of extracted tokens.

Token categories

Extraction confidence

Color philosophy

preset AI detects how your design system organizes colors:

• Scale-first: raw color scales like blue-500, gray-100
• Semantic-first: role-based tokens like primary, background
• Hybrid: a mix of scales and semantic tokens

Component import wizard

In addition to token extraction, preset AI includes a component import wizard that scans your codebase for React components, detects variants, and creates presets automatically.

How it works

Four steps:

1. Source: choose where to scan: upload a zip, connect to GitHub, or connect to GitLab
2. Configure: select folders to include (e.g. src/components), add exclude patterns, toggle AI-enhanced analysis
3. Review: browse discovered components, variants, inferred props, and confidence scores; select what to import
4. Import: preset AI creates one preset per variant and registers any inferred design tokens

What gets created

Importing from Storybook

If your project uses Storybook, zip your stories directory and upload:

zip -r stories.zip src/stories/ -x "node_modules/*"

The scanner recognizes .stories.tsx, .stories.jsx, and .stories.mdx, extracts story metadata (args, argTypes), and maps them to component variants.

Component scanning sources

Confidence scores

Each discovered component has a 0-100% confidence score:

Retrying failed imports

If some components fail (e.g. duplicate name conflicts), the wizard shows which failed and offers a Retry button that re-attempts only those.

Troubleshooting

"No design token files found"

The scanner couldn't identify any token files in your repository or zip.

• Make sure your token files use standard names (tokens.json, tailwind.config.js, variables.css)
• Check that files aren't in excluded directories (node_modules, dist)
• Try including more specific token files in your zip

"No tokens could be extracted"

Files were found but couldn't be parsed.

• Verify your token files contain valid syntax
• Check that CSS files have :root with custom properties
• Make sure JSON files follow Tokens Studio or Style Dictionary format

"GitHub API rate limit exceeded"

Too many requests to GitHub's public API.

• Wait an hour for the limit to reset
• Try a smaller repository
• Use zip upload instead

"Invalid GitLab token"

The Personal Access Token is incorrect or expired.

• Generate a new token in GitLab settings
• Make sure the token has read_repository scope
• Check you copied the full token

"Access denied" (GitLab)

The token doesn't have permission to read the repository.

• Verify you have access to the repository
• Regenerate the token with read_repository scope
• For group repos, ensure your GitLab account has access

FAQ

Can I import from private GitHub repos?

Yes. Enter an access token in the GitHub source form and preset AI uses it for all API calls and file fetches. The token is used only for this import; it is not stored.

What if my design system uses a custom format?

preset AI uses AI analysis on non-standard files. Results may have lower confidence. Consider exporting to Tokens Studio or Style Dictionary format for best results.

Can I re-import to update tokens?

Yes. See Updating design systems for a complete guide to reviewing and applying changes from your source.

What happens to existing tokens when I import?

Import creates a new design system. Your existing design systems are not affected.

Is my code stored anywhere?

No. Repository scanning and zip processing happen in your browser. Only the extracted tokens are stored when you click Import.

Can I import from Bitbucket?

Not yet. Bitbucket support is planned.

What's the maximum zip file size?

There's no hard limit, but files over ~500MB may cause browser memory issues. Include only relevant token files.

Does preset AI work with Tailwind CSS?

Yes. preset AI imports tokens from tailwind.config.js/ts files and generates Tailwind theme configurations. AI tools then reference your exact Tailwind classes and design tokens.