Design Extractor

About

🎨 Design Extractor — Turn Any Website Into a Design Doc

Love a website's look? Copy it in 30 seconds.

Design Extractor is a Chrome extension that analyzes any webpage and instantly creates a structured DESIGN.md file. No need to dig through DevTools or guess CSS values. One click, and AI does the heavy lifting for you.

---

 ⚡ What It Does

Click "Analyze This Page" and Design Extractor will:

🔍 Scan the code — Grabs all CSS variables, fonts, colors, spacing, shadows, and animations
📸 Take smart screenshots — Captures the top, middle, and bottom of the page so the AI "sees" the design
🤖 Write a full design doc — Generates a clean Markdown file covering the vibe, colors, typography, components, and how to rebuild it
💾 Export in one tap — Copy to clipboard or download as `{website}_DESIGN.md`

---

 👤 Who Is It For

- Indie hackers & devs — Feed design specs straight into Cursor, Copilot, or v0. No more "make it look like Linear" guesswork.
- Designers — Steal like an artist. Analyze competitors and build your own teardown library in minutes.
- Founders & PMs — Show your team exactly what you want, with real specs instead of vague references.
- Frontend engineers — Stop inspecting elements one by one. Get the full system in a single file.

---

 ✨ Key Features

One-click analysis on any HTTPS page
Extracts colors, fonts, spacing, shadows, gradients, animations, and component styles
AI-powered with visual context from 3 auto-captured screenshots
Real-time streaming output — watch the doc write itself
OpenAI-compatible — Bring your own key (Kimi, GPT-4o, and more)
Local-first privacy — Your API key stays in your browser, never on our servers

---

 💰 Pricing

Free — $0, unlimited with your own API key
Pro — $5/month for 50 analyses (or use your own key)
Max — $20/month for 200 analyses (or use your own key)

---

 🔒 Privacy First

Built on Manifest V3 with zero extra dependencies. Your API key is stored locally in chrome.storage.local and never touches our servers. Use your own key and the extension works entirely offline.

---

 🚀 Get Started in 30 Seconds

1. Install Design Extractor from the Chrome Web Store
2. Add your API key in Settings (or log in for Pro/Max)
3. Visit any website and click the extension icon
4. Hit Analyze This Page
5. Download your DESIGN.md and start building

---

Design Extractor — Because great design shouldn't be a mystery.