extract-design-md

Installation
SKILL.md

Extract DESIGN.md from a site

Given a live URL, produce a DESIGN.md — YAML design tokens (colors, typography, rounded, spacing, components) plus prose in canonical section order — good enough to hand a coding agent so it builds new UI matching the source site.

Core idea (from research): tokens map ~1:1 to a site's CSS custom properties + computed styles, so the heavy lifting is a cheap in-browser extraction — not vision. Screenshots feed prose only. The official linter is a free quality gate.

URL ─▶ 1 DISCOVER ─▶ 2 EXTRACT TOKENS ─▶ 3 HARVEST COMPONENTS
        ─▶ 4 CAPTURE FEEL ─▶ 5 SYNTHESIZE ─▶ 6 VALIDATE ─▶ DESIGN.md

Prerequisites

This skill drives three external tools — make sure each is available before running:

Installs
32
GitHub Stars
19
First Seen
Jul 3, 2026
extract-design-md — nathanonn/agent-skills