Introduction

MdPilot turns live websites into documented design systems. Extract tokens, edit them in DESIGN.md, preview components, and export to your stack.

Most teams either rebuild a design system from scratch or copy values manually from DevTools. MdPilot starts from a real URL and produces a structured markdown file your team can refine and ship.

MdPilot editor with DESIGN.md and live preview side by side — The MdPilot editor — markdown on the left, live preview on the right.

Product designers documenting an existing product UI
Developers bootstrapping tokens for a new codebase
Agencies extracting a client's visual language before a redesign

Getting started

Open MdPilot, paste a URL, or start from an empty DESIGN.md file. Everything runs in your browser.

From the landing page or the editor, paste a public website URL. MdPilot fetches the page, reads its styles, and generates a DESIGN.md document with colors, typography, spacing, and component tokens.

MdPilot editor with a sample DESIGN.md document open — Open the editor and paste a URL, or start from the sample document.

Prefer to start from scratch? Use the sample DESIGN.md section on this page as a template and adapt it to your own design system documentation.

Documents are stored locally in your browser. Use the share link to encode your design system in the URL and send it to a teammate.

Extract from a URL

MdPilot analyzes a live page and maps its visual language into a structured token file.

Color palette — backgrounds, text, borders, accents
Typography — font families, sizes, weights, line heights
Spacing and border radii
UI components — buttons, cards, and common patterns

URL extraction workflow in MdPilot — Paste a public URL — MdPilot reads the page and builds your token file.

The target URL must be publicly accessible. MdPilot fetches the page server-side, then processes the HTML and CSS to build your DESIGN.md file.

DESIGN.md format

DESIGN.md is a markdown file with a YAML frontmatter block for tokens and free-form sections for documentation.

Token definitions live in the YAML block at the top of the file:

---
version: alpha
name: My design system
colors:
  primary: "#111320"
  surface: "#f4f6fb"
typography:
  body:
    fontFamily: "Geist Sans, sans-serif"
    fontSize: "1rem"
---

DESIGN.md YAML frontmatter in the editor — Tokens live in the YAML block — components reference them with curly braces.

Components can reference other tokens with curly braces, e.g. {colors.primary}. The preview resolves these references when rendering components.

Live preview

The preview panel renders your design system components as you edit DESIGN.md.

Color swatches and scales from your token file
Typography specimens for each text style
Component previews — buttons, cards, and more

Live preview panel showing color swatches and components — The preview updates in real time as you edit DESIGN.md.

Every change in the editor triggers a re-parse of DESIGN.md. Invalid syntax is surfaced in the validation panel so you can fix issues before exporting.

Export formats

MdPilot exports your token file to formats your development stack can use directly.

CSS variables — a :root block with custom properties
Tailwind config — a theme.extend object for Tailwind CSS v3+
W3C design tokens — interoperable format for other token tools

Export panel with CSS, Tailwind, and W3C format options — Export to CSS variables, Tailwind config, or W3C design tokens.

Share links

Encode your DESIGN.md content in the URL so teammates can open the exact same document.

When you share, MdPilot compresses and encodes your markdown into the URL hash. Anyone with the link sees the same tokens and preview — no server upload required.

Local storage

By default, your work stays on your machine. MdPilot uses browser storage to persist your document between sessions.

Your current DESIGN.md content
Editor history for undo and redo
Last used file name