Design Extractor

🎨 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.