Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Brand Kit

Turns a short brand brief into a complete, WCAG-verified design token system — OKLCH color ramps, three-tier DTCG tokens, light + dark, and one theme.css.

Design & UIIntermediate★ 573⑂ 55AI score 8/10Last updated: Aug 23, 2026

What it does

  • Infers the brief: industry, audience, a single mood adjective, and motion depth, anchored to an aesthetic archetype.
  • Generates an 11-step OKLCH brand ramp plus a neutral ramp, checking that shade 500 clears 4.5:1 on white and 600 clears 3:1.
  • Maps a semantic layer (action.*, text.*, surface.*, border.*, feedback.*) with purpose-designed dark overrides rather than naive inversion.
  • Adds a Major Third type scale, 4px spacing, radius tiers, elevation, and motion durations/easings.
  • Emits three-tier DTCG tokens/*.json and one theme.css, then verifies with validate_tokens.py, validate_contrast.py, and validate_theme_refs.py.

Who it's for

  • Designers and front-end engineers standing up a design foundation for a new product or rebrand.
  • Teams trying to kill per-page palettes and hardcoded hex values in favor of one themeable source.
  • Projects that must demonstrate WCAG AA compliance in both light and dark modes.

Example uses

  1. "Build brand tokens for a fintech app, 20–30s audience, mood: trustworthy" → OKLCH palette, light/dark tokens, theme.css.
  2. Refactor hardcoded colors into semantic tokens, then run the contrast validator to prove AA compliance.
  3. Pipe the emitted tokens into the companion token-build skill to generate iOS/Android/other platform outputs.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/plugin87/ux-ui-agent-skills/HEAD/.claude/skills/brandkit/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the .claude/skills/brandkit folder from the GitHub repo plugin87/ux-ui-agent-skills into my ~/.claude/skills/brandkit/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/plugin87/ux-ui-agent-skills.git && cp -r ux-ui-agent-skills/.claude/skills/brandkit ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal (Terminal on macOS/Linux, Git Bash or WSL on Windows).
  2. Clone the repo: git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. Create the skills directory if needed: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r ux-ui-agent-skills/.claude/skills/brandkit ~/.claude/skills/
  5. Keep the repo's scripts/ and taste/ folders available too — the verification steps reference them.
  6. Confirm Python 3 is installed: python3 --version
  7. Restart Claude Code and prompt something like "create a brand design token system for my product" to trigger the skill.
View source on GitHub ↗