Access anywhere, any device
100% on-device processing. No external API keys, zero telemetry, and never uploads your active page data to any cloud.
Manifest V3 · Chrome 116+ · 100% On-Device Privacy
Extractw: 432px · h: 68px · Playfairdesign systemsfrom any site in seconds.
Scan live computed DOM styles and export token-ready system prompts forCursor, Claude, and Copilot. No Figma required. No cloud uploads.Just 1-click & ship!
Quick snap-and-save process
Deep auto-scroll scans up to 8,000 computed DOM nodes, unrolls open Shadow DOM, samples live gradients, and reads CSS variables.
Secure AI export pack always
One-click download ZIP containing DESIGN.md, Cursor SKILL.md, variables.css, Tailwind theme.css, and tokens.json.
● DOM Inspection Feed
Linear — The issue tracking tool you'll actually love
High-performance dark theme with precise contrast, subtle borders, and 8px rhythm.
Sampled Color Palette#0f1015
#5e6ad2
#e2e8f0
#22c55e
Typeface: Inter, ui-sans-serifBase Unit: 8px
DESIGN.md v1.4.5Engine Ready
Click "Scan Live Page" to run deep DOM traversal and generate prompts.
# Design System Prompt: Linear App
## System Mission
Implement UI that mirrors the craft, rhythm, and crisp contrast of Linear.
Single source of truth: Computed DOM inspection.
### Color Tokens
- Canvas: `#0f1015` (Deep space obsidian)
- Accent: `#5e6ad2` (Linear brand indigo)
- Muted Surface: `#1b1d24`
- Border: `rgba(255, 255, 255, 0.08)`
### Non-Negotiables
1. Always prefer var(--token) over ad-hoc hex values.
2. Spacing rhythm follows strict 8px multiples.
3. Use subtle 1px border stroke on dark glass cards.
4. Button hover transitions must not exceed 150ms.
### Agent Build Prompts
- "Build the navigation bar using `--accent: #5e6ad2` and frosted glass blur."
- "Ensure all card headings use `letter-spacing: -0.02em`."Crafted for AI-Assisted Engineers
Exclusive features for your next groundbreaking project.
Just Launched: Agent Skills
Instantly outputs SKILL.md formatted with YAML frontmatter, ready to drop straight into .cursor/skills/ for project-wide styling enforcement.
Computed Typography
Detects font families, weights, optical tracking, line heights, and modular type scales via document.fonts readiness probes.
Insider Shadow & Radii
Distinguishes flat surfaces from elevated cards. Extracts exact CSS multi-layered box-shadow recipes and border radius tokens.
100% Free & Local-First
Open-source under MIT License. Up to 10 full scans per hour with zero server lock-in, zero subscription fees, and complete offline capability.
Be the first-in on prompt-driven frontend engineering.
Stop pasting blurry screenshots into AI chat boxes and hoping the model guesses the padding right. Feed your agent the ground truth: actual computed CSS custom properties, exact hex tokens, and component recipes.
10 Scans / Rolling Hour 100% On-Device Sandbox Tailwind v4 Ready
Zero Friction Workflow
From live webpage to working code in four steps.
STEP 01
Browse to Any Site
Open any public site or web app in Chrome (e.g. Stripe, Linear, Vercel, or YouTube).
STEP 02
Open Floating Panel
Click the DESIGN.md toolbar icon. An in-page panel appears smoothly with zero black frames.
STEP 03
Deep DOM Probe
Auto-scrolls through dynamic content, traverses open Shadow DOM, and compiles tokens.
STEP 04
Feed Cursor & Claude
Drop DESIGN.md or SKILL.md into your codebase. Tell your agent to build with 100% fidelity.
Why Engineers Prefer DESIGN.md
Say goodbye to hallucinated CSS values.
| Workflow Capability | Vision Screenshot to LLM | Figma Dev Mode | Manual DevTools Scraping | DESIGN.md (Calipers) |
|---|---|---|---|---|
| Exact Hex & Spacing Values | Hallucinates (~65% error) | Only if Figma file exists | Tedious copy/paste | 100% Computed DOM |
| Ready-to-Paste AI System Prompt | None | None | None | Complete DESIGN.md |
| Native Cursor Skill (SKILL.md) | None | None | None | 1-Click Native Skill |
| Tailwind v4 @theme Block | Manual prompt | Plugin required | Manual mapping | Instant theme.css |
| Works on Any Live Website | Only visible pixels | Must own design file | Slow & manual | 1-Click on any URL |
| Privacy & Cloud Ingress | High cloud token cost | 💸 Paid seat required | 🆓 Local | 🆓 100% Local & Free |
Discover the next big thing in AI frontend workflows.
Over 3,250 design systems extracted across the web. Install the free Chrome extension and upgrade your AI coding prompts today.
By subscribing you agree to receive terms. 100% local privacy policy. No spam ever.