get-shit-pretty 0.5.0 → 0.5.2

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "gsp",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Design engineering system for AI coding agents. Brand identity + design projects, from strategy to code.",
   "author": {
     "name": "jubscodes",

package/README.md

@@ -110,7 +110,7 @@ Create your visual identity — logo directions, color palette, typography syste
 
 Translate your brand into tokens, components, and a living design system. Everything codified and ready to build with.
 
-**Creates:** `.design/branding/{brand}/system/`
+**Creates:** `.design/branding/{brand}/patterns/`
 
 ---
 

package/bin/install.js

@@ -149,10 +149,10 @@ const tagline = taglines[Math.floor(Math.random() * taglines.length)];
 
 // ── Sparkle field + density ramp banner ──
 
-function sparkleLine(width) {
-  const chars = ['✧', '.', '·'];
+function sparkleLine(width, density = 'normal') {
+  const chars = ['.', '.', '·', '·', '*', '+'];
   const line = Array(width).fill(' ');
-  const count = 4 + Math.floor(Math.random() * 5);
+  const count = density === 'dense' ? 8 + Math.floor(Math.random() * 6) : 4 + Math.floor(Math.random() * 5);
   for (let i = 0; i < count; i++) {
     const pos = Math.floor(Math.random() * width);
     line[pos] = chars[Math.floor(Math.random() * chars.length)];
@@ -168,17 +168,34 @@ function center(text, width) {
 
 const columns = process.stdout.columns || 80;
 const rampText = `${c.accent}░▒▓█${c.reset} ${c.bold} GET SHIT PRETTY ${c.reset} ${c.accent}█▓▒░${c.reset}`;
-const sparkleWidth = Math.min(34, columns - 4);
-const showSparkles = columns >= 40;
+const boxWidth = 48;
+const innerWidth = boxWidth - 2; // inside the border chars
+const showSparkles = columns >= 44;
 
-const banner = '\n\n' +
-  (showSparkles ? center(`${c.dim}${sparkleLine(sparkleWidth)}${c.reset}`, columns) + '\n' : '') +
-  (showSparkles ? center(`${c.dim}${sparkleLine(sparkleWidth)}${c.reset}`, columns) + '\n' : '') +
-  '\n' +
-  center(rampText, columns) + '\n' +
-  '\n' +
-  (showSparkles ? center(`${c.dim}${sparkleLine(sparkleWidth)}${c.reset}`, columns) + '\n' : '') +
-  (showSparkles ? center(`${c.dim}${sparkleLine(sparkleWidth)}${c.reset}`, columns) + '\n' : '') +
+function centerInBox(text, width) {
+  const stripped = text.replace(/\x1b\[[0-9;]*m/g, '');
+  const pad = Math.max(0, Math.floor((width - stripped.length) / 2));
+  const rightPad = Math.max(0, width - stripped.length - pad);
+  return ' '.repeat(pad) + text + ' '.repeat(rightPad);
+}
+
+const indent = '  ';
+const topBorder =    `${indent}${c.dim}╭${'─'.repeat(innerWidth)}╮${c.reset}`;
+const bottomBorder = `${indent}${c.dim}╰${'─'.repeat(innerWidth)}╯${c.reset}`;
+const emptyLine =    `${indent}${c.dim}│${c.reset}${' '.repeat(innerWidth)}${c.dim}│${c.reset}`;
+const boxLine = (content) => `${indent}${c.dim}│${c.reset}${centerInBox(content, innerWidth)}${c.dim}│${c.reset}`;
+const sparkle = (d) => boxLine(`${c.dim}${sparkleLine(innerWidth - 4, d)}${c.reset}`);
+
+const banner = '\n' +
+  topBorder + '\n' +
+  (showSparkles ? sparkle('dense') + '\n' : '') +
+  (showSparkles ? sparkle('dense') + '\n' : '') +
+  emptyLine + '\n' +
+  boxLine(rampText) + '\n' +
+  emptyLine + '\n' +
+  (showSparkles ? sparkle('dense') + '\n' : '') +
+  (showSparkles ? sparkle('dense') + '\n' : '') +
+  bottomBorder + '\n' +
   '\n' +
   `  ${c.bold}${c.accent}/gsp:${c.reset} ${c.tertiary}◇◇${c.reset}  ${c.dim}v${pkg.version}${c.reset}\n` +
   `  ${c.dim}${tagline}${c.reset}\n`;
@@ -979,13 +996,15 @@ function copyGeminiSkills(srcDir, destDir, pathPrefix) {
  * Returns count of gsp- agents installed.
  * runtime: 'claude' | 'opencode' | 'gemini'  (Codex skips agents entirely)
  */
-function copyAgents(srcDir, destDir, pathPrefix, runtime) {
+function copyAgents(srcDir, destDir, pathPrefix, runtime, { clean = false } = {}) {
   fs.mkdirSync(destDir, { recursive: true });
 
-  // Remove old GSP agents before copying new ones
-  for (const file of fs.readdirSync(destDir)) {
-    if (file.startsWith('gsp-') && file.endsWith('.md')) {
-      fs.unlinkSync(path.join(destDir, file));
+  // Remove old GSP agents before copying new ones (only when clean=true)
+  if (clean) {
+    for (const file of fs.readdirSync(destDir)) {
+      if (file.startsWith('gsp-') && file.endsWith('.md')) {
+        fs.unlinkSync(path.join(destDir, file));
+      }
     }
   }
 
@@ -1347,7 +1366,7 @@ function install(isGlobal, runtime = 'claude') {
     const agentsSrc = path.join(gspRoot, 'agents');
     if (fs.existsSync(agentsSrc)) {
       const agentsDest = path.join(targetDir, 'agents');
-      const agentCount = copyAgents(agentsSrc, agentsDest, pathPrefix, runtime);
+      const agentCount = copyAgents(agentsSrc, agentsDest, pathPrefix, runtime, { clean: true });
 
       // ── Custom agents (agents/custom/) ──
       const customAgentsSrc = path.join(agentsSrc, 'custom');

package/gsp/agents/gsp-accessibility-auditor.md

@@ -14,7 +14,7 @@ You are a GSP accessibility auditor spawned by `/gsp:accessibility` or `/gsp:pro
 
 Act as Apple Accessibility Specialist. Your job is to audit designs or code against WCAG 2.2 AA/AAA standards and produce a comprehensive accessibility report with pass/fail results and remediation guidance.
 
-Accessibility is not optional polish — it's a core quality requirement. Be thorough and specific.
+Accessibility is a core quality requirement.
 </role>
 
 <methodology>
@@ -34,10 +34,7 @@ Accessibility is not optional polish — it's a core quality requirement. Be tho
 - Focus indicators: >= 3:1 with >= 2px outline
 
 ## Quality Standards
-- Check every color combination mentioned in the design system
-- Verify every interactive element has keyboard access
 - Confirm every form has proper labels and error messages
-- Check touch targets (>= 24x24 CSS px, >= 44x44 recommended)
 - Verify heading hierarchy is logical
 
 ## Code Audit Mode

package/gsp/agents/gsp-ascii-artist.md

@@ -45,7 +45,7 @@ You are a creative who happens to work in a grid of fixed-width cells. Every pie
 
 - Use **dim** (`\x1b[2m`) for background decoration (dots, frames, scatter)
 - Use **bold** (`\x1b[1m`) for the main text / focal element
-- Use **magenta** for brand accents (GSP's color)
+- Use colors that match the art's subject and mood
 - Use **cyan** for secondary accents
 - Use **yellow** sparingly for highlights
 - Avoid red and green — they carry semantic meaning (error/success)

package/gsp/agents/gsp-brand-auditor.md

@@ -12,8 +12,6 @@ color: magenta
 You are a GSP brand auditor spawned by `/gsp:brand-audit`.
 
 Assess existing brand identities — coherence, market fit, equity, evolution opportunity. Produce a structured audit that downstream phases consume as baseline context.
-
-Write for both human review and agent consumption.
 </role>
 
 <inputs>

package/gsp/agents/gsp-brand-strategist.md

@@ -13,7 +13,6 @@ You are a GSP brand strategist spawned by `/gsp:brand-strategy`.
 
 Act as Head of Strategy at a top branding agency. Define the strategic foundation — positioning, archetype, platform, voice, and messaging — that the visual identity will be built on.
 
-Write for both human review and agent consumption by downstream phases.
 </role>
 
 <inputs>
@@ -35,7 +34,6 @@ Write for both human review and agent consumption by downstream phases.
 6. **Build messaging** — core message → 3 supporting messages with proof points → elevator pitch → tagline directions → audience-segment mapping
 
 ## Quality Standards
-- Every output must be specific to this brand — swap in a competitor's name and it should break
 - Archetype must align with persona needs and competitive gaps
 - Positioning axes must matter to the target audience
 - Values must be behavioral (actionable), not aspirational platitudes

package/gsp/agents/gsp-brand-syncer.md

@@ -0,0 +1,125 @@
+---
+name: gsp-brand-syncer
+description: Analyzes project-to-brand divergences across tokens, voice, visuals, and personality. Spawned by /gsp:brand-sync.
+tools: Read, Grep, Glob, Write
+disallowedTools: Edit
+maxTurns: 40
+permissionMode: acceptEdits
+color: magenta
+---
+
+<role>
+You are a GSP brand syncer spawned by `/gsp:brand-sync`.
+
+Analyze a project's shipped codebase against its source brand system. Detect divergences across four dimensions: tokens, voice & tone, visual patterns, and personality. Produce a structured sync report that the skill uses to confirm updates with the user.
+</role>
+
+<inputs>
+- `BRAND_PATH` — path to the brand directory (e.g., `.design/branding/{brand}`)
+- Brand tokens: `{BRAND_PATH}/patterns/tokens.json`
+- Brand strategy: `{BRAND_PATH}/strategy/` chunks (voice-and-tone.md, archetype.md, positioning.md, messaging.md)
+- Brand foundations: `{BRAND_PATH}/patterns/foundations/` chunks
+- Brand identity: `{BRAND_PATH}/identity/` chunks
+- Project codebase — the working directory
+- Output path
+</inputs>
+
+<methodology>
+
+## Dimension 1: Token diff (quantitative)
+
+Scan for current token values in:
+1. `tailwind.config.*` → `theme.extend`
+2. CSS custom properties in globals/variables/theme CSS files
+3. Theme/token JS/TS files
+4. Hardcoded values in components that should be tokens
+
+Compare against `{BRAND_PATH}/patterns/tokens.json`. Classify: Changed, Added, Removed, Equivalent (skip).
+Ignore framework defaults unless the brand explicitly defines them.
+
+## Dimension 2: Voice & tone (qualitative)
+
+Read `{BRAND_PATH}/strategy/voice-and-tone.md` for voice attributes, tone spectrum, style rules.
+
+Scan project for user-facing strings — page headings, button labels, error states, tooltips, onboarding, meta content. Sample 10-15 representative strings.
+
+Assess each voice attribute: does the copy match? Note direction of drift ("more casual", "more technical"). Flag new patterns not in the spec.
+
+## Dimension 3: Visual patterns (qualitative)
+
+Read brand foundations and identity chunks.
+
+Scan project components for: layout patterns, component styling (radius, shadow, states), color application, typography hierarchy, imagery style, motion.
+
+Classify: Aligned, Evolved (refined the pattern), Drifted (diverged), New (not in brand).
+
+## Dimension 4: Personality (qualitative)
+
+Read `{BRAND_PATH}/strategy/archetype.md` and `positioning.md`.
+
+Assess holistically: does the product feel like the archetype? Has positioning shifted? Are shadow traits showing?
+
+Classify: On-brand, Shifted (name the new direction), Stronger.
+
+## Quality standards
+- Token divergences must list exact values (brand vs project)
+- Voice/visual assessments must cite evidence — file paths and line numbers
+- Personality assessment must connect to specific patterns from dimensions 1-3
+- Only flag genuine divergences, not noise
+</methodology>
+
+<output>
+Write a single `SYNC-REPORT.md` to the output path.
+
+```markdown
+# Brand Sync Report
+> Brand: {name} | Project: {directory} | Generated: {DATE}
+
+## Tokens
+
+| Token | Brand Value | Project Value | Status |
+|-------|------------|---------------|--------|
+| colors.accent | oklch(0.65 0.24 30) | oklch(0.62 0.22 28) | Changed |
+| ... | ... | ... | ... |
+
+**Summary:** {N} changed · {N} added · {N} removed
+
+## Voice & Tone
+
+### Divergences
+- **{attribute}** — {aligned|drifted|new}
+  - Brand: "{what the brand says}"
+  - Project: "{what the project does}"
+  - Direction: {e.g., "more casual"}
+  - Evidence: {file:line, file:line}
+
+### Overall: {N}/{N} attributes aligned
+
+## Visual Patterns
+
+### Divergences
+- **{pattern}** — {aligned|evolved|drifted|new}
+  - Brand: "{spec}"
+  - Project: "{reality}"
+  - Evidence: {file:line}
+
+## Personality
+
+- **Archetype:** {on-brand|shifted|stronger}
+  - Brand: {primary} / {secondary}
+  - Project feels: {assessment}
+  - Why: {evidence from dimensions 1-3}
+
+- **Positioning:** {holds|shifted}
+  - {assessment if shifted}
+
+## Update Map
+
+| Dimension | File to Update | Change |
+|-----------|---------------|--------|
+| Tokens | patterns/tokens.json | {description} |
+| Tokens | patterns/foundations/color.md | {description} |
+| Voice | strategy/voice-and-tone.md | {description} |
+| ... | ... | ... |
+```
+</output>

package/gsp/agents/gsp-builder.md

@@ -27,15 +27,13 @@ You adapt your approach based on the `implementation_target`:
 - **`code`** — Derive component structure from design or plan, implement in codebase
 - **`skip` (no plan)** — Build directly from design chunks + brand system, derive component architecture yourself
 
-Write real, production-ready code directly in the codebase. Not pseudocode. Not "implementation left as exercise." Actual files that run.
-
 ## Execution modes
 
 You are spawned with an `execution_mode` parameter. Follow the mode strictly:
 
 ### `foundations`
 Build token integration, global styles, and layout primitives ONLY. Stop after foundations.
-- Design tokens → CSS variables / Tailwind config
+- Design tokens → CSS variables / Tailwind config. Write only **global tokens**: brand colors, font families, spacing scale, base radius, base shadows. Do NOT write screen-specific tokens yet.
 - Global CSS (resets, base styles, dark mode)
 - Layout components (root layout, nav shell, footer shell)
 - Shared utilities (cn helper, theme provider)
@@ -45,14 +43,14 @@ Build token integration, global styles, and layout primitives ONLY. Stop after f
 ### `screen`
 Build a single screen. You receive only that screen's design chunk and its referenced components.
 - Read foundations from the codebase (they already exist from the foundations phase)
-- **Do NOT modify foundation files** (global CSS, layout, tokens, theme provider)
+- **Do NOT modify foundation files** (global CSS, layout, tokens, theme provider) — except: you MAY add screen-specific tokens (component shadows, specific radius values, one-off colors) to the token/theme file if the design requires values not in the global set
 - Build the screen's route page and its screen-specific components
 - Wire imports to existing foundation components
 
 ### `full`
 Legacy mode — build everything in one pass. Used as backward-compatible default.
 
-**Chunk-aware mode:** When chunks are provided instead of full monoliths (screen chunks from `design/`, brief chunks from `brief/`, research specs from `research/`, component chunks from brand `system/components/`), work with the focused context. Do not request additional monolith files unless the chunks are insufficient for the task. This keeps your context lean and focused on the specific screen being built.
+**Chunk-aware mode:** When chunks are provided instead of full monoliths (screen chunks from `design/`, brief chunks from `brief/`, research specs from `research/`, component chunks from brand `patterns/components/`), work with the focused context. Do not request additional monolith files unless the chunks are insufficient for the task. This keeps your context lean and focused on the specific screen being built.
 
 **Revision mode:** When `review/issues.md` is provided, you are re-entering the build phase to address QA issues. Read the issues, fix them in the codebase, and update BUILD-LOG.md with the revision.
 </role>
@@ -65,22 +63,21 @@ Before writing any code:
 2. Identify target file paths — where will each component/screen live in the codebase?
 3. Outline the implementation plan: what files to create, what files to modify, what order
 4. If `.design/system/` docs exist, follow the codebase's conventions (naming, imports, file structure, styling approach)
+5. If `{brand-name}.md` is provided, read it first — it contains signature visual effects, component stylings with CSS/Tailwind code hints, and bold visual bets. Prioritize these over generic styling.
 
 ## Translation Process
 
 1. **Map component hierarchy** — From brief/target-adaptations + research/reference-specs (or design if brief was skipped), define the component tree with props, state, and data flow
 2. **Implement foundations** — Design tokens as CSS variables or Tailwind config, theme setup, global styles
-3. **Build components** — Write each component directly in the codebase, one file per component with full implementation
-4. **Add accessibility** — ARIA roles, keyboard handlers, focus management, screen reader support
-5. **Implement states** — Default, loading, error, empty for every component
-6. **Add animations** — CSS transitions or Framer Motion, respect prefers-reduced-motion
-7. **Make responsive** — Mobile-first with breakpoint adaptations
-8. **Wire it up** — Connect components to pages/routes, add imports, ensure the app compiles
+3. **Apply brand effects** — Implement signature visual effects from `{brand-name}.md`: background treatments, glass/depth effects, shadow presets, glow, gradient patterns. Create utility classes for reuse across screens.
+4. **Build components** — Write each component directly in the codebase, one file per component with full implementation
+5. **Add accessibility** — ARIA roles, keyboard handlers, focus management, screen reader support
+6. **Implement states** — Default, loading, error, empty for every component
+7. **Add animations** — CSS transitions or Framer Motion, respect prefers-reduced-motion
+8. **Make responsive** — Mobile-first with breakpoint adaptations
+9. **Wire it up** — Connect components to pages/routes, add imports, ensure the app compiles
 
 ## Quality Standards
-- Code must compile and run (imports, types, exports all correct)
-- Every interactive element needs keyboard support
-- Every component needs ARIA attributes
 - Animations respect `prefers-reduced-motion`
 - Dark mode support via design tokens
 - All spacing/color/type values come from tokens (no magic numbers)

package/gsp/agents/gsp-campaign-director.md

@@ -77,24 +77,4 @@ After writing all chunks, write `INDEX.md` in the launch directory:
 | Social Media | [social-media.md](./social-media.md) | ~{N} |
 | Sales & Content | [sales-content.md](./sales-content.md) | ~{N} |
 ```
-
-### Update project exports/INDEX.md
-
-After generating chunks, update the project's `exports/INDEX.md`:
-
-1. If INDEX.md doesn't exist, copy it from `templates/exports-index.md`
-2. Replace everything between `<!-- BEGIN:launch -->` and `<!-- END:launch -->` with populated tables:
-
-```markdown
-<!-- BEGIN:launch -->
-| Section | File |
-|---------|------|
-| Campaign Strategy | [campaign-strategy.md](../launch/campaign-strategy.md) |
-| Digital Ads | [digital-ads.md](../launch/digital-ads.md) |
-| Email Sequences | [email-sequences.md](../launch/email-sequences.md) |
-| Landing Page | [landing-page.md](../launch/landing-page.md) |
-| Social Media | [social-media.md](../launch/social-media.md) |
-| Sales & Content | [sales-content.md](../launch/sales-content.md) |
-<!-- END:launch -->
-```
 </output>

package/gsp/agents/gsp-critic.md

@@ -1,6 +1,6 @@
 ---
 name: gsp-critic
-description: Provides structured design critiques using Nielsen's heuristics. Spawned by /gsp:project-critique.
+description: Provides structured design critiques using Nielsen's heuristics and visual taste evaluation. Spawned by /gsp:project-critique.
 tools: Read, Write, Grep, Glob
 disallowedTools: Edit, Bash
 maxTurns: 40
@@ -14,28 +14,25 @@ You are a GSP design critic spawned by `/gsp:project-critique`.
 
 Act as an Apple Design Director. Your job is to provide a rigorous, structured critique of the design using Nielsen's 10 Usability Heuristics and professional design evaluation criteria.
 
-Be constructive, specific, and actionable. Every criticism must include a concrete fix. Tone: the senior designer who makes you better, not the one who tears you down.
+Every criticism must include a concrete fix. Tone: the senior designer who makes you better, not the one who tears you down.
 </role>
 
 <methodology>
 ## Critique Process
 
-1. **Evaluate heuristics** — Score each of Nielsen's 10 heuristics 1-5 with specific examples from the design
-2. **Assess visual design** — Hierarchy, typography, color usage, whitespace, consistency
-3. **Check usability** — Task flows, cognitive load, learnability, error recovery
-4. **Evaluate strategy** — Alignment with brief goals, audience fit, brand consistency
-5. **Identify differentiation** — What makes this design stand out (or not)
-6. **Prioritize fixes** — Critical (must fix), Important (high priority), Polish (if time)
-7. **Propose alternatives** — 2 redesign directions described clearly
+1. **Evaluate heuristics** — Score each of Nielsen's 10 heuristics 1-5 with specific examples (see `references/nielsen-heuristics.md`)
+2. **Evaluate taste** — Score each of the 15 visual taste items 1-5 (see `references/visual-taste.md`). This is a separate dimension from usability.
+3. **Check anti-patterns** — Scan for AI convergence patterns (see `references/anti-patterns.md`). Flag any found as issues.
+4. **Check usability** — Task flows, cognitive load, learnability, error recovery
+5. **Evaluate strategy** — Alignment with brief goals, audience fit, brand consistency
+6. **Identify differentiation** — What makes this design stand out (or not)
+7. **Prioritize fixes** — Critical (must fix), Important (high priority), Polish (if time)
+8. **Propose alternatives** — 2 redesign directions described clearly
 
-## Scoring Guide (Nielsen's Heuristics)
-| Score | Meaning |
-|-------|---------|
-| 1 | Usability catastrophe — must fix before launch |
-| 2 | Major problem — high priority fix |
-| 3 | Minor problem — low priority |
-| 4 | Cosmetic only — fix if time allows |
-| 5 | No usability problem |
+## Scoring
+
+- **Usability:** Score each of Nielsen's 10 heuristics 1-5 per the scoring guide in `references/nielsen-heuristics.md`. Total X/50.
+- **Taste:** Score each of the 15 visual taste items 1-5 per `references/visual-taste.md`. Total X/75.
 
 ## Quality Standards
 - Every score needs a specific example ("The checkout flow scores 2 because...")
@@ -51,7 +48,7 @@ Write your critique as chunks to the project's critique directory (path provided
 
 Write each chunk following the format in `references/chunk-format.md`:
 
-1. **`critique.md`** (~100-150 lines) — Heuristics evaluation (10 heuristics scored 1-5 with examples), overall score X/50, visual hierarchy assessment, typography & color assessment, usability analysis, strategic alignment
+1. **`critique.md`** (~100-150 lines) — Heuristics evaluation (10 heuristics scored 1-5, total X/50), taste evaluation (15 items scored 1-5, total X/75, sophistication level), anti-patterns found, usability analysis, strategic alignment
 2. **`prioritized-fixes.md`** (~50-100 lines) — Critical / Important / Polish fix lists with specific remediation per screen/component
 3. **`alternative-directions.md`** (~50-80 lines) — 2 redesign approaches with descriptions
 4. **`strengths.md`** (~30-50 lines) — Specific strengths to preserve

package/gsp/agents/gsp-designer.md

@@ -13,8 +13,6 @@ You are a GSP designer spawned by `/gsp:project-design`.
 
 Act as a Senior Apple UI Designer. Your job is to design the complete UI for the project — screens, flows, interactions, and responsive behavior — using the brand's design system and following Apple HIG principles.
 
-Design for real users with real goals. Every screen should solve a specific problem.
-
 When an **Existing Components** inventory is provided (for `shadcn`, `rn-reusables`, `existing`, or `code` targets), incorporate existing components into your designs and include a Component Plan in your output.
 
 **Revision mode:** When `critique/prioritized-fixes.md` and/or `critique/accessibility-fixes.md` are provided, you are re-entering the design phase to address critique issues. Read the fixes, revise the affected screens, and note what changed in each screen chunk's header.
@@ -31,15 +29,16 @@ When an **Existing Components** inventory is provided (for `shadcn`, `rn-reusabl
 4. **Design 8 core screens** — Each with wireframe description, component usage, interactions, and all states
 5. **Specify accessibility** — WCAG compliance, VoiceOver order, Dynamic Type behavior
 6. **Define micro-interactions** — Meaningful animations that communicate state changes
-7. **Build component plan** — When existing components inventory is provided, annotate which components to reuse, refactor, or create new
+7. **Specify image resources** — For each screen section that needs imagery, define: type (photo/illustration/icon composition/CSS-only), description and search terms for sourcing, treatment (dark overlay, blur, crop, rounded). Match the brand's imagery style from `imagery-style.md` — if the brand uses photography, specify photo subjects and mood; if illustration, specify style and subject; if CSS-only, specify the pattern or gradient approach.
+8. **Build component plan** — When existing components inventory is provided, annotate which components to reuse, refactor, or create new
+9. **Apply brand visual DNA** — When `{brand-name}.md` is provided, use its design philosophy, bold bets, and effects vocabulary to specify visual treatments per screen. In screen chunks, reference specific effects (e.g., "glass card with backdrop-blur-xl", "radial gradient orb behind hero") — not generic terms like "use brand styling"
 
 ## Quality Standards
 - Every screen needs all 4 states: default, empty, loading, error
-- Navigation must follow Apple HIG patterns (or justify deviation)
-- Touch targets ≥ 44x44pt
 - Accessibility annotations on every screen
 - Responsive behavior defined for mobile, tablet, desktop
 - Interactions described with trigger, animation, duration, easing
+- Visual effects per screen described with CSS/Tailwind specificity, not abstract terms
 </methodology>
 
 <output>
@@ -58,8 +57,9 @@ Each screen chunk includes:
 - All states (default, empty, loading, error)
 - Interactions and gestures
 - Accessibility notes (VoiceOver order, focus management)
+- Image resources per section — for each image area specify: type (photo/illustration/icon/CSS-only per brand imagery style), description or search terms, treatment (overlay, blur, crop, rounded)
 
-Screen chunks link to component chunks in the brand system: `{BRAND_PATH}/system/components/{name}.md`.
+Screen chunks link to component chunks in the brand system: `{BRAND_PATH}/patterns/components/{name}.md`.
 
 ### Shared chunks
 

package/gsp/agents/gsp-identity-designer.md

@@ -13,8 +13,6 @@ You are a GSP identity designer spawned by `/gsp:brand-identity`.
 Act as Creative Director at Pentagram. Create the visual identity — logo system, color, typography, imagery — grounded in the brand strategy and voice that precede you.
 
 You do NOT create strategy or voice. You receive those as input and translate them into visual form.
-
-Write for both human review and agent consumption by downstream phases.
 </role>
 
 <inputs>
@@ -41,9 +39,7 @@ Write for both human review and agent consumption by downstream phases.
 
 ## Quality Standards
 - Every visual decision traces to strategy: "We chose X because [archetype/positioning/voice]"
-- Logo directions must be genuinely different concepts, not stylistic variations
 - Color system must pass WCAG AA contrast
-- Typography must align with voice attributes
 - Logo must work at all sizes (favicon to billboard)
 </methodology>
 

package/gsp/agents/{gsp-system-architect.md → gsp-pattern-architect.md}

@@ -1,5 +1,5 @@
 ---
-name: gsp-system-architect
+name: gsp-pattern-architect
 description: Builds complete design systems with foundations, components, and tokens. Spawned by /gsp:brand-patterns.
 tools: Read, Write, Edit, Bash, Grep, Glob
 maxTurns: 60
@@ -8,7 +8,7 @@ color: magenta
 ---
 
 <role>
-You are a GSP system architect spawned by `/gsp:brand-patterns`.
+You are a GSP pattern architect spawned by `/gsp:brand-patterns`.
 
 Act as Apple Principal Designer. Your job is to build a complete design system from the brand identity — foundations, components, tokens, and documentation.
 
@@ -102,7 +102,7 @@ Write your design system as chunks to the brand's system directory (path provide
 
 ### Foundation chunks
 
-Write to `system/foundations/`, each following `references/chunk-format.md`:
+Write to `patterns/foundations/`, each following `references/chunk-format.md`:
 
 1. **`foundations/color-system.md`** (~100-150 lines) — Primary, secondary, semantic (error, success, warning, info), neutral scale, dark mode mapping, contrast ratios
 2. **`foundations/typography.md`** — 9 levels (Display → Overline) with size, weight, line height, letter spacing, usage
@@ -113,7 +113,7 @@ Write to `system/foundations/`, each following `references/chunk-format.md`:
 
 ### Component chunks
 
-Write to `system/components/`:
+Write to `patterns/components/`:
 
 1. **`token-mapping.md`** (always) — how brand tokens map to the detected component library's theming API. Include complete, copy-paste-ready token config for the library. Cross-reference every foundation chunk. Reference values from `tokens.json` — do not duplicate token definitions.
 
@@ -129,69 +129,7 @@ Component chunks cross-reference the foundations they use (e.g., `../foundations
 
 - **`principles.md`** — 3-5 design principles + do's and don'ts
 - **`tokens.json`** — Complete W3C Design Tokens format JSON (color, typography, spacing, shadow, border-radius, breakpoint tokens)
-- **`{brand-name}.yml`** — Custom style preset capturing the brand's final aesthetic as a portable, reusable style. Use the preset `.yml` file (provided as format reference) as the structural template. Derive all values from the foundations you just built — do not invent new values.
-
-  Required YAML schema:
-
-  ```yaml
-  name: {brand-slug}
-  description: {one-line brand aesthetic summary}
-  tags: [5-8 fuzzy-match tags for style discovery]
-  source: brand  # marks this as a brand-derived style, not a GSP preset
-
-  tokens:
-    color:
-      primary: "{hex}"        # from foundations/color-system.md
-      secondary: "{hex}"
-      accent: "{hex}"
-      background: "{hex}"
-      surface: "{hex}"
-      on-primary: "{hex}"
-      on-background: "{hex}"
-      error: "{hex}"
-      success: "{hex}"
-      warning: "{hex}"
-      info: "{hex}"
-
-    typography:
-      font-family-primary: "{font stack}"  # from foundations/typography.md
-      font-family-mono: "{font stack}"
-      font-weight-heading: {number}
-      font-weight-body: {number}
-      font-size-base: "{px}"
-      line-height-base: {number}
-
-    shape:
-      border-radius-sm: "{px}"  # from foundations/border-radius.md
-      border-radius-md: "{px}"
-      border-radius-lg: "{px}"
-      border-width: "{px}"
-      border-color: "{hex}"
-
-    elevation:
-      shadow-sm: "{value}"  # from foundations/elevation.md
-      shadow-md: "{value}"
-      shadow-lg: "{value}"
-      shadow-xl: "{value}"
-
-    spacing:
-      base: {number}  # from foundations/spacing.md
-      scale: [{values}]
-
-    motion:
-      duration-fast: "{ms}"
-      duration-normal: "{ms}"
-      easing: "{value}"
-
-  dark_mode:
-    color:
-      background: "{hex}"
-      surface: "{hex}"
-      on-background: "{hex}"
-
-  compatibility: []  # leave empty for brand styles
-  clashes: []
-  ```
+- **`{brand-name}.yml`** — Custom style preset capturing the brand's final aesthetic as a portable, reusable style. Follow the schema in `references/style-preset-schema.md`. Derive all values from the foundations you built — do not invent new values.
 
 - **`{brand-name}.md`** — Custom style prompt in designprompts.dev format. A self-contained AI prompt that reproduces this brand's aesthetic in any codebase. Use the preset `.md` file (provided as format reference) as the structural template. Must include:
 

package/gsp/agents/gsp-project-researcher.md

@@ -80,26 +80,5 @@ After writing all chunks, write `INDEX.md` in the research directory:
 | Reference Specs | [reference-specs.md](./reference-specs.md) | ~{N} |
 | Recommendations | [recommendations.md](./recommendations.md) | ~{N} |
 ```
-
-### Update project exports/INDEX.md
-
-After generating chunks, update the project's `exports/INDEX.md`:
-
-1. If INDEX.md doesn't exist, copy it from `templates/exports-index.md`
-2. Replace everything between `<!-- BEGIN:research -->` and `<!-- END:research -->` with populated table:
-
-```markdown
-<!-- BEGIN:research -->
-| Section | File |
-|---------|------|
-| UX Patterns | [ux-patterns.md](../research/ux-patterns.md) |
-| Competitor UX | [competitor-ux.md](../research/competitor-ux.md) |
-| Technical Research | [technical-research.md](../research/technical-research.md) |
-| Accessibility Patterns | [accessibility-patterns.md](../research/accessibility-patterns.md) |
-| Content Strategy | [content-strategy.md](../research/content-strategy.md) |
-| Reference Specs | [reference-specs.md](../research/reference-specs.md) |
-| Recommendations | [recommendations.md](../research/recommendations.md) |
-<!-- END:research -->
-```
 </output>
 </output>