gsp-brand-identity
Input: Strategy chunks + BRIEF.md + discover/mood-board-direction.md
Output: .design/branding/{brand}/identity/ (6 chunks + palettes.json + INDEX.md)
Agent: gsp-brand-creative-director
Resolve brand from .design/branding/ (one → use it, multiple → ask). Set BRAND_PATH.
If missing, tell user to run /gsp-start first.
Step 1: Validate prerequisites
Read {BRAND_PATH}/STATE.md. Strategy (Phase 2) must be complete.
If not: "Strategy isn't done yet. Run /gsp-brand-strategy first."
Load:
{BRAND_PATH}/BRIEF.md{BRAND_PATH}/strategy/INDEX.md→ load all 5 strategy chunks{BRAND_PATH}/discover/mood-board-direction.md{BRAND_PATH}/config.json→ readsystem_config.style_base
Style base presets
If style_base is a non-empty array, load each preset's files from ${CLAUDE_SKILL_DIR}/../gsp-style/styles/:
{preset-name}.yml— tokens + intensity + patterns + constraints + effects (structural scaffold){preset-name}.md— design philosophy, signature techniques, implementation patterns (creative context)
Both files matter: the .yml gives the creative-director the aesthetic rules to respect, the .md gives the emotional DNA and visual signatures to channel. The creative-director adapts the brand within the preset's structure — respecting intensity dials, patterns, and constraints while bringing the brand's unique personality.
Step 2: Visual direction
Load mood-board-direction.md + archetype visual tendencies.
If audit exists, load audit/brand-inventory.md for current visuals.
Present research context (compact — colors, typefaces, imagery from mood board + archetype tendencies). If style base presets are loaded, frame the visual directions around them:
- Faithful — follows the preset's aesthetic closely, adapting for this brand
- Selective — cherry-picks elements (e.g. typography approach but different palette)
- Departure — uses the preset as a point of contrast, defining what the brand is not
Use AskUserQuestion with 2-3 visual directions:
- Label: direction name (e.g. "Minimal & Sharp")
- Description: color palette direction, typography feel, overall aesthetic
- Preview: "Palette: {key colors}. Type: {typeface style}. Feel: {1-line vibe}."
Step 2b: Constraints
After visual direction is confirmed, ask as a separate AskUserQuestion:
- No constraints — "Go ahead with this direction"
- Add constraints — "I have specific requirements (colors to avoid, accessibility needs, existing assets to match)"
Step 3: Spawn creative director
Load references and agent methodology
Read these files and hold their content for inlining into the agent prompt:
${CLAUDE_SKILL_DIR}/../../templates/phases/identity.md— identity output template${CLAUDE_SKILL_DIR}/../gsp-color/references/color-composition.md— color composition reference${CLAUDE_SKILL_DIR}/methodology/gsp-brand-creative-director.md— agent methodology
Spawn the gsp-brand-creative-director agent. Inline all content — the agent should not need to read any input files.
Pass in the agent prompt:
- Content of BRIEF.md (loaded in Step 1)
- Content of strategy chunks: archetype.md, positioning.md, brand-platform.md, voice-and-tone.md (loaded in Step 1)
- Content of discover/mood-board-direction.md (loaded in Step 1)
- Content of style base preset
.yml+.md(when loaded in Step 1) —.ymlas structural scaffold,.mdas design philosophy and signature techniques - Content of audit/brand-inventory.md (when loaded in Step 2)
- Agent methodology (loaded above)
- Content of identity output template (loaded above)
- Content of color composition reference (loaded above)
- User-confirmed visual direction + constraints
- Output path:
{BRAND_PATH}/identity/
The agent writes 5 chunks + INDEX.md (creative decisions only — no technical execution):
logo-directions.mdcolor-system.md(chosen colors + rationale, no OKLCH/contrast math)typography.md(chosen typefaces + rationale, no scale math)imagery-style.md(creative direction, no icon library specifics)brand-applications.mdINDEX.md
Step 3.5: Enrich with domain skills (parallel)
After the creative-director finishes, invoke all 4 domain skills in parallel — they operate on separate chunks with zero dependencies:
/gsp-logo --enrich— readslogo-directions.md, enriches with construction geometry, variation specs, clear space rules, minimum size calculations./gsp-color --enrich— readscolor-system.md, generates OKLCH palettes via tints.dev, calculates WCAG contrast, writespalettes.json, enriches with contrast ratios and semantic mapping./gsp-typography --enrich— readstypography.md, generates mathematical type scale, adds fluid type formulas, enriches with font loading instructions./gsp-visuals --imagery --enrich— readsimagery-style.md, adds icon library specifics, CSS texture/treatment recipes, enriches with technical implementation details.
Invoke all 4 using the Skill tool simultaneously. Each skill loads its own domain references on-demand — no upfront context cost.
Step 4: Perspective check
Load BRIEF.md personas. Present brief stress-test:
"Stress-testing the visual identity:
{Primary persona name}: {1-line — would they trust this visual language?} Skeptic: {1-line — challenges the boldest visual decision} {Top competitor}: {1-line — is the brand visually differentiated?}
Concerns?"
Use AskUserQuestion:
- Lock it in — "Identity looks solid"
- Adjust — "I want to change something"
Step 5: Update state and route
Update {BRAND_PATH}/STATE.md: set Phase 3 (Identity) to complete, Prettiness Level to 80%.
Invoke /gsp-phase-transition with phase identity and output directory {BRAND_PATH}/identity/.
More from jubscodes/get-shit-pretty
get-shit-pretty
Design engineering for AI coding tools. Full pipeline: brand research, strategy, identity, guidelines, UI design, critique, accessibility audit, build, and review. Expertise skills (color, typography, visuals) serve the entire pipeline. 14 specialized agents with Apple HIG, Nielsen's heuristics, WCAG 2.2 AA, and design token standards.
15gsp-visuals
Define visual direction — imagery, 3D, video, textures, and surface treatments
14gsp-accessibility
Quick contrast checks and token WCAG audits — inline, no agent
14gsp-help
Show all skills
14gsp-color
Design color systems — palettes, contrast, semantic mapping, dark mode
14gsp-typography
Design type systems — scale, pairing, fluid type, vertical rhythm
14