What is the brandkit skill?
Brandkit is a skill in the ux-ui-agent-skills kit by plugin87. From a short brief, it makes an AI coding agent generate a brand design system as three-tier DTCG tokens plus a single theme.css, in light and dark. The output is checked with scripts for valid tokens, WCAG contrast and theme references.
Brandkit is one of 19 skills in the plugin87/ux-ui-agent-skills repository. Its job is the foundation: one token system that all pages render from, set up before any screen is designed. The frontmatter marks it as user-invoked, so you call it when you want a new brand foundation.
Do not confuse it with the skill of the same name in taste-skill. That one produces brand-kit image boards with logo directions. This brandkit produces design tokens and a theme file, not pictures.
What it produces
- Primitive tokens: an 11-shade OKLCH brand color ramp with consistent chroma, plus a neutral ramp.
- A semantic layer that maps roles, such as action, text, surface, border and feedback colors, to the primitives.
- Designed dark-mode overrides, not an inverted palette.
- A Major Third type scale with composite text styles, a 4px spacing scale, radius tiers, elevation and motion durations and easings.
- DTCG
tokens/*.jsonin three tiers and onetheme.csswith[data-theme="dark"]overrides.
How the output is verified
The skill's definition of done is three scripts: validate_tokens.py checks valid JSON and resolving aliases, validate_contrast.py checks required pairs for WCAG AA in light and dark, and validate_theme_refs.py checks that every component variable resolves to the theme.
Who the brandkit skill is for
Best for
- New products that need a palette, type system and themeable token kit from a brief.
- Teams that want contrast checked in both themes before any screen exists.
- Developers who will then build components against one shared theme file.
Not for
- Logo design or identity boards. The skill outputs tokens, not artwork.
- Page design on its own. Pair it with a layout skill such as design-taste-frontend or ui-ux-pro-max.
- Taking a copy of only the brandkit folder. The SKILL.md refers to files elsewhere in the kit, such as the taste notes, the tokens rules and the validation scripts.
Use it with UiChemy
Brandkit gives you tokens and a theme, not pages. For layout rules on top of it, see minimalist-skill. When pages are built and you want them in WordPress, UiChemy Composer edits real HTML, CSS and JS inside Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Brandkit Skill: Brand Design Tokens for AI Agents
npx ux-ui-agent-skills initRun the project's CLI
In your project folder, run
npx ux-ui-agent-skills initto copy the full kit. Usenpx ux-ui-agent-skills add tokens taste design-systemsfor only some areas. The flags--dryand--forcepreview or overwrite.Or install as a Claude Code plugin
In Claude Code, run
/plugin marketplace add plugin87/ux-ui-agent-skills, then/plugin install ux-ui-agent-skills@ux-ui-agent-skills. This adds the skills, commands and the design-critic agent to every project.Or clone and copy
Clone the repository and copy the parts you need. The brandkit folder lives at
.claude/skills/brandkit, and it depends on the kit's tokens rules, taste files and scripts.Invoke it
Run
/brandkitor ask for a brand foundation from a brief, and name the industry, audience and mood.
Check that it loaded
After a run, tokens/ should hold three-tier JSON and a theme.css. Run the three validation scripts named in the skill, and the contrast check should pass in light and dark.
Key features
- Brief inferenceBefore generating, the agent names the industry, audience, one mood adjective and motion depth, and picks an anchoring archetype from the kit's aesthetic systems file.
- OKLCH primitivesAn 11-shade brand ramp with consistent chroma plus a neutral ramp. The 500 shade should reach 4.5:1 on white for text and the 600 shade 3:1 for UI.
- Semantic role layerRoles such as action primary, hover and destructive, text primary and link, surface page and card, border and feedback colors map to primitives.
- Designed dark modeDark overrides are designed for the semantic layer, not produced by inverting the light palette.
- Complete scalesA Major Third type scale with composite text styles, a 4px spacing scale, radius tiers, elevation and motion tokens.
- Three-tier DTCG tokensThe tokens go out as
tokens/*.jsonin primitive, semantic and component tiers, following the Design Tokens Community Group format. - One shared theme.cssA single file is the one shared source, with dark mode in
[data-theme="dark"]overrides and no per-page palettes. - Contrast verification
validate_contrast.pychecks the required text, action and border pairs for WCAG AA in light and dark, withborder.strongat 3:1 or higher. - Reference and alias checks
validate_tokens.pyconfirms valid JSON and resolving aliases, andvalidate_theme_refs.pyconfirms component variables resolve to the theme. - Platform export hookThe result can optionally feed the kit's token-build skill to produce tokens for other platforms.
Frequently asked questions
What is the brandkit skill?
Brandkit is a skill in the plugin87/ux-ui-agent-skills kit that generates a brand design system from a brief. It outputs three-tier DTCG tokens and one theme.css in light and dark, and it is verified for token validity, WCAG contrast and theme references.
How do I install brandkit?
The README gives two routes: run npx ux-ui-agent-skills init in your project, or add the plugin in Claude Code with /plugin marketplace add plugin87/ux-ui-agent-skills. Because brandkit leans on other files in the kit, install the kit rather than only the folder.
Is this the same as brandkit in taste-skill?
No. The taste-skill repository also has a skill called brandkit, which makes brand-kit image boards with logo directions, palettes, type and identity applications. The plugin87 brandkit makes design tokens and a theme.css instead.
Which colors and scales does brandkit generate?
It builds an 11-shade OKLCH brand ramp and a neutral ramp, a semantic layer with dark overrides, a Major Third type scale, a 4px spacing scale, radius tiers, elevation and motion tokens. The 500 shade should hit 4.5:1 on white and the 600 shade 3:1.
Which AI coding agents can use brandkit?
The README describes the kit as an instruction layer for Claude Code or any Claude-powered IDE. It uses a CLAUDE.md and .claude folders. Other agents can read the same markdown files, but the README does not document support for them.
Does brandkit make pages or logos?
No. It stands up the foundation before any screen: a token system and a theme file. Pages come from other skills in the kit or from your own prompts, and logo artwork is outside its scope.
What license does the kit use?
The ux-ui-agent-skills repository uses the MIT license, as GitHub shows. The install count of 356 on this page comes from a third-party skills listing and is not stated in the repository.