Turn any website into a DESIGN.md file
Paste a URL. Get a structured markdown document with the complete design system — colors, typography, layout, components, art direction, and AI-ready recreation instructions.
getmd.art · No sign-up · No API keys · Works instantly
You feed it a URL. It fetches the page, parses every pixel of intent, and produces a DESIGN.md — a single markdown file that captures the full design system of any website.
Not a screenshot. Not a CSS dump. A structured design document that an AI coding assistant can read and recreate the design from.
Every generated DESIGN.md includes:
| Section | What you get |
|---|---|
| Design System | Color palette, typography scale, font families, spacing grid |
| Layout System | Grid/flex strategy, container widths, responsive breakpoints |
| UI Components | Buttons, inputs, cards, navigation — with styling details |
| Page Sections | Hero, pricing, forms, testimonials, FAQ — structure & content |
| UX Patterns | Scrolling, navigation, modals, loading states, hover effects |
| Copywriting & Tone | Key headlines, voice characteristics, CTA style |
| Art Direction | Visual mood, emotional tone, style references, personality |
| AI Instructions | Ready-to-use prompts for Claude, ChatGPT, Cursor, or any AI |
1. Open getmd.art
2. Paste any URL
3. Pick what to extract (or go Full)
4. Choose your AI target (Claude / ChatGPT / Cursor / Universal)
5. Get your DESIGN.md — copy, save to library, or feed directly to AI
URL → Fetch & Parse → Extract Design Signals → DESIGN.md
│
┌─────────┼──────────┐
│ │ │
Colors Typography Layout
Components Sections UX
Tone Art Direction AI Prompts
- Next.js 16 — App Router, Server Components, API Routes
- Tailwind CSS v4 — custom design tokens, dark/light/system themes
- Cheerio — server-side HTML parsing and analysis
- Zustand — client state with localStorage persistence
- Docker — standalone production deployment
git clone https://github.com/user/getmd.art.git
cd getmd.art
npm install
cp .env.example .env
npm run devOpen http://localhost:3000.
src/
├── app/
│ ├── api/
│ │ ├── extract/route.ts # Main extraction engine
│ │ └── preview/route.ts # URL preview (title, favicon, description)
│ ├── globals.css # Design tokens, themes, animations
│ ├── layout.tsx # Root layout with theme support
│ └── page.tsx # Main app (4-step workflow)
├── components/
│ ├── Header.tsx # Nav + theme toggle + library access
│ ├── URLInput.tsx # URL input with live preview
│ ├── ExtractionPanel.tsx # Option picker with icons
│ ├── OutputPanel.tsx # Markdown output + copy/save
│ └── LibraryPanel.tsx # Saved extractions drawer
├── store/
│ └── useAppStore.ts # Zustand store (state + theme + library)
└── types/
└── index.ts # TypeScript types
MIT