design system extractor

A chrome Extension built with Plasmo, React, TypeScript, and TailwindCSS that reverse-engineers any website into a professional design system document.

features

• Scans DOM and CSSOM of the active tab
• Extracts colors, typography, spacing, radius, shadows, animations, micro-interactions, layout patterns, components, and assets
• Builds a normalized Design Graph JSON
• Generates comprehensive design.md (via LLM or local template)
• Exports design.md, tokens.json, and tailwind.config.ts
• One-click Copy AI Prompt optimized for Cursor, Lovable, Bolt, v0, Replit, and Claude Code
• Supports light, dark, and mixed color mode websites
• Manifest V3 architecture

Getting Started

npm install
npm run dev

Load the extension in Chrome:

1. Open chrome://extensions
2. Enable Developer mode
3. Click Load unpacked
4. Select the build/chrome-mv3-dev folder

Usage

1. Navigate to any website
2. Click the extension icon
3. Click Analyze This Page
4. Preview tokens or read the generated design.md
5. Export files or copy an AI prompt for your tool of choice

LLM Configuration

Open Settings (⚙) in the popup to configure:

• Template (default) — generates design.md locally, no API key needed
• OpenAI — uses GPT models for richer documentation
• Anthropic — uses Claude models

Project Structure

├── popup.tsx              # Extension popup UI
├── background.ts          # Service worker (export + settings)
├── contents/scanner.ts    # Content script (DOM/CSSOM scan)
├── lib/
│   ├── scanner/           # Extraction logic
│   ├── graph/             # Design Graph normalization
│   ├── llm/               # LLM + template generation
│   ├── export/            # File exporters
│   └── prompts/           # AI prompt builder
└── components/            # React UI components

Build for Production

npm run build
npm run package