extract

Pull a draft DESIGN.md from any production URL.

Synopsis

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

Opens the web-based creation flow with the URL prefilled as a design reference. The browser flow generates a draft DESIGN.md that you can review, iterate on, and download.

Options

| Flag | Short | Argument | Default | Description | |------|-------|----------|---------|-------------| | --out | -o | <path> | — | Records your intended path in the terminal; the actual download is completed in the browser. | | --token-only | — | — | false | Asks the browser flow to focus on token frontmatter rather than long prose. |

What the browser flow generates

The generator uses your URL and follow-up instructions to propose:

  • Colors: background, text, brand, border, and surface roles
  • Typography: body, display, and mono roles
  • Spacing and radii: a coherent starter scale
  • Components: buttons, inputs, cards, and navigation guidance

The output is a draft DESIGN.md with:

  • Frontmatter proposed from the supplied direction
  • Markdown guidance for visual theme, color, typography, layout, components, and accessibility
  • 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. Prefills the target URL and requested mode
  3. Lets you iterate, copy, or download the resulting draft in the browser

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

  • init — initialize a new design system from scratch
  • submit — publish a DESIGN.md to the webdesignhot catalog
  • Contribute a brand — verified catalog workflow