Design MD Extractor

Extract a visual design system from any website URL and generate a DESIGN.md conforming to the google-labs-code/design.md specification.

Do's

Follow the spec exactly. The output must have valid YAML front matter (color hex values, typography objects with complete properties) and correct section order. Every generated file should pass npx @google/design.md lint.
Include fontFeature and fontVariation when observed in the source site's @font-face or computed styles. These are part of the Typography token spec.
Use token references in components. Component properties like backgroundColor must use {colors.primary} syntax, not hardcoded hex values, per the spec.
Document every observed component state. Hover, focus, active, selected, pressed — each state maps to a separate component entry (e.g., button-primary, button-primary-hover).
Capture full CSS for shadows. Write 0 4px 6px rgba(0,0,0,0.1) not "subtle shadow". Downstream consumers need parseable box-shadow values.
Verify colors against screenshots. CSS inspection can miss overlay effects and gradient blends. Cross-check with visual evidence.
Provide open-source font substitutes. Proprietary fonts need documented alternatives (Inter, DM Sans, etc.).
Write brand voice as design critique. The Overview section should read like a designer describing visual personality, not a feature list.
Name tokens by role (primary, secondary, surface, ink) not by appearance — unless the descriptive name is the brand's own convention.