extract

Pull a draft DESIGN.md from any production URL.

Synopsis

design-md extract <url> [-o <path>] [--token-only]

Submits a URL for extraction and opens the web-based creation flow in your browser. The extraction process uses Playwright to sample the production site’s CSS (colors, fonts, radii, spacing, components) and synthesizes a draft DESIGN.md file.

Options

FlagShortArgumentDefaultDescription
--out-o<path>./<slug>.draftOutput path for the extracted DESIGN.md file (optional; most users will set this in the web UI).
--token-only——falseExtract only the token frontmatter (colors, typography, spacing, radii) without prose sections. Useful for design systems with publicly documented CSS variables.

What gets extracted

Playwright navigates to the production URL and samples the DOM to identify:

  • Colors: background, text, brand, border, surface roles (via computed styles on headings, buttons, text elements)
  • Typography: body and heading roles with family, size, weight, and line-height from sampled elements
  • Spacing: gutters, padding scale inferred from button/card layouts
  • Radii: border-radius values sampled from buttons, cards, and form inputs
  • Components: structure and states (primary buttons, secondary buttons, inputs, cards) via DOM traversal

The output is a skeleton DESIGN.md with:

  • Frontmatter populated from sampled CSS
  • 15 markdown sections containing [TODO] placeholders for prose (visual theme, color palette, typography rules, components, accessibility, etc.)
  • quality: auto flag indicating the entry requires hand-review and curation

Examples

Extract from a retail site with full prose sections:

design-md extract https://www.wayfair.com

Extract from a design system that ships CSS variables — tokens only:

design-md extract https://www.stripe.com --token-only

Specify an output path:

design-md extract https://www.pinterest.com -o ./brands/pinterest.draft.md

Output

The extract command:

  1. Logs the target URL and opens a browser to the webdesignhot creation flow: https://webdesignhot.com/design-md/create?url=<encoded-url>
  2. Writes a .draft file to disk (path specified via -o or defaulting to ./<slug>.draft)
  3. The draft file contains frontmatter and skeleton prose ready for curation

Example output structure:

site/src/content/designs/
└── wayfair.draft.md

# Contents:
---
name: Wayfair
tagline: "The Way Home"
colors:
  bg: '#ffffff'
  text: '#1a1a1a'
  brand: '#b5956d'
  # ... sampled from production
---

# Wayfair

[TODO: Visual Theme & Atmosphere — describe the overall mood and grid-based composition.]

## 1. Visual Theme & Atmosphere

[TODO]
...

Important — drafts are not catalog entries