brand-extract
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.
Profile →npx skills add nexu-io/open-design --skill brand-extract --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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` a
- The live kit page (brand.html)
- The three-step chain
- 1. Measure (drive the open Browser tab)
- 2. Synthesize (write the kit) — incrementally, preview early
- 3. Build & register
- Safety
od brand preview <brandId> od brand finalize <brandId> --json
What does the brand-extract skill do?
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.
How do I install it?
Run `npx skills add nexu-io/open-design --skill brand-extract --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.