# Brand System Builder

> Build a reusable visual identity from goals and references, with practical rules for colour, type, spacing, imagery, layout, components, and applications.

- Skill: `nahiddotai/brand-system-builder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add nahiddotai/brand-system-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nahiddotai/brand-system-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: nahiddotai (https://skillmd.com/u/nahiddotai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nahiddotai/brand-system-builder

---


# Brand System Builder

Turn visual taste into reusable decisions that different people and tools can apply consistently.

## Job contract

- Owns: visual identity rules and reusable design decisions.
- Does not own: written voice (`voice-dna`) or production of one asset (`instagram-carousel-maker`, `html-slideshow`).
- Finished deliverable: brand foundation, tokens, usage rules, component patterns, and examples.

## Starting Material

Use whatever the user can provide. Do not require professional brand assets.

- `Existing brand`: logos, colours, fonts, pages, or guidelines.
- `Reference-led`: screenshots, websites, packaging, posts, or examples they like or dislike.
- `Description-led`: plain-language descriptions such as “warm but credible,” the audience, and where the brand will appear.
- `Open exploration`: no visual material yet. Ask for the audience, desired feeling, priority applications, and anything to avoid, then propose two or three clearly different directions. Recommend one when the user wants you to decide.

Label existing facts separately from proposed choices. A lack of assets is a reason to create a starting system, not to stop.

## Workflow

1. Collect any available assets, screenshots, examples, descriptions, audience, applications, and accessibility constraints.
2. Select the closest starting-material route. When evidence is thin, create proposed directions instead of inventing an established brand.
3. Define the chosen visual character in three to five concrete traits and explain how each affects design decisions.
4. Set usable colour roles and values, typography hierarchy and fallbacks, spacing, shape, imagery, icon, and motion rules.
5. Check contrast, readability, mobile use, print use when relevant, and light/dark behaviour.
6. Build repeatable components and at least two application examples for the user's priority surfaces.
7. Produce a compact specification, token set, and examples an agent, non-designer, or designer can apply without interpretation.

## Output

```markdown
# Brand System

## Foundation
[Audience, positioning, visual traits]

## Visual Tokens
[Colours with roles and values, typography, spacing, radius, borders]

## Imagery And Graphic Language
[Photography, illustration, icon, texture, chart rules]

## Layout Rules
[Grid, hierarchy, whitespace, responsive behaviour]

## Components
[Buttons, cards, callouts, covers, slide/page patterns]

## Do And Avoid
[Concrete examples]

## Application Examples
[How the rules apply to the user's priority surfaces]

## Status
[Existing decisions, new proposals, and choices still open]
```

## Guardrails

- Never infer a brand fact from a single accidental screenshot.
- Never treat a proposed direction as something the user already chose.
- Check legibility and contrast before aesthetic preference.
- Do not copy another brand's protected assets or distinctive trade dress.