What is the brand-extract skill?
The brand-extract skill is a SKILL.md in nexu-io/open-design that turns a live website into a Brand Kit by measuring the real page. The agent drives an in-app browser, saves logos and imagery, writes brand.json and BRAND.md, then registers the result as a design system. It runs inside OpenDesign.
The skill opens with a warning about a common failure. An unguided model drifts to the mean, with Inter, an indigo accent and a purple gradient. So every value it writes must trace back to something measured on the page.
It is one folder in the open-design repository, a SKILL.md plus a brand-kit.html template. The workflow assumes the target site is open in a secondary Browser tab of the OpenDesign app.
The three step chain
- Measure: confirm the URL and title, take a snapshot, then harvest colors, fonts, logos, imagery and voice from the DOM and CSS rather than a screenshot alone.
- Synthesize: write brand.json early and run
od brand previewafter each field group, so the kit page fills in as the agent works. - Build and register: run
od brand finalizeto validate, derive tokens and register the brand as a reusable design system.
What it measures on the page
- Seven color roles: background, surface, foreground, muted, border, accent and accent-secondary.
- Font families and weights actually used for display, body and mono.
- Logo candidates, including the header SVG, apple-touch-icon, favicon and og:image.
- Six to eight large hero or cover images, filtered by rendered size.
- Voice, taken from real headings, taglines and body copy.
Where it runs, and where it stops
The skill calls the agent-browser tool and the od brand commands, which belong to OpenDesign, not to the skill folder. Copying the folder alone gives you the instructions and template without the commands they rely on.
Who the brand-extract skill is for
Best for
- Starting a design system from a reference website you are allowed to study.
- Teams already working in OpenDesign who want a measured kit instead of a recalled one.
- Producing a BRAND.md that a later design agent can follow.
Not for
- Terminal only setups with no OpenDesign app or browser tab to drive.
- Sites behind an anti-bot wall. The skill stops and asks you to clear it, and never bypasses it.
- Token export alone. For that, see extract-design-system or Dembrandt MCP.
Use it with UiChemy
Once the kit gives you a palette, type pairing and logo, apply them in Figma or in UiChemy Composer, then convert the design into WordPress. Click Get Started on uichemy.com. To turn a kit into tokens, see brandkit.
How to install Brand Extract Skill: Build a Brand Kit From a Live Site
git clone https://github.com/nexu-io/open-design.gitClone the repository
Run
git clone https://github.com/nexu-io/open-design.git. The skill sits in skills/brand-extract and holds SKILL.md and templates/brand-kit.html.Copy the skill folder
Copy skills/brand-extract to wherever your agent loads skills from. The README does not name a skill folder for this skill, so use your agent's own location.
Add the OpenDesign runtime
The skill relies on agent-browser and od brand commands from OpenDesign. The README offers a download and documents
od mcp install <agent>to connect an agent, for exampleod mcp install claudefor Claude Code.Start an extraction
Open a brand-extraction project with the target site in the Browser tab, then ask the agent to extract a brand or pull the brand from a URL.
Check that it loaded
brand.html should open with a seeded kit, then fill in as the agent writes brand.json and runs od brand preview. After od brand finalize, the status should read Brand ready.
Key features
- Measured, not rememberedThe skill requires every emitted value to trace to something measured on the live page, to avoid the Inter, indigo and purple gradient default.
- Three step chainMeasure with agent-browser, synthesize brand.json and BRAND.md, then build and register the finished brand.
- Seven color rolesFrequency ranked colors resolve into background, surface, foreground, muted, border, accent and accent-secondary, each with a hex, an oklch value, a name and a usage note.
- Typography captureIt reads @font-face names and font-family declarations for display, body and mono, notes the weights used and saves self-hosted webfonts into a fonts folder.
- Multiple logo candidatesHeader SVG markup, img logos, apple-touch-icon, favicon and og:image are saved under logos. One becomes logo.primary and the rest become alternates.
- Imagery gallerySix to eight large hero, cover and product images, roughly 320px or more on the long edge, are saved under imagery. Icons, sprites, avatars and tracking pixels are dropped.
- Voice from real copyHeadings, taglines and body copy ground the voice, which brand.json stores as adjectives, tone, messaging pillars and words to use or avoid.
- Progressive previewRunning od brand preview with a brand id re-renders brand.html, so you watch the kit fill in module by module instead of waiting for the end.
- Finalize and registerod brand finalize validates brand.json, derives light, dark and compact tokens plus landing, deck, poster, email, newsletter and form artifacts, and registers a user design system.
- Anti-bot safetyOn a Cloudflare or similar wall the skill stops measuring and asks you to clear it by hand. Page content is treated as untrusted evidence, not instructions.
Frequently asked questions
What is the brand-extract skill?
It is a skill in the nexu-io/open-design repository that turns a live website into a machine readable Brand Kit covering identity, semantic colors, typography and voice. The agent measures the real page through a browser tab, then writes brand.json and a BRAND.md guide.
How do I install the brand-extract skill?
The README gives no skill specific command, so clone nexu-io/open-design and copy skills/brand-extract into the place your agent loads skills from. You also need OpenDesign, because the skill calls agent-browser and the od brand preview and finalize commands.
Does brand-extract work without the OpenDesign app?
Not as written. The SKILL.md assumes a project with the target site open in an in-app Browser tab, a brand.html page rendered by the daemon and the od brand commands. A bare copy of the folder lacks those parts, so plan to run it inside OpenDesign.
What does the brand-extract skill extract from a site?
Seven semantic color roles, font families and weights, logo candidates, six to eight large hero or cover images, and voice from real headings and copy. It stores them in brand.json, then writes a BRAND.md guide covering theme, logo use, color roles, typography, voice and layout.
What happens when the site blocks the agent?
If the page is an anti-bot interstitial, such as a Cloudflare check, the skill stops and asks you to clear it by hand in the Browser tab. It never tries to solve CAPTCHAs. You may also skip, and values taken from public knowledge are marked as such.
Which AI agents can run the brand-extract skill?
The OpenDesign README lists Claude Code, Claude Desktop, Codex CLI, Cursor, GitHub Copilot, OpenCode, Antigravity, Cline, Kiro and more, each with an od mcp install command. That table describes the app, so check that your agent can drive the skill's browser steps.
What files does the brand-extract skill create?
It writes brand.json, a BRAND.md guide, and saved assets under logos, imagery and fonts. The finalize step then derives light, dark and compact design tokens and six brand artifacts: landing, deck, poster, email, newsletter and form, linked from brand.html.
What license is the brand-extract skill under?
The open-design repository is licensed under Apache-2.0 according to its GitHub metadata and the README badge. Its README describes OpenDesign as open source, and it also advertises paid plans, which are separate from the repository.