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.
- package/README.md +7 -12
- package/bin/install.js +96 -71
- package/gsp/agents/gsp-accessibility-auditor.md +3 -3
- package/gsp/agents/gsp-ascii-artist.md +1 -1
- package/gsp/agents/gsp-brand-auditor.md +2 -2
- package/gsp/agents/gsp-brand-engineer.md +131 -0
- package/gsp/agents/gsp-brand-strategist.md +2 -2
- package/gsp/agents/gsp-brand-syncer.md +8 -7
- package/gsp/agents/gsp-builder.md +48 -5
- package/gsp/agents/gsp-campaign-director.md +2 -3
- package/gsp/agents/gsp-creative-director.md +80 -0
- package/gsp/agents/gsp-critic.md +99 -17
- package/gsp/agents/gsp-designer.md +51 -4
- package/gsp/agents/gsp-project-researcher.md +3 -3
- package/gsp/agents/gsp-researcher.md +4 -4
- package/gsp/agents/gsp-reviewer.md +2 -2
- package/gsp/agents/gsp-scoper.md +2 -2
- package/gsp/hooks/hooks.json +5 -5
- package/gsp/references/design-trends.md +4 -4
- package/gsp/references/phase-transitions.md +12 -12
- package/gsp/references/questioning.md +1 -1
- package/gsp/references/token-mapping.md +329 -0
- package/gsp/skills/gsp-3d/SKILL.md +112 -0
- package/gsp/skills/gsp-accessibility/SKILL.md +11 -11
- package/gsp/skills/gsp-accessibility-audit/SKILL.md +6 -7
- package/gsp/skills/gsp-add-reference/SKILL.md +1 -1
- package/gsp/skills/gsp-art/SKILL.md +1 -1
- package/gsp/skills/gsp-brand-audit/SKILL.md +3 -3
- package/gsp/skills/gsp-brand-guidelines/SKILL.md +233 -0
- package/gsp/skills/gsp-brand-identity/SKILL.md +27 -18
- package/gsp/skills/gsp-brand-refine/SKILL.md +29 -22
- package/gsp/skills/gsp-brand-research/SKILL.md +2 -2
- package/gsp/skills/gsp-brand-strategy/SKILL.md +3 -3
- package/gsp/skills/gsp-brand-sync/SKILL.md +7 -7
- package/gsp/skills/gsp-color/SKILL.md +105 -0
- package/gsp/skills/gsp-design-system/SKILL.md +4 -4
- package/gsp/skills/gsp-doctor/SKILL.md +25 -18
- package/gsp/skills/gsp-help/SKILL.md +28 -28
- package/gsp/skills/gsp-icons/SKILL.md +108 -0
- package/gsp/skills/gsp-images/SKILL.md +197 -0
- package/gsp/skills/gsp-launch/SKILL.md +2 -3
- package/gsp/skills/gsp-logo/SKILL.md +173 -0
- package/gsp/skills/gsp-palette/SKILL.md +13 -13
- package/gsp/skills/gsp-pretty/SKILL.md +2 -2
- package/gsp/skills/gsp-progress/SKILL.md +20 -20
- package/gsp/skills/gsp-project-brief/SKILL.md +7 -8
- package/gsp/skills/gsp-project-build/SKILL.md +21 -21
- package/gsp/skills/gsp-project-critique/SKILL.md +13 -14
- package/gsp/skills/gsp-project-design/SKILL.md +17 -17
- package/gsp/skills/gsp-project-research/SKILL.md +5 -6
- package/gsp/skills/gsp-project-review/SKILL.md +7 -9
- package/gsp/skills/gsp-scaffold/SKILL.md +3 -3
- package/gsp/skills/gsp-start/SKILL.md +14 -14
- package/gsp/skills/gsp-style/SKILL.md +41 -43
- package/gsp/skills/gsp-style/styles/INDEX.yml +1 -1
- package/gsp/skills/gsp-style/styles/academia.yml +80 -0
- package/gsp/skills/gsp-style/styles/art-deco.yml +81 -0
- package/gsp/skills/gsp-style/styles/bauhaus.yml +78 -0
- package/gsp/skills/gsp-style/styles/bold-typography.yml +73 -0
- package/gsp/skills/gsp-style/styles/botanical.yml +78 -0
- package/gsp/skills/gsp-style/styles/claymorphism.yml +84 -0
- package/gsp/skills/gsp-style/styles/cyberpunk.yml +87 -0
- package/gsp/skills/gsp-style/styles/enterprise.yml +81 -0
- package/gsp/skills/gsp-style/styles/flat-design.yml +67 -0
- package/gsp/skills/gsp-style/styles/fluent.yml +82 -0
- package/gsp/skills/gsp-style/styles/glassmorphism.yml +83 -0
- package/gsp/skills/gsp-style/styles/humanist-literary.yml +74 -0
- package/gsp/skills/gsp-style/styles/industrial.yml +82 -0
- package/gsp/skills/gsp-style/styles/kinetic.yml +94 -0
- package/gsp/skills/gsp-style/styles/liquid-glass.yml +91 -0
- package/gsp/skills/gsp-style/styles/luxury.yml +83 -0
- package/gsp/skills/gsp-style/styles/material.yml +83 -0
- package/gsp/skills/gsp-style/styles/maximalism.yml +92 -0
- package/gsp/skills/gsp-style/styles/minimal-dark.yml +75 -0
- package/gsp/skills/gsp-style/styles/modern-dark.yml +88 -0
- package/gsp/skills/gsp-style/styles/monochrome.yml +68 -0
- package/gsp/skills/gsp-style/styles/neubrutalism.yml +83 -0
- package/gsp/skills/gsp-style/styles/neumorphism.yml +77 -0
- package/gsp/skills/gsp-style/styles/newsprint.yml +81 -0
- package/gsp/skills/gsp-style/styles/organic.yml +77 -0
- package/gsp/skills/gsp-style/styles/playful-geometric.yml +90 -0
- package/gsp/skills/gsp-style/styles/professional.yml +67 -0
- package/gsp/skills/gsp-style/styles/retro.yml +85 -0
- package/gsp/skills/gsp-style/styles/saas.yml +83 -0
- package/gsp/skills/gsp-style/styles/sketch.yml +86 -0
- package/gsp/skills/gsp-style/styles/swiss-minimalist.yml +69 -0
- package/gsp/skills/gsp-style/styles/terminal.yml +83 -0
- package/gsp/skills/gsp-style/styles/vaporwave.yml +84 -0
- package/gsp/skills/gsp-style/styles/web3.yml +82 -0
- package/gsp/skills/gsp-textures/SKILL.md +132 -0
- package/gsp/skills/gsp-typescale/SKILL.md +11 -11
- package/gsp/skills/gsp-typography/SKILL.md +108 -0
- package/gsp/skills/gsp-update/SKILL.md +1 -2
- package/gsp/skills/gsp-video/SKILL.md +101 -0
- package/gsp/templates/branding/config.json +1 -1
- package/gsp/templates/branding/roadmap.md +9 -9
- package/gsp/templates/exports-index.md +8 -8
- package/gsp/templates/phases/build.md +1 -1
- package/gsp/templates/phases/design.md +1 -1
- package/gsp/templates/phases/patterns.md +60 -71
- package/gsp/templates/phases/style.md +158 -0
- package/gsp/templates/projects/config.json +1 -1
- package/gsp/templates/projects/roadmap.md +7 -7
- package/gsp/templates/projects/state.md +1 -1
- package/package.json +1 -2
- package/.claude-plugin/plugin.json +0 -24
- package/gsp/agents/gsp-identity-designer.md +0 -74
- package/gsp/agents/gsp-pattern-architect.md +0 -189
- package/gsp/prompts/01-design-system-architect.md +0 -19
- package/gsp/prompts/02-brand-identity-creator.md +0 -16
- package/gsp/prompts/03-ui-ux-pattern-master.md +0 -21
- package/gsp/prompts/04-marketing-asset-factory.md +0 -14
- package/gsp/prompts/05-implementation-spec-expert.md +0 -15
- package/gsp/prompts/06-design-critique-partner.md +0 -14
- package/gsp/prompts/07-design-trend-synthesizer.md +0 -3
- package/gsp/prompts/08-accessibility-auditor.md +0 -23
- package/gsp/prompts/09-design-to-code-translator.md +0 -49
- package/gsp/prompts/10-project-scoper.md +0 -17
- package/gsp/prompts/11-deliverable-reviewer.md +0 -18
- package/gsp/prompts/12-project-researcher.md +0 -18
- 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)
|
|
@@ -10,42 +10,42 @@
|
|
|
10
10
|
|
|
11
11
|
## Phase 1: Brief
|
|
12
12
|
**Status:** pending
|
|
13
|
-
**Command:** `/gsp
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "get-shit-pretty",
|
|
3
|
-
"version": "0.6.
|
|
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
|