Website → design system

Extract any design system.
Remix it with AI.

Turn any website into a DESIGN.md, then reshape it with AI or by hand. Ready for Claude Code, Cursor and Figma.

Try

◆ 4 credits / spec◆ HTML + Figma add-ons◆ No card to start

DESIGN-github-com.md

GitHub — Design System

Colors

primary #1F6FEB — link blue
success #1F883D — action green
accent #8957E5 — Copilot purple
danger #CF222E
canvas #010409 — page background
surface #0D1117 — cards & panels
border #30363D

Typography

Font — Mona Sans
H1 · 40px / 1.25 / 600
H2 · 32px / 1.25 / 600
Body · 16px / 1.5 / 400
Code · 13px / 1.45 / SF Mono

Spacing

4 · 8 · 16 · 24 · 32 · 48

Radius

sm 4px · md 6px · lg 12px · full 999px

Elevation

sm · 0 1px 0 rgba(1,4,9,.1)
md · 0 3px 6px rgba(1,4,9,.15)
lg · 0 8px 24px rgba(1,4,9,.2)

Components

Button — primary, default, danger, invisible
Input — 32px height, 6px radius, focus ring
Card — surface bg, 1px border, 6px radius
Label — pill, 12px, colored by status

Breakpoints

sm 544 · md 768 · lg 1012 · xl 1280

Remix + Edit with AI

Make any design system yours.
Just describe it.

Say what to change and watch it update live, or edit it all by hand.

Edit with AI Try Remix

PremiumEdit with AI uses credits. Editing by hand and saving are free.

Chat to restyle
Borrow from any DESIGN.md or screenshot
Fix phone sizes, where measured
Undo and history
Export HTML

The replies here are scripted, the changes are not: the card and the preview are computed with the editor's own code on each brand's real DESIGN.md. Type your own request to continue in the editor.

The pipeline

From URL to production in four steps

Paste a URL

We crawl the site's key pages and read every computed style.

DESIGN.md

Structured, agent-ready tokens streamed live to your editor.

HTML preview ●

A shareable page rendering the system as live specimens.

Figma import ●

Variables, Styles and a board, straight into Figma in one click.

Extract any design system. Remix it with AI.