Documentation

StyleKit Docs

Everything you need to extract design systems and apply them to your AI-generated code.

Getting Started

StyleKit has two components that work together: a Chrome Extension that extracts design tokens from any website, and a CLI tool that applies pre-built design systems to your projects.

Chrome Extension

Visit any site, click Extract, get your DESIGN.md instantly.

CLI Tool

Pull any design skill directly into your project from the terminal.

Chrome Extension

Installation

  1. 1Add StyleKit from the Chrome Web Store (free)
  2. 2Pin the extension to your toolbar for quick access
  3. 3Visit any website and click the StyleKit icon
  4. 4Click "Extract Styles" — results appear instantly

What it extracts

Colors (12 max)
Font families
Font sizes
Font weights
Spacing scale
Border radius
Box shadows
Spacing gaps

Export options

After extraction, you can:

  • Copy Copy DESIGN.md to clipboard and paste into your AI tool
  • Download Save as DESIGN.md file to your project

CLI Reference

Install via npx — no global install required:

bash
npx stylekit-ai [command]
npx stylekit-ai listList all available design skills
bash
npx stylekit-ai list

┌──────────────────┬──────────────────────────────────┬──────────┐
│ Name             │ Description                      │ Tags     │
├──────────────────┼──────────────────────────────────┼──────────┤
│ minimal          │ Clean, whitespace-heavy design   │ tailwind │
│ startup          │ Vibrant modern SaaS aesthetic    │ tailwind │
│ dark-mode        │ Dark-first with high contrast    │ tailwind │
│ ...              │ ...                              │ ...      │
└──────────────────┴──────────────────────────────────┴──────────┘
npx stylekit-ai pull <skill>Pull a skill into your project
bash
npx stylekit-ai pull minimal

✔ Fetching skill: minimal
✔ Writing .stylekit/minimal.json
✔ Tailwind config snippet ready

# Add to your tailwind.config.js:
extend: {
  colors: { primary: '#18181b', accent: '#6366f1' },
  fontFamily: { sans: ['Inter', 'system-ui'] }
}
npx stylekit-ai initCreate a DESIGN.md interactively
bash
npx stylekit-ai init

? What is your primary brand color? #7c3aed
? Which font would you like to use? Inter
? Choose a design style: Minimal
? What's the corner radius style? Rounded

✔ DESIGN.md created successfully!
npx stylekit-ai generateGenerate AI prompt from your DESIGN.md
bash
npx stylekit-ai generate

╭─────────────────────────────────────────╮
│  Copy this prompt to your AI tool:      │
│                                         │
│  Use the following design system for    │
│  all UI components you generate...      │
╰─────────────────────────────────────────╯

DESIGN.md Format

DESIGN.md is a plain Markdown file that describes your design system in a format optimized for AI coding assistants. Paste it into Claude Code, Cursor, or Copilot and your AI will follow your exact design language.

markdown
# Design System

> Extracted from: vercel.com
> Generated by StyleKit on 2026-04-21

## Colors
- Primary: `#000000`
- Background: `#ffffff`
- Accent: `#0070f3`
- Text Muted: `#888888`
- Border: `#eaeaea`

## Typography
- **Font Family:** Inter, system-ui, sans-serif
- **Sizes:** 12px, 14px, 16px, 20px, 24px, 32px, 48px
- **Weights:** 400, 500, 600, 700

## Spacing
- **Scale:** 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

## Border Radius
- **Small:** 4px
- **Medium:** 8px
- **Large:** 12px
- **Full:** 9999px

## Shadows
- **sm:** 0 1px 2px rgba(0,0,0,0.05)
- **md:** 0 4px 6px rgba(0,0,0,0.07)
- **lg:** 0 10px 15px rgba(0,0,0,0.1)

Design Skills

StyleKit comes with 10 pre-built design skills. Pull any of them into your project with npx stylekit-ai pull <name>

minimal

Clean, whitespace-heavy design with subtle borders

corporate

Professional enterprise look with structured layouts

startup

Vibrant, modern SaaS aesthetic with bold CTAs

dark-mode

Dark-first design system with high contrast

glassmorphism

Frosted glass panels with blurred translucent surfaces

retro

Nostalgic 80s/90s terminal and pixel aesthetic

brutalist

Raw, stark design with thick borders and stark contrast

soft-ui

Neumorphic design with soft shadows and gentle gradients

neon

Electric neon colors on dark backgrounds

ocean

Calming ocean-inspired blues and teals

AI Integration

StyleKit works with all major AI coding tools. Here's how to use your DESIGN.md with each one:

Claude Code

Add your DESIGN.md to the project root. Claude Code automatically reads it as context. Or paste contents directly in your prompt.

Cursor

Add DESIGN.md to your project. Reference it with @DESIGN.md in Cursor chat, or add it to .cursorrules for automatic context.

GitHub Copilot

Paste the DESIGN.md content at the start of your prompt. Copilot will follow the design constraints for all generated components.

Windsurf

Place DESIGN.md in your project root. Windsurf's Cascade agent will automatically detect and use it as design context.