diff --git a/skills/brandmd/README.md b/skills/brandmd/README.md new file mode 100644 index 0000000..3db731b --- /dev/null +++ b/skills/brandmd/README.md @@ -0,0 +1,30 @@ +# brandmd + +Extract a live website's design system into a DESIGN.md file for use with Stitch. + +## Install + +```bash +npx skills add google-labs-code/stitch-skills --skill brandmd --global +``` + +## Usage + +Tell your agent: + +> "Extract the design system from https://linear.app and use it for my Stitch project" + +The skill runs `npx brandmd ` to extract colors, typography, spacing, and component styles, then outputs a DESIGN.md that Stitch can use for on-brand screen generation. + +## How it complements other skills + +- **design-md**: Documents design systems from existing Stitch projects +- **brandmd**: Imports design systems from live websites into the Stitch workflow +- **enhance-prompt**: Uses the extracted DESIGN.md tokens to optimize Stitch prompts +- **stitch-design**: Generates screens using the DESIGN.md as context + +## Requirements + +- Node.js 18+ +- npx (comes with Node.js) +- brandmd installs automatically on first run diff --git a/skills/brandmd/SKILL.md b/skills/brandmd/SKILL.md new file mode 100644 index 0000000..b4a882d --- /dev/null +++ b/skills/brandmd/SKILL.md @@ -0,0 +1,77 @@ +--- +name: brandmd +description: Extract a live website's design system into a DESIGN.md file for use with Stitch. Complements the design-md skill by importing brands from existing sites. +allowed-tools: + - "stitch*:*" + - "Bash" + - "Read" + - "Write" +--- + +# brandmd: Website to DESIGN.md + +You extract a live website's design system into a DESIGN.md file that Stitch can use to generate on-brand UI. + +This skill complements the `design-md` skill. While `design-md` documents design systems from existing Stitch projects, `brandmd` imports design systems from live websites into the Stitch workflow. + +## When to use + +- User wants to generate Stitch screens matching an existing website's brand +- User says "use the same design as [url]" or "match this website" +- Starting a new Stitch project for a client who has an existing site +- User needs a DESIGN.md but doesn't have a Stitch project yet + +## Prerequisites + +Node.js 18+ must be available. The tool installs automatically via npx on first run. + +## Extraction + +Run brandmd to extract the design system from the target URL: + +```bash +npx brandmd -o DESIGN.md +``` + +Pass the most design-rich page for best results. The homepage is usually the best choice. The tool renders the page in a headless browser, scrolls through lazy-loaded content, dismisses cookie banners, and extracts computed styles from every visible element. + +### What it extracts + +- **Colors** clustered by similarity with semantic roles (background, text, accent, border) +- **Typography** with font families, size scale grouped by heading/body/caption, and weights +- **Spacing scale** with base grid unit detection +- **Border radii** and shadow styles +- **Component patterns** for buttons, cards, and inputs + +### Output format + +The output follows the DESIGN.md 5-section format: + +1. Visual Theme & Atmosphere +2. Color Palette & Roles +3. Typography Rules +4. Component Stylings +5. Layout Principles + +## Integration with Stitch + +After extraction: + +1. Read the generated DESIGN.md +2. Review the extracted tokens with the user (colors, fonts, spacing) +3. Use the DESIGN.md as context for Stitch screen generation via the `stitch-design` or `enhance-prompt` skills +4. When calling `[prefix]:generate`, reference specific tokens from DESIGN.md in the prompt (e.g. "use the primary font sohne-var, accent color #533AFD, 4px spacing grid") + +## Options + +- `npx brandmd ` — output to stdout +- `npx brandmd -o DESIGN.md` — save to file +- `npx brandmd --json` — raw tokens as JSON for programmatic use + +## Limitations + +- Extracts from a single page, not the entire site +- Cannot read Figma tokens or design tool files +- Color role assignment is heuristic based on usage frequency and luminance +- Requires a publicly accessible URL (no auth-gated pages) +- The extracted DESIGN.md is a starting point. Review and adjust color roles and component styles before using in production.