StyleSync CLI

Extract design systems and UI kits from live websites using AI.

StyleSync scrapes a website, extracts CSS styles and UI components, then uses Claude to analyze and produce a structured design system — complete with a rendered UI kit, Tailwind config, design tokens, and a Claude Code skill file.

Install

npm install -g stylesync-cli

Or run directly:

npx stylesync-cli https://example.com

Prerequisites

• Node.js 20+
• Claude Code CLI installed and authenticated with an active subscription

StyleSync uses claude -p (pipe mode) to run AI analysis and code generation through your Claude Code subscription. No API key needed.

Usage

# Extract design system from a website
stylesync https://example.com

# Custom output directory
stylesync https://example.com -o ./my-design-system

Output

StyleSync generates the following files:

| File | Description | |------|-------------| | ui-kit.html | Self-contained UI kit with rendered components and token showcase | | tokens.json | Design tokens (colors, typography, spacing, shadows, borders, components) | | tailwind.config.ts | Ready-to-use Tailwind CSS configuration from extracted tokens | | design-system.md | Claude Code skill file for AI-assisted development | | screenshot.png | Full-page screenshot of the target site |

How It Works

StyleSync runs a 4-step pipeline:

1. Fetch — Playwright loads the page, scrolls to trigger lazy content, captures a screenshot, extracts computed styles and UI components from the DOM
2. Analyze — Claude Opus interprets raw CSS frequency data and component HTML to produce semantically-named design tokens and component definitions
3. Codegen — Claude Sonnet takes the design tokens and codes each component as production-quality HTML with inline styles
4. Export — Generates all output files: the UI kit page (template for tokens + AI-generated components), Tailwind config, tokens JSON, and skill markdown

Example

$ stylesync https://adamlevoy.com

StyleSync CLI v0.1.0

Target: https://adamlevoy.com
Output: ./output

✔ Fetching page and extracting styles...
✔ Screenshot saved: output/screenshot.png
✔ Found 29 unique colors, 1 font families, 5 loaded fonts, 69 UI components
✔ Analyzing with AI (Opus)...
✔ Extracted 14 colors, 14 typography tokens, 18 spacing tokens, 20 components
✔ Coding components with AI (Sonnet)...
✔ Component HTML generated
✔ Writing output files...

Done! Generated files:

  Screenshot    output/screenshot.png
  Tokens JSON   output/tokens.json
  Tailwind      output/tailwind.config.ts
  Skill         output/design-system.md
  UI Kit        output/ui-kit.html

  14 colors | 14 type styles | 18 spacing tokens | 20 components
  39,197 input + 29,691 output = 68,888 tokens | $0.96 | 341.2s

Development

git clone https://github.com/adamlevoy/stylesync-cli.git
cd stylesync-cli
npm install
npx playwright install chromium
npm run build

npm test          # Run tests
npm run dev -- https://example.com  # Run without compiling

Roadmap

• [x] Single-page extraction with AI analysis
• [x] AI-coded component rendering
• [ ] Multi-page crawl with component inventory
• [ ] Review agent with Tailwind/WCAG validation
• [ ] Figma export
• [ ] Pencil.dev export

License

MIT