get-shit-pretty 0.2.0 → 0.4.0

package/prompts/01-design-system-architect.md

@@ -1,19 +1,48 @@
 # The Design System Architect
 
 **Category:** Design Systems
-**Use when:** Building a complete design system from scratch for a brand
+**Use when:** Building a complete design system from scratch, extending an existing one, or redesigning with migration mapping
 
 ---
 
 ## Prompt
 
-Act as Apple Principal Designer. Build a complete design system for [BRAND]. Include foundations: color system (primary, semantic, dark mode, contrast, usage), typography (9 levels, responsive scale, accessibility), 12-column grid, 8px spacing. Design 30+ components with states, anatomy, usage, accessibility, and code specs. Add patterns, design tokens JSON, principles, do's/don'ts, and dev guide. Publish-ready.
+Act as Apple Principal Designer. Build a design system for [BRAND].
+
+**When [SYSTEM_STRATEGY] is GENERATE:**
+Build a complete design system from scratch. Include foundations: color system (primary, semantic, dark mode, contrast, usage), typography (9 levels, responsive scale, accessibility), 12-column grid, 8px spacing. Design 30+ components with states, anatomy, usage, accessibility, and code specs. Add patterns, design tokens JSON, principles, do's/don'ts, and dev guide. Publish-ready.
+When [INVENTORY] is provided (boilerplate): respect existing config structure and output tokens in the format the existing config uses (Tailwind extend, CSS custom properties, etc).
+
+**When [SYSTEM_STRATEGY] is EXTEND:**
+Evolve the existing design system rather than replacing it. The codebase already has tokens and components (see [INVENTORY]).
+1. Audit existing tokens against the brand identity — keep what works, adjust what doesn't, fill gaps
+2. Classify each existing component: KEEP (unchanged), RESTYLE (apply new tokens), REFACTOR (structural changes), REPLACE (redesign needed)
+3. Design only net-new components not covered by existing ones
+4. Output delta tokens — only new and changed values, referencing existing token names
+5. Preserve existing naming conventions, file patterns, and architecture from [INVENTORY]
+
+**When [SYSTEM_STRATEGY] is REFACTOR:**
+Redesign the design system from the ground up, informed by what exists. The codebase has an existing system (see [INVENTORY]) that needs a complete rethink.
+1. Read and understand existing tokens, components, patterns from [INVENTORY]
+2. Design a complete new system (foundations, 30+ components, tokens) — same scope as GENERATE
+3. Produce a migration mapping for every change:
+   - Old token → new token (or "removed — use X instead")
+   - Old component → new component (or "replaced by X")
+   - Files that need updating and what changes
+4. Preserve conventions (naming, file org, import aliases) unless the brand requires changes
+5. Flag breaking changes explicitly
+
+**When [DESIGN_SCOPE] is `tokens`:**
+Focus exclusively on foundations and tokens. Do not design components. Produce a component-token mapping table showing which existing components are affected by token changes and how.
 
 ---
 
 ## Variables
 
 - `[BRAND]` — The brand/product name to build the system for
+- `[SYSTEM_STRATEGY]` — GENERATE | EXTEND | REFACTOR
+- `[INVENTORY]` — Contents of INVENTORY.md (empty when greenfield)
+- `[DESIGN_SCOPE]` — full | partial | tokens
 
 ## Expected Output
 
@@ -21,7 +50,10 @@ Act as Apple Principal Designer. Build a complete design system for [BRAND]. Inc
 - Typography scale (9 levels, responsive, accessible)
 - Grid system (12-column)
 - Spacing system (8px base)
-- 30+ components with: states, anatomy, usage rules, accessibility specs, code specs
+- 30+ components with: states, anatomy, usage rules, accessibility specs, code specs (GENERATE/REFACTOR)
+- Component audit table with KEEP/RESTYLE/REFACTOR/REPLACE classifications (EXTEND)
+- Migration mapping: old → new for tokens and components (REFACTOR)
+- Component-token mapping table (tokens scope)
 - Design patterns
 - Design tokens (JSON)
 - Design principles

package/prompts/03-ui-ux-pattern-master.md

@@ -9,12 +9,22 @@
 
 Act as a Senior Apple UI Designer. Design a full UI for [APP TYPE] based on [PERSONA], goals, and pain points. Follow Apple HIG. Define hierarchy, layout patterns, navigation, gestures, and platform rules. Detail 8 core screens with wireframes, components, interactions, empty/error/loading states. Specify buttons, forms, cards, data viz, accessibility (WCAG, VoiceOver, Dynamic Type), micro-interactions, and responsive behavior. Include Designer's Notes.
 
+**Screen scope:**
+- When `design_scope` is `full`: design [SCREEN_COUNT] core screens (default 8)
+- When `design_scope` is `partial`: design only [TARGET_SCREENS]
+
+**When [INVENTORY] is provided (existing codebase):**
+Reference existing components and patterns from [INVENTORY]. Use existing component names in wireframes where applicable. When redesigning existing screens, note what changes vs what stays.
+
 ---
 
 ## Variables
 
 - `[APP TYPE]` — Type of application (e.g., fitness tracker, finance app)
 - `[PERSONA]` — Target user persona
+- `[SCREEN_COUNT]` — Number of screens (default 8)
+- `[TARGET_SCREENS]` — Specific screens when partial scope
+- `[INVENTORY]` — INVENTORY.md contents (empty when greenfield)
 
 ## Expected Output
 
@@ -22,7 +32,7 @@ Act as a Senior Apple UI Designer. Design a full UI for [APP TYPE] based on [PER
 - Information hierarchy and layout patterns
 - Navigation system and gesture definitions
 - Platform-specific rules (Apple HIG)
-- 8 core screens with wireframes
+- 8 core screens with wireframes (or target screens when partial)
 - Component specs (buttons, forms, cards, data viz)
 - State designs (empty, error, loading)
 - Accessibility (WCAG, VoiceOver, Dynamic Type)

package/prompts/09-design-to-code-translator.md

@@ -9,12 +9,21 @@
 
 Act as a Vercel Design Engineer. Convert [DESIGN] into production-ready frontend code using [TECH STACK]. Deliver component hierarchy, props, state, data flow, copy-paste code, responsive layout, ARIA/accessibility, error/loading states, animations, styling (CSS/Tailwind with design tokens, dark mode, breakpoints, states), asset optimization, performance tips, testing strategy, and documentation.
 
+**When [INVENTORY] is provided (existing codebase):**
+You are working in an existing codebase. Follow conventions from [INVENTORY]:
+- Use the project's naming conventions, import aliases, and export patterns
+- Follow the project's component style (forwardRef, compound components, etc.)
+- Place new files according to the project's file organization
+- Use the project's styling approach (cn() utility, className patterns, etc.)
+- When modifying existing components, show the diff rather than full rewrite
+
 ---
 
 ## Variables
 
 - `[DESIGN]` — Description or screenshot of the design to implement
 - `[TECH STACK]` — Frontend stack (e.g., React + Tailwind, Next.js, Vue, SwiftUI)
+- `[INVENTORY]` — INVENTORY.md contents (empty when greenfield)
 
 ## Expected Output
 

package/prompts/10-project-scoper.md

@@ -0,0 +1,51 @@
+# The Project Scoper
+
+**Category:** Project Scoping
+**Use when:** Scoping a design project — determining screens, component adaptations, and implementation gaps. Encourages treating projects as bounded issues and PRs.
+
+---
+
+## Prompt
+
+Act as a Senior Design Project Lead. Scope [PROJECT] using the brand's design system from [BRAND].
+
+**Screen scoping:**
+Analyze the project brief to determine the complete list of screens needed. Prioritize by user flow criticality (primary flows first, edge cases last). Each screen should map to a clear user goal. Consider the platform (web, mobile, both) and design scope (full, partial, tokens).
+
+**Component adaptations:**
+Review the brand's design system components and determine what this specific project needs:
+- Which brand components to use as-is
+- Which need project-specific variants or overrides
+- Any net-new components unique to this project
+Map design components to the implementation target's primitives (shadcn, rn-reusables, existing, code).
+
+**When [IMPLEMENTATION_TARGET] is `shadcn`:**
+Map components to shadcn/ui primitives. List required `npx shadcn@latest add` installs. Define token mapping to shadcn CSS variables.
+
+**When [IMPLEMENTATION_TARGET] is `rn-reusables`:**
+Map components to React Native Reusables primitives. List required installs. Handle platform differences.
+
+**When [IMPLEMENTATION_TARGET] is `existing`:**
+Read the codebase inventory. Map design to existing components and tokens. Identify gaps (design components/tokens not in codebase). Include file paths to existing components.
+
+**When [IMPLEMENTATION_TARGET] is `code`:**
+Define component architecture. Map tokens to CSS custom properties. No tool-specific specs.
+
+---
+
+## Variables
+
+- `[PROJECT]` — The project being scoped (from BRIEF.md)
+- `[BRAND]` — The brand whose design system is being used
+- `[IMPLEMENTATION_TARGET]` — One of: `shadcn`, `rn-reusables`, `existing`, `code`, `figma`
+- `[INVENTORY]` — Existing codebase inventory (when available)
+
+## Expected Output
+
+- Prioritized screen list with purpose and user flow position
+- Component scope (brand components used, adaptations needed)
+- Project boundaries (in scope / out of scope)
+- Implementation target mapping (design → target primitives)
+- Install manifest (shadcn/rn-reusables only)
+- Gap analysis (existing codebases only)
+- File references (existing codebases only)

package/prompts/11-deliverable-reviewer.md

@@ -0,0 +1,58 @@
+# The Deliverable Reviewer
+
+**Category:** Quality Assurance
+**Use when:** Validating built code against design intent — checking implementation fidelity, token compliance, and accessibility
+
+---
+
+## Prompt
+
+Act as a Senior QA Design Engineer. Review the built deliverables for [PROJECT] against the design intent from [BRAND]'s design system.
+
+**Screen coverage:**
+Compare every designed screen against the built output. For each screen, check:
+- Is it implemented? (complete, partial, missing)
+- Does the layout match the design?
+- Are all states handled? (default, empty, loading, error)
+- Are interactions implemented as specified?
+
+**Token compliance:**
+Audit the built code for design token usage:
+- Are design tokens used instead of magic numbers?
+- Are the correct tokens referenced? (e.g., `--color-primary` not hardcoded `#3B82F6`)
+- Are spacing, typography, and color tokens consistent with the brand system?
+- Check for any hardcoded values that should be tokens
+
+**Component fidelity:**
+For each implemented component:
+- Does it match the design system spec? (states, anatomy, variants)
+- Are accessibility attributes present? (ARIA roles, keyboard support, focus management)
+- Does responsive behavior match design intent?
+
+**Accessibility verification:**
+Check built code for WCAG 2.2 AA compliance:
+- Color contrast (4.5:1 text, 3:1 large text, 3:1 UI components)
+- Keyboard navigation and focus indicators
+- ARIA labels and roles
+- Screen reader compatibility
+- Touch targets (≥ 44x44pt recommended)
+
+**Critique resolution:**
+If critique fixes were provided, verify they were addressed in the build.
+
+---
+
+## Variables
+
+- `[PROJECT]` — The project being reviewed
+- `[BRAND]` — The brand whose design system was used
+- `[CRITIQUE_FIXES]` — Prioritized fixes from the critique phase (if available)
+
+## Expected Output
+
+- Overall verdict: Pass / Conditional Pass / Fail
+- Per-screen implementation checklist
+- Token audit summary (compliant / violations found)
+- Component coverage report
+- Accessibility compliance summary
+- Issues list with severity, location, and remediation

package/prompts/12-project-researcher.md

@@ -0,0 +1,57 @@
+# The Project Researcher
+
+**Category:** Project Research
+**Use when:** Deep research into UX patterns, competitor experiences, technical approaches, accessibility strategies, and reference specs for a specific project
+
+---
+
+## Prompt
+
+Act as a Senior UX Researcher and Technical Analyst. Research [PROJECT_TYPE] deeply — UX patterns, competitor experiences, technical approaches, accessibility strategies, and reference specs for execution.
+
+**UX patterns research:**
+Find established UX patterns for [PROJECT_TYPE] products. Search for current best practices, case studies, and pattern libraries. Cover navigation, interaction, information architecture, onboarding, and empty state patterns. Every pattern must have a source.
+
+**Competitor UX analysis:**
+Identify 3-5 competitor or adjacent products solving similar problems. Analyze their UX deeply — not features lists, but specific interactions, flows, and design decisions. What works, what doesn't, what's unique. Find opportunity gaps.
+
+**Technical research:**
+Investigate [TECH_STACK]-specific patterns for building [PROJECT_TYPE]. Component composition, state management, performance optimization, animation approaches. Focus on patterns proven in production, not theoretical.
+
+**Accessibility research:**
+Research accessibility patterns specific to [PROJECT_TYPE]. Keyboard navigation maps, screen reader flows, focus management for complex interactions (modals, drawers, dynamic content). Find WCAG criteria most relevant to this product type.
+
+**Content strategy:**
+Study microcopy conventions for [PROJECT_TYPE] — button labels, error messages, empty states, tooltips. Research information density and terminology conventions.
+
+**Reference specs collection:**
+Find and collect specs that execution phases will need:
+- API documentation for integrations
+- Component library API references ([TECH_STACK]-specific)
+- Platform guidelines relevant to this product
+- Accessibility implementation guides
+- Third-party service documentation
+For each: include source URL, key takeaways, and how it applies to this project.
+
+**Synthesis:**
+Distill all research into adopt/adapt/avoid recommendations tied to specific findings.
+
+---
+
+## Variables
+
+- `[PROJECT_TYPE]` — What's being built (dashboard, e-commerce, social app, SaaS, etc.)
+- `[TECH_STACK]` — Implementation technology (React + Tailwind, React Native, etc.)
+- `[PLATFORM]` — Target platforms (web, iOS, Android)
+- `[BRAND_DISCOVERY]` — Brand-level competitive audit and trends (to build on, not duplicate)
+- `[SCOPE]` — Project scope from brief/scope.md
+
+## Expected Output
+
+- UX patterns with sources and applicability assessment
+- Competitor UX deep-dives with specific interaction analysis
+- Stack-specific technical patterns and architecture recommendations
+- Accessibility patterns with implementation guidance
+- Content strategy conventions
+- Reference specs with URLs and key takeaways
+- Synthesized adopt/adapt/avoid recommendations

package/references/brand-archetypes.md

@@ -0,0 +1,151 @@
+# Brand Archetypes
+
+## Overview
+
+Based on Carl Jung's 12 universal character archetypes, brand archetypes provide a framework for creating consistent, emotionally resonant brand personalities. Each archetype has distinct traits, motivations, and communication styles.
+
+## The 12 Archetypes
+
+### 1. The Innocent
+**Core desire:** Safety, happiness, paradise
+**Brand promise:** Life can be simple and good
+**Traits:** Optimistic, honest, wholesome, pure, nostalgic
+**Communication:** Simple language, positive imagery, traditional values
+**Shadow:** Naivety, denial of problems
+**Visual tendencies:** Light colors, soft imagery, clean layouts, pastoral scenes
+**Examples:** Coca-Cola, Dove, Whole Foods, Nintendo
+**Best for:** Brands offering simple solutions, purity, nostalgia, or natural products
+
+### 2. The Sage
+**Core desire:** Truth, knowledge, understanding
+**Brand promise:** The truth will set you free
+**Traits:** Knowledgeable, wise, analytical, thoughtful, informed
+**Communication:** Data-driven, educational, thought leadership, nuanced
+**Shadow:** Ivory tower elitism, analysis paralysis
+**Visual tendencies:** Clean typography, structured layouts, data visualization, muted palettes
+**Examples:** Google, BBC, Harvard, McKinsey, The Economist
+**Best for:** Brands providing expertise, information, or analytical tools
+
+### 3. The Explorer
+**Core desire:** Freedom, discovery, self-fulfillment
+**Brand promise:** Don't fence me in
+**Traits:** Adventurous, independent, ambitious, pioneering, restless
+**Communication:** Inspirational, challenging boundaries, frontier language
+**Shadow:** Aimless wandering, inability to commit
+**Visual tendencies:** Expansive landscapes, earth tones, rugged textures, dynamic composition
+**Examples:** Jeep, Patagonia, REI, National Geographic, Airbnb
+**Best for:** Outdoor, travel, adventure, or self-improvement brands
+
+### 4. The Outlaw (Rebel)
+**Core desire:** Revolution, liberation, breaking rules
+**Brand promise:** Rules are made to be broken
+**Traits:** Disruptive, provocative, rebellious, unconventional, radical
+**Communication:** Counter-cultural, provocative, anti-establishment, bold
+**Shadow:** Criminal behavior, destructiveness
+**Visual tendencies:** Dark palettes, bold contrasts, grunge textures, unconventional layouts
+**Examples:** Harley-Davidson, Virgin, Diesel, Supreme
+**Best for:** Brands challenging industry norms or targeting counter-culture audiences
+
+### 5. The Magician
+**Core desire:** Transformation, making dreams real
+**Brand promise:** It can happen
+**Traits:** Visionary, transformative, charismatic, imaginative, catalytic
+**Communication:** Transformational language, "before and after," wonder, possibility
+**Shadow:** Manipulation, disconnection from reality
+**Visual tendencies:** Rich colors, dynamic effects, transformational imagery, mystical elements
+**Examples:** Apple, Disney, Tesla, Dyson, TED
+**Best for:** Transformative technology, entertainment, wellness, or innovation brands
+
+### 6. The Hero
+**Core desire:** Mastery, proving worth through courage
+**Brand promise:** Where there's a will, there's a way
+**Traits:** Courageous, determined, strong, disciplined, competent
+**Communication:** Motivational, achievement-focused, competitive, empowering
+**Shadow:** Arrogance, ruthlessness, always needing a villain
+**Visual tendencies:** Bold colors, strong typography, dynamic angles, athletic imagery
+**Examples:** Nike, FedEx, BMW, Under Armour, Duracell
+**Best for:** Brands helping people perform at their best or overcome challenges
+
+### 7. The Lover
+**Core desire:** Intimacy, connection, sensual experience
+**Brand promise:** You are special, desirable, worthy of love
+**Traits:** Passionate, sensual, intimate, warm, indulgent
+**Communication:** Emotional, sensory language, aspirational beauty, relationship-focused
+**Shadow:** Obsessive, jealous, superficial
+**Visual tendencies:** Rich textures, warm tones, intimate photography, luxurious materials
+**Examples:** Chanel, Victoria's Secret, Godiva, Alfa Romeo, Hallmark
+**Best for:** Luxury, beauty, food, fashion, or relationship-oriented brands
+
+### 8. The Jester
+**Core desire:** Joy, fun, living in the moment
+**Brand promise:** If I can't dance, I don't want to be part of your revolution
+**Traits:** Fun-loving, humorous, irreverent, playful, spontaneous
+**Communication:** Wit, humor, pop culture references, lighthearted, memes
+**Shadow:** Cruelty through humor, frivolity, inability to be serious
+**Visual tendencies:** Bright colors, playful typography, cartoon elements, unexpected layouts
+**Examples:** Old Spice, M&Ms, Dollar Shave Club, Mailchimp, IKEA (marketing)
+**Best for:** Entertainment, snack food, casual brands, or brands in boring industries needing differentiation
+
+### 9. The Everyperson (Regular Guy/Girl)
+**Core desire:** Belonging, connection, fitting in
+**Brand promise:** Everyone belongs here
+**Traits:** Relatable, friendly, down-to-earth, authentic, inclusive
+**Communication:** Conversational, unpretentious, community-focused, common language
+**Shadow:** Losing identity to blend in, mediocrity
+**Visual tendencies:** Accessible design, warm colors, real people photography, familiar patterns
+**Examples:** IKEA, Target, Gap, Budweiser, eBay
+**Best for:** Mass-market brands, community platforms, everyday products
+
+### 10. The Caregiver
+**Core desire:** Protecting and caring for others
+**Brand promise:** Love your neighbor as yourself
+**Traits:** Nurturing, generous, compassionate, protective, supportive
+**Communication:** Empathetic, supportive, safety-focused, community-oriented
+**Shadow:** Martyrdom, enabling, guilt-tripping
+**Visual tendencies:** Soft colors, rounded shapes, nurturing imagery, calming palettes
+**Examples:** Johnson & Johnson, TOMS, Volvo, Campbell's, UNICEF
+**Best for:** Healthcare, insurance, nonprofits, family products, safety brands
+
+### 11. The Ruler
+**Core desire:** Control, stability, order
+**Brand promise:** Power isn't everything, it's the only thing
+**Traits:** Authoritative, responsible, organized, commanding, premium
+**Communication:** Confident statements, exclusivity, prestige, control language
+**Shadow:** Tyranny, rigidity, entitlement
+**Visual tendencies:** Dark/rich palettes, structured layouts, premium materials, serif typography
+**Examples:** Mercedes-Benz, Rolex, Microsoft, American Express, Brooks Brothers
+**Best for:** Luxury, premium, financial, enterprise, or market-leader brands
+
+### 12. The Creator
+**Core desire:** Innovation, self-expression, creating something enduring
+**Brand promise:** If it can be imagined, it can be created
+**Traits:** Creative, imaginative, artistic, inventive, perfectionist
+**Communication:** Inspiring creation, showcasing craft, celebrating art, vision-focused
+**Shadow:** Perfectionism paralysis, self-indulgence, impracticality
+**Visual tendencies:** Creative layouts, artistic elements, craft-forward, experimental design
+**Examples:** Lego, Adobe, Crayola, Pinterest, Moleskine
+**Best for:** Creative tools, art, craft, design, or DIY brands
+
+## Choosing an Archetype
+
+### Selection Process
+1. **Review brand prism** — Which archetype naturally fits the Personality and Culture facets?
+2. **Check audience alignment** — Which archetype resonates with the target audience's Self-Image?
+3. **Assess competitive landscape** — Which archetypes are overused by competitors? Differentiate.
+4. **Test for authenticity** — Can the brand genuinely embody this archetype? Forced archetypes fail.
+5. **Consider blending** — Most brands are 70/30 — primary archetype + secondary influence.
+
+### Common Pairings
+- Hero + Sage (Nike's data-driven training)
+- Creator + Magician (Apple's creative transformation)
+- Explorer + Outlaw (Patagonia's activist adventure)
+- Caregiver + Sage (Mayo Clinic's expert care)
+- Jester + Everyperson (Dollar Shave Club's relatable humor)
+
+### Archetypes to Avoid Pairing
+- Innocent + Outlaw (contradictory values)
+- Ruler + Jester (undermines authority)
+- Caregiver + Outlaw (conflicting motivations)
+
+## Source
+Mark, M. & Pearson, C.S. (2001). *The Hero and the Outlaw: Building Extraordinary Brands Through the Power of Archetypes*. McGraw-Hill.

package/references/brand-prism.md

@@ -0,0 +1,138 @@
+# Kapferer Brand Identity Prism
+
+## Overview
+
+Jean-Noel Kapferer's Brand Identity Prism defines brand identity through 6 interconnected facets. The prism captures both the external expression and internal essence of a brand.
+
+```
+        SENDER (Brand)
+    ┌─────────┬─────────┐
+    │ Physique │Personality│
+    ├─────────┼─────────┤
+    │Relationship│Culture │
+    ├─────────┼─────────┤
+    │Reflection│Self-Image│
+    └─────────┴─────────┘
+        RECEIVER (Audience)
+
+  LEFT = Externalization    RIGHT = Internalization
+```
+
+## The 6 Facets
+
+### 1. Physique
+**What it is:** The tangible, visible characteristics. What does the brand look like? What are its physical features?
+
+**Includes:** Logo shape, color palette, typography, packaging, product design, visual signatures.
+
+**Questions to answer:**
+- What are the brand's distinguishing physical features?
+- What visual elements make it instantly recognizable?
+- What would someone describe seeing?
+
+**Examples:**
+- Apple: Clean lines, aluminum, minimalist white packaging
+- Coca-Cola: Red color, contour bottle shape, Spencerian script
+- Nike: Swoosh, bold type, athletic silhouettes
+
+### 2. Personality
+**What it is:** The brand's character — if it were a person, what would they be like?
+
+**Includes:** Tone of voice, writing style, communication manner, human traits.
+
+**Questions to answer:**
+- What 5 adjectives describe the brand's character?
+- How does it speak? Formal or casual? Witty or serious?
+- What celebrity/character embodies this personality?
+
+**Examples:**
+- Apple: Innovative, confident, refined, simple, visionary
+- Old Spice: Humorous, bold, absurd, masculine, confident
+- Patagonia: Adventurous, responsible, authentic, rugged, purposeful
+
+### 3. Culture
+**What it is:** The values, principles, and beliefs that drive the brand. The brand's cultural DNA.
+
+**Includes:** Founding principles, country of origin influence, organizational values, ideology.
+
+**Questions to answer:**
+- What does the brand believe in?
+- What cultural values does it champion?
+- What principles guide every decision?
+
+**Examples:**
+- Apple: Innovation, challenging status quo, "Think Different"
+- IKEA: Democratic design, Swedish practicality, accessibility for all
+- Tesla: Sustainability, technological optimism, first-principles thinking
+
+### 4. Relationship
+**What it is:** The type of relationship the brand has with its audience. The transaction mode.
+
+**Includes:** Service style, community approach, power dynamic, emotional bond.
+
+**Questions to answer:**
+- Is the brand a mentor, friend, partner, guide, or authority?
+- How does it treat its audience?
+- What kind of bond does it create?
+
+**Examples:**
+- Apple: Empowering partner — "we give you tools to create"
+- Nike: Coach — "we push you to be better"
+- Airbnb: Facilitator — "we help you belong anywhere"
+
+### 5. Reflection
+**What it is:** How the target audience is portrayed by the brand. The idealized user image.
+
+**Includes:** The aspirational user archetype, lifestyle depiction, social identity.
+
+**Questions to answer:**
+- How does the brand portray its typical user?
+- What kind of person does the brand celebrate?
+- What lifestyle does advertising depict?
+
+**Note:** Reflection is NOT the actual target audience — it's the idealized image that appeals to the target.
+
+**Examples:**
+- Apple: Creative professionals, innovators, independent thinkers
+- Red Bull: Extreme athletes, adventurers, boundary-pushers
+- Chanel: Sophisticated, independent, timeless women
+
+### 6. Self-Image
+**What it is:** How the audience sees themselves when they use the brand. The internal mirror.
+
+**Includes:** Personal identity, self-perception, inner feelings when choosing the brand.
+
+**Questions to answer:**
+- How do customers feel about themselves when using this brand?
+- What identity does choosing this brand confirm?
+- What does buying this brand say about the buyer (to themselves)?
+
+**Examples:**
+- Apple: "I'm creative and forward-thinking"
+- Whole Foods: "I care about quality and health"
+- Tesla: "I'm tech-savvy and environmentally conscious"
+
+## How to Use the Prism
+
+### Step 1: Fill each facet independently
+Don't let one facet influence another initially. Answer each set of questions separately.
+
+### Step 2: Check coherence
+All 6 facets should tell a consistent story. If Personality says "playful" but Culture says "traditional conservative," there's a conflict.
+
+### Step 3: Check distinctiveness
+Compare your prism to competitors. At least 3 facets should be meaningfully different.
+
+### Step 4: Validate against strategy
+The prism should naturally lead to the brand's archetype, voice, and visual identity decisions.
+
+## Common Mistakes
+
+- **Confusing Reflection with Target:** Reflection is aspirational, not demographic
+- **Ignoring Culture:** Culture is the soul — without it, the brand is hollow
+- **Making Personality too generic:** "Innovative, quality-focused, customer-centric" describes every brand
+- **Neglecting Self-Image:** This is the most powerful motivator for brand loyalty
+- **Inconsistent facets:** A playful personality with a formal relationship creates confusion
+
+## Source
+Kapferer, J.N. (2012). *The New Strategic Brand Management*. Kogan Page.

package/references/chunk-format.md

@@ -0,0 +1,48 @@
+# Chunk Format Reference
+
+Standard format for all GSP phase output files. Chunks are the primary output — agents write chunks directly, not monoliths.
+
+## File Format
+
+Every chunk follows this structure:
+
+    # {Section/Component/Screen Name}
+
+    > Phase: {phase} | Brand/Project: {name} | Generated: {DATE}
+
+    ---
+
+    {Content for this chunk}
+
+    ---
+
+    ## Related
+
+    - [{Related chunk name}]({relative-path-to-related-chunk})
+
+## Naming Conventions
+
+- **Singular, kebab-case, lowercase:** "Buttons" → `button.md`, "Date Picker" → `date-picker.md`
+- **Screen files:** `screen-{NN}-{kebab-case-name}.md` (e.g., `screen-01-home.md`)
+
+## INDEX.md Format
+
+Each phase directory gets an INDEX.md manifest:
+
+    # {Phase Name}
+    > Phase: {phase} | Brand/Project: {name} | Generated: {DATE}
+
+    | Chunk | File | ~Lines |
+    |-------|------|--------|
+    | {Section} | [{filename}](./{filename}) | ~{N} |
+
+Lightweight — just a lookup table. No prose.
+
+## Rules
+
+- **Chunks are primary output** — agents write chunks directly to the phase directory
+- **No monoliths** — do not write a single large file then re-chunk it
+- **Size target:** 50-200 lines per chunk
+- **Self-contained:** each chunk must be understandable without loading other chunks
+- **Cross-references:** `## Related` section uses relative paths to related chunks
+- **Idempotent:** re-running a phase regenerates all chunks in that phase directory

package/references/design-trends.md

@@ -0,0 +1,47 @@
+# Design Trends Reference — Index
+
+Production-ready specs for current design trends. Each trend is a self-contained file — load only what you need.
+
+Last updated: 2026-03-04
+
+---
+
+## Trends
+
+| # | Trend | File | Description | Compat |
+|---|-------|------|-------------|--------|
+| 1 | Liquid Glass | [liquid-glass.md](./trends/liquid-glass.md) | Apple's 2025 refractive glass with dynamic blur and fluid morphing | Safari 15+, Chrome 76+ |
+| 2 | Glassmorphism | [glassmorphism.md](./trends/glassmorphism.md) | Frosted glass with backdrop-blur, subtle borders, layered depth | ~95% (needs -webkit-) |
+| 3 | Neubrutalism | [neubrutalism.md](./trends/neubrutalism.md) | Bold flat aesthetic with thick borders and hard-offset shadows | All browsers |
+| 4 | Bento Grid | [bento-grid.md](./trends/bento-grid.md) | Asymmetric modular grid inspired by Japanese bento boxes | All browsers |
+| 5 | Claymorphism | [claymorphism.md](./trends/claymorphism.md) | Soft 3D inflated clay aesthetic with double inset shadows | All browsers |
+| 6 | Aurora Gradients | [aurora-gradients.md](./trends/aurora-gradients.md) | Organic multi-directional color blends inspired by northern lights | All browsers |
+| 7 | Kinetic Typography | [kinetic-typography.md](./trends/kinetic-typography.md) | Scroll-triggered and character-level text animation | All browsers (JS needed) |
+| 8 | Micro-Interactions | [micro-interactions.md](./trends/micro-interactions.md) | Small UI responses to user actions — hover, click, focus, load | All browsers |
+| 9 | Dark Mode (OLED) | [dark-mode-oled.md](./trends/dark-mode-oled.md) | True OLED optimization with pure blacks and surface hierarchy | All browsers |
+
+## How to Use
+
+- **Researcher agent:** Load this index, then load specific trend files relevant to the project's industry
+- **System architect:** Pull exact CSS specs and token values from individual trend files
+- **Each file contains:** Visual characteristics, verified CSS, implementation guide, framework notes, examples gallery, accessibility, performance, design tokens
+
+---
+
+## Trend Combination Compatibility
+
+Some trends pair well; others clash. Use this matrix when mixing.
+
+| | Liquid Glass | Glassmorphism | Neubrutalism | Bento | Clay | Aurora | Kinetic Type | Micro-ix | Dark OLED |
+|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
+| **Liquid Glass** | - | ++ | -- | + | - | ++ | + | ++ | + |
+| **Glassmorphism** | ++ | - | -- | + | - | ++ | + | ++ | ++ |
+| **Neubrutalism** | -- | -- | - | + | -- | -- | ++ | + | + |
+| **Bento Grid** | + | + | + | - | + | + | + | ++ | + |
+| **Claymorphism** | - | - | -- | + | - | - | + | ++ | - |
+| **Aurora** | ++ | ++ | -- | + | - | - | + | + | ++ |
+| **Kinetic Type** | + | + | ++ | + | + | + | - | ++ | + |
+| **Micro-ix** | ++ | ++ | + | ++ | ++ | + | ++ | - | ++ |
+| **Dark OLED** | + | ++ | + | + | - | ++ | + | ++ | - |
+
+`++` great pairing | `+` compatible | `-` awkward | `--` clash