DesignMD
Discover
New — import to Figma

Website → design system

Extract the design system behind any website.

From any website — a structured DESIGN.md, a live HTML preview, and a one-click Figma import. The exact tokens, not guesses.

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

The pipeline

From URL to production in four steps

01

Paste a URL

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

02

DESIGN.md

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

03

HTML preview ●

A shareable page rendering the system as live specimens.

04

Figma import ●

Variables, Styles & a board — one click, straight into Figma.