🐾 DesignClaw

Steal any website's design DNA — and teach your AI to build with it.

Paste a URL. DesignClaw crawls the site, reverse-engineers its colors, type, spacing, components, and motion, and streams back a production-ready SKILL.md that any AI coding assistant can use to reproduce that exact aesthetic — on completely different content.

---

            ┌─────────────────────────────────────────────────────────┐
   paste    │   https://that-gorgeous-site.com                        │
   a URL ──▶│   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  [ Extract ] │
            └─────────────────────────────────────────────────────────┘
                                     │
   📸 screenshots  ·  🎨 computed styles  ·  🧬 DOM + CSS  ·  🧠 pattern detection
                                     │
                                     ▼
            ┌─────────────────────────────────────────────────────────┐
            │  SKILL.md  ·  600–1000 lines  ·  streamed live           │
            │  ── colors, type scale, spacing, radii, shadows          │
            │  ── copy-paste component recipes (buttons, cards, nav)   │
            │  ── motion + animation system, layout philosophy         │
            └─────────────────────────────────────────────────────────┘

✨ What it does

Extracting a design system from a live site by hand takes hours of DevTools spelunking. DesignClaw does it in seconds and hands you a structured brief your AI assistant actually understands.

• 🎨 Real design extraction — colors, type scale, spacing, radii, shadows, buttons, cards, nav, and badges pulled from computed styles, not guesses.
• 🧠 Pattern detection — classifies card systems, button styles, and color / typography / motion strategies into design archetypes.
• 👁️ Live component preview — renders the extracted button, heading, and card using the site's real fonts (FontFace API + Google Fonts fallback).
• ⚡ Streaming generation — the SKILL.md streams in over SSE. Fast single-pass or higher-quality multi-pass mode.
• 🕓 Extraction history — past runs, screenshots, and generated skills persisted to Supabase.
• 🔁 Section regeneration — re-roll any single section with extra context.

🧩 How it works

Frontend (React + Vite)                     Backend (Node.js + Hono)
  InputPage  ──POST /api/extract──▶  5-step extraction pipeline
  ExtractPage ◀──── SSE stream ────    1. crawler         Puppeteer screenshots + DOM
                                       2. sourceExtractor raw CSS from stylesheets
                                       3. computedExtractor getComputedStyle on components
                                       4. htmlExtractor   DOM skeleton + class patterns
                                       5. patternDetector design-archetype classification
                                              │
                                              ▼
                                       skillGenerator ──▶ Anthropic Claude API
                                         (streams SKILL.md back over SSE)

The Claude prompt gets screenshots (base64), filtered source CSS, browser-computed style data (JSON), and the HTML skeleton — then writes a 10-section SKILL.md.

🛠 Tech stack

Layer	Technology
Frontend	React 18 · Vite · TypeScript
Styling	Tailwind CSS · shadcn/ui (Radix)
State	Zustand
Backend	Node.js · Hono
Crawling	Puppeteer (headless Chrome)
AI	Anthropic Claude API (Sonnet / Opus)
Database	Supabase (history · screenshots · auth)

🚀 Quick start

Prerequisites

• Node.js 20+
• Chrome / Chromium locally (Puppeteer downloads its own by default)
• An Anthropic API key
• A Supabase project (free tier works)

1 · Install

git clone <your-fork-url> designclaw
cd designclaw
npm install

2 · Configure

cp .env.example .env

Variable	Required	Description
ANTHROPIC_API_KEY	✅	Your Anthropic key (sk-ant-…).
ANTHROPIC_BASE_URL	—	Point at an Anthropic-compatible proxy. Defaults to https://api.anthropic.com/v1.
ANTHROPIC_MODEL	—	Single-pass model. Default claude-sonnet-4-6.
ANTHROPIC_MODEL_OPUS	—	Multi-pass model. Default claude-opus-4-8.
PORT	—	Backend port. Default 3001.
SUPABASE_URL / SUPABASE_SERVICE_ROLE_KEY	✅	Server-side access — service role, never expose to the client.
VITE_SUPABASE_URL / VITE_SUPABASE_ANON_KEY	✅	Client-side access — anon/publishable key only.

⚠️ VITE_-prefixed vars are bundled into the browser and are not secret. Only ever put the anon key there — never the service role key.

3 · Set up the database

The app uses these Supabase objects:

• Tables: profiles · extractions · regenerations · screenshots
• Storage buckets: screenshots · avatars

Create them in your project and add Row-Level Security so users only see their own rows. (A migration file isn't bundled — define columns to match the usage in server/ and src/stores/.)

4 · Run

npm run dev          # frontend + backend together

Script	What it does
npm run dev	Vite frontend and Hono backend
npm run dev:client	frontend only
npm run dev:server	backend only
npm run build	build the frontend
npm run build:server	build / type-check the backend
npm run lint	eslint

Frontend → http://localhost:8080 · Backend → http://localhost:3001

☁️ Deployment

• The backend needs Chrome (Puppeteer) — deploy to Railway or Fly.io, not Vercel serverless.
• The frontend is a static build — Vercel, Netlify, etc. Point it at your backend via CORS origins.
• Set the same env vars in your host's dashboard.

📁 Project structure

designclaw/
├── src/                  # React frontend — pages, components, stores, lib
├── server/               # Node.js + Hono backend
│   ├── routes/           # /api/extract, /api/history, /api/regenerate, …
│   ├── services/         # crawler, extractors, patternDetector, skillGenerator
│   ├── prompts/          # system + user prompt builders
│   └── utils/            # anthropic.ts (AI client), supabase.ts, cssFilter.ts
└── .claude/CLAUDE.md     # architecture notes for AI assistants

Deeper dive: .claude/CLAUDE.md — full architecture walkthrough.

🤝 Contributing

Issues and PRs welcome. Keep changes focused, run npm run lint before submitting, and never commit secrets (.env is gitignored).

📄 License

MIT — do whatever you want, just keep the notice.

_{Built for designers who'd rather ship than inspect-element.}