wizz-method 1.3.2 → 1.4.0
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/package.json +1 -1
- package/skills-registry.yaml +12 -2
- package/src/skills-lib/ai-product-design/SKILL.md +85 -0
- package/src/skills-lib/ai-product-design/references/LICENSE +21 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/bias-detection-design/SKILL.md +37 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/consent-and-agency/SKILL.md +37 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/escalation-design/SKILL.md +40 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/guardrail-design/SKILL.md +36 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/harm-anticipation/SKILL.md +108 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/transparency-patterns/SKILL.md +36 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/trust-calibration/SKILL.md +102 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/value-specification/SKILL.md +39 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/agent-role-design/SKILL.md +37 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/failure-recovery/SKILL.md +37 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/handoff-protocols/SKILL.md +45 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/human-in-the-loop/SKILL.md +39 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/observability-design/SKILL.md +48 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/state-management/SKILL.md +95 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/task-decomposition/SKILL.md +36 -0
- package/src/skills-lib/ai-product-design/references/evaluation/comparative-evaluation/SKILL.md +39 -0
- package/src/skills-lib/ai-product-design/references/evaluation/failure-taxonomy/SKILL.md +47 -0
- package/src/skills-lib/ai-product-design/references/evaluation/heuristic-evaluation-ai/SKILL.md +46 -0
- package/src/skills-lib/ai-product-design/references/evaluation/longitudinal-measurement/SKILL.md +38 -0
- package/src/skills-lib/ai-product-design/references/evaluation/output-quality-rubrics/SKILL.md +41 -0
- package/src/skills-lib/ai-product-design/references/evaluation/task-success-metrics/SKILL.md +35 -0
- package/src/skills-lib/ai-product-design/references/evaluation/user-satisfaction-signals/SKILL.md +50 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/context-window-design/SKILL.md +28 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/conversation-patterns/SKILL.md +37 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/feedback-loops/SKILL.md +35 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/frustration-detection/SKILL.md +91 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/generative-ui/SKILL.md +34 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/mixed-initiative-flow/SKILL.md +39 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/multimodal-orchestration/SKILL.md +94 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/progressive-disclosure/SKILL.md +33 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/chain-of-thought-design/SKILL.md +45 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/constraint-specification/SKILL.md +50 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/context-engineering/SKILL.md +45 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/few-shot-patterns/SKILL.md +47 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/prompt-versioning/SKILL.md +42 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/system-prompt-structure/SKILL.md +50 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/template-design/SKILL.md +42 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/behavioral-consistency/SKILL.md +36 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/cultural-adaptation/SKILL.md +38 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/domain-voice/SKILL.md +51 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/emotional-design/SKILL.md +51 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/error-personality/SKILL.md +45 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/persona-architecture/SKILL.md +38 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/tone-calibration/SKILL.md +39 -0
- package/src/skills-lib/algorithmic-art/LICENSE.txt +202 -0
- package/src/skills-lib/algorithmic-art/SKILL.md +405 -0
- package/src/skills-lib/algorithmic-art/templates/generator_template.js +223 -0
- package/src/skills-lib/algorithmic-art/templates/viewer.html +599 -0
- package/src/skills-lib/animate/README.md +41 -0
- package/src/skills-lib/animate/SKILL.md +179 -0
- package/src/skills-lib/animate/examples/animate-height.tsx +75 -0
- package/src/skills-lib/animate/examples/app-store-card.tsx +164 -0
- package/src/skills-lib/animate/examples/card-hover.tsx +79 -0
- package/src/skills-lib/animate/examples/feedback-popover.tsx +119 -0
- package/src/skills-lib/animate/examples/multi-step-flow.tsx +128 -0
- package/src/skills-lib/animate/examples/shared-layout.tsx +64 -0
- package/src/skills-lib/animate/examples/text-reveal.tsx +70 -0
- package/src/skills-lib/animate/examples/toast-stacking.tsx +95 -0
- package/src/skills-lib/animate/references/css-animations.md +232 -0
- package/src/skills-lib/animate/references/easing-and-timing.md +105 -0
- package/src/skills-lib/animate/references/framer-motion.md +356 -0
- package/src/skills-lib/animate/references/performance-accessibility.md +185 -0
- package/src/skills-lib/auth-and-secrets/SKILL.md +10 -0
- package/src/skills-lib/canvas-design/LICENSE.txt +202 -0
- package/src/skills-lib/canvas-design/SKILL.md +130 -0
- package/src/skills-lib/canvas-design/canvas-fonts/ArsenalSC-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/ArsenalSC-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BigShoulders-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BigShoulders-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BigShoulders-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Boldonse-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Boldonse-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BricolageGrotesque-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BricolageGrotesque-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BricolageGrotesque-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/CrimsonPro-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/CrimsonPro-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/CrimsonPro-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/CrimsonPro-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/DMMono-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/DMMono-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/EricaOne-OFL.txt +94 -0
- package/src/skills-lib/canvas-design/canvas-fonts/EricaOne-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/GeistMono-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/GeistMono-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/GeistMono-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Gloock-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Gloock-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexMono-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexMono-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexMono-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexSerif-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexSerif-BoldItalic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexSerif-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexSerif-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSans-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSans-BoldItalic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSans-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSans-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSans-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSerif-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSerif-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Italiana-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Italiana-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/JetBrainsMono-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/JetBrainsMono-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/JetBrainsMono-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Jura-Light.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Jura-Medium.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Jura-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/LibreBaskerville-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/LibreBaskerville-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Lora-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Lora-BoldItalic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Lora-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Lora-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Lora-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/NationalPark-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/NationalPark-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/NationalPark-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/NothingYouCouldDo-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/NothingYouCouldDo-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Outfit-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Outfit-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Outfit-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/PixelifySans-Medium.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/PixelifySans-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/PoiretOne-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/PoiretOne-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/RedHatMono-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/RedHatMono-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/RedHatMono-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Silkscreen-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Silkscreen-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/SmoochSans-Medium.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/SmoochSans-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Tektur-Medium.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Tektur-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Tektur-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/WorkSans-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/WorkSans-BoldItalic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/WorkSans-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/WorkSans-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/WorkSans-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/YoungSerif-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/YoungSerif-Regular.ttf +0 -0
- package/src/skills-lib/design-motion-principles/SKILL.md +122 -0
- package/src/skills-lib/design-motion-principles/references/accessibility.md +52 -0
- package/src/skills-lib/design-motion-principles/references/anti-checklist.md +274 -0
- package/src/skills-lib/design-motion-principles/references/audit-checklist.md +137 -0
- package/src/skills-lib/design-motion-principles/references/creation-gotchas.md +36 -0
- package/src/skills-lib/design-motion-principles/references/demo-shell.html +275 -0
- package/src/skills-lib/design-motion-principles/references/emil-kowalski.md +121 -0
- package/src/skills-lib/design-motion-principles/references/jakub-krehel.md +80 -0
- package/src/skills-lib/design-motion-principles/references/jhey-tompkins.md +122 -0
- package/src/skills-lib/design-motion-principles/references/motion-cookbook.md +529 -0
- package/src/skills-lib/design-motion-principles/references/output-format.md +346 -0
- package/src/skills-lib/design-motion-principles/references/performance.md +82 -0
- package/src/skills-lib/design-motion-principles/references/report-template.html +1006 -0
- package/src/skills-lib/design-motion-principles/workflows/audit.md +203 -0
- package/src/skills-lib/design-motion-principles/workflows/create.md +87 -0
- package/src/skills-lib/web-security/SKILL.md +47 -4
- package/src/skills-lib/wizz-router/SKILL.md +4 -1
package/src/skills-lib/ai-product-design/references/evaluation/user-satisfaction-signals/SKILL.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: user-satisfaction-signals
|
|
3
|
+
description: Interpreting implicit and explicit feedback — edits, regenerations, abandonment.
|
|
4
|
+
---
|
|
5
|
+
# User Satisfaction Signals
|
|
6
|
+
Users rarely tell you directly whether they're satisfied. Most satisfaction signals are implicit — buried in behavior patterns that you have to design systems to capture and interpret.
|
|
7
|
+
## Explicit Satisfaction Signals
|
|
8
|
+
These are signals users give intentionally:
|
|
9
|
+
- **Thumbs up/down**: Direct quality rating
|
|
10
|
+
- **Star ratings**: Graded satisfaction
|
|
11
|
+
- **Written feedback**: Comments about what worked or didn't
|
|
12
|
+
- **NPS or satisfaction surveys**: Periodic overall assessment
|
|
13
|
+
- **Feature requests**: Signals of engagement even when expressing a gap
|
|
14
|
+
## Implicit Satisfaction Signals
|
|
15
|
+
These are behavioral signals that indicate satisfaction or dissatisfaction:
|
|
16
|
+
**Positive signals:**
|
|
17
|
+
- Using the output as-is (no edits)
|
|
18
|
+
- Copying the output
|
|
19
|
+
- Returning to use the feature again
|
|
20
|
+
- Increasing usage over time
|
|
21
|
+
- Trying more advanced features
|
|
22
|
+
**Negative signals:**
|
|
23
|
+
- Regenerating the response (asking the AI to try again)
|
|
24
|
+
- Editing the output heavily
|
|
25
|
+
- Rephrasing the same request multiple times
|
|
26
|
+
- Abandoning mid-task
|
|
27
|
+
- Decreasing usage over time
|
|
28
|
+
- Switching to manual methods
|
|
29
|
+
**Ambiguous signals:**
|
|
30
|
+
- Long sessions (engaged or struggling?)
|
|
31
|
+
- Many turns (deep work or frustrated iteration?)
|
|
32
|
+
- Silence after a response (satisfied or confused?)
|
|
33
|
+
## Designing Signal Collection
|
|
34
|
+
- **Instrument the product**: Track edits, regenerations, copy events, session duration, and return patterns
|
|
35
|
+
- **Minimise explicit feedback burden**: Don't ask for ratings on every response
|
|
36
|
+
- **Contextualise signals**: A regeneration during creative brainstorming means something different than a regeneration during fact-finding
|
|
37
|
+
- **Segment by task type**: Satisfaction patterns vary by what the user is trying to do
|
|
38
|
+
- **Combine signals**: No single signal is reliable. Look for patterns across multiple signals.
|
|
39
|
+
## From Signals to Insights
|
|
40
|
+
Raw signals need interpretation:
|
|
41
|
+
- **Signal clustering**: Which negative signals appear together? That pattern indicates a specific problem.
|
|
42
|
+
- **Trend analysis**: Are signals improving or degrading over time?
|
|
43
|
+
- **Cohort comparison**: Do new users show different signals than experienced users?
|
|
44
|
+
- **Correlation with outcomes**: Which signals best predict task success or retention?
|
|
45
|
+
## Design Artefacts
|
|
46
|
+
- Signal inventory (explicit and implicit) with collection methods
|
|
47
|
+
- Signal interpretation guidelines
|
|
48
|
+
- Satisfaction dashboard specifications
|
|
49
|
+
- Signal-to-insight analysis frameworks
|
|
50
|
+
- Feedback collection touchpoint map
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: context-window-design
|
|
3
|
+
description: Designing around token limits, memory, and conversation persistence.
|
|
4
|
+
---
|
|
5
|
+
# Context Window Design
|
|
6
|
+
Every AI model has a finite context window. Designing within this constraint — and designing the user experience around it — is a core skill for AI product design.
|
|
7
|
+
## The Context Window as a Design Material
|
|
8
|
+
The context window is not just a technical limitation. It's a design material:
|
|
9
|
+
- **What goes in**: System prompts, conversation history, retrieved documents, tool results, user preferences
|
|
10
|
+
- **What gets dropped**: Older messages, less relevant context, verbose instructions
|
|
11
|
+
- **What the user sees**: The conversation as presented may differ from what the model actually processes
|
|
12
|
+
Designers must understand context window allocation to design reliable experiences.
|
|
13
|
+
## Memory and Persistence
|
|
14
|
+
Users expect AI to remember. Design for different memory horizons:
|
|
15
|
+
- **Within-conversation memory**: What was said earlier in this chat. Usually handled by the context window itself.
|
|
16
|
+
- **Cross-conversation memory**: Preferences, past decisions, ongoing projects. Requires explicit memory systems.
|
|
17
|
+
- **Shared memory**: Context shared across multiple users or agents. Requires careful privacy design.
|
|
18
|
+
## Strategies for Limited Context
|
|
19
|
+
- **Summarisation**: Compress earlier conversation into summaries to free up tokens
|
|
20
|
+
- **Retrieval-augmented generation**: Pull in relevant context on demand rather than keeping everything loaded
|
|
21
|
+
- **Priority ordering**: Put the most important context closest to the prompt (recency bias in attention)
|
|
22
|
+
- **User-controlled context**: Let users pin, remove, or prioritise what the AI remembers
|
|
23
|
+
- **Graceful degradation**: When context is lost, acknowledge it rather than hallucinating continuity
|
|
24
|
+
## Design Artefacts
|
|
25
|
+
- Context budget allocations (how many tokens for system prompt, history, retrieval, etc.)
|
|
26
|
+
- Memory architecture diagrams showing what persists and what's ephemeral
|
|
27
|
+
- Context overflow UX flows (what happens when the window fills up)
|
|
28
|
+
- User-facing memory controls specification
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: conversation-patterns
|
|
3
|
+
description: Turn-taking, repair sequences, grounding, and dialogue structure for human-AI interaction.
|
|
4
|
+
---
|
|
5
|
+
# Conversation Patterns
|
|
6
|
+
Conversation between humans and AI follows predictable structural patterns. Designing these deliberately — rather than leaving them to model defaults — is core interaction design work.
|
|
7
|
+
## Turn-Taking Structure
|
|
8
|
+
Every human-AI conversation has a rhythm. The designer decides:
|
|
9
|
+
- **Turn length**: Short exchanges (chatbot-style) vs. long-form (essay generation). Match turn length to task complexity.
|
|
10
|
+
- **Turn initiation**: Who speaks first? Does the AI greet, or wait? Does it ask a clarifying question before acting?
|
|
11
|
+
- **Turn boundaries**: How does the user signal "I'm done"? How does the AI signal "I need more"?
|
|
12
|
+
## Repair Sequences
|
|
13
|
+
Conversations break down. Repair is how they recover:
|
|
14
|
+
- **Self-repair**: The AI detects its own error and corrects ("Actually, let me revise that...")
|
|
15
|
+
- **Other-repair**: The user corrects the AI ("No, I meant the other one")
|
|
16
|
+
- **Clarification requests**: The AI asks for disambiguation before proceeding
|
|
17
|
+
- **Graceful misunderstanding**: The AI acknowledges confusion without frustrating the user
|
|
18
|
+
Design repair sequences explicitly. Don't rely on the model to improvise them.
|
|
19
|
+
## Grounding
|
|
20
|
+
Grounding is how participants establish shared understanding:
|
|
21
|
+
- **Confirmation**: "Just to confirm, you want me to..."
|
|
22
|
+
- **Summarisation**: "So far we've covered X, Y, and Z"
|
|
23
|
+
- **Reference resolution**: Handling pronouns, anaphora, and ambiguous references
|
|
24
|
+
- **Context anchoring**: Reminding the user what the AI knows and doesn't know
|
|
25
|
+
## Dialogue Structure Patterns
|
|
26
|
+
Common structural patterns for human-AI conversation:
|
|
27
|
+
- **Interview**: AI asks questions, user answers, AI synthesises
|
|
28
|
+
- **Co-creation**: Turn-by-turn collaborative building
|
|
29
|
+
- **Instruction-execution**: User gives command, AI performs, user evaluates
|
|
30
|
+
- **Exploration**: Open-ended back-and-forth to discover possibilities
|
|
31
|
+
- **Guided workflow**: AI leads the user through a multi-step process
|
|
32
|
+
Choose the pattern that matches the task. Don't default to instruction-execution for everything.
|
|
33
|
+
## Design Artefacts
|
|
34
|
+
- Conversation flow diagrams showing turn sequences
|
|
35
|
+
- Repair protocol specifications
|
|
36
|
+
- Grounding checkpoints mapped to conversation stages
|
|
37
|
+
- Turn-taking rules per interaction context
|
package/src/skills-lib/ai-product-design/references/model-interaction-design/feedback-loops/SKILL.md
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: feedback-loops
|
|
3
|
+
description: User correction, thumbs up/down, inline editing, and reinforcement signals.
|
|
4
|
+
---
|
|
5
|
+
# Feedback Loops
|
|
6
|
+
Feedback loops are how users tell the AI what's working and what isn't. Designing these loops well is the difference between an AI that improves over time and one that repeats the same mistakes.
|
|
7
|
+
## Types of Feedback
|
|
8
|
+
- **Explicit feedback**: Thumbs up/down, star ratings, "this was helpful/not helpful" buttons
|
|
9
|
+
- **Implicit feedback**: Regeneration (user asks again), editing (user modifies the output), abandonment (user leaves)
|
|
10
|
+
- **Corrective feedback**: User provides the right answer ("No, I meant X not Y")
|
|
11
|
+
- **Preference feedback**: User chooses between alternatives ("I prefer option B")
|
|
12
|
+
- **Contextual feedback**: Feedback tied to a specific part of the output, not the whole response
|
|
13
|
+
## Designing for Correction
|
|
14
|
+
The most valuable feedback is correction — but it's also the hardest to design for:
|
|
15
|
+
- **Inline editing**: Let users edit AI output directly. Track what they change.
|
|
16
|
+
- **Partial acceptance**: Let users keep some parts and reject others.
|
|
17
|
+
- **Explanation requests**: "Why did you do it this way?" — the user's question reveals what went wrong.
|
|
18
|
+
- **Redo with guidance**: "Try again but make it more formal" — correction through re-prompting.
|
|
19
|
+
## Feedback Timing
|
|
20
|
+
When to ask for feedback matters:
|
|
21
|
+
- **Too early**: User hasn't evaluated the output yet. Feedback is premature.
|
|
22
|
+
- **Too late**: User has moved on. The moment for feedback has passed.
|
|
23
|
+
- **Interruptive**: Modal dialogs or required ratings break flow.
|
|
24
|
+
- **Ambient**: Passive signals (edits, regeneration) collected without asking.
|
|
25
|
+
Design for ambient feedback first. Add explicit feedback sparingly.
|
|
26
|
+
## Closing the Loop
|
|
27
|
+
Feedback is only valuable if it changes something. The user needs to see that their feedback matters:
|
|
28
|
+
- **Immediate adaptation**: The AI adjusts in the current conversation
|
|
29
|
+
- **Persistent learning**: The AI remembers preferences across sessions
|
|
30
|
+
- **Acknowledgment**: "I'll keep that in mind" — even if adaptation is delayed
|
|
31
|
+
## Design Artefacts
|
|
32
|
+
- Feedback mechanism inventory per feature
|
|
33
|
+
- Implicit signal definitions (what counts as positive/negative)
|
|
34
|
+
- Feedback-to-adaptation mapping (what changes based on what feedback)
|
|
35
|
+
- Correction flow specifications
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frustration-detection
|
|
3
|
+
description: Reading user emotional state from text signals — caps, punctuation density, repetition, latency — and adapting before the user disengages.
|
|
4
|
+
---
|
|
5
|
+
# Frustration Detection
|
|
6
|
+
|
|
7
|
+
Most AI products treat every user message as having the same emotional weight. They don't. "Cancel my subscription." and "PLEASE just cancel my subscription!!!" deserve different responses. Frustration detection is the perception skill that picks up the signal so the rest of the system can adapt.
|
|
8
|
+
|
|
9
|
+
This is the unnamed skill that sits behind tone calibration, escalation design, and graceful repair. Without it, those skills can't fire at the right moment.
|
|
10
|
+
|
|
11
|
+
## Signals
|
|
12
|
+
|
|
13
|
+
**Linguistic**
|
|
14
|
+
- Capitalisation shifts: ALL CAPS, sudden "PLEASE", "URGENT"
|
|
15
|
+
- Punctuation density: `?!?!`, `....`, multiple `!!`
|
|
16
|
+
- Hedge-stripping: terse, demand-form ("just fix it", "stop")
|
|
17
|
+
- Repetition: same concept restated across turns
|
|
18
|
+
- Profanity (mild or strong)
|
|
19
|
+
|
|
20
|
+
**Structural**
|
|
21
|
+
- Decreasing turn latency (rapid-fire replies)
|
|
22
|
+
- Increasing turn latency past a threshold (walk-away)
|
|
23
|
+
- Re-asking the same question after a response
|
|
24
|
+
- Explicit human-handoff request ("speak to a person")
|
|
25
|
+
- Sudden topic switches
|
|
26
|
+
|
|
27
|
+
**Lexical / affect**
|
|
28
|
+
- Negative affect words ("useless", "annoying", "broken")
|
|
29
|
+
- Time-pressure words ("now", "immediately", "deadline")
|
|
30
|
+
- Doubt words ("really?", "are you sure", "is that right")
|
|
31
|
+
- Disengagement words ("never mind", "forget it", "whatever", "fine")
|
|
32
|
+
|
|
33
|
+
Detection should be cumulative across signals and turns, not single-feature.
|
|
34
|
+
|
|
35
|
+
## Decision rules
|
|
36
|
+
|
|
37
|
+
- **One signal is noise; two is a pattern.** Don't act on a single CAPS message; act when CAPS plus repetition appear.
|
|
38
|
+
- **If frustration is rising AND the AI has already attempted a fix once, escalate.** Don't reach for a third rephrase.
|
|
39
|
+
- **Urgency without frustration ≠ frustration.** Speed up; don't change tone.
|
|
40
|
+
- **Long latency after a long AI response is a walk-away, not deep reading.** Save state, offer re-engagement, don't continue.
|
|
41
|
+
- **Adapt silently. Don't name the emotion.** "I sense you're frustrated" is patronising. Lower confidence, slow pace, raise warmth — but in the prose, not the meta-commentary.
|
|
42
|
+
|
|
43
|
+
## Anti-patterns
|
|
44
|
+
|
|
45
|
+
- **Emotion mirroring as performance**: "I'm so sorry to hear that!" reads as scripted at scale.
|
|
46
|
+
- **Asking the user to confirm their state**: "Are you frustrated?" The user came to get help, not be analysed.
|
|
47
|
+
- **One-shot detection**: a single signal triggers a full empathy cascade. Detection must be cumulative.
|
|
48
|
+
- **Detection without action**: reading the signal and continuing the same playbook makes the detection performative.
|
|
49
|
+
- **Over-empathy**: two paragraphs of validation where one sentence and a fix would do. A frustrated user has no bandwidth for warmth.
|
|
50
|
+
|
|
51
|
+
## When not to use this
|
|
52
|
+
|
|
53
|
+
- **Transactional UIs** (search box, code completion) — there's no conversational drift to read. Reach for `feedback-loops` instead.
|
|
54
|
+
- **First-turn cold starts** — detection is comparative; you need a baseline. Treat first-turn signals as descriptive, not diagnostic.
|
|
55
|
+
- **Products with explicit feedback controls** (thumbs down, "this isn't helping") — the user has the controls; don't bolt on inference.
|
|
56
|
+
|
|
57
|
+
## See also
|
|
58
|
+
|
|
59
|
+
- `tone-calibration` — what to do once you've detected the signal: lower confidence, slow pace, raise warmth.
|
|
60
|
+
- `escalation-design` — frustration is one of the documented escalation triggers; this skill is how you detect that trigger.
|
|
61
|
+
- `feedback-loops` — the cousin that handles ambient signals about *output quality*; this one handles ambient signals about *user state*.
|
|
62
|
+
- `harm-anticipation` — when frustration shades into distress (crisis markers, vulnerability), route through harm anticipation for elevated handling.
|
|
63
|
+
|
|
64
|
+
## Design Artefacts
|
|
65
|
+
|
|
66
|
+
A frustration scorecard, scored cumulatively per session:
|
|
67
|
+
|
|
68
|
+
| Signal | Weight |
|
|
69
|
+
| --- | --- |
|
|
70
|
+
| ALL CAPS message | +2 |
|
|
71
|
+
| Profanity | +3 |
|
|
72
|
+
| Repeated question (3rd+ time) | +2 |
|
|
73
|
+
| `!!` or `??` punctuation | +1 |
|
|
74
|
+
| Explicit handoff request | +5 |
|
|
75
|
+
| Disengagement word ("forget it") | +3 |
|
|
76
|
+
| Long latency (>3 min after AI response) | +2 |
|
|
77
|
+
|
|
78
|
+
Threshold for escalation: 5. Threshold for tone shift: 2.
|
|
79
|
+
|
|
80
|
+
Worked example:
|
|
81
|
+
- Turn 1: "hey can you help me cancel my order" → 0
|
|
82
|
+
- Turn 2: "the cancel button isn't working" → 0 (problem statement, not frustration)
|
|
83
|
+
- Turn 3: "i've tried 3 times PLEASE" → +4 (CAPS, repetition, "please") → score 4 → tone shift
|
|
84
|
+
- Turn 4: "this is USELESS" → +2 (CAPS) +3 (negative affect) → score 9 → escalate
|
|
85
|
+
|
|
86
|
+
Other artefacts:
|
|
87
|
+
- Per-product baseline: average frustration score across the last 1000 sessions; alert on 2σ deviation
|
|
88
|
+
- Latency thresholds calibrated per product (chat support: 30 s engaged / 2 min disengaged)
|
|
89
|
+
- Test scenarios: happy path, slow rise, sudden spike, silent walk-away, recovery (score drops mid-session after fix)
|
|
90
|
+
|
|
91
|
+
Adapted from work on affective computing in conversational systems (Picard; Bickmore on emotional dialogue agents).
|
package/src/skills-lib/ai-product-design/references/model-interaction-design/generative-ui/SKILL.md
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: generative-ui
|
|
3
|
+
description: Designing interfaces where AI generates UI components dynamically.
|
|
4
|
+
---
|
|
5
|
+
# Generative UI
|
|
6
|
+
Generative UI is when the AI creates interface elements on the fly — forms, cards, charts, layouts — rather than responding with plain text. The interface itself becomes a model output.
|
|
7
|
+
## What Generative UI Changes
|
|
8
|
+
Traditional UI is designed ahead of time. Generative UI is created in the moment:
|
|
9
|
+
- **Static UI**: Designer creates all possible screens. Developer builds them. User navigates between them.
|
|
10
|
+
- **Generative UI**: The AI creates interface elements in response to user needs. No screen was pre-designed.
|
|
11
|
+
This shifts the designer's role from designing screens to designing the rules, constraints, and patterns the AI uses to generate screens.
|
|
12
|
+
## Design Constraints for Generated UI
|
|
13
|
+
The AI needs guardrails for what it generates:
|
|
14
|
+
- **Component library**: A defined set of components the AI can compose (cards, tables, forms, charts, buttons)
|
|
15
|
+
- **Layout rules**: Grid systems, spacing, hierarchy rules the AI must follow
|
|
16
|
+
- **Style boundaries**: Colour, typography, and visual style the AI must stay within
|
|
17
|
+
- **Interaction patterns**: How generated elements behave (clickable, editable, dismissible)
|
|
18
|
+
- **Accessibility requirements**: Generated UI must meet accessibility standards automatically
|
|
19
|
+
## When to Use Generative UI
|
|
20
|
+
Generative UI is powerful when:
|
|
21
|
+
- The output is structured data that benefits from visual presentation (tables, charts, comparisons)
|
|
22
|
+
- The user's request implies an interface (e.g., "show me a dashboard of...")
|
|
23
|
+
- Interactive elements would be more useful than text (e.g., forms, selectors, toggles)
|
|
24
|
+
- The content is highly variable and can't be pre-designed for every case
|
|
25
|
+
## When Not to Use It
|
|
26
|
+
- When plain text is clearer and simpler
|
|
27
|
+
- When the generated UI could be confusing or inconsistent
|
|
28
|
+
- When accessibility cannot be guaranteed
|
|
29
|
+
- When the user expects a predictable, stable interface
|
|
30
|
+
## Design Artefacts
|
|
31
|
+
- Generative UI component libraries (what the AI can use)
|
|
32
|
+
- Generation rules and constraints specification
|
|
33
|
+
- Quality criteria for generated interfaces
|
|
34
|
+
- Fallback designs for when generation fails
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: mixed-initiative-flow
|
|
3
|
+
description: When the AI leads vs. when the user leads, and how to hand off control.
|
|
4
|
+
---
|
|
5
|
+
# Mixed-Initiative Flow
|
|
6
|
+
Mixed-initiative interaction is when both the human and the AI can take the lead. The designer decides who drives at each moment — and how control transfers between them.
|
|
7
|
+
## Initiative Spectrum
|
|
8
|
+
Interactions sit on a spectrum:
|
|
9
|
+
- **User-driven**: The user gives instructions, the AI executes. The user controls pace, direction, and scope.
|
|
10
|
+
- **AI-driven**: The AI leads — asking questions, making suggestions, guiding the user through a process.
|
|
11
|
+
- **Shared**: Both parties contribute. The AI proposes, the user edits. The user starts, the AI finishes.
|
|
12
|
+
Most AI products default to user-driven. The interesting design space is in shared and AI-driven modes.
|
|
13
|
+
## Designing Initiative Handoffs
|
|
14
|
+
The moment control shifts from one party to the other is where most interactions fail. Design these transitions:
|
|
15
|
+
- **Explicit handoff**: "I've drafted three options. Which direction do you want to go?" — the AI clearly passes control.
|
|
16
|
+
- **Implicit handoff**: The AI stops generating and waits, signalling the user's turn through UI affordance.
|
|
17
|
+
- **Negotiated handoff**: "I could take this further or stop here for your input. What do you prefer?"
|
|
18
|
+
- **Forced handoff**: The AI encounters a decision it can't make and must hand back to the human.
|
|
19
|
+
## When the AI Should Lead
|
|
20
|
+
The AI should take initiative when:
|
|
21
|
+
- The user is uncertain or exploring and needs guidance
|
|
22
|
+
- The task has a known best-practice sequence the AI can walk through
|
|
23
|
+
- The user has explicitly asked for help or coaching
|
|
24
|
+
- Proactive suggestions would save time without being intrusive
|
|
25
|
+
## When the User Should Lead
|
|
26
|
+
The user should retain control when:
|
|
27
|
+
- The task involves subjective judgment or creative direction
|
|
28
|
+
- Stakes are high and errors are costly
|
|
29
|
+
- The user has strong domain expertise
|
|
30
|
+
- Privacy or consent decisions are involved
|
|
31
|
+
## Anti-Patterns
|
|
32
|
+
- **Initiative whiplash**: Control bouncing back and forth too rapidly
|
|
33
|
+
- **Passive AI**: Never taking initiative even when it would help
|
|
34
|
+
- **Overbearing AI**: Taking over when the user wants control
|
|
35
|
+
- **Unclear ownership**: Neither party knows whose turn it is
|
|
36
|
+
## Design Artefacts
|
|
37
|
+
- Initiative maps showing who leads at each stage
|
|
38
|
+
- Handoff trigger definitions (what causes a transfer of control)
|
|
39
|
+
- Autonomy level specifications per feature area
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: multimodal-orchestration
|
|
3
|
+
description: Coordinating text, image, voice, and tool-use modalities in a single interaction.
|
|
4
|
+
---
|
|
5
|
+
# Multimodal Orchestration
|
|
6
|
+
|
|
7
|
+
AI interactions increasingly span multiple modalities — text, images, voice, code, tools, structured data. Designing how these modalities work together is orchestration. The risk on every team: switching modality because it's *available*, not because it serves the user.
|
|
8
|
+
|
|
9
|
+
The point of multimodal isn't to use every modality. It's to use the right one at the right moment, and to handle the seams.
|
|
10
|
+
|
|
11
|
+
## Modality selection
|
|
12
|
+
|
|
13
|
+
Each modality has strengths:
|
|
14
|
+
|
|
15
|
+
- **Text**: precise, editable, referenceable. Best for instructions, explanations, and nuanced content.
|
|
16
|
+
- **Image**: spatial, holistic, immediate. Best for layouts, diagrams, and visual concepts.
|
|
17
|
+
- **Voice**: natural, hands-free, emotional. Best for conversational flow and accessibility.
|
|
18
|
+
- **Code**: executable, precise, verifiable. Best for technical specifications and automation.
|
|
19
|
+
- **Structured data**: tables, forms, JSON. Best for comparison, configuration, and data entry.
|
|
20
|
+
- **Tool use**: actions in external systems. Best for execution, not generation.
|
|
21
|
+
|
|
22
|
+
The designer decides which modality the AI uses for each part of a response — and which modality the user is invited to use for input.
|
|
23
|
+
|
|
24
|
+
## Cross-modal transitions
|
|
25
|
+
|
|
26
|
+
When the interaction switches modalities, design the transition:
|
|
27
|
+
|
|
28
|
+
- **Text → image**: "Here's what that layout could look like." AI generates a visual from a text description.
|
|
29
|
+
- **Image → text**: User uploads a screenshot; the AI describes or critiques it.
|
|
30
|
+
- **Text → tool**: AI writes a plan, then executes it.
|
|
31
|
+
- **Voice → text**: Spoken conversation captured and summarised as structured notes.
|
|
32
|
+
|
|
33
|
+
Transitions should feel seamless. The user shouldn't have to manually switch modes.
|
|
34
|
+
|
|
35
|
+
## Modality conflicts
|
|
36
|
+
|
|
37
|
+
Sometimes modalities compete:
|
|
38
|
+
|
|
39
|
+
- Text says one thing, the image shows another
|
|
40
|
+
- Voice tone contradicts text content
|
|
41
|
+
- Structured output doesn't match the conversational frame
|
|
42
|
+
|
|
43
|
+
Establish a primary modality per interaction context. Other modalities are *supporting* — they elaborate the primary, never override it.
|
|
44
|
+
|
|
45
|
+
## Decision rules
|
|
46
|
+
|
|
47
|
+
- **Pick the modality the user can act on, not the one the AI can produce.** A chart impresses if the user wanted a chart; if they wanted a number, the chart is overhead.
|
|
48
|
+
- **Always preserve a text trace.** Voice and image outputs are inaccessible to screen readers, unsearchable, and lost on session end. Even when text isn't primary, it's the audit log.
|
|
49
|
+
- **When modalities disagree, primary wins — and flag the conflict.** "The diagram shows three steps; the text mentions four — let me reconcile."
|
|
50
|
+
- **Modality switches need announcement OR trivial reversibility.** Either the user knows the mode is changing ("Here's a chart of that"), or they can dismiss the new modality in one tap.
|
|
51
|
+
- **Don't switch modalities mid-utterance.** Voice → image → voice in one turn breaks the user's processing rhythm. Group modality outputs at turn boundaries.
|
|
52
|
+
- **The input modality belongs to the user.** Never force the user out of the modality they chose to start with — the AI can output multimodally, but the user dictates input.
|
|
53
|
+
|
|
54
|
+
## Anti-patterns
|
|
55
|
+
|
|
56
|
+
- **Modality showcase**: switching to a flashy modality (chart, voice, generated UI) because the system *can*, not because the user *needs*. The user sees the trick, not the help.
|
|
57
|
+
- **Lossy translation**: converting between modalities loses information that mattered. Voice → text drops emphasis and pause; image → text drops spatial relationships. Capture what was lost or keep both.
|
|
58
|
+
- **Modality lock-in**: the AI replies in modality X and the user can only respond in modality X. A voice question demands a voice answer, even when the user is now in a meeting.
|
|
59
|
+
- **Unannounced switch**: modality changes mid-interaction without warning. Breaks accessibility, breaks user expectations, breaks screen-reader users completely.
|
|
60
|
+
- **Crossed primaries**: two modalities both present themselves as authoritative. The user doesn't know which to trust when they disagree.
|
|
61
|
+
- **Modality theatre**: structured output (JSON, table) used for content the user wanted as prose. Looks rigorous; reads worse.
|
|
62
|
+
|
|
63
|
+
## When not to use this
|
|
64
|
+
|
|
65
|
+
- **Single-modality products by design** — search bars, code completers, transcription tools. Don't add modalities just because the model supports them.
|
|
66
|
+
- **Constrained-input contexts** (driving, medical-glove use, low-bandwidth) — pick the one modality that works in that context and commit; orchestration overhead is dead weight.
|
|
67
|
+
- **Early prototypes** — get one modality working well before adding seams. Most multimodal failures are unreadiness in the primary modality.
|
|
68
|
+
|
|
69
|
+
## See also
|
|
70
|
+
|
|
71
|
+
- `generative-ui` — when the supporting modality *is* generated UI, this skill defines when to switch and `generative-ui` defines what to switch *to*.
|
|
72
|
+
- `conversation-patterns` — modality transitions are repair sequences in disguise; design them as such.
|
|
73
|
+
- `progressive-disclosure` — secondary modalities are often advanced features — disclose deliberately.
|
|
74
|
+
- `feedback-loops` — track which modality switches the user reverses; that's the loudest implicit-feedback signal you'll get.
|
|
75
|
+
|
|
76
|
+
## Design Artefacts
|
|
77
|
+
|
|
78
|
+
- Modality maps showing which modality is used at each interaction point
|
|
79
|
+
- Cross-modal transition specifications (trigger, content, fallback if modality unavailable)
|
|
80
|
+
- Input/output modality matrices per feature
|
|
81
|
+
- Fallback definitions when a modality is unavailable (slow connection, screen-reader, accessibility settings)
|
|
82
|
+
|
|
83
|
+
Worked example — modality matrix for a design-review feature:
|
|
84
|
+
|
|
85
|
+
| Stage | AI output (primary) | AI output (supporting) | User input | Why |
|
|
86
|
+
| --- | --- | --- | --- | --- |
|
|
87
|
+
| Upload feedback | text confirmation | — | image (mockup) | User in image-thinking mode; AI confirms in text for a record. |
|
|
88
|
+
| Critique | text (numbered) | annotated image overlay | text | Numbered text is referenceable; the overlay locates each point. |
|
|
89
|
+
| Suggest fix | annotated image | text rationale | text or click on point | User picks: visual fix (one tap) or written justification. |
|
|
90
|
+
| Iterate | text | image diff | image (revised mockup) | Iteration cycle — text dominates because the user wants comparison, not impression. |
|
|
91
|
+
|
|
92
|
+
Note the pattern: the AI uses the modality that matches the user's input *or* the modality that's most actionable, with text as the backbone. Image is supporting most of the time, primary only at the precise moment a visual change is being agreed.
|
|
93
|
+
|
|
94
|
+
Adapted from work on multimodal interfaces and the principle that modalities should map to the user's representation of the task, not the system's capabilities (Maybury & Wahlster on intelligent multimedia interfaces).
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: progressive-disclosure
|
|
3
|
+
description: Revealing AI capability gradually to match user mental models.
|
|
4
|
+
---
|
|
5
|
+
# Progressive Disclosure
|
|
6
|
+
Users don't understand what AI can do. Progressive disclosure is how you reveal capabilities at the right pace — preventing both overwhelm and underuse.
|
|
7
|
+
## The Mental Model Gap
|
|
8
|
+
Users arrive with mental models shaped by previous technology. They may:
|
|
9
|
+
- Treat the AI like a search engine (keyword queries)
|
|
10
|
+
- Treat it like a form (expecting rigid structure)
|
|
11
|
+
- Underestimate what it can do (asking for less than it offers)
|
|
12
|
+
- Overestimate what it can do (expecting perfection)
|
|
13
|
+
Progressive disclosure bridges the gap between what users think the AI does and what it actually does.
|
|
14
|
+
## Disclosure Strategies
|
|
15
|
+
- **On-demand hints**: Show capability suggestions contextually ("Did you know you can also ask me to...")
|
|
16
|
+
- **Escalating examples**: Start with simple use cases, reveal complex ones as the user gains confidence
|
|
17
|
+
- **Feature graduation**: Unlock advanced features after the user demonstrates comfort with basics
|
|
18
|
+
- **Contextual teaching**: When the user attempts something inefficiently, show a better approach
|
|
19
|
+
- **Capability boundaries**: Clearly communicate what the AI cannot do, not just what it can
|
|
20
|
+
## Layered Capability Revelation
|
|
21
|
+
Structure capabilities in layers:
|
|
22
|
+
1. **Surface layer**: The most obvious, lowest-risk capabilities. Users discover these immediately.
|
|
23
|
+
2. **Intermediate layer**: More powerful features revealed through tooltips, suggestions, or first-use prompts.
|
|
24
|
+
3. **Power layer**: Advanced capabilities for experienced users — available but not promoted.
|
|
25
|
+
## Pacing
|
|
26
|
+
- **Too fast**: Users feel overwhelmed, ignore capabilities, or lose trust
|
|
27
|
+
- **Too slow**: Users get bored, think the product is limited, churn
|
|
28
|
+
- **Just right**: Each new capability feels like a natural next step
|
|
29
|
+
## Design Artefacts
|
|
30
|
+
- Capability disclosure maps showing what's revealed when
|
|
31
|
+
- Mental model progression diagrams
|
|
32
|
+
- First-use experience flows with disclosure triggers
|
|
33
|
+
- Capability tier definitions (surface, intermediate, power)
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: chain-of-thought-design
|
|
3
|
+
description: Designing reasoning chains that produce better outputs.
|
|
4
|
+
---
|
|
5
|
+
# Chain-of-Thought Design
|
|
6
|
+
Chain-of-thought prompting asks the AI to show its reasoning step by step before arriving at an answer. When designed well, this produces more accurate, more nuanced, and more trustworthy outputs. When designed poorly, it produces verbose justification of bad answers.
|
|
7
|
+
## When Chain-of-Thought Helps
|
|
8
|
+
- **Complex reasoning**: Multi-step problems where the answer depends on intermediate conclusions
|
|
9
|
+
- **Ambiguous inputs**: When the AI needs to consider multiple interpretations
|
|
10
|
+
- **High-stakes outputs**: When you need to verify the reasoning, not just the answer
|
|
11
|
+
- **Creative exploration**: When generating ideas benefits from building on each step
|
|
12
|
+
- **Analytical tasks**: Comparisons, evaluations, and trade-off analyses
|
|
13
|
+
## When Chain-of-Thought Hurts
|
|
14
|
+
- **Simple lookups**: "What's the capital of France?" doesn't need step-by-step reasoning
|
|
15
|
+
- **Speed-critical responses**: Reasoning adds latency and token cost
|
|
16
|
+
- **Pattern-matching tasks**: Some tasks are better served by direct response
|
|
17
|
+
- **When reasoning is wrong**: The AI can reason convincingly toward an incorrect conclusion
|
|
18
|
+
## Designing Reasoning Chains
|
|
19
|
+
A reasoning chain has structure. Design it deliberately:
|
|
20
|
+
**1. Problem decomposition**
|
|
21
|
+
"First, break this problem into its component parts."
|
|
22
|
+
**2. Evidence gathering**
|
|
23
|
+
"For each part, identify what you know and what you're uncertain about."
|
|
24
|
+
**3. Analysis**
|
|
25
|
+
"Analyse each component, noting assumptions and limitations."
|
|
26
|
+
**4. Synthesis**
|
|
27
|
+
"Combine your analysis into an overall assessment."
|
|
28
|
+
**5. Conclusion**
|
|
29
|
+
"State your conclusion and your confidence level."
|
|
30
|
+
## Chain Variants
|
|
31
|
+
- **Linear chain**: Step 1 → Step 2 → Step 3 → Answer. Simple and predictable.
|
|
32
|
+
- **Branching chain**: Consider multiple paths, evaluate each, then choose. Better for decisions.
|
|
33
|
+
- **Iterative chain**: Draft an answer, critique it, revise it. Better for quality refinement.
|
|
34
|
+
- **Debate chain**: Argue for and against a position, then synthesise. Better for balanced analysis.
|
|
35
|
+
## Controlling Chain Quality
|
|
36
|
+
- **Specify the steps**: Don't just say "think step by step." Define what the steps are.
|
|
37
|
+
- **Limit reasoning depth**: Set a maximum number of steps or reasoning length to prevent runaway chains.
|
|
38
|
+
- **Separate thinking from output**: Let the AI reason internally, then produce a clean final output.
|
|
39
|
+
- **Validate intermediate steps**: Check that each step is sound, not just the final answer.
|
|
40
|
+
## Design Artefacts
|
|
41
|
+
- Chain-of-thought templates per task type
|
|
42
|
+
- Reasoning step specifications
|
|
43
|
+
- Chain variant selection guidelines
|
|
44
|
+
- Quality checkpoints for intermediate steps
|
|
45
|
+
- Examples of well-structured and poorly-structured chains
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: constraint-specification
|
|
3
|
+
description: Defining output format, length, tone, and content boundaries within prompts.
|
|
4
|
+
---
|
|
5
|
+
# Constraint Specification
|
|
6
|
+
Constraints are the rules that shape AI output — what format to use, how long to be, what to include, what to exclude. Well-specified constraints produce predictable, useful outputs. Vague constraints produce inconsistent results.
|
|
7
|
+
## Types of Constraints
|
|
8
|
+
**Format constraints:**
|
|
9
|
+
- Output structure (JSON, markdown, plain text, bullet points, prose)
|
|
10
|
+
- Section headings and organisation
|
|
11
|
+
- Required fields and optional fields
|
|
12
|
+
- Data types and schemas
|
|
13
|
+
**Length constraints:**
|
|
14
|
+
- Word count ranges (not exact numbers — models are bad at counting)
|
|
15
|
+
- Section length proportions ("spend 60% on analysis, 40% on recommendations")
|
|
16
|
+
- Minimum and maximum bounds
|
|
17
|
+
- Conciseness directives ("be brief" vs. "be thorough")
|
|
18
|
+
**Content constraints:**
|
|
19
|
+
- Topics to include and exclude
|
|
20
|
+
- Required information elements
|
|
21
|
+
- Prohibited content
|
|
22
|
+
- Source restrictions (only use provided context, don't use external knowledge)
|
|
23
|
+
**Tone constraints:**
|
|
24
|
+
- Formality level
|
|
25
|
+
- Emotional register
|
|
26
|
+
- Audience-appropriate language
|
|
27
|
+
- Voice and style guidelines
|
|
28
|
+
**Quality constraints:**
|
|
29
|
+
- Accuracy requirements ("cite sources", "flag uncertainty")
|
|
30
|
+
- Completeness requirements ("address all aspects of the question")
|
|
31
|
+
- Originality requirements ("don't repeat the question back")
|
|
32
|
+
- Actionability requirements ("every recommendation must be implementable")
|
|
33
|
+
## Writing Effective Constraints
|
|
34
|
+
- **Be specific**: "Keep responses under 200 words" beats "be concise"
|
|
35
|
+
- **Prioritise**: When constraints conflict, state which wins. "Accuracy over brevity."
|
|
36
|
+
- **Provide examples**: Show what a constrained output looks like
|
|
37
|
+
- **Test boundaries**: What happens at the edge of each constraint?
|
|
38
|
+
- **Separate hard and soft constraints**: Hard constraints must always be met. Soft constraints are preferences.
|
|
39
|
+
## Constraint Interactions
|
|
40
|
+
Constraints interact and can conflict:
|
|
41
|
+
- "Be thorough" vs. "Keep it under 100 words"
|
|
42
|
+
- "Be creative" vs. "Follow this exact format"
|
|
43
|
+
- "Be helpful" vs. "Don't give medical advice"
|
|
44
|
+
Resolve conflicts explicitly in the prompt. Don't make the model guess which constraint takes priority.
|
|
45
|
+
## Design Artefacts
|
|
46
|
+
- Constraint specification documents per output type
|
|
47
|
+
- Constraint priority hierarchies
|
|
48
|
+
- Constraint test cases (inputs designed to stress each constraint)
|
|
49
|
+
- Constraint violation examples (what bad looks like)
|
|
50
|
+
- Constraint evolution logs (how constraints changed and why)
|
package/src/skills-lib/ai-product-design/references/prompt-architecture/context-engineering/SKILL.md
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: context-engineering
|
|
3
|
+
description: Designing what information goes into the context window and in what order.
|
|
4
|
+
---
|
|
5
|
+
# Context Engineering
|
|
6
|
+
The context window is finite. What goes into it — and in what order — determines the quality of every output. Context engineering is the practice of deliberately designing the information architecture of the context window.
|
|
7
|
+
## The Context Budget
|
|
8
|
+
Every context window has a token budget. Allocate it deliberately:
|
|
9
|
+
- **System prompt**: The foundational instructions (typically 5-20% of the budget)
|
|
10
|
+
- **Retrieved context**: Documents, data, and information pulled in for the current task
|
|
11
|
+
- **Conversation history**: Previous turns in the conversation
|
|
12
|
+
- **User input**: The current request
|
|
13
|
+
- **Working space**: Room for the model to generate its response
|
|
14
|
+
These compete for space. More retrieved context means less conversation history. A longer system prompt means less room for everything else.
|
|
15
|
+
## Information Architecture in Context
|
|
16
|
+
Order matters. The model pays different amounts of attention to different positions:
|
|
17
|
+
- **Beginning**: High attention. Put your most important instructions here.
|
|
18
|
+
- **Middle**: Lower attention. This is where information can get lost in long contexts.
|
|
19
|
+
- **End**: High attention. The most recent information (user input) naturally goes here.
|
|
20
|
+
- **Adjacent to the task**: Information placed right before the user's question gets more attention than information earlier in the context.
|
|
21
|
+
## Context Selection
|
|
22
|
+
Not everything should go into the context. Design selection criteria:
|
|
23
|
+
- **Relevance**: Does this information help answer the current question?
|
|
24
|
+
- **Recency**: Is this the most up-to-date information available?
|
|
25
|
+
- **Specificity**: Is this specific enough to be useful, or is it too generic?
|
|
26
|
+
- **Redundancy**: Is this information already covered elsewhere in the context?
|
|
27
|
+
- **Authority**: Is this from a reliable source?
|
|
28
|
+
## Context Strategies
|
|
29
|
+
- **Retrieval-augmented generation (RAG)**: Pull relevant documents into the context dynamically
|
|
30
|
+
- **Summarisation**: Compress older context into summaries to free up space
|
|
31
|
+
- **Prioritised history**: Keep recent and important conversation turns, drop less important ones
|
|
32
|
+
- **Structured context**: Organise information with clear headers and sections so the model can navigate it
|
|
33
|
+
- **Context caching**: Pre-compute and cache frequently used context blocks
|
|
34
|
+
## Context Quality Signals
|
|
35
|
+
How to tell if your context engineering is working:
|
|
36
|
+
- **Output relevance**: Do outputs address the actual question using the provided context?
|
|
37
|
+
- **Hallucination rate**: Is the model making things up because the context is insufficient?
|
|
38
|
+
- **Context utilisation**: Is the model actually using the provided context, or ignoring it?
|
|
39
|
+
- **Consistency**: Are outputs consistent when the same context is provided?
|
|
40
|
+
## Design Artefacts
|
|
41
|
+
- Context budget allocation documents
|
|
42
|
+
- Information architecture diagrams for the context window
|
|
43
|
+
- Context selection criteria per feature
|
|
44
|
+
- Retrieval strategy specifications
|
|
45
|
+
- Context quality monitoring metrics
|
package/src/skills-lib/ai-product-design/references/prompt-architecture/few-shot-patterns/SKILL.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: few-shot-patterns
|
|
3
|
+
description: Crafting examples that steer AI behavior effectively.
|
|
4
|
+
---
|
|
5
|
+
# Few-Shot Patterns
|
|
6
|
+
Few-shot prompting provides examples of input-output pairs that demonstrate the desired behavior. The AI learns the pattern from the examples and applies it to new inputs. The quality of examples directly determines the quality of outputs.
|
|
7
|
+
## Why Examples Work
|
|
8
|
+
Examples communicate what instructions alone cannot:
|
|
9
|
+
- **Implicit patterns**: The AI picks up on format, style, and reasoning patterns from examples without being told explicitly
|
|
10
|
+
- **Ambiguity resolution**: When instructions could be interpreted multiple ways, examples show which interpretation you want
|
|
11
|
+
- **Quality calibration**: Examples set the bar for output quality, length, and depth
|
|
12
|
+
- **Edge case handling**: Examples of tricky cases teach the AI how to handle similar situations
|
|
13
|
+
## Example Design Principles
|
|
14
|
+
**Diversity**: Examples should cover different scenarios, not repeat the same type
|
|
15
|
+
- Include easy cases, hard cases, and edge cases
|
|
16
|
+
- Vary the input format and content
|
|
17
|
+
- Show different valid output formats if applicable
|
|
18
|
+
**Clarity**: Each example should demonstrate one clear pattern
|
|
19
|
+
- Avoid examples that could be interpreted multiple ways
|
|
20
|
+
- Make the mapping from input to output obvious
|
|
21
|
+
- Remove irrelevant variation between examples
|
|
22
|
+
**Quality**: Examples set the ceiling for output quality
|
|
23
|
+
- Every example should be one you'd be happy to ship
|
|
24
|
+
- If the example has a flaw, the AI will replicate that flaw
|
|
25
|
+
- Invest time in crafting examples — they're worth more than instructions
|
|
26
|
+
**Ordering**: The position of examples matters
|
|
27
|
+
- Put the most representative example first
|
|
28
|
+
- Put edge cases after common cases
|
|
29
|
+
- End with an example closest to the expected input type
|
|
30
|
+
## How Many Examples
|
|
31
|
+
- **Zero-shot**: No examples. Relies entirely on instructions. Good for simple, well-understood tasks.
|
|
32
|
+
- **One-shot**: Single example. Enough when the pattern is straightforward.
|
|
33
|
+
- **Few-shot (3-5)**: Multiple examples. Best for complex patterns or nuanced quality requirements.
|
|
34
|
+
- **Many-shot (5+)**: Diminishing returns but useful for highly variable tasks or when consistency is critical.
|
|
35
|
+
Balance example count against context window cost. More examples means less room for other context.
|
|
36
|
+
## Anti-Patterns
|
|
37
|
+
- **Identical examples**: All examples are basically the same, teaching nothing about variation
|
|
38
|
+
- **Perfect-only examples**: No examples of how to handle imperfect inputs or edge cases
|
|
39
|
+
- **Contradictory examples**: Examples that demonstrate inconsistent patterns
|
|
40
|
+
- **Low-quality examples**: Sloppy examples produce sloppy outputs
|
|
41
|
+
- **Outdated examples**: Examples that no longer reflect current requirements
|
|
42
|
+
## Design Artefacts
|
|
43
|
+
- Example libraries per task type
|
|
44
|
+
- Example quality rubrics
|
|
45
|
+
- Example selection guidelines
|
|
46
|
+
- Example maintenance and update schedules
|
|
47
|
+
- Example effectiveness testing results
|