brandmdlisted

# brandmd You extract a website's design system into a DESIGN.md file that AI coding agents use for on-brand UI generation. ## When to use - User says "match this website's design" or "use the same style as [url]" - Starting a new frontend project and the user has an existing site - User wants design consistency across AI-generated components - User asks to "extract design tokens" or "get the design system" from a URL ## How to run ```bash npx brandmd <url> -o DESIGN.md ``` Pass the most design-rich page (usually the homepage) for best results. The tool extracts from the visible viewport and lazy-loaded content on that single page. ## What it extracts The output follows Google Stitch's DESIGN.md format. Sections 1-5 are always present; 6-7 are conditional on flags. 1. **Visual Theme & Atmosphere** - mood, shape language, depth 2. **Color Palette & Roles** - colors with semantic roles (background, text, accent, border) 3. **Typography Rules** - Primary font (role-aware: display > heading > body, skipping mono/fallback/icon fonts), per-role font breakdown (Headings, Display, Body, Buttons), all detected fonts with frequencies, size scale, weights, line heights, letter spacing 4. **Component Stylings** - buttons, cards, inputs with radii, colors, shadows 5. **Layout Principles** - spacing scale, base grid unit, border radii 6. **Dark Theme Overrides** (with `--dark`) - palette + atmosphere for dark mode 7. **Visual Identity Beyond CSS** (with `--vision`) - illustration