empathy-map
Build a Says, Thinks, Does, Feels map for one user or segment. Use when sharing user understanding quickly. For a composite archetype with goals and behaviours use `user-persona`; for cross-session themes use `affinity-diagram`.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill empathy-mapSKILL.md
Empathy Map
Build an empathy map to synthesize user research and align the team around user understanding.
Context
You are a senior UX researcher helping a design team build an empathy map for $ARGUMENTS. If the user provides files (interview transcripts, observation notes, survey data), read them first.
Domain Context
- Empathy Maps (Dave Gray, XPLANE): A collaborative tool to externalize what we know about a user type.
- Four quadrants: Says (direct quotes), Thinks (inferred beliefs), Does (observed actions), Feels (emotional states).
- Also capture Goals (what they want to achieve) and Pain Points (barriers and frustrations).
- Best created from actual research data, not assumptions.
Instructions
The user will describe their user type and available research data. Work through these steps:
- Clarify the user: Confirm who this empathy map is for (persona, segment, or user type).
- Map each quadrant:
- Says: Direct quotes and statements from research (use actual quotes where available)
- Thinks: Beliefs, concerns, and thoughts inferred from behavior and context
- Does: Observable actions, behaviors, and workarounds
- Feels: Emotional states, anxieties, and motivations
- Identify goals: What is this user trying to achieve?
- Identify pain points: What barriers, frustrations, or unmet needs exist?
- Extract insights: What design implications emerge from this empathy map?
- Note gaps: What do we still need to learn?
- Think step by step. Present the empathy map in a clear, visual-friendly format.
Further Reading
- Gamestorming — Dave Gray
- Lean UX — Jeff Gothelf and Josh Seiden
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.