Brand Skill

Build complete brand identities that are coherent, distinctive, and impossible to confuse with generic AI output.

What Makes This Different

Anti-AI-Slop Focus: This process creates brands that are:

• Emotionally grounded — Every visual choice connects to human meaning
• Systematically distinctive — Coherent systems, not random "modern" aesthetics
• Intentionally crafted — Expert-level refinement, not first-draft defaults

The secret: Start with emotive narrative before any visual work. This creates deep LLM memory that prevents generic drift.

Structure

brand-skill/
├── SKILL.md                      # Overview and routing (you are here)
├── TOOLS-REQUIRED.md             # Prerequisites checklist
├── ADDENDUM-4-WEB-PRESENCE.md    # Convergence theory (why LLMs revert to mean)
├── SKILL-AUDIT.md                # Gap analysis from AutonoLabs build
├── Workflows/
│   ├── 00-EmotiveNarrative.md    # Soul of the brand
│   ├── 01-Discovery.md            # Strategy and positioning
│   ├── 02-VisualDirection.md      # Reference exploration
│   ├── 03-MarkDevelopment.md      # Logo via tracing or hand-coding
│   ├── 04-Wordmark.md             # Typography and lockups
│   ├── 05-DesignSystem.md         # Complete system (web + iOS)
│   ├── 05A-CompositionIdentity.md # Evolutionary diverge/kill/mutate process
│   ├── 06-DesignMdCreation.md     # Consolidate to DESIGN.md
│   └── 07-Packaging.md            # Final delivery
├── Templates/
│   ├── DESIGN-template.md         # Comprehensive DESIGN.md template
│   ├── philosophy-template.md
│   ├── visual-philosophy-template.md
│   ├── design-guidelines-template.md
│   └── readme-template.md
└── Examples/
    └── sorted-brand-kit/          # Real-world example (Sorted.fund)

Getting Started

Before anything else:

1. Read Workflows/00-Orchestrator.md — controls phase progression and state tracking
2. Read TOOLS-REQUIRED.md — verify prerequisites
3. Create .brand-progress.md in the project directory using the checklist from 00-Orchestrator.md. This is the living progress tracker — update it at each gate check.

Triggers

• "Build a brand for [project]"
• "Create brand guidelines"
• "Design a logo and visual system"
• "I need a complete identity that doesn't look like AI slop"
• "Help me create a design system with iOS and web specs"

The Process (8 Phases)

Phase 0: Emotive Narrative ⭐ NEW

Create the soul before the visuals

Output: Beautiful emotive narrative in 4-6 paragraphs

• The human moment (why this matters)
• The transformation (what becomes possible)
• The ethos (values and principles)
• The personality (how it moves through the world)
• The north star (guiding light for decisions)

Why first: This becomes the emotional context that every subsequent phase references. It prevents generic "clean and modern" drift by grounding all choices in human meaning.

Time: 20-30 minutes

Phase 1: Discovery

Establish strategic foundation

Output: Brand positioning, voice guidelines

• Positioning statement
• Core metaphor
• Brand personality traits
• Voice and tone principles

Context-aware: If you have codebase access, read project files first and draft a positioning hypothesis. Don't open with a questionnaire.

Time: 15-20 minutes

Phase 2: Visual Direction

Generate reference images to find aesthetic territory

Output: Reference images (PNG) exploring directions

• 3-4 prompts exploring different interpretations
• User picks direction(s)
• Generate refinements if needed

Optional: Can skip and go straight to SVG iteration (Phase 3)

Time: 10-15 minutes

Phase 3: Mark Development

Develop logo via tracing or hand-coded SVG

Output: [brand]-mark-final.svg, favicon PNG

• Primary path: Generate reference → trace to SVG (vtracer) → refine
• Secondary path: Hand-code simple geometric marks
• Render-verify loop after every change (rsvg-convert)
• Iteration limit: 5-8 rounds, then pivot approach
• Test at favicon sizes (32px, 16px)

Time: 20-60 minutes

Phase 4: Wordmark

Pair the mark with typography

Output: [brand]-wordmark-final.svg, variants

• Horizontal, stacked, text-only lockups
• Refine alignment through iteration
• Test in real-world contexts

Time: 30-45 minutes

Phase 5: Design System ⭐ UPDATED

Define complete visual language for web AND iOS

Output: [brand]-design-guidelines.md

• Colors (web CSS + iOS Swift)
• Typography (web + iOS with Dynamic Type)
• Spacing (unified 8pt/px base)
• Components (web + iOS implementations)
• Motion and animation principles
• Platform-specific considerations

Includes iOS specifications:

• SwiftUI components
• Asset Catalog setup
• Dynamic Type support
• Safe area handling
• Touch target guidelines

Time: 30-60 minutes

Phase 5.5: Composition & Visual Identity ⭐ NEW

Define how this brand uniquely occupies space

Output: Compositional framework + 3-5 named structural variants deployed for comparison

This is where the evolutionary process lives. Tokens (Phase 5) define materials; composition defines what to build with them. Without this phase, every brand converges to the same layout regardless of tokens.

Process:

1. Create anti-reference board (sites/patterns to explicitly avoid)
2. Generate 3-5 structurally different page variants — each fighting a named convention
3. Deploy to comparison page for user to evaluate visually
4. User kills variants (no blending). Surviving direction gets mutated.
5. Repeat until the composition is distinctive under the blur test (at 20% visibility, the layout silhouette is distinguishable from the anti-references)

Critical: The user's reference images and gut reactions drive this phase entirely. The LLM generates; the user selects. See 05A-CompositionIdentity.md for full process.

Time: 60-120 minutes (most important phase for distinctiveness)

Phase 6: DESIGN.md Creation

Consolidate everything into one master reference

Output: DESIGN.md (comprehensive, living document)

Contains:

1. Emotive Narrative (from Phase 0)
2. Strategic Foundation (from Phase 1)
3. Visual Philosophy (from Phase 1/2)
4. Logo System (from Phase 3/4)
5. Design Tokens (colors, type, spacing — web + iOS)
6. Components (implementation for web + iOS)
7. Implementation Guidelines (platform-specific specs)
8. Anti-AI-Slop Principles (quality validation)

Why critical: Single source of truth. Any LLM can read DESIGN.md and understand the complete brand — preventing generic drift forever.

Time: 20-30 minutes

Phase 7: Packaging

Collect assets for handoff

Output: [brand]-brand-kit/ folder (or .zip)

• All final assets organized
• Quick-start README
• DESIGN.md as master reference

Time: 10-15 minutes

Total Time Investment

• Fast track: 3-4 hours (clear direction, minimal iteration)
• Full process: 5-7 hours (exploration and refinement)
• Complex brands: 8+ hours (multiple concepts, extensive iteration)

Key Outputs

During Process

• [brand]-emotive-narrative.md (Phase 0)
• [brand]-philosophy.md (Phase 1)
• [brand]-visual-philosophy.md (Phase 1/2)
• Reference images (Phase 2)
• [brand]-mark-final.svg + favicon (Phase 3)
• [brand]-wordmark-*.svg (Phase 4)
• [brand]-design-guidelines.md (Phase 5)

Final Deliverable

• DESIGN.md — The single source of truth (Phase 6)
• Brand kit folder — All assets packaged (Phase 7)

On LLM Design Limitations — Read This First

Be honest with the user about this at the start of every brand engagement.

This skill produces excellent ingredients — emotive narratives, color palettes, typography systems, design tokens. What it cannot produce on its own is a distinctive composition — how those ingredients come together into something that doesn't look like every other