echowang97

Brandbook Skill — Design skill for Claude Code

Design community

Claude Code & Codex skill: turn any website URL into a complete brand system — design tokens, brand guidelines book, and a proof landing page.

How to install Brandbook Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open echowang97/brandbook-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Brandbook Skill does

Claude Code & Codex skill: turn any website URL into a complete brand system — design tokens, brand guidelines book, and a proof landing page. Token-efficient, brand-first alternative to hue.

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Brainstorming — Transform rough ideas into fully-formed designs through structured questioning and alternative exploration 27.9k ★
Theme Swap — Recolour an extracted site's design around a new brand primary 3.6k ★

README

brandbook

![brandbook — turn any website into a complete brand system](assets/hero.svg)

**An open-source Claude Code / Codex skill: paste any website URL and get a complete brand system** — design tokens, a browsable brand book, and a proof landing page in that brand's own layout language. Not just a UI kit.

Give your AI coding agent taste. Install once; every UI it builds after that matches the brand.

Paste a URL, a brand name, or screenshots. Get back:

Artifact	How it's made	What it's for
`design-model.yaml`	AI analysis	Single source of truth: tokens, voice, imagery spec, components with provenance, anti-patterns
`brandbook.html`	script-rendered, zero AI tokens	The shareable brand book: palettes, type specimens, logo rules, voice do/don'ts, imagery treatments, component gallery, social/slide/email mockups
`landing-page.html`	AI hand-crafted	The proof: one page in the brand's own layout language, showing the system captured what you fell for

Works on Claude Code, Codex, and compatible agents.

Why not just use hue?

[hue](https://github.com/dominikmartn/hue) is excellent and inspired this project — the design-model-as-source-of-truth, observed/derived provenance, and anti-AI-default ban lists all come from it. brandbook makes two different bets:

Brand system > UI system. hue always outputs SaaS artifacts (bento dashboard, component library, app screen). brandbook adds the layers a real brand book has — logo rules, voice & tone with do/don't copy pairs, an imagery spec with CSS-demonstrated treatments, application mockups (social card, slide cover, email masthead) — and makes the SaaS artifacts opt-in.
Hybrid rendering. hue hand-writes ~4 large HTML files with the LLM every run (slow, token-hungry). brandbook renders the brand book deterministically from YAML with a node script — AI tokens are spent only on analysis and the one artifact that genuinely needs craft: the landing-page proof.