extract-brand-from-site

extract-brand-from-site

Auto-derive a brand profile by inspecting a live website. Faster than define-brand-profile when the user already has a polished web presence.

When to use

Auto-trigger when the user:

• Provides a URL and asks to derive branding from it.
• Says "use our website's brand" / "match the site's palette" / "pull our logo from the site".

Inputs

1. Website URL — typically the homepage or an "about" page.
2. Confirmation toggle — should the skill ask before saving inferred values, or save them directly? Default: ask.

Approach

1. Fetch the page

Prefer the WebFetch tool for the initial pass (HTML + computed styles inferred from CSS). For richer extraction (rendered colours, real logo URLs after JS), use a Playwright tool if available — render, then read.

2. Extract visual identity

• Palette: parse stylesheets and inline styles. Rank colours by usage frequency, exclude near-greys. Top 1-3 distinctive colours = primary/secondary/accent.
• Fonts: read font-family declarations on body, h1-h6. Map to commonly-available fallbacks (e.g. site uses "Inter" → record "Inter", suggest installing it).
• Logo: look for <img> in the header, favicon, OpenGraph image, or link rel="apple-touch-icon". Prefer SVG when available. Download and stage locally.

3. Extract business identity

• Business name: <title>, OpenGraph site_name, schema.org Organization JSON-LD if present.
• Address & contact: schema.org PostalAddress / ContactPoint if present. Otherwise scan the footer / contact page for an address block, email, phone.
• Tax / company numbers: scan footer for "VAT", "Company No.", "Reg.", common patterns by jurisdiction.

4. Confirm with the user

Show the user every field before writing. They edit / approve / reject each. Don't silently ship inferred branding — colour inference and logo selection are easy to get wrong.

5. Hand off to define-brand-profile

Once confirmed, write the values into $DATA_ROOT/brand.json using the same schema as define-brand-profile. If a profile already exists, merge.

Resolve the data root:

DATA_ROOT="${CLAUDE_USER_DATA:-${XDG_DATA_HOME:-$HOME/.local/share}/claude-plugins}/programmatic-doc-generation"

Caveats

• Colour extraction heuristics aren't perfect — always confirm.
• Some sites lazy-load CSS or render entirely in JS; if WebFetch returns sparse data, escalate to Playwright.
• Don't follow links recursively. One page at a time. The user can run the skill again on a different page.