vibe-design-mdlisted

Generates a DESIGN.md file for any website URL or fetches a pre-built one from the awesome-design-md collection (55+ sites). DESIGN.md captures the complete design system of a real product — exact hex/oklch values, font families, spacing scales, shadow formulas, component states, do's and don'ts — in a format vibe-design reads to produce pixel-accurate matching UI. Three modes: (A) fetch a pre-built DESIGN.md from the catalog by site name (instant, exact tokens); (B) generate one from any URL by reading the site's rendered CSS and visual language (~2 min); (C) INGEST a design the user already made — a mockup/screenshot image (PNG/JPG), a prototype HTML/CSS file, or a written description — and extract it into DESIGN.md, so a look designed elsewhere (e.g. in the Claude desktop app) satisfies the pipeline's design gate without redoing it. Output always saved to project root as DESIGN.md. Triggers on "design-md:", "generate a design system for", "extract design tokens from", "make it look like [brand]", "get the
aakashdhar/vibe-skill · ★ 7 · Web & Frontend · score 68

Install: claude install-skill aakashdhar/vibe-skill

# Vibe Design MD Skill Captures the visual language of any real website into a DESIGN.md file. vibe-design reads this file at session start to produce UI that matches the target product's aesthetic — exact tokens, not approximations. > **Autonomous / headless mode.** At startup resolve the settings with > `python3 ~/.claude/skills/vibe-mode/scripts/vibe_state.py mode`. If `vibe_mode` is > `autonomous`, every "wait", "ask", "confirm" and approval step in this skill follows > vibe-mode's `references/HEADLESS.md` §2 instead: take the recommended option, accept your > own draft after one self-check, log each choice to `vibe/DECISIONS.md`, never ask the > user, and stop — writing `vibe/.run_state.json` — only when a person is genuinely required. Two modes. Same output. Always `DESIGN.md` in the project root. --- ## Mode A — Catalog fetch (instant) **When:** User names a site that exists in the catalog **How:** Download the pre-built DESIGN.md from awesome-design-md **Accuracy:** High — tokens extracted directly from real CSS **Time:** ~5 seconds **Triggers:** ``` design-md: stripe design-md: linear design-md: notion make it look like Vercel get the design system for Supabase ``` Read `references/CATALOG.md` to check if the site is in the collection. If found → fetch and save. If not found → offer Mode B or suggest closest match from catalog. --- ## Mode B — URL generation (any site) **When:** User provides a URL not in the catalog **How:** Fetch the site, extract design