/brand-extract

name: brand-extract
description: |
  Extract a complete Brand Kit from a live website by driving the in-app
  browser. Use when a brand-extraction project opens with a site in the Browser
  tab, or when the user asks to "extract a brand", "pull the brand from <url>",
  "get the colors/fonts/logo from this site", or build a brand/design system
  from a reference website. Pairs with the agent-browser tool for measurement
  and pauses for the user when an anti-bot wall blocks the page.
triggers:
  - "extract a brand"
  - "extract brand"
  - "brand from url"
  - "brand extraction"
  - "pull the brand"
  - "extract the colors"
  - "extract the fonts"
  - "extract the logo"
  - "build a brand kit"
od:
  mode: design
  surface: web
  scenario: validation
  design_system:
    requires: false
  capabilities_required:
    - file_write

brand-extract

Turn a live website into a complete, machine-consumable **Brand Kit** — identity, semantic color palette, typography, voice — by **measuring** the real page, not guessing from memory. This is the methodology behind a brand-extraction project: the target site is open in a secondary in-app **Browser** tab, and you drive it with the `agent-browser` tool.

The live kit page (`brand.html`)

The extraction project opens with **`brand.html` as the active tab** — a self-contained brand-kit page (template: `brand-extract/templates/brand-kit.html`) that the daemon renders from `brand.json`. The daemon **pre-seeds** it with a deterministic first paint — a harvested logo, an approximate palette, font families, and a few cover images — so it is NOT all-skeleton when it opens. Your job is to **replace that seed with measured truth** and fill in the rest, **progressively**, so the user watches it complete module by module. You never hand-edit it: you write `brand.json`, then run `od brand preview <brandId>` and the daemon re-renders the page (the page soft-reloads itself while extracting). Optimize for **fast first paint and progressive fill-in** — write a partial `brand.json` and preview it the moment you have a name, a couple of colors, and a logo, then preview again after each field group rather than batching the whole kit to the end.

> The trap to avoid: an LLM left alone regresses to the mean — Inter, an indigo > accent, a purple gradient. That is off-brand for everyone. Every value you emit > must trace to something you **measured** on the page.

The three-step chain

Work in order. Skipping straight to writing `brand.json` is how off-brand, hallucinated kits happen.

1. Measure (drive the open Browser tab)

Use `agent-browser` against the **selected** browser tab (its URL/title are in your run context — treat "this page" / "the site" as that tab):

1. `agent-browser get url` / `get title` to confirm the target. 2. `agent-browser snapshot` before extracting anything. 3. Harvest the real design language from the DOM/CSS, not the screenshot alone:

• **Colors** — frequency-rank color literals and resolve the seven semantic

roles: `background`, `surface`, `foreground`, `muted`, `border`, `accent`, `accent-secondary`. The most frequent near-white/cream is usually the background; the most frequent chromatic mid-saturation color is usually the accent.

• **Typography** — the `@font-face` names and `font-family` declarations for

display, body, and (if present) mono. Note weights actually used.

• **Logo (save MULTIPLE candidates)** — extract every logo asset you find and

save each as a file under `logos/`: the inline header/nav `<svg>` (write the literal `<svg>…</svg>` markup verbatim to `logos/header.svg` — do not just reference it), any `<img>` logo, `apple-touch-icon`, favicon, and `og:image`. Fetch the asset URLs directly — **never leave `logo.primary` empty when the site has any mark**. Set `logo.primary` to the best vector / transparent lockup (SVG wordmark > apple-touch-icon > favicon > og:image) and list the rest in `logo.alternates`; the kit page renders them as switchable thumbnails. (The daemon auto-fetches a favicon/og:image fallback into `logos/` so the page is never logo-less, but that safety net is no substitute for saving the real wordmark.)

• **Imagery (save 6–8 of the site's LARGE / COVER / HERO images)** — this is

the Images module. Harvest the site's actual big representative pictures and save them into `imagery/`: the `og:image`/`twitter:image` social card, the hero/banner art, the largest `<img>` (resolve the highest-res `srcset` / `<picture>` source), CSS `background-image` hero blocks, product or app screenshots, and illustration/photography samples. Filter by **rendered size** — keep only big images (roughly ≥320px on the long edge) and drop icons, sprites, logos, avatars, and tracking pixels. List them in `brand.json` as `imagery.samples` (see shape below); the kit page renders them as a clean labeled Images gallery (a thumbnail grid). Pick 6–8 varied, on-brand images — never UI chrome or icons. (The daemon runs a deterministic cover/hero-image fallback at finalize so the gallery is rarely empty, but that safety net is no substitute for picking the real hero images.)

• **Voice** — representative headings, taglines, and body copy to ground the

voice; quote-level fidelity, not generic marketing speak. 4. Save any self-hosted webfont files you can fetch into `fonts/`. 5. Capture one page screenshot as visual evidence when it helps.

Anti-bot wall → ask the user (do NOT bypass)

If the page is an anti-bot interstitial instead of the real site — Cloudflare "Just a moment…", "Verify you are human", "Attention Required", DataDome, PerimeterX, Incapsula — **stop measuring** and emit a `<question-form>` asking the user to clear it by hand in the Browser tab:

<question-form id="cf-verify" title="Verify in the browser">
[
  {
    "id": "ready",
    "type": "radio",
    "l