@hegemonart/get-design-done 1.19.0 → 1.19.6
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/.claude-plugin/marketplace.json +2 -2
- package/.claude-plugin/plugin.json +1 -1
- package/CHANGELOG.md +54 -0
- package/SKILL.md +10 -4
- package/agents/README.md +53 -0
- package/agents/a11y-mapper.md +10 -0
- package/agents/component-benchmark-harvester.md +11 -0
- package/agents/component-benchmark-synthesizer.md +11 -0
- package/agents/component-taxonomy-mapper.md +10 -0
- package/agents/design-advisor.md +10 -0
- package/agents/design-assumptions-analyzer.md +10 -0
- package/agents/design-auditor.md +22 -0
- package/agents/design-authority-watcher.md +10 -0
- package/agents/design-component-generator.md +10 -0
- package/agents/design-context-checker-gate.md +10 -0
- package/agents/design-context-checker.md +10 -0
- package/agents/design-discussant.md +24 -0
- package/agents/design-doc-writer.md +12 -0
- package/agents/design-executor.md +10 -0
- package/agents/design-figma-writer.md +10 -0
- package/agents/design-fixer.md +10 -0
- package/agents/design-integration-checker-gate.md +10 -0
- package/agents/design-integration-checker.md +10 -0
- package/agents/design-paper-writer.md +10 -0
- package/agents/design-pattern-mapper.md +10 -0
- package/agents/design-pencil-writer.md +10 -0
- package/agents/design-phase-researcher.md +10 -0
- package/agents/design-plan-checker.md +10 -0
- package/agents/design-planner.md +10 -0
- package/agents/design-reflector.md +20 -0
- package/agents/design-research-synthesizer.md +10 -0
- package/agents/design-start-writer.md +10 -0
- package/agents/design-update-checker.md +10 -0
- package/agents/design-verifier-gate.md +10 -0
- package/agents/design-verifier.md +11 -0
- package/agents/gdd-graphify-sync.md +10 -0
- package/agents/gdd-intel-updater.md +10 -0
- package/agents/gdd-learnings-extractor.md +10 -0
- package/agents/motion-mapper.md +10 -0
- package/agents/token-mapper.md +10 -0
- package/agents/visual-hierarchy-mapper.md +10 -0
- package/hooks/gdd-decision-injector.js +30 -8
- package/package.json +18 -2
- package/reference/authority-feeds.md +4 -2
- package/reference/checklists.md +30 -0
- package/reference/component-authoring.md +184 -0
- package/reference/emotional-design.md +124 -0
- package/reference/first-principles.md +89 -0
- package/reference/heuristics.md +70 -0
- package/reference/motion-advanced.md +192 -3
- package/reference/registry.json +28 -0
- package/reference/schemas/insight-line.schema.json +37 -0
- package/reference/shared-preamble.md +10 -0
- package/scripts/lib/design-search.cjs +206 -0
- package/scripts/lib/probe-optional.cjs +29 -0
- package/scripts/lib/relevance-counter.cjs +121 -0
- package/skills/complete-cycle/SKILL.md +40 -2
- package/skills/continue/SKILL.md +23 -0
- package/skills/pause/SKILL.md +40 -14
- package/skills/recall/SKILL.md +74 -0
- package/skills/resume/SKILL.md +34 -16
- package/skills/timeline/SKILL.md +65 -0
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
# Emotional Design — Norman's Three Levels
|
|
2
|
+
|
|
3
|
+
Source: Don Norman, *Emotional Design: Why We Love (or Hate) Everyday Things* (2004). See also: `jnd.org`.
|
|
4
|
+
|
|
5
|
+
Use this file as a **cross-cutting scoring lens** in design audits and reflections. The three levels apply simultaneously to every design decision — they are not sequential stages.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## The Three Levels
|
|
10
|
+
|
|
11
|
+
### Visceral Level
|
|
12
|
+
|
|
13
|
+
> The immediate, pre-cognitive, automatic reaction to sensory input.
|
|
14
|
+
|
|
15
|
+
The visceral level operates before the user thinks. It is driven by appearance, proportion, colour, texture — the aesthetic surface. A user who says "I don't know why, but this feels cheap" is responding at the visceral level.
|
|
16
|
+
|
|
17
|
+
**What it governs:**
|
|
18
|
+
- First impression within 50ms of page load (aesthetic-usability effect)
|
|
19
|
+
- Color palettes and their emotional valence
|
|
20
|
+
- Typography weight, roundness, and whitespace generosity
|
|
21
|
+
- Illustration style, photography tone, iconography personality
|
|
22
|
+
- Whether motion feels fluid or mechanical
|
|
23
|
+
|
|
24
|
+
**Audit signals:**
|
|
25
|
+
- Does the visual system convey the intended emotional register within 3 seconds?
|
|
26
|
+
- Are there conflicting visceral signals? (e.g., playful illustration + harsh red error banners)
|
|
27
|
+
- Does the `style-vocabulary.md` aesthetic type match the product's emotional promise?
|
|
28
|
+
|
|
29
|
+
**Scoring rubric (visceral):**
|
|
30
|
+
|
|
31
|
+
| Score | Evidence |
|
|
32
|
+
|---|---|
|
|
33
|
+
| 4 | Emotional register clear within 3s; no conflicting signals; references a named design authority |
|
|
34
|
+
| 3 | Clear emotional intent; 1–2 minor conflicts (e.g., one off-brand icon) |
|
|
35
|
+
| 2 | Ambiguous emotional register; mixed signals across surfaces |
|
|
36
|
+
| 1 | No discernible emotional intent; generic or template appearance |
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
### Behavioral Level
|
|
41
|
+
|
|
42
|
+
> The experience of use — whether actions feel controllable, predictable, and rewarding.
|
|
43
|
+
|
|
44
|
+
The behavioral level is what UX heuristics primarily address. It covers usability, feedback, error recovery, and responsiveness. A user who says "This is frustrating to use" is responding at the behavioral level.
|
|
45
|
+
|
|
46
|
+
**What it governs:**
|
|
47
|
+
- Interaction feedback (loading states, error messages, success confirmations)
|
|
48
|
+
- Control and reversibility (undo, cancel, back navigation)
|
|
49
|
+
- Response latency — the Doherty Threshold: feedback within 400ms
|
|
50
|
+
- Error prevention and recovery
|
|
51
|
+
- Learnability and consistency across screens
|
|
52
|
+
|
|
53
|
+
**Audit signals:**
|
|
54
|
+
- Can the user always tell what the system is doing? (H-01 Visibility)
|
|
55
|
+
- Are errors expressed as human problems with solutions? (H-09 Error Recovery)
|
|
56
|
+
- Is every action reversible within 5 seconds?
|
|
57
|
+
- Does the system respond within 400ms (Doherty Threshold)?
|
|
58
|
+
|
|
59
|
+
**Scoring rubric (behavioral):**
|
|
60
|
+
|
|
61
|
+
| Score | Evidence |
|
|
62
|
+
|---|---|
|
|
63
|
+
| 4 | All states visible; errors human + actionable; Doherty Threshold met; all destructive actions reversible |
|
|
64
|
+
| 3 | Most states covered; 1–2 feedback gaps that don't block task completion |
|
|
65
|
+
| 2 | Notable feedback gaps; some irreversible actions without warning |
|
|
66
|
+
| 1 | System status invisible; errors developer-facing; no undo for destructive actions |
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
### Reflective Level
|
|
71
|
+
|
|
72
|
+
> The conscious, post-use evaluation — meaning, narrative, and self-image.
|
|
73
|
+
|
|
74
|
+
The reflective level is where brand identity, storytelling, and pride of ownership live. A user who says "I love showing this tool to colleagues" is responding at the reflective level. This level takes the longest to build and the longest to repair when damaged.
|
|
75
|
+
|
|
76
|
+
**What it governs:**
|
|
77
|
+
- Whether the product aligns with the user's self-image
|
|
78
|
+
- Brand narrative consistency across all touchpoints
|
|
79
|
+
- Delight and surprise moments — not gimmicks; earned moments
|
|
80
|
+
- The **Peak** moment in the Peak-End Rule: the highest positive moment in the flow
|
|
81
|
+
- Long-term loyalty and word-of-mouth referral
|
|
82
|
+
|
|
83
|
+
**Audit signals:**
|
|
84
|
+
- Is there an identifiable "peak" moment in the primary user flow?
|
|
85
|
+
- Does the brand voice (from `brand-voice.md`) carry through to microcopy and empty states?
|
|
86
|
+
- Is there a designed completion state that communicates personality?
|
|
87
|
+
- Does the product give users a story to tell? (e.g., a completion screen, an achievement, a shareable output)
|
|
88
|
+
|
|
89
|
+
**Scoring rubric (reflective):**
|
|
90
|
+
|
|
91
|
+
| Score | Evidence |
|
|
92
|
+
|---|---|
|
|
93
|
+
| 4 | Identifiable designed peak moment; brand voice consistent from entry to completion; users have a story to tell |
|
|
94
|
+
| 3 | Brand voice present in most surfaces; peak moment implicit but not deliberately designed |
|
|
95
|
+
| 2 | Brand voice inconsistent; no designed peak; product is functional but forgettable |
|
|
96
|
+
| 1 | Generic experience; no emotional arc; could be any product in the category |
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## Cross-Cutting Lens Application
|
|
101
|
+
|
|
102
|
+
Apply this lens as a **secondary overlay** after scoring the primary audit pillars. For each of the three levels:
|
|
103
|
+
|
|
104
|
+
1. Identify 1–2 evidence items from the primary audit (e.g., Pillar 3 Color → Visceral Level)
|
|
105
|
+
2. Note conflicts between levels (e.g., Behavioral score 4 but Visceral score 1 = technically functional but aesthetically repellent)
|
|
106
|
+
3. Flag the weakest level as the highest-leverage improvement opportunity
|
|
107
|
+
|
|
108
|
+
**Common cross-level conflict patterns:**
|
|
109
|
+
|
|
110
|
+
| Conflict pattern | Diagnosis | Remedy |
|
|
111
|
+
|---|---|---|
|
|
112
|
+
| High behavioral, low visceral | Technically usable but aesthetically generic | Audit against `style-vocabulary.md`; commit to a stronger aesthetic type |
|
|
113
|
+
| High visceral, low behavioral | Beautiful but broken | Fix H-01, H-09 violations first — UX before aesthetics |
|
|
114
|
+
| High visceral + behavioral, low reflective | Polished but forgettable | Design a peak moment; review `brand-voice.md` emotional arc |
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## Wiring
|
|
119
|
+
|
|
120
|
+
**design-auditor:** After pillar scoring, apply emotional-design lens as a cross-cutting overlay. Add `## Emotional Design Overlay` section to `DESIGN-AUDIT.md` with scores for all three levels and any cross-level conflict notes.
|
|
121
|
+
|
|
122
|
+
**design-reflector:** In Section 1 (What Surprised Us), flag if visceral vs behavioral scores diverge by ≥2 points — this is a leading indicator of the "beautiful but broken" pattern.
|
|
123
|
+
|
|
124
|
+
**design-discussant:** In `--spec` mode, include one reflective-level confidence-scored question: "What story does this product help the user tell about themselves?"
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# First Principles — Invariant Design Constraints
|
|
2
|
+
|
|
3
|
+
> These are the three invariants that no design decision can override. They are facts about human biology and cognition, not preferences or conventions. Every design choice is downstream of these three constraints.
|
|
4
|
+
|
|
5
|
+
Use during the brief/discover stage (`design-discussant`) as a sanity check: does the proposed direction respect all three invariants? Use during verify as a reducibility check: can each element be removed without breaking the user's ability to complete their goal?
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Invariant 1: Body
|
|
10
|
+
|
|
11
|
+
The user has a physical body with physiological limits. No amount of design skill overrides human motor physiology.
|
|
12
|
+
|
|
13
|
+
**Principle → Code pairs:**
|
|
14
|
+
|
|
15
|
+
| Principle | Code Pattern |
|
|
16
|
+
|---|---|
|
|
17
|
+
| Touch targets must accommodate tremor and fat-finger error | `min-h-[44px] min-w-[44px]` on all interactive elements |
|
|
18
|
+
| Precision degrades with distance (Fitts's Law) | Destructive actions separated from primary actions by ≥24px or significantly smaller |
|
|
19
|
+
| Scroll fatigue is real | Sticky headers + back-to-top anchor for content > 3 viewport heights |
|
|
20
|
+
| Physical feedback confirms action | `scale(0.96)` press feedback on all clickable surfaces |
|
|
21
|
+
| Eye strain limits reading distance | Body text ≥16px; line-length 60–75ch |
|
|
22
|
+
|
|
23
|
+
**Reducibility check:** Can the user complete this task without a mouse? Without a precise pointer? On a 4-inch screen in a moving vehicle?
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Invariant 2: Attention
|
|
28
|
+
|
|
29
|
+
Attention is finite and non-renewable per unit of time. Every element on screen competes for the same fixed budget.
|
|
30
|
+
|
|
31
|
+
**Principle → Code pairs:**
|
|
32
|
+
|
|
33
|
+
| Principle | Code Pattern |
|
|
34
|
+
|---|---|
|
|
35
|
+
| Attention capacity: 5–9 items (Miller's Law) | Navigation: ≤7 top-level items; dropdown > 7 items gets search |
|
|
36
|
+
| Decision cost grows with choice count (Hick's Law) | Pricing: ≤3 tiers; feature lists: ≤4 items per group |
|
|
37
|
+
| One primary action per screen | Single `.btn-primary` per viewport; all others `.btn-secondary` or `.btn-ghost` |
|
|
38
|
+
| Animation hijacks attention | Motion only on state change; no decorative looping animations |
|
|
39
|
+
| Progressive disclosure reduces overload | Advanced options behind disclosure trigger, not visible by default |
|
|
40
|
+
|
|
41
|
+
**Reducibility check:** If you removed 30% of the elements on this screen, would task completion rate drop? If not, remove them.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## Invariant 3: Memory
|
|
46
|
+
|
|
47
|
+
Working memory holds approximately 7 items and degrades rapidly within seconds. Design that requires users to remember things between screens fails.
|
|
48
|
+
|
|
49
|
+
**Principle → Code pairs:**
|
|
50
|
+
|
|
51
|
+
| Principle | Code Pattern |
|
|
52
|
+
|---|---|
|
|
53
|
+
| Recognition over recall (H-06) | Visible navigation labels, not icon-only; breadcrumbs on deep paths |
|
|
54
|
+
| Context must be preserved | Multi-step forms: prior-step summary visible; form state not cleared on back-navigate |
|
|
55
|
+
| Error memory fades fast | Inline validation: errors adjacent to the field that caused them |
|
|
56
|
+
| Completion status reduces anxiety | Progress indicators: `Step 2 of 4`; Zeigarnik Effect — show percentage done |
|
|
57
|
+
| Last action should be reversible | Undo available for destructive/irreversible actions within 5 seconds |
|
|
58
|
+
|
|
59
|
+
**Reducibility check:** Does this screen require the user to remember something from a previous screen? If yes, surface that context inline.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## The Reducibility Test
|
|
64
|
+
|
|
65
|
+
For any proposed design element, apply in order:
|
|
66
|
+
|
|
67
|
+
1. **Body test** — Is this element reachable by a person with limited motor precision on a small screen?
|
|
68
|
+
2. **Attention test** — Does this element earn its place by directly supporting the primary task?
|
|
69
|
+
3. **Memory test** — Does this element surface context the user would otherwise need to remember?
|
|
70
|
+
|
|
71
|
+
If an element fails all three tests, it is purely decorative. Decorative elements are not forbidden — but they are not invariant-justified, and they are the first candidates for removal when performance or clarity is at risk.
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Wiring to Design Discussant
|
|
76
|
+
|
|
77
|
+
When `design-discussant` runs the brief stage, it prepends this invariants question before the main interview:
|
|
78
|
+
|
|
79
|
+
> "Before we discuss the design direction, let me confirm three constraints: (1) Are there any accessibility requirements for motor-impaired users? (2) Is the primary use case on mobile or desktop — or both? (3) Are there any multi-step flows where the user must carry context between screens?"
|
|
80
|
+
|
|
81
|
+
Answers are recorded as D-XX decisions prefixed `[Invariant]` in STATE.md.
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## Relationship to Other References
|
|
86
|
+
|
|
87
|
+
- `reference/heuristics.md` — H-01 through H-10 are the behavioral-level expression of Invariants 2 and 3
|
|
88
|
+
- `reference/emotional-design.md` — Invariant 1 (Body) maps to the Visceral level; Invariants 2–3 map to the Behavioral level
|
|
89
|
+
- `reference/component-authoring.md` — P-01 through P-06 are the component-level expression of all three invariants
|
package/reference/heuristics.md
CHANGED
|
@@ -181,6 +181,76 @@ People **remember incomplete tasks** better than completed ones. Implications:
|
|
|
181
181
|
|
|
182
182
|
---
|
|
183
183
|
|
|
184
|
+
## Peak-End Rule
|
|
185
|
+
|
|
186
|
+
Users judge an experience primarily by how it felt at its most intense moment (the **peak**) and how it ended — not by the average across the whole session. Implications:
|
|
187
|
+
- Design a deliberate positive peak in every primary flow (e.g., a celebratory completion screen, an instant result, a delightful empty state).
|
|
188
|
+
- The **end state** of a flow matters disproportionately: the last screen the user sees shapes their memory of the whole interaction.
|
|
189
|
+
- Reduce negative peaks first (error states, loading hangs) — they weigh heavier than neutral moments.
|
|
190
|
+
- A long frustrating form followed by a satisfying completion screen is remembered more positively than a mildly annoying end to an otherwise smooth flow.
|
|
191
|
+
|
|
192
|
+
---
|
|
193
|
+
|
|
194
|
+
## Loss Aversion
|
|
195
|
+
|
|
196
|
+
Users feel the pain of loss approximately **twice as strongly** as the pleasure of an equivalent gain (Kahneman & Tversky). Implications:
|
|
197
|
+
- Frame CTAs around what users keep/save, not what they gain: "Don't lose your progress" over "Save your work."
|
|
198
|
+
- Subscription cancellation flows that show what the user will lose (features, data, streak) leverage loss aversion ethically to reduce churn — but only if the stated losses are real.
|
|
199
|
+
- Free trial countdowns ("3 days left") trigger loss aversion more effectively than benefit reminders.
|
|
200
|
+
- Destructive action confirmations should name what is lost: "Delete this project and all 47 files?" not just "Are you sure?"
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
## Cognitive Load Theory
|
|
205
|
+
|
|
206
|
+
Working memory is limited to approximately **7 ± 2 chunks** simultaneously (Miller, 1956) and degrades under conditions of stress, distraction, or novelty. Cognitive Load Theory (Sweller, 1988) distinguishes three types:
|
|
207
|
+
|
|
208
|
+
| Type | Definition | Design implication |
|
|
209
|
+
|---|---|---|
|
|
210
|
+
| **Intrinsic** | Load inherent to the task itself (complexity of the domain) | Cannot be reduced; must be scaffolded |
|
|
211
|
+
| **Extraneous** | Load imposed by poor design (navigation, unclear labels, visual noise) | Eliminate this completely |
|
|
212
|
+
| **Germane** | Load that builds understanding (learning, pattern recognition) | Preserve and support |
|
|
213
|
+
|
|
214
|
+
Practical rules:
|
|
215
|
+
- Every element of visual noise is extraneous load — remove it.
|
|
216
|
+
- New UI patterns create extraneous load (Jakob's Law); use platform conventions.
|
|
217
|
+
- Chunk complex tasks into steps of ≤3 decisions each.
|
|
218
|
+
- Error messages that require decoding ("Error 422") create extraneous load; plain language removes it.
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## Aesthetic-Usability Effect
|
|
223
|
+
|
|
224
|
+
Users perceive **aesthetically pleasing designs as more usable**, even when functionality is identical — and this perception persists through initial usability problems. Implications:
|
|
225
|
+
- A polished visual appearance buys tolerance for minor UX rough edges in early releases.
|
|
226
|
+
- This effect is strongest on first impression; it degrades over time as behavioral friction compounds.
|
|
227
|
+
- The effect can mask genuine usability problems in user testing if participants rate overall satisfaction rather than task completion.
|
|
228
|
+
- Do NOT use the aesthetic-usability effect as a reason to defer fixing usability problems — it explains tolerance, not satisfaction.
|
|
229
|
+
|
|
230
|
+
---
|
|
231
|
+
|
|
232
|
+
## Doherty Threshold
|
|
233
|
+
|
|
234
|
+
A system that responds within **400ms** keeps users in a state of flow. Response times above 400ms cause users to shift attention, leading to a productivity drop that compounds with task complexity. Named after W.J. Doherty and R.H. Thadhani (IBM, 1982). Implications:
|
|
235
|
+
- Interactive responses (button click → visible feedback) must be ≤400ms.
|
|
236
|
+
- For operations > 400ms, show optimistic UI immediately and settle in the background.
|
|
237
|
+
- For operations > 1000ms, use a progress indicator.
|
|
238
|
+
- For operations > 10s, provide a way to continue other tasks (async notification on complete).
|
|
239
|
+
- Loading spinners that appear within 400ms reduce perceived wait; those that appear late increase it.
|
|
240
|
+
|
|
241
|
+
---
|
|
242
|
+
|
|
243
|
+
## Flow (Csikszentmihalyi)
|
|
244
|
+
|
|
245
|
+
Users enter a **flow state** when task difficulty matches their skill level exactly — high enough to engage, low enough to feel achievable. Flow is characterized by complete absorption, loss of time awareness, and intrinsic motivation. Implications:
|
|
246
|
+
- Progressive difficulty: onboarding tasks should be trivially easy; expert tasks should provide just enough challenge.
|
|
247
|
+
- Interruptions break flow permanently for that session; avoid modal interruptions in high-focus workflows.
|
|
248
|
+
- Clear goals + immediate feedback are the two design levers for inducing flow (H-01, H-05).
|
|
249
|
+
- Forms designed for flow: one question per screen, immediate validation, visible progress.
|
|
250
|
+
- Notification design: distinguish ambient notifications (don't break flow) from critical interruptions (must break flow).
|
|
251
|
+
|
|
252
|
+
---
|
|
253
|
+
|
|
184
254
|
## How to Score During Verification
|
|
185
255
|
|
|
186
256
|
For each NNG heuristic (H-01 through H-10), rate 0–4:
|
|
@@ -746,9 +746,198 @@ Fresh eyes catch what in-the-moment iteration misses. Animations feel correct wh
|
|
|
746
746
|
|
|
747
747
|
## Disney's 12 Principles — UX Mapping
|
|
748
748
|
|
|
749
|
-
|
|
750
|
-
<!-- Cross-reference: reference/motion-easings.md, reference/motion-spring.md -->
|
|
749
|
+
Original source: Frank Thomas & Ollie Johnston, *The Illusion of Life: Disney Animation* (1981). The 12 principles were developed for hand-drawn character animation; the UX mappings below translate each to interface motion.
|
|
751
750
|
|
|
752
|
-
|
|
751
|
+
---
|
|
752
|
+
|
|
753
|
+
### 1. Squash and Stretch
|
|
754
|
+
|
|
755
|
+
**Animation:** Objects deform under force — squash on impact, stretch during fast movement.
|
|
756
|
+
|
|
757
|
+
**UX mapping:** Scale feedback communicates physical weight and responsiveness.
|
|
758
|
+
```tsx
|
|
759
|
+
// Press: squash slightly (wider, shorter)
|
|
760
|
+
// Release: snap back through scale(1.05) → scale(1)
|
|
761
|
+
<motion.button
|
|
762
|
+
whileTap={{ scaleX: 1.05, scaleY: 0.95 }}
|
|
763
|
+
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
|
764
|
+
/>
|
|
765
|
+
```
|
|
766
|
+
**Rule:** Constrain squash/stretch to ≤5% deviation — more reads as glitchy, not physical.
|
|
767
|
+
|
|
768
|
+
---
|
|
769
|
+
|
|
770
|
+
### 2. Anticipation
|
|
771
|
+
|
|
772
|
+
**Animation:** A small preparatory motion before the main action (e.g., a character bending knees before jumping).
|
|
773
|
+
|
|
774
|
+
**UX mapping:** Preview animations prime the user for what's about to happen.
|
|
775
|
+
```tsx
|
|
776
|
+
// Drawer that "breathes" slightly before opening
|
|
777
|
+
<motion.div
|
|
778
|
+
animate={isOpen ? { x: 0 } : { x: -8 }}
|
|
779
|
+
initial={{ x: -8 }}
|
|
780
|
+
transition={{ type: "spring", stiffness: 300, damping: 24 }}
|
|
781
|
+
/>
|
|
782
|
+
```
|
|
783
|
+
**Rule:** Anticipation delays should be ≤80ms; longer delays read as lag, not anticipation.
|
|
784
|
+
|
|
785
|
+
---
|
|
786
|
+
|
|
787
|
+
### 3. Staging
|
|
788
|
+
|
|
789
|
+
**Animation:** Present one idea at a time; the primary action draws the eye; secondary elements are subordinate.
|
|
790
|
+
|
|
791
|
+
**UX mapping:** One primary motion per state change. All other motion is either absent or staggered to follow.
|
|
792
|
+
- Never animate two elements of equal visual weight simultaneously
|
|
793
|
+
- Use stagger to create a reading order for entering content
|
|
794
|
+
- The element the user acted on should move first
|
|
795
|
+
|
|
796
|
+
---
|
|
797
|
+
|
|
798
|
+
### 4. Straight Ahead vs Pose to Pose
|
|
799
|
+
|
|
800
|
+
**Animation:** Straight-ahead: draw each frame in sequence. Pose-to-pose: define key positions and interpolate.
|
|
801
|
+
|
|
802
|
+
**UX mapping:** All CSS transitions and spring animations are pose-to-pose by definition — you define start and end states. This means:
|
|
803
|
+
- Transitions retarget smoothly when interrupted (see CSS Transitions vs Keyframes section above)
|
|
804
|
+
- The in-between frames are computed by the engine, not designed
|
|
805
|
+
- Design the **poses** (states) carefully; the interpolation handles itself
|
|
806
|
+
|
|
807
|
+
---
|
|
808
|
+
|
|
809
|
+
### 5. Follow Through and Overlapping Action
|
|
810
|
+
|
|
811
|
+
**Animation:** Parts of an object continue moving after the main action stops; related elements finish at slightly different times.
|
|
812
|
+
|
|
813
|
+
**UX mapping:** Stagger exit animations and let secondary elements settle slightly after primary.
|
|
814
|
+
```tsx
|
|
815
|
+
// List exit: items stagger out with slight delay between each
|
|
816
|
+
const container = {
|
|
817
|
+
exit: { transition: { staggerChildren: 0.04, staggerDirection: -1 } },
|
|
818
|
+
};
|
|
819
|
+
const item = {
|
|
820
|
+
exit: { opacity: 0, y: -8, transition: { duration: 0.2 } },
|
|
821
|
+
};
|
|
822
|
+
```
|
|
823
|
+
**Rule:** Follow-through delay ≤60ms per level. Beyond this, the UI feels sluggish.
|
|
824
|
+
|
|
825
|
+
---
|
|
826
|
+
|
|
827
|
+
### 6. Slow In and Slow Out
|
|
828
|
+
|
|
829
|
+
**Animation:** Objects accelerate from rest and decelerate to a stop; they are never at constant velocity.
|
|
830
|
+
|
|
831
|
+
**UX mapping:** Never use `linear` easing for UI transitions. Always use a curve that starts slow, speeds up, and decelerates.
|
|
832
|
+
```css
|
|
833
|
+
/* The standard Material/web ease — correct for most UI */
|
|
834
|
+
transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
|
|
835
|
+
|
|
836
|
+
/* Enter (slow in) */
|
|
837
|
+
transition: transform 0.24s cubic-bezier(0, 0, 0.2, 1);
|
|
838
|
+
|
|
839
|
+
/* Exit (slow out) */
|
|
840
|
+
transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
|
|
841
|
+
```
|
|
842
|
+
**Rule:** `linear` easing is only valid for: scroll-driven animations tied to position, and progress bar fills.
|
|
843
|
+
|
|
844
|
+
---
|
|
845
|
+
|
|
846
|
+
### 7. Arcs
|
|
847
|
+
|
|
848
|
+
**Animation:** Objects in the real world move in slight arcs, not straight lines.
|
|
849
|
+
|
|
850
|
+
**UX mapping:** For spatial transitions (element moving from one position to another), a slight arc feels more natural than a straight-line translate. Achieved by animating both axes with slightly different timing:
|
|
851
|
+
```tsx
|
|
852
|
+
<motion.div
|
|
853
|
+
initial={{ x: -40, y: 10, opacity: 0 }}
|
|
854
|
+
animate={{ x: 0, y: 0, opacity: 1 }}
|
|
855
|
+
transition={{
|
|
856
|
+
x: { type: "spring", stiffness: 300, damping: 28 },
|
|
857
|
+
y: { type: "spring", stiffness: 300, damping: 28, delay: 0.04 },
|
|
858
|
+
opacity: { duration: 0.2 },
|
|
859
|
+
}}
|
|
860
|
+
/>
|
|
861
|
+
```
|
|
862
|
+
**Rule:** Arcs apply only to spatial motion. Opacity, scale, and color changes do not arc.
|
|
863
|
+
|
|
864
|
+
---
|
|
865
|
+
|
|
866
|
+
### 8. Secondary Action
|
|
867
|
+
|
|
868
|
+
**Animation:** A supporting action that reinforces the primary one (e.g., a character's hair bouncing while they walk).
|
|
869
|
+
|
|
870
|
+
**UX mapping:** A small supplementary animation that confirms and amplifies the main interaction.
|
|
871
|
+
- Toast notification: icon pulses briefly after the toast appears (secondary action confirming the event)
|
|
872
|
+
- Success state: checkmark draws itself after the confirmation color appears
|
|
873
|
+
- Delete: item fades + the list count badge decrements with a small number-flip animation
|
|
874
|
+
|
|
875
|
+
**Rule:** Secondary actions must complete before or simultaneously with the primary — never after. They reinforce, not extend.
|
|
876
|
+
|
|
877
|
+
---
|
|
878
|
+
|
|
879
|
+
### 9. Timing
|
|
880
|
+
|
|
881
|
+
**Animation:** Duration communicates physical weight. Fast = light and snappy. Slow = heavy and significant.
|
|
882
|
+
|
|
883
|
+
**UX mapping:**
|
|
884
|
+
|
|
885
|
+
| Duration | Use for |
|
|
886
|
+
|---|---|
|
|
887
|
+
| 80–120ms | Micro-interactions: hover states, active states, icon swaps |
|
|
888
|
+
| 150–200ms | Standard component transitions: dropdowns, tooltips, toasts |
|
|
889
|
+
| 220–300ms | Page-level state changes, drawer open/close, modal appear |
|
|
890
|
+
| 300–500ms | Full-page route transitions |
|
|
891
|
+
| > 500ms | Reserved for intentionally cinematic moments only |
|
|
892
|
+
|
|
893
|
+
**Rule:** Match duration to the visual weight of the element. A small icon swap at 300ms feels lethargic; a full-page transition at 80ms feels jarring.
|
|
894
|
+
|
|
895
|
+
---
|
|
896
|
+
|
|
897
|
+
### 10. Exaggeration
|
|
898
|
+
|
|
899
|
+
**Animation:** Push key poses slightly beyond reality for emphasis and clarity.
|
|
900
|
+
|
|
901
|
+
**UX mapping:** Slight overshoot in spring animations communicates energy and intention.
|
|
902
|
+
```tsx
|
|
903
|
+
// Slight overshoot via underdamped spring — not bouncy, but alive
|
|
904
|
+
<motion.div
|
|
905
|
+
animate={{ scale: 1 }}
|
|
906
|
+
transition={{ type: "spring", stiffness: 400, damping: 22, mass: 0.8 }}
|
|
907
|
+
/>
|
|
908
|
+
// Peak scale ≈ 1.03–1.05 before settling — imperceptible consciously, felt physically
|
|
909
|
+
```
|
|
910
|
+
**Rule:** Exaggeration in UI should be invisible when you're looking for it. If users notice the bounce, it's too much. Target spring `bounce` values of 0.1–0.2.
|
|
911
|
+
|
|
912
|
+
---
|
|
913
|
+
|
|
914
|
+
### 11. Solid Drawing
|
|
915
|
+
|
|
916
|
+
**Animation:** Characters have weight, depth, and obey perspective; they feel three-dimensional.
|
|
917
|
+
|
|
918
|
+
**UX mapping:** UI elements should feel visually grounded — not floating. Shadows, depth layering, and transform-origin choices communicate which layer an element lives on.
|
|
919
|
+
- Drawers and sheets slide from an edge — they feel physically attached
|
|
920
|
+
- Modals emerge from center or from the triggering element — they float above the page
|
|
921
|
+
- Tooltips appear near the cursor — they are attached to the pointer
|
|
922
|
+
- `transform-origin` must match where the element conceptually emerges from
|
|
923
|
+
|
|
924
|
+
---
|
|
925
|
+
|
|
926
|
+
### 12. Appeal
|
|
927
|
+
|
|
928
|
+
**Animation:** Characters have a quality that makes the audience want to watch them — not necessarily cute, but interesting.
|
|
929
|
+
|
|
930
|
+
**UX mapping:** Animation has personality that is consistent with the product's brand.
|
|
931
|
+
|
|
932
|
+
| Product type | Animation personality |
|
|
933
|
+
|---|---|
|
|
934
|
+
| Financial / serious tools | Crisp, minimal, sub-150ms, no bounce |
|
|
935
|
+
| Consumer apps | Warm, slightly slower, gentle ease-out |
|
|
936
|
+
| Playful / creative tools | Spring physics, slight overshoot, expressive icon animations |
|
|
937
|
+
| Data dashboards | Smooth, purposeful, transitions that reveal data sequentially |
|
|
938
|
+
|
|
939
|
+
**Rule:** Animation personality must be decided once per product and applied consistently. Mixed personalities (snappy in one area, bouncy in another) destroy cohesion.
|
|
940
|
+
|
|
941
|
+
---
|
|
753
942
|
|
|
754
943
|
See also: `reference/motion-easings.md`, `reference/motion-spring.md`, `reference/framer-motion-patterns.md`
|
package/reference/registry.json
CHANGED
|
@@ -3,6 +3,27 @@
|
|
|
3
3
|
"version": 1,
|
|
4
4
|
"generated_at": "2026-04-24T00:00:00.000Z",
|
|
5
5
|
"entries": [
|
|
6
|
+
{
|
|
7
|
+
"name": "component-authoring",
|
|
8
|
+
"path": "reference/component-authoring.md",
|
|
9
|
+
"type": "heuristic",
|
|
10
|
+
"phase": 19.6,
|
|
11
|
+
"description": "Kowalski/Sonner 6-principle component quality standard (P-01 Minimal API, P-02 Composability, P-03 Defaults, P-04 Animation as State, P-05 Accessibility First, P-06 Edge Honesty) with grep-able audit signals"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"name": "emotional-design",
|
|
15
|
+
"path": "reference/emotional-design.md",
|
|
16
|
+
"type": "heuristic",
|
|
17
|
+
"phase": 19.6,
|
|
18
|
+
"description": "Don Norman's visceral/behavioral/reflective three-level cross-cutting scoring lens with per-level rubrics and cross-level conflict patterns"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "first-principles",
|
|
22
|
+
"path": "reference/first-principles.md",
|
|
23
|
+
"type": "heuristic",
|
|
24
|
+
"phase": 19.6,
|
|
25
|
+
"description": "3-invariant framework (body/attention/memory) with grep-able principle→code pairs and reducibility test; wired into design-discussant brief stage"
|
|
26
|
+
},
|
|
6
27
|
{
|
|
7
28
|
"name": "DEPRECATIONS",
|
|
8
29
|
"path": "reference/DEPRECATIONS.md",
|
|
@@ -380,6 +401,13 @@
|
|
|
380
401
|
"type": "heuristic",
|
|
381
402
|
"description": "Nav pattern catalog, menu-depth rules, card sort/tree test benchmarks, wayfinding, faceted nav"
|
|
382
403
|
},
|
|
404
|
+
{
|
|
405
|
+
"name": "insight-line.schema",
|
|
406
|
+
"path": "reference/schemas/insight-line.schema.json",
|
|
407
|
+
"type": "schema",
|
|
408
|
+
"tier": "haiku",
|
|
409
|
+
"description": "JSONL schema for agent run-end insight lines written to .design/intel/insights.jsonl"
|
|
410
|
+
},
|
|
383
411
|
{
|
|
384
412
|
"name": "intel-schema",
|
|
385
413
|
"path": "reference/intel-schema.md",
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
|
3
|
+
"title": "AgentInsightLine",
|
|
4
|
+
"description": "One JSONL line appended by an agent to .design/intel/insights.jsonl at run-end.",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"required": ["ts", "agent", "cycle", "stage", "one_line_insight", "artifacts_written"],
|
|
7
|
+
"additionalProperties": false,
|
|
8
|
+
"properties": {
|
|
9
|
+
"ts": {
|
|
10
|
+
"type": "string",
|
|
11
|
+
"format": "date-time",
|
|
12
|
+
"description": "ISO 8601 timestamp of the agent run completion."
|
|
13
|
+
},
|
|
14
|
+
"agent": {
|
|
15
|
+
"type": "string",
|
|
16
|
+
"description": "Agent name matching the frontmatter 'name' field (e.g. 'design-planner')."
|
|
17
|
+
},
|
|
18
|
+
"cycle": {
|
|
19
|
+
"type": "string",
|
|
20
|
+
"description": "Active cycle ID from STATE.md (e.g. 'cycle-1'). Empty string if not in a cycle."
|
|
21
|
+
},
|
|
22
|
+
"stage": {
|
|
23
|
+
"type": "string",
|
|
24
|
+
"description": "Pipeline stage from STATE.md (e.g. 'plan', 'design', 'verify')."
|
|
25
|
+
},
|
|
26
|
+
"one_line_insight": {
|
|
27
|
+
"type": "string",
|
|
28
|
+
"maxLength": 200,
|
|
29
|
+
"description": "One declarative sentence: what this agent produced or learned this run."
|
|
30
|
+
},
|
|
31
|
+
"artifacts_written": {
|
|
32
|
+
"type": "array",
|
|
33
|
+
"items": { "type": "string" },
|
|
34
|
+
"description": "Relative paths of files written during this run. Empty array for read-only agents."
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -26,6 +26,16 @@ Do not reorder. Do not inline this preamble. Do not splice dynamic content ahead
|
|
|
26
26
|
|
|
27
27
|
The `/gdd:warm-cache` command (ships in Plan 10.1-02) pre-warms this identical prefix in the Anthropic cache before a design sprint, so the first real agent spawn of the sprint is already a cache hit on the shared-preamble bytes. You do not need to do anything special to participate — just keep the import directive at the top of your body.
|
|
28
28
|
|
|
29
|
+
## Design Philosophy Layer (Phase 19.6)
|
|
30
|
+
|
|
31
|
+
The framework is anchored to three design philosophy references that agents may read during brief, audit, and verify stages:
|
|
32
|
+
|
|
33
|
+
- `reference/first-principles.md` — 3-invariant framework (body, attention, memory); reducibility test for every design element
|
|
34
|
+
- `reference/emotional-design.md` — Norman's visceral / behavioral / reflective cross-cutting scoring lens
|
|
35
|
+
- `reference/component-authoring.md` — Kowalski/Sonner 6-principle component quality standard (P-01 through P-06)
|
|
36
|
+
|
|
37
|
+
These references encode *why* the heuristics and anti-patterns exist — not rules to follow, but constraints derived from human biology and cognition. Agents that read these files apply them as lenses, not checklists.
|
|
38
|
+
|
|
29
39
|
---
|
|
30
40
|
|
|
31
41
|
*Imported by: every file under `agents/*.md` (except `agents/README.md`). Maintained as part of Phase 10.1 (OPT-07) and Phase 14.5 (L0/L2 split). Edits to this file affect every agent simultaneously — verify across the full agent suite before committing.*
|