brand-kit — Stage 1 + 2 research skill (PMM spine)
Compiles visual identity into a structured brand kit. Output format: DESIGN.md (YAML token frontmatter + 8 prose sections). The YAML tokens are the machine-authoritative source — downstream skills that produce visual output (landing-page wireframes, ad creative briefs, slide decks) consume the tokens directly.
When to use
- When the team refreshes visual identity (new color palette, new typography system)
- Before building any landing page, ad creative, or designed artifact — they need the brand kit as input
- Quarterly refresh
When NOT to use
- For voice / tone (use
/tov-guidelines — voice + visual are separate but both live in marketing/brand/)
- For positioning or messaging (use
/positioning or /product-messaging)
- For one-off design checks (write a custom gate skill that reads
brand-kit.md tokens)
How it works
- Inputs: screenshots of your product / website (primary, higher fidelity) OR website URL (fallback, lower fidelity).
- Reads: visual content via Claude's vision (screenshots) or Exa MCP web fetch (URL).
- Extracts: exact colors (hex codes), typography stack (font family + sizes + weights + line heights + letter spacing), spacing scale, corner radii, component patterns (button states, card styles, input styles, etc.).
- Produces a DESIGN.md-format brand kit:
- YAML token frontmatter (machine-authoritative): colors, typography, rounded, spacing, components — token references use
{path.to.token} syntax
- 8 ordered prose sections: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts
- Validates against the design-production doctrine: ≤2 brand colors active per screen, ≤2 font weights per screen, ≤10% accent coverage, no banned patterns (gradient text, side-stripe borders, hero-metric template, icon-tile-above-heading template, cardocalypse, glassmorphism).
- Writes to
marketing/brand/brand-kit.md (overwrites prior canonical; git history preserves prior versions).
Invoke
/brand-kit screenshots: [paths to product screenshots]
Or URL-fallback:
/brand-kit https://yourdomain.com — extract visual identity
Example output
See marketing/brand/brand-kit.md for the PulseAnalytics seed. Notice the YAML frontmatter is the source of truth; the prose body explains intent. Token references use {path.to.token} syntax — every component reference resolves to a defined token. Do's and Don'ts encode quantitative limits (≤2 font weights per screen, ≤10% accent coverage).
Dependencies
- Reads from: source visual content (screenshots or URL — provided as input)
- Reads via Exa MCP (optional): website if URL-fallback path is used
- Writes to:
marketing/brand/brand-kit.md (canonical)
- Downstream readers:
/landing-page-wireframe, /landing-page-copy, /ad-creative-brief, /sales-deck, /linkedin-carousels, any visual-output skill
Customization
Add custom token categories if your brand requires them (e.g., motion tokens for animation timing, iconography tokens for icon style). The YAML frontmatter accepts arbitrary top-level keys; downstream skills consume whatever exists.
Update the Do's and Don'ts when you spot a recurring violation in produced artifacts — add a rule, downstream skills enforce it on next run.
Where this fits in the Example 1 chain
Week 1: /brand-kit (parallel with positioning + voice research) → visual identity locked
Week 2: /landing-page-wireframe + /landing-page-copy read brand kit + messaging
Week 3+: every visual-output skill reads brand kit
Refresh cadence
Quarterly. Trigger sooner on visual identity refresh, new product launch with distinct visual treatment, or major brand update.
Design production doctrine
See .claude/rules/design-production.md (in the Genesys workspace; not duplicated here) for the integration contract — how YAML tokens flow into CSS variables (web), Figma variables (design), and slide / image templates (non-web).
1---2name: brand-kit3description: Extract visual identity from screenshots (primary) or website URL (fallback) and compile into a DESIGN.md-format brand kit — YAML token frontmatter (colors, typography, rounded, spacing, components) + 8 ordered prose sections. The YAML tokens are machine-authoritative; downstream visual skills consume them directly. Writes to marketing/brand/brand-kit.md. Triggers - "brand kit", "brand identity", "visual identity", "design tokens", "extract brand", "DESIGN.md"4---5
6# brand-kit — Stage 1 + 2 research skill (PMM spine)
7
8Compiles visual identity into a structured brand kit. Output format: DESIGN.md (YAML token frontmatter + 8 prose sections). The YAML tokens are the machine-authoritative source — downstream skills that produce visual output (landing-page wireframes, ad creative briefs, slide decks) consume the tokens directly.
9
10---
11
12## When to use
13
14- When the team refreshes visual identity (new color palette, new typography system)
15- Before building any landing page, ad creative, or designed artifact — they need the brand kit as input
16- Quarterly refresh
17
18## When NOT to use
19
20- For voice / tone (use `/tov-guidelines` — voice + visual are separate but both live in `marketing/brand/`)
21- For positioning or messaging (use `/positioning` or `/product-messaging`)
22- For one-off design checks (write a custom gate skill that reads `brand-kit.md` tokens)
23
24## How it works
25
261. Inputs: screenshots of your product / website (primary, higher fidelity) OR website URL (fallback, lower fidelity).
272. Reads: visual content via Claude's vision (screenshots) or Exa MCP web fetch (URL).
283. Extracts: exact colors (hex codes), typography stack (font family + sizes + weights + line heights + letter spacing), spacing scale, corner radii, component patterns (button states, card styles, input styles, etc.).
294. Produces a DESIGN.md-format brand kit:
30 - **YAML token frontmatter** (machine-authoritative): colors, typography, rounded, spacing, components — token references use `{path.to.token}` syntax
31 - **8 ordered prose sections**: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts
325. Validates against the design-production doctrine: ≤2 brand colors active per screen, ≤2 font weights per screen, ≤10% accent coverage, no banned patterns (gradient text, side-stripe borders, hero-metric template, icon-tile-above-heading template, cardocalypse, glassmorphism).
336. Writes to `marketing/brand/brand-kit.md` (overwrites prior canonical; git history preserves prior versions).
34
35## Invoke
36
37```
38/brand-kit screenshots: [paths to product screenshots]
39```
40
41Or URL-fallback:
42```
43/brand-kit https://yourdomain.com — extract visual identity
44```
45
46## Example output
47
48See [`marketing/brand/brand-kit.md`](../../../marketing/brand/brand-kit.md) for the PulseAnalytics seed. Notice the YAML frontmatter is the source of truth; the prose body explains intent. Token references use `{path.to.token}` syntax — every component reference resolves to a defined token. Do's and Don'ts encode quantitative limits (≤2 font weights per screen, ≤10% accent coverage).
49
50## Dependencies
51
52- **Reads from:** source visual content (screenshots or URL — provided as input)
53- **Reads via Exa MCP (optional):** website if URL-fallback path is used
54- **Writes to:** `marketing/brand/brand-kit.md` (canonical)
55- **Downstream readers:** `/landing-page-wireframe`, `/landing-page-copy`, `/ad-creative-brief`, `/sales-deck`, `/linkedin-carousels`, any visual-output skill
56
57## Customization
58
59Add custom token categories if your brand requires them (e.g., `motion` tokens for animation timing, `iconography` tokens for icon style). The YAML frontmatter accepts arbitrary top-level keys; downstream skills consume whatever exists.
60
61Update the Do's and Don'ts when you spot a recurring violation in produced artifacts — add a rule, downstream skills enforce it on next run.
62
63## Where this fits in the Example 1 chain
64
65```
66Week 1: /brand-kit (parallel with positioning + voice research) → visual identity locked
67Week 2: /landing-page-wireframe + /landing-page-copy read brand kit + messaging
68Week 3+: every visual-output skill reads brand kit
69```
70
71## Refresh cadence
72
73Quarterly. Trigger sooner on visual identity refresh, new product launch with distinct visual treatment, or major brand update.
74
75## Design production doctrine
76
77See `.claude/rules/design-production.md` (in the Genesys workspace; not duplicated here) for the integration contract — how YAML tokens flow into CSS variables (web), Figma variables (design), and slide / image templates (non-web).
majiayu000