AugmentClaude
Design SystemsBrand

Brand Kit

By plugin87· plugin87/ux-ui-agent-skills· 0

Generate a complete, accessible design system with tokens, themes, and WCAG-verified styles.

Installation

  1. Make sure Claude is on your device and in your terminal.

    Skills load from ~/.claude/skills/ when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then run claude in any terminal to verify.

    One-time setup
    npm i -g @anthropic-ai/claude-code

    Already have it? Skip ahead.

  2. Paste into Claude Code or into your terminal.
    Install
    Sign up to copy
    Sign up free to reveal

    This copies the whole skill folder into ~/.claude/skills/brandkit-plugin87/ — the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.

    Faster alternative (instruction-only skills)

    Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.

    Quick install (SKILL.md only)
    Sign up to copy
    Sign up free to reveal
  3. Restart Claude Code.

    Quit and reopen Claude Code (or any other agent that loads from ~/.claude/skills/). New skills are picked up on startup.

  4. Just ask Claude.

    Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.

Prefer to read the source first? Open on GitHub.

When Claude uses it

Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.

What this skill does

Skill: Brand Kit

Step 0 — is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Stand up the foundation (one token system everything renders from) before any screen. Get this right and every page stays consistent and themeable from one place.

Steps

  1. Brief Inference (mandatory) — name the industry, audience, the one mood adjective, and motion depth (${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → Brief Inference). Pick an anchoring archetype from ${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md.
  2. Primitives — generate the brand color ramp in OKLCH (11 shades, consistent chroma) + a neutral ramp; verify the 500 shade ≥ 4.5:1 on white (text) and 600 ≥ 3:1 (UI) per .claude/rules/tokens-and-color.md → Color Generation.
  3. Semantic layer — map roles to primitives: action.primary/-hover/destructive, text.{primary,secondary,on-action,link}, surface.{page,card,raised}, border.{default,strong}, feedback.{success,warning,error,info} — and the dark overrides (designed, not inverted).
  4. Scales — Major Third type scale + composite text styles, 4px spacing scale, radius tiers, elevation, and ${CLAUDE_SKILL_DIR}/../../../tokens/motion.json-style durations/easings.
  5. Emit the DTCG ${CLAUDE_SKILL_DIR}/../../../tokens/*.json (3-tier) + a single theme.css (the one shared source, [data-theme="dark"] overrides). Optionally feed the token-build pipeline (token-build skill) for other platforms.

Verification (definition of done)

  • python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py — valid JSON, all aliases resolve.
  • python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py — required text/action/border pairs pass WCAG AA in light AND dark; border.strong ≥ 3:1.
  • python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_theme_refs.py — every component var(--…) resolves to the theme.
  • One theme, no per-page palettes; destructive = danger token (not primary); zero hardcoded values.

Output is a verified token foundation — the measurable part is provable (run npm run verify). Brand "feel" still benefits from a human review against ${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md.

Related skills

A

Artifact Theme Toolkit

anthropics

Apply professional color and font themes to slides, docs, and web pages.

OfficialComplete terms in LICENSE.txt
R

Reference UI to Design System

daymade

Extract design systems from UI screenshots and generate implementation-ready design prompts.

U

UI/UX Pro Max

anthropics

Build production-grade web components and interfaces with distinctive, polished design.

OfficialComplete terms in LICENSE.txt
M

MoAI Design System

modu-ai

Build accessible design systems with tokens, components, and intent-first principles.

Apache-2.0