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. 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 tokens from CSS and visual inspection **Accuracy:** Good — based on computed styles and visual analysis **Time:** ~2 minutes **Triggers:** ``` design-md: https://linear.app design-md: https://resend.com extract design tokens from https://raycast.com ``` --- ## Mode C — Ingest a design the user already made (image / prototype / description) **When:** the user brings their own design — a mockup/screenshot **image** (PNG/JPG), a **prototype HTML/CSS** file, or a **written description** of the look (often produc