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: