get-shit-pretty 0.6.2 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (121) hide show
  1. package/README.md +7 -12
  2. package/bin/install.js +96 -71
  3. package/gsp/agents/gsp-accessibility-auditor.md +3 -3
  4. package/gsp/agents/gsp-ascii-artist.md +1 -1
  5. package/gsp/agents/gsp-brand-auditor.md +2 -2
  6. package/gsp/agents/gsp-brand-engineer.md +131 -0
  7. package/gsp/agents/gsp-brand-strategist.md +2 -2
  8. package/gsp/agents/gsp-brand-syncer.md +8 -7
  9. package/gsp/agents/gsp-builder.md +48 -5
  10. package/gsp/agents/gsp-campaign-director.md +2 -3
  11. package/gsp/agents/gsp-creative-director.md +80 -0
  12. package/gsp/agents/gsp-critic.md +99 -17
  13. package/gsp/agents/gsp-designer.md +51 -4
  14. package/gsp/agents/gsp-project-researcher.md +3 -3
  15. package/gsp/agents/gsp-researcher.md +4 -4
  16. package/gsp/agents/gsp-reviewer.md +2 -2
  17. package/gsp/agents/gsp-scoper.md +2 -2
  18. package/gsp/hooks/hooks.json +5 -5
  19. package/gsp/references/design-trends.md +4 -4
  20. package/gsp/references/phase-transitions.md +12 -12
  21. package/gsp/references/questioning.md +1 -1
  22. package/gsp/references/token-mapping.md +329 -0
  23. package/gsp/skills/gsp-3d/SKILL.md +112 -0
  24. package/gsp/skills/gsp-accessibility/SKILL.md +11 -11
  25. package/gsp/skills/gsp-accessibility-audit/SKILL.md +6 -7
  26. package/gsp/skills/gsp-add-reference/SKILL.md +1 -1
  27. package/gsp/skills/gsp-art/SKILL.md +1 -1
  28. package/gsp/skills/gsp-brand-audit/SKILL.md +3 -3
  29. package/gsp/skills/gsp-brand-guidelines/SKILL.md +233 -0
  30. package/gsp/skills/gsp-brand-identity/SKILL.md +27 -18
  31. package/gsp/skills/gsp-brand-refine/SKILL.md +29 -22
  32. package/gsp/skills/gsp-brand-research/SKILL.md +2 -2
  33. package/gsp/skills/gsp-brand-strategy/SKILL.md +3 -3
  34. package/gsp/skills/gsp-brand-sync/SKILL.md +7 -7
  35. package/gsp/skills/gsp-color/SKILL.md +105 -0
  36. package/gsp/skills/gsp-design-system/SKILL.md +4 -4
  37. package/gsp/skills/gsp-doctor/SKILL.md +25 -18
  38. package/gsp/skills/gsp-help/SKILL.md +28 -28
  39. package/gsp/skills/gsp-icons/SKILL.md +108 -0
  40. package/gsp/skills/gsp-images/SKILL.md +197 -0
  41. package/gsp/skills/gsp-launch/SKILL.md +2 -3
  42. package/gsp/skills/gsp-logo/SKILL.md +173 -0
  43. package/gsp/skills/gsp-palette/SKILL.md +13 -13
  44. package/gsp/skills/gsp-pretty/SKILL.md +2 -2
  45. package/gsp/skills/gsp-progress/SKILL.md +20 -20
  46. package/gsp/skills/gsp-project-brief/SKILL.md +7 -8
  47. package/gsp/skills/gsp-project-build/SKILL.md +21 -21
  48. package/gsp/skills/gsp-project-critique/SKILL.md +13 -14
  49. package/gsp/skills/gsp-project-design/SKILL.md +17 -17
  50. package/gsp/skills/gsp-project-research/SKILL.md +5 -6
  51. package/gsp/skills/gsp-project-review/SKILL.md +7 -9
  52. package/gsp/skills/gsp-scaffold/SKILL.md +3 -3
  53. package/gsp/skills/gsp-start/SKILL.md +14 -14
  54. package/gsp/skills/gsp-style/SKILL.md +41 -43
  55. package/gsp/skills/gsp-style/styles/INDEX.yml +1 -1
  56. package/gsp/skills/gsp-style/styles/academia.yml +80 -0
  57. package/gsp/skills/gsp-style/styles/art-deco.yml +81 -0
  58. package/gsp/skills/gsp-style/styles/bauhaus.yml +78 -0
  59. package/gsp/skills/gsp-style/styles/bold-typography.yml +73 -0
  60. package/gsp/skills/gsp-style/styles/botanical.yml +78 -0
  61. package/gsp/skills/gsp-style/styles/claymorphism.yml +84 -0
  62. package/gsp/skills/gsp-style/styles/cyberpunk.yml +87 -0
  63. package/gsp/skills/gsp-style/styles/enterprise.yml +81 -0
  64. package/gsp/skills/gsp-style/styles/flat-design.yml +67 -0
  65. package/gsp/skills/gsp-style/styles/fluent.yml +82 -0
  66. package/gsp/skills/gsp-style/styles/glassmorphism.yml +83 -0
  67. package/gsp/skills/gsp-style/styles/humanist-literary.yml +74 -0
  68. package/gsp/skills/gsp-style/styles/industrial.yml +82 -0
  69. package/gsp/skills/gsp-style/styles/kinetic.yml +94 -0
  70. package/gsp/skills/gsp-style/styles/liquid-glass.yml +91 -0
  71. package/gsp/skills/gsp-style/styles/luxury.yml +83 -0
  72. package/gsp/skills/gsp-style/styles/material.yml +83 -0
  73. package/gsp/skills/gsp-style/styles/maximalism.yml +92 -0
  74. package/gsp/skills/gsp-style/styles/minimal-dark.yml +75 -0
  75. package/gsp/skills/gsp-style/styles/modern-dark.yml +88 -0
  76. package/gsp/skills/gsp-style/styles/monochrome.yml +68 -0
  77. package/gsp/skills/gsp-style/styles/neubrutalism.yml +83 -0
  78. package/gsp/skills/gsp-style/styles/neumorphism.yml +77 -0
  79. package/gsp/skills/gsp-style/styles/newsprint.yml +81 -0
  80. package/gsp/skills/gsp-style/styles/organic.yml +77 -0
  81. package/gsp/skills/gsp-style/styles/playful-geometric.yml +90 -0
  82. package/gsp/skills/gsp-style/styles/professional.yml +67 -0
  83. package/gsp/skills/gsp-style/styles/retro.yml +85 -0
  84. package/gsp/skills/gsp-style/styles/saas.yml +83 -0
  85. package/gsp/skills/gsp-style/styles/sketch.yml +86 -0
  86. package/gsp/skills/gsp-style/styles/swiss-minimalist.yml +69 -0
  87. package/gsp/skills/gsp-style/styles/terminal.yml +83 -0
  88. package/gsp/skills/gsp-style/styles/vaporwave.yml +84 -0
  89. package/gsp/skills/gsp-style/styles/web3.yml +82 -0
  90. package/gsp/skills/gsp-textures/SKILL.md +132 -0
  91. package/gsp/skills/gsp-typescale/SKILL.md +11 -11
  92. package/gsp/skills/gsp-typography/SKILL.md +108 -0
  93. package/gsp/skills/gsp-update/SKILL.md +1 -2
  94. package/gsp/skills/gsp-video/SKILL.md +101 -0
  95. package/gsp/templates/branding/config.json +1 -1
  96. package/gsp/templates/branding/roadmap.md +9 -9
  97. package/gsp/templates/exports-index.md +8 -8
  98. package/gsp/templates/phases/build.md +1 -1
  99. package/gsp/templates/phases/design.md +1 -1
  100. package/gsp/templates/phases/patterns.md +60 -71
  101. package/gsp/templates/phases/style.md +158 -0
  102. package/gsp/templates/projects/config.json +1 -1
  103. package/gsp/templates/projects/roadmap.md +7 -7
  104. package/gsp/templates/projects/state.md +1 -1
  105. package/package.json +1 -2
  106. package/.claude-plugin/plugin.json +0 -24
  107. package/gsp/agents/gsp-identity-designer.md +0 -74
  108. package/gsp/agents/gsp-pattern-architect.md +0 -189
  109. package/gsp/prompts/01-design-system-architect.md +0 -19
  110. package/gsp/prompts/02-brand-identity-creator.md +0 -16
  111. package/gsp/prompts/03-ui-ux-pattern-master.md +0 -21
  112. package/gsp/prompts/04-marketing-asset-factory.md +0 -14
  113. package/gsp/prompts/05-implementation-spec-expert.md +0 -15
  114. package/gsp/prompts/06-design-critique-partner.md +0 -14
  115. package/gsp/prompts/07-design-trend-synthesizer.md +0 -3
  116. package/gsp/prompts/08-accessibility-auditor.md +0 -23
  117. package/gsp/prompts/09-design-to-code-translator.md +0 -49
  118. package/gsp/prompts/10-project-scoper.md +0 -17
  119. package/gsp/prompts/11-deliverable-reviewer.md +0 -18
  120. package/gsp/prompts/12-project-researcher.md +0 -18
  121. package/gsp/skills/gsp-brand-patterns/SKILL.md +0 -240
@@ -0,0 +1,158 @@
1
+ # Style
2
+
3
+ ## Brand: {BRAND_NAME}
4
+ **Style:** {STYLE_NAME} | **Generated:** {DATE}
5
+
6
+ > STYLE.md is the single document designer and builder agents consume. It merges the structured rules from the `.yml` preset with the implementation knowledge from the `.md` companion. Both `/gsp-style` (quick) and the branding diamond (full) produce this same format.
7
+
8
+ ---
9
+
10
+ ## Intensity
11
+
12
+ | Dial | Value | Meaning |
13
+ |------|-------|---------|
14
+ | Variance | {1-10} | {1=symmetric grid, 10=artsy chaos} |
15
+ | Motion | {1-10} | {1=static, 10=cinematic choreography} |
16
+ | Density | {1-10} | {1=gallery airy, 10=cockpit packed} |
17
+
18
+ ---
19
+
20
+ ## Philosophy
21
+
22
+ {2-4 sentences from the `.md` companion's Design Philosophy section. The emotional DNA — not what the tokens ARE, but what the design FEELS like. Cultural references, analogies, the "vibe in a sentence." For branded styles, this comes from brand strategy (archetype, positioning, voice).}
23
+
24
+ ---
25
+
26
+ ## Patterns
27
+
28
+ ### Card
29
+ | Property | Rule |
30
+ |----------|------|
31
+ | border | {value or token ref} |
32
+ | shadow | {value or token ref} |
33
+ | radius | {value or token ref} |
34
+ | background | {value or token ref} |
35
+ | {style-specific} | {value — only if this style has unique card properties} |
36
+
37
+ ### Button (primary)
38
+ | Property | Rule |
39
+ |----------|------|
40
+ | background | {value or token ref} |
41
+ | border | {value or token ref} |
42
+ | text | {casing, weight, tracking} |
43
+ | radius | {value or token ref} |
44
+ | {style-specific} | {value} |
45
+
46
+ ### Button (secondary)
47
+ | Property | Rule |
48
+ |----------|------|
49
+ | background | {value or token ref} |
50
+ | border | {value or token ref} |
51
+ | text | {casing, weight, tracking} |
52
+ | radius | {value or token ref} |
53
+
54
+ ### Input
55
+ | Property | Rule |
56
+ |----------|------|
57
+ | border | {value or token ref} |
58
+ | radius | {value or token ref} |
59
+ | background | {value or token ref} |
60
+ | focus | {focus behavior} |
61
+
62
+ ### Badge
63
+ | Property | Rule |
64
+ |----------|------|
65
+ | shape | {value} |
66
+ | text | {styling} |
67
+
68
+ ### Navigation
69
+ | Property | Rule |
70
+ |----------|------|
71
+ | style | {description} |
72
+ | {style-specific} | {value} |
73
+
74
+ ### Layout
75
+ | Property | Rule |
76
+ |----------|------|
77
+ | archetype | **{named-archetype}** |
78
+ | max-width | {value} |
79
+ | section-spacing | {value} |
80
+ | grid-gap | {value} |
81
+ | surfaces | {texture/grain/clean strategy} |
82
+ | {style-specific} | {decoration, backgrounds, depth, etc.} |
83
+
84
+ ---
85
+
86
+ ## Constraints
87
+
88
+ ### Never
89
+ - {forbidden thing} — {why it breaks this aesthetic}
90
+
91
+ ### Always
92
+ - {required thing}
93
+
94
+ ---
95
+
96
+ ## Effects
97
+
98
+ **Interaction vocabulary:** {comma-separated list of allowed technique names}
99
+
100
+ ### Hover
101
+ | Element | Technique | Description |
102
+ |---------|-----------|-------------|
103
+ | card | {technique-name} | {brief} |
104
+ | button | {technique-name} | {brief} |
105
+ | link | {technique-name} | {brief} |
106
+
107
+ ### Active
108
+ | Element | Technique | Description |
109
+ |---------|-----------|-------------|
110
+ | button | {technique-name} | {brief} |
111
+
112
+ ### Focus
113
+ | Element | Rule |
114
+ |---------|------|
115
+ | general | {focus behavior} |
116
+ | {specific} | {if different from general} |
117
+
118
+ ### Transition
119
+ {duration range}, {easing function}
120
+
121
+ ### Ambient
122
+ {Optional. Only for styles with always-on animations.}
123
+
124
+ - {technique-name} — {what it does}
125
+
126
+ ---
127
+
128
+ ## Bold Bets
129
+
130
+ {3-5 specific visual techniques that make this style unmistakable. Extracted from the `.md` companion's signature techniques and non-genericness sections. Each must be specific enough for a builder to implement.}
131
+
132
+ 1. **{Technique name}** — {What it is and how to implement it.}
133
+ 2. **{Technique name}** — {Description}
134
+ 3. **{Technique name}** — {Description}
135
+
136
+ ---
137
+
138
+ ## Implementation
139
+
140
+ {Extracted from the `.md` companion's component stylings and CSS code hints. This section gives builders the concrete code patterns to implement the style. Only include what's specific to THIS style — skip universal patterns.}
141
+
142
+ ### Component Code Hints
143
+ {Per-component CSS/Tailwind patterns from the `.md` companion. Only components with style-specific implementations beyond the Patterns tables above.}
144
+
145
+ ### Textures & Surfaces
146
+ {CSS code for style-specific textures: noise SVGs, halftone gradients, grain overlays, scanlines, etc. Skip if the style has no texture requirements.}
147
+
148
+ ### Typography Treatments
149
+ {Style-specific type treatments: text-stroke, tracking overrides, display type techniques. Skip if standard.}
150
+
151
+ ### Animation Recipes
152
+ {CSS/Tailwind for style-specific animations: keyframes, transition definitions, interaction implementations. Skip if effects vocabulary + agent training is sufficient.}
153
+
154
+ ---
155
+
156
+ ## Related
157
+
158
+ - [{brand-name}.yml](./{brand-name}.yml) — Source of truth (tokens, intensity, patterns, constraints, effects)
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.6.2",
2
+ "version": "0.6.3",
3
3
  "project_type": "design",
4
4
  "project": {
5
5
  "name": "",
@@ -10,42 +10,42 @@
10
10
 
11
11
  ## Phase 1: Brief
12
12
  **Status:** pending
13
- **Command:** `/gsp:project-brief`
13
+ **Command:** `/gsp-project-brief`
14
14
  **Input:** Brand system + BRIEF.md
15
15
  **Output:** `brief/` (scope, adaptations, conditionals)
16
16
  **Goal:** Scope the project — screen list, priorities, component adaptations, gap analysis.
17
17
 
18
18
  ## Phase 2: Research
19
19
  **Status:** pending
20
- **Command:** `/gsp:project-research`
20
+ **Command:** `/gsp-project-research`
21
21
  **Input:** Brief scope + brand system + BRIEF.md
22
22
  **Output:** `research/` (UX patterns, competitor UX, technical research, accessibility patterns)
23
23
  **Goal:** Deep project-level research — UX patterns, competitor analysis, technical approaches, accessibility strategies.
24
24
 
25
25
  ## Phase 3: Design
26
26
  **Status:** pending
27
- **Command:** `/gsp:project-design`
27
+ **Command:** `/gsp-project-design`
28
28
  **Input:** Research + brief + brand system + BRIEF.md
29
29
  **Output:** `design/` (screen chunks + shared/)
30
30
  **Goal:** Design core screens, flows, and interaction patterns.
31
31
 
32
32
  ## Phase 4: Critique
33
33
  **Status:** pending
34
- **Command:** `/gsp:project-critique`
34
+ **Command:** `/gsp-project-critique`
35
35
  **Input:** All prior artifacts
36
36
  **Output:** `critique/` (critique + accessibility chunks)
37
37
  **Goal:** Critique design quality and audit accessibility compliance.
38
38
 
39
39
  ## Phase 5: Build
40
40
  **Status:** pending
41
- **Command:** `/gsp:project-build`
41
+ **Command:** `/gsp-project-build`
42
42
  **Input:** Design + brief + brand system
43
43
  **Output:** `build/CODE.md` + `build/components/`
44
44
  **Goal:** Translate design into production-ready frontend code.
45
45
 
46
46
  ## Phase 6: Review
47
47
  **Status:** pending
48
- **Command:** `/gsp:project-review`
48
+ **Command:** `/gsp-project-review`
49
49
  **Input:** Built deliverables + design intent
50
50
  **Output:** `review/` (acceptance report + issues)
51
51
  **Goal:** Validate built deliverables against design intent — token compliance, screen coverage, accessibility.
@@ -53,7 +53,7 @@
53
53
  ---
54
54
 
55
55
  ## Optional: Launch
56
- **Command:** `/gsp:launch`
56
+ **Command:** `/gsp-launch`
57
57
  **Input:** Brand identity + strategy + design
58
58
  **Output:** `launch/` (campaign chunks)
59
59
  **Goal:** Create marketing campaign assets for launch. Run when needed.
@@ -45,7 +45,7 @@
45
45
  <!-- pending | in-progress | complete | needs-revision | skipped -->
46
46
 
47
47
  ## Launch
48
- <!-- Optional — run /gsp:launch when needed -->
48
+ <!-- Optional — run /gsp-launch when needed -->
49
49
  <!-- Status: not started -->
50
50
 
51
51
  ## Decisions
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "get-shit-pretty",
3
- "version": "0.6.2",
3
+ "version": "0.6.3",
4
4
  "description": "Design engineering system for AI coding agents. Brand identity + design projects, from strategy to code.",
5
5
  "bin": {
6
6
  "get-shit-pretty": "bin/install.js"
@@ -11,7 +11,6 @@
11
11
  "start": "next start"
12
12
  },
13
13
  "files": [
14
- ".claude-plugin",
15
14
  ".mcp.json",
16
15
  "bin",
17
16
  "scripts",
@@ -1,24 +0,0 @@
1
- {
2
- "name": "gsp",
3
- "version": "0.6.2",
4
- "description": "Design engineering system for AI coding agents. Brand identity + design projects, from strategy to code.",
5
- "author": {
6
- "name": "jubscodes",
7
- "url": "https://github.com/jubscodes"
8
- },
9
- "homepage": "https://github.com/jubscodes/get-shit-pretty",
10
- "repository": "https://github.com/jubscodes/get-shit-pretty",
11
- "license": "MIT",
12
- "keywords": [
13
- "design",
14
- "design-system",
15
- "brand",
16
- "ui-ux",
17
- "design-engineering",
18
- "shadcn",
19
- "figma",
20
- "apple-hig",
21
- "wcag",
22
- "accessibility"
23
- ]
24
- }
@@ -1,74 +0,0 @@
1
- ---
2
- name: gsp-identity-designer
3
- description: Creates visual identity — logo, color, typography, imagery. Spawned by /gsp:brand-identity.
4
- tools: Read, Write, Edit, Bash, Grep, Glob, WebFetch
5
- maxTurns: 30
6
- permissionMode: acceptEdits
7
- color: magenta
8
- ---
9
-
10
- <role>
11
- You are a GSP identity designer spawned by `/gsp:brand-identity`.
12
-
13
- 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.
14
-
15
- You do NOT create strategy or voice. You receive those as input and translate them into visual form.
16
- </role>
17
-
18
- <inputs>
19
- - BRIEF.md content (personas, constraints)
20
- - discover/mood-board-direction.md — starting point for color and typography
21
- - Strategy chunks: archetype.md, positioning.md, brand-platform.md, voice-and-tone.md
22
- - User-confirmed visual direction
23
- - Style base preset files: `.yml` (tokens) + `.md` (philosophy/prompt) — may be absent
24
- - Audit brand-inventory.md + evolution-map.md (if exist)
25
- - Brand Identity Creator prompt (02)
26
- - Output path
27
- </inputs>
28
-
29
- <methodology>
30
- 1. **Absorb inputs** — strategy chunks for strategic grounding, voice-and-tone for verbal-visual alignment, mood board for visual starting point
31
- 1.5. **Seed from style base** — if style base preset files are provided, read the `.yml` for token values (palette, typography, spacing) and the `.md` for design philosophy. Use these as vocabulary, not constraint — adapt freely where the brand demands it. The preset is a starting palette and type direction, not a rulebook.
32
- 2. **Design logo system** — 3 distinct directions, each expressing strategy differently. For each: concept, rationale (connects to archetype + positioning), variations, usage rules
33
- 3. **Build color system** — primary, secondary, accent, neutral, semantic. Each color needs strategic rationale. Include Hex and RGB. Map dark mode. Calculate WCAG AA contrast. Semantic colors (success, warning, error, info) are standard values — define them in color-system.md but do NOT generate tints.dev palettes for them.
34
- 4. **Generate palettes** — use tints.dev API: `https://tints.dev/api/{colorName}/{hexWithout#}`. **Only for brand colors (primary, secondary, accent) and neutrals.** Store in `identity/palettes.json`
35
- 5. **Define typography** — primary + secondary typefaces. Connect choices to voice: "We chose X because our voice is Y"
36
- 6. **Specify imagery** — photography, illustration, iconography. Connected to archetype and brand essence
37
- 7. **Show applications** — brand in context across key touchpoints
38
-
39
- ## Quality Standards
40
- - Every visual decision traces to strategy: "We chose X because [archetype/positioning/voice]"
41
- - Color system must pass WCAG AA contrast
42
- - Logo must work at all sizes (favicon to billboard)
43
- </methodology>
44
-
45
- <output>
46
- Write 5 chunks + palettes.json + INDEX.md to the identity directory (path provided by the skill that spawned you).
47
-
48
- Each chunk follows `references/chunk-format.md`.
49
-
50
- 1. **`logo-directions.md`** (~100-120 lines) — 3 directions with concept, rationale, variations, usage rules
51
- 2. **`color-system.md`** (~100-150 lines) — full palette table, semantic colors, dark mode mapping, contrast ratios. Reference `./palettes.json`
52
- 3. **`typography.md`** (~60-80 lines) — primary + secondary typefaces with rationale, type scale, responsive behavior
53
- 4. **`imagery-style.md`** (~50-70 lines) — photography, illustration, iconography guidelines
54
- 5. **`brand-applications.md`** (~50-70 lines) — key touchpoints showing brand in use
55
-
56
- ### palettes.json
57
- tints.dev OKLCH palettes in the identity directory.
58
-
59
- ### INDEX.md
60
-
61
- ```markdown
62
- # Identity
63
- > Phase: identity | Brand: {name} | Generated: {DATE}
64
-
65
- | Chunk | File | ~Lines |
66
- |-------|------|--------|
67
- | Logo Directions | [logo-directions.md](./logo-directions.md) | ~{N} |
68
- | Color System | [color-system.md](./color-system.md) | ~{N} |
69
- | Typography | [typography.md](./typography.md) | ~{N} |
70
- | Imagery Style | [imagery-style.md](./imagery-style.md) | ~{N} |
71
- | Brand Applications | [brand-applications.md](./brand-applications.md) | ~{N} |
72
- | Palettes | [palettes.json](./palettes.json) | — |
73
- ```
74
- </output>
@@ -1,189 +0,0 @@
1
- ---
2
- name: gsp-pattern-architect
3
- description: Builds complete design systems with foundations, components, and tokens. Spawned by /gsp:brand-patterns.
4
- tools: Read, Write, Edit, Bash, Grep, Glob
5
- maxTurns: 60
6
- permissionMode: acceptEdits
7
- color: magenta
8
- ---
9
-
10
- <role>
11
- You are a GSP pattern architect spawned by `/gsp:brand-patterns`.
12
-
13
- Act as Apple Principal Designer. Your job is to build a complete design system from the brand identity — foundations, components, tokens, and documentation.
14
-
15
- The system is created once per brand and reused across all projects. It should be production-ready: every value specified, every state defined, every token exported.
16
- </role>
17
-
18
- <inputs>
19
- - Identity chunks + palettes.json
20
- - BRIEF.md
21
- - Strategy chunks: voice-and-tone.md (for principles), archetype.md + positioning.md (for custom style output)
22
- - system_strategy and tech_stack from config.json
23
- - `.design/system/STACK.md`, `COMPONENTS.md`, `TOKENS.md` (if exist) — UI library, existing components, theming config
24
- - style_base from config.json + preset `.yml`/`.md` files (if set) — format reference for custom style output
25
- - Execution mode: "foundations" | "components" | "full" (default: full for backward compat)
26
- - Confirmed component scope (for components mode)
27
- - Output path
28
- </inputs>
29
-
30
- <methodology>
31
- ## System Building Process
32
-
33
- 1. **Extract foundations from identity** — Map brand colors to semantic system using the tints.dev palettes from the brand's `identity/palettes.json` (generated by [tints.dev](https://tints.dev) by [Simeon Griggs](https://github.com/SimeonGriggs/tints.dev)). Use the 11-stop OKLCH scales as the color foundation for tokens. Establish type scale from brand typography
34
- 2. **Define grid and spacing** — 12-column grid, 8px base spacing system
35
- 3. **Component strategy** — leverage existing UI libraries (shadcn, Radix, MUI, etc.) instead of rewriting from scratch. Write only what the library can't do with tokens alone.
36
- 4. **Export tokens** — Machine-readable JSON following W3C Design Tokens format
37
- 5. **Document principles** — Design principles derived from brand and usage patterns
38
-
39
- ## Execution Mode
40
- - **foundations** — write foundations/, principles.md, tokens.json (foundations only). Stop.
41
- - **components** — read existing foundations/, then write in this order: (1) `components/token-mapping.md`, (2) override + custom component specs, (3) update `tokens.json`, (4) `{brand-name}.yml`, (5) `{brand-name}.md`, (6) `INDEX.md`.
42
- - **full** — both passes (backward compatibility).
43
-
44
- ## System Strategy
45
-
46
- Read `system_strategy` from brand config's `system_config`:
47
-
48
- **GENERATE** — Full system from scratch. For codebases with existing config, respect structure (extend tailwind.config, not replace).
49
-
50
- **EXTEND** — Evolve existing system: audit tokens against brand identity (keep what works, adjust what doesn't, fill gaps). Classify existing components using the tier model: KEEP = library component + current tokens are fine, RESTYLE = apply new brand tokens via token mapping (tier 1), OVERRIDE = needs visual treatment beyond tokens (tier 2), REPLACE = needs a custom spec (tier 3). Output delta tokens — only new and changed values. Preserve existing naming conventions.
51
-
52
- **REFACTOR** — Redesign from ground up informed by existing: understand current system, design complete new system, produce migration mapping, flag breaking changes.
53
-
54
- ## Component Strategy
55
-
56
- The goal is NOT to write specs for every UI component from scratch. Most codebases use a component library (shadcn/ui, Radix, MUI, Headless UI, etc.) that already handles states, accessibility, and anatomy. The brand's job is to **skin that library** via tokens and write specs only for what's truly custom.
57
-
58
- ### Three tiers of component output
59
-
60
- **Tier 1: Token mapping** (always write)
61
- Write `components/token-mapping.md` — how brand tokens apply to the component library's theming API. This is the highest-leverage file: it turns the entire library into branded components without writing a single spec.
62
-
63
- Examples by library:
64
- - **shadcn/ui** — CSS custom properties in `globals.css` (`:root` and `.dark`), `tailwind.config` extends
65
- - **MUI** — `createTheme()` object with palette, typography, shape overrides
66
- - **React Native / NativeWind** — `nativewind.config`, `theme.ts`
67
- - **Vanilla CSS** — CSS custom properties with semantic naming
68
- - **No library** — full CSS custom property system with component class recipes
69
-
70
- **Tier 2: Override specs** (selective — only when tokens aren't enough)
71
- Write individual component chunks only for library components that need **visual treatment beyond token application**. Examples:
72
- - Button needs a brand-specific hover animation (e.g., neubrutalist shadow shift)
73
- - Card needs a non-standard border treatment that tokens can't express
74
- - Navigation has a unique scroll behavior tied to brand personality
75
-
76
- Each override chunk: what to override, why (traces to brand identity), code hints for the specific library.
77
-
78
- **Tier 3: Brand-distinctive components** (selective — only when they don't exist in the library)
79
- Full component specs only for components that are **unique to this brand** and have no library equivalent. Examples:
80
- - A branded hero section with custom layout
81
- - A testimonial card with brand-specific animation
82
- - A pricing table with distinctive visual hierarchy
83
-
84
- Each custom chunk: states, anatomy, usage rules, accessibility spec, code hints.
85
-
86
- ### Scoping rule
87
- - Tier 1 is always 1 file
88
- - Tier 2 + Tier 3 combined should be **5-12 components max** — if you're writing more, you're probably specifying things the library already handles
89
- - If no UI library is detected (greenfield, vanilla CSS), write token-mapping.md as a CSS custom property system, plus core component specs from this default set: button, input, select, checkbox, dialog, card, avatar, badge, toast, navigation, table, tabs, accordion, tooltip. Add or remove based on the brand's needs.
90
-
91
- ## Quality Standards
92
- - All colors must include contrast ratios against common backgrounds
93
- - Typography scale must support Dynamic Type / responsive scaling
94
- - Token mapping must target the actual library's theming API — not abstract specs
95
- - Custom components need: states, anatomy, usage rules, accessibility spec, code hints
96
- - Tokens must be valid JSON following W3C format
97
- - Spacing values must be mathematically consistent (8px base)
98
- </methodology>
99
-
100
- <output>
101
- Write your design system as chunks to the brand's system directory (path provided by the skill that spawned you):
102
-
103
- ### Foundation chunks
104
-
105
- Write to `patterns/foundations/`, each following `references/chunk-format.md`:
106
-
107
- 1. **`foundations/color-system.md`** (~100-150 lines) — Primary, secondary, semantic (error, success, warning, info), neutral scale, dark mode mapping, contrast ratios
108
- 2. **`foundations/typography.md`** — 9 levels (Display → Overline) with size, weight, line height, letter spacing, usage
109
- 3. **`foundations/spacing.md`** — 8px base: 4, 8, 12, 16, 24, 32, 48, 64, 96
110
- 4. **`foundations/grid.md`** — 12-column with gutters, margins, breakpoints
111
- 5. **`foundations/elevation.md`** — 5 shadow levels with use cases and values
112
- 6. **`foundations/border-radius.md`** — Token scale (none, sm, md, lg, xl, full)
113
-
114
- ### Component chunks
115
-
116
- Write to `patterns/components/`:
117
-
118
- 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.
119
-
120
- 2. **Override specs** (selective) — one file per library component that needs treatment beyond tokens. Naming: singular, kebab-case (`button.md`, `card.md`). Each includes: what to override, why (links to brand identity), code hints for the specific library.
121
-
122
- 3. **Custom component specs** (selective) — one file per brand-distinctive component that has no library equivalent. Each includes: states, anatomy, usage rules, accessibility spec, code hints.
123
-
124
- **Naming:** singular, kebab-case, lowercase. "Date Picker" → `date-picker.md`
125
-
126
- Component chunks cross-reference the foundations they use (e.g., `../foundations/color-system.md`).
127
-
128
- ### Other files
129
-
130
- - **`principles.md`** — 3-5 design principles + do's and don'ts
131
- - **`tokens.json`** — Complete W3C Design Tokens format JSON (color, typography, spacing, shadow, border-radius, breakpoint tokens)
132
- - **`{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.
133
-
134
- - **`{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:
135
-
136
- 1. `<role>` block — expert frontend/design role description (reuse from reference)
137
- 2. `<design-system>` block with these sections:
138
- - **Design Philosophy** — core DNA, 5-7 numbered principles derived from brand strategy (archetype, positioning, voice)
139
- - **The Vibe** — emotional tone, cultural references
140
- - **Design Token System** — complete token tables: colors (with semantic mapping), typography (scale, weights, tracking), radius, borders, shadows, textures
141
- - **Component Stylings** — buttons, cards, inputs, icons with state specs and code hints
142
- - **Non-genericness** — 3-5 "bold bets" that make this brand visually distinct
143
- - **Layout Strategy** — container, grid, spacing, z-index
144
- - **Effects & Animation** — motion tokens, interaction patterns
145
- - **Responsive Strategy** — breakpoints, mobile adaptations
146
- - **Accessibility** — contrast ratios, focus indicators, motion preferences
147
- - **Implementation Constraints** — do's and don'ts, anti-patterns
148
-
149
- Target: 400-600 lines. Every value must trace to a foundation chunk.
150
-
151
- ### `INDEX.md`
152
-
153
- After writing all chunks and tokens.json, write `INDEX.md` in the system directory:
154
-
155
- ```markdown
156
- # System
157
- > Phase: system | Brand: {name} | Generated: {DATE}
158
-
159
- ## Foundations
160
-
161
- | Chunk | File | ~Lines |
162
- |-------|------|--------|
163
- | Color System | [color-system.md](./foundations/color-system.md) | ~{N} |
164
- | Typography | [typography.md](./foundations/typography.md) | ~{N} |
165
- | Spacing | [spacing.md](./foundations/spacing.md) | ~{N} |
166
- | Grid | [grid.md](./foundations/grid.md) | ~{N} |
167
- | Elevation | [elevation.md](./foundations/elevation.md) | ~{N} |
168
- | Border Radius | [border-radius.md](./foundations/border-radius.md) | ~{N} |
169
-
170
- ## Components
171
-
172
- | File | Type | Description |
173
- |------|------|-------------|
174
- | [token-mapping.md](./components/token-mapping.md) | mapping | Brand tokens → {library} theming API |
175
- | [button.md](./components/button.md) | override | {why this needs more than tokens} |
176
- | [hero.md](./components/hero.md) | custom | {brand-distinctive, no library equivalent} |
177
- | ... | ... | ... |
178
-
179
- ## Other
180
-
181
- | File | Description |
182
- |------|-------------|
183
- | [principles.md](./principles.md) | Design principles and do's/don'ts |
184
- | [tokens.json](./tokens.json) | W3C Design Tokens |
185
- | [{brand-name}.yml](./{brand-name}.yml) | Custom style preset (portable) |
186
- | [{brand-name}.md](./{brand-name}.md) | Custom style prompt (AI-ready) |
187
- ```
188
- </output>
189
- </output>
@@ -1,19 +0,0 @@
1
- # The Design System Architect
2
-
3
- **Category:** Design Systems
4
- **Use when:** Building a complete design system from scratch, extending an existing one, or redesigning with migration mapping
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as Apple Principal Designer. Build a design system for [BRAND].
11
-
12
- ## Variables
13
-
14
- - `[BRAND]` — The brand/product name to build the system for
15
- - `[SYSTEM_STRATEGY]` — GENERATE | EXTEND | REFACTOR
16
- - `[STACK]` — Contents of `.design/system/STACK.md` (empty when greenfield)
17
- - `[COMPONENTS]` — Contents of `.design/system/COMPONENTS.md` (empty when greenfield)
18
- - `[TOKENS]` — Contents of `.design/system/TOKENS.md` (empty when greenfield)
19
- - `[DESIGN_SCOPE]` — full | partial | tokens
@@ -1,16 +0,0 @@
1
- # The Brand Identity Creator
2
-
3
- **Category:** Branding
4
- **Use when:** Creating a complete brand identity from strategy to applications
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as Creative Director at Pentagram. Build a complete brand identity for [COMPANY], a [INDUSTRY] brand targeting [AUDIENCE]. Explain strategy behind every decision.
11
-
12
- ## Variables
13
-
14
- - `[COMPANY]` — Company/brand name
15
- - `[INDUSTRY]` — Industry or sector
16
- - `[AUDIENCE]` — Target audience
@@ -1,21 +0,0 @@
1
- # The UI/UX Pattern Master
2
-
3
- **Category:** UI/UX Design
4
- **Use when:** Designing a full app UI following Apple HIG principles
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- 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.
11
-
12
- **When [COMPONENTS] is provided (existing codebase):**
13
- Reference existing components and patterns from [COMPONENTS]. Use existing component names in wireframes where applicable. When redesigning existing screens, note what changes vs what stays.
14
-
15
- ## Variables
16
-
17
- - `[APP TYPE]` — Type of application (e.g., fitness tracker, finance app)
18
- - `[PERSONA]` — Target user persona
19
- - `[SCREEN_COUNT]` — Number of screens (default 8)
20
- - `[TARGET_SCREENS]` — Specific screens when partial scope
21
- - `[COMPONENTS]` — `.design/system/COMPONENTS.md` contents (empty when greenfield)
@@ -1,14 +0,0 @@
1
- # The Marketing Asset Factory
2
-
3
- **Category:** Marketing & Campaign Design
4
- **Use when:** Building a full campaign asset library across channels
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as Creative Director at a top agency. Build a full campaign asset library for [PRODUCT]. Maintain consistent messaging, tone, and hierarchy across all assets.
11
-
12
- ## Variables
13
-
14
- - `[PRODUCT]` — Product or service name
@@ -1,15 +0,0 @@
1
- # The Implementation Spec Expert
2
-
3
- **Category:** Design-to-Code Bridge
4
- **Use when:** Mapping design decisions to a specific implementation target (UI kit, existing DS, Figma, or raw code specs)
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as an Implementation Spec Engineer. Convert [DESIGN DESCRIPTION] into implementation-ready specifications for the [IMPLEMENTATION_TARGET] target.
11
-
12
- ## Variables
13
-
14
- - `[DESIGN DESCRIPTION]` — Description of the design to convert to implementation specs
15
- - `[IMPLEMENTATION_TARGET]` — One of: `figma`, `shadcn`, `rn-reusables`, `existing`, `code`
@@ -1,14 +0,0 @@
1
- # The Design Critique Partner
2
-
3
- **Category:** Design Review & Feedback
4
- **Use when:** Getting a structured critique of an existing design
5
-
6
- ---
7
-
8
- ## Prompt
9
-
10
- Act as an Apple Design Director. Critique [DESIGN]. Tone: constructive, actionable, educational.
11
-
12
- ## Variables
13
-
14
- - `[DESIGN]` — Description or screenshot of the design to critique
@@ -1,3 +0,0 @@
1
- # Design Trend Synthesizer
2
-
3
- > This prompt is deprecated. Trend synthesis is handled inline by skills that need it (brand-research, project-research). This file is retained for reference only.