Free & open-source Chrome extension · v0.4.0

Turn any website's design into a DESIGN.md blueprint

One click extracts typography, colors, spacing, radius, shadows, and motion from the active tab — then generates a DESIGN.md or SKILL.md that Claude Code, Codex, Cursor, and Google Stitch can build with.

Install in Chrome Try the live demo

No signup · works on any page · output follows the open TypeUI DESIGN.md format

Pipeline

From pixels to a blueprint in five steps

The extension runs the same structured pipeline the demo below shows — fully on your device.

01
Style extraction
Scans visible elements and captures computed typography, colors, spacing, radius, shadows, and motion.
02
Token normalization
Deduplicates raw values and groups them into semantic-like token sets.
03
Website profiling
Uses URL, metadata, headings, nav labels, and structure to infer brand, audience, and surface.
04
Blueprint assembly
Assembles mission, foundations, accessibility, rules, workflow, and quality gates.
05
Conformance checks
Validates required headings, frontmatter, accessibility wording, and state coverage.
Interactive demo

See exactly what you'll get

This is a real run of the generation logic on a sample site — no install needed. Extract, switch format, copy or download the result.

sample-site — active tab https://demo.aurora-analytics.example
Product · Docs · Pricing · Changelog Get started

Analytics that feel effortless

Dashboards, alerts, and reports your whole team will actually open. No SQL required, no stale spreadsheets.

Start free trial Book a demo
Realtime metricsSub-second ingestion with live dashboards and shareable links.
Enterprise-readySSO, SCIM, audit logs, and regional data residency.
Fast by defaultColumnar engine answers most queries in under 100ms.
Simulates the extension reading the page above.
generated output
Run extraction on the sample site
to generate your DESIGN.md here.
waiting for extraction…
Redesign mode

Paste any website — get its design DNA

Drop in a URL you want to redesign. We fetch its public HTML & CSS, extract real design tokens, and generate a DESIGN.md you can hand to Claude, Codex, or Cursor to rebuild it faithfully.

Paste with or without https:// — we fetch only public pages; private and internal hosts are blocked for safety.

Features

Everything you need to brief an AI on your design

Small popup, serious output. Built for people who ship UI with AI tools every day.

One-click auto-extract

Reads the active tab and captures typography, color, spacing, radius, shadow, and motion signals as you see them — no config.

DESIGN.md & SKILL.md

Generate a design-system blueprint or an agent-ready skill file. Both follow the open TypeUI format, ready to paste into your repo.

Quick install to your stack

Drops SKILL.md straight into .claude/skills, .agents/skills, or .cursor/skills via the File System API — with copy/download fallback.

Validated output

Every file passes conformance checks — required headings, frontmatter, WCAG 2.2 AA wording, and full interaction-state coverage.

Explain panel

The ? button shows exactly how your file was generated: sample counts, token coverage, profiling evidence, and check results.

Private by design

Extraction happens locally in your browser. Nothing is uploaded, no account needed — MIT-licensed and open source.

File format

What's inside the generated file

A structured blueprint AI tools can follow — not a dump of CSS values.

Mission
Defines the design-system objective for the extracted site.
Brand
Captures product context, URL, audience, and product surface.
Style Foundations
Lists inferred visual tokens: typography scale, palette, spacing, radius, shadows, motion.
Accessibility
Applies WCAG 2.2 AA requirements and interaction constraints.
Writing Tone
Sets guidance tone for implementation-ready output.
Rules: Do / Don't
Lists required practices and prohibited anti-patterns.
Authoring Workflow
Defines ordered guideline authoring steps.
Output Structure
Enforces consistent output sections across generations.
Component Expectations
Defines required interaction and state details per component.
Quality Gates
Adds testable quality and consistency checks.
Get started

Install in under a minute

Load it unpacked from the repo — no store review wait, no account.

Open the extensions page

Navigate to chrome://extensions in Chrome, Brave, Edge, or any Chromium browser.

Enable Developer mode

Flip the Developer mode toggle in the top-right corner of the extensions page.

Load the folder

Click Load unpacked and select the cloned repo folder. The extractor icon appears in your toolbar.

Then install the generated skill into: Claude Code .claude/skills/design-system Codex .agents/skills/design-system Cursor .cursor/skills/design-system

Ship on-brand UI every time

Stop re-explaining your design system to every AI session. Extract once, reference forever.

Install the extension Star on GitHub