UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and research synthesis. Use for user research, persona creation, journey mapping, and design validation.
Install
npx skills add https://github.com/davila7/claude-code-templates --skill ux-researcher-designerSKILL.md
UX Researcher & Designer
Comprehensive toolkit for user-centered research and experience design.
Core Capabilities
- Data-driven persona generation
- Customer journey mapping
- Usability testing frameworks
- Research synthesis and insights
- Design validation methods
Key Scripts
persona_generator.py
Creates research-backed personas from user data and interviews.
Usage: python scripts/persona_generator.py [json]
Features:
- Analyzes user behavior patterns
- Identifies persona archetypes
- Extracts psychographics
- Generates scenarios
- Provides design implications
- Confidence scoring based on sample size
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`.