skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

brand-extract

Extract brand identity, typography, and imagery from live websites using browser-based measurement.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#brand#Automation#Design system#Typography#Color palette#Web scraping
One-click install
npx skills add https://github.com/nexu-io/open-design --skill brand-extract
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-extract
Source: https://github.com/nexu-io/open-design/tree/main/skills/brand-extract
Command: npx skills add https://github.com/nexu-io/open-design --skill brand-extract

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill solves the problem of manual brand research by automating the extraction of design systems from live websites, ensuring accuracy by measuring real page data rather than relying on guesswork.

Core Features & Use Cases

  • Automated Measurement: Uses an in-app browser to harvest semantic colors, typography, and logo assets directly from DOM and CSS.
  • Progressive Synthesis: Builds a machine-consumable brand kit incrementally, allowing for real-time previews of the brand identity as it is captured.
  • Use Case: When starting a new design project for a client, use this Skill to pull their existing brand colors, font families, and hero imagery from their website to create a reusable design system in seconds.

Quick Start

Use the brand-extract skill to pull the brand kit from the website currently open in the browser tab.

Frequently Asked Questions about brand-extract

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a brand kit from a website?▼

Open the target website in the in-app browser and trigger the brand-extract skill. The agent will measure the page's colors, fonts, and assets, then synthesize them into a structured brand.json file.

What should I do if the website has an anti-bot wall?▼

If you encounter a verification wall, stop the extraction process and use the provided question form to ask the user to clear the wall manually in the browser tab before resuming.

Can I extract fonts that are not Google Fonts?▼

Yes, the skill captures self-hosted webfont files and allows you to specify fallback fonts. It will note proprietary faces and suggest the closest Google Font for rendering specimens.

How does the skill ensure brand accuracy?▼

The skill avoids hallucination by measuring actual CSS values and DOM elements. It requires you to trace every extracted value back to a specific measurement on the page.

What is the purpose of the brand.json file?▼

The brand.json file acts as the machine-consumable source of truth for the brand kit, containing all extracted design tokens, typography, and asset paths used to render the final brand-kit page.

Related Skills

Explore More Design & Creative Skills→
ouakarouakar

web-scraper

Extract structured data from websites with sanitized Markdown output.

Community
Advanced
octavehqoctavehq

octave-get-brand-components

Capture website design systems to generate reusable component kits with CSS and HTML templates.

Official
Advanced
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
TheQtCompanyRnDTheQtCompanyRnD
351

qt-figma-token-extraction

Extract Figma design tokens and generate QML singleton files for Qt 6 projects.

Official
Advanced