Agent skill · design visual · nexu-io
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.
Why this skill is useful
Adds a structured methodology for extracting brand elements from live websites, including specific commands and measurement techniques that the AI wouldn't reliably generate on its own.
What it needs
Requires agent-browser installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/brand-extract