Agent skill · design visual · daffy0208
Prototype Designer
Create interactive prototypes, design user flows, implement prototype testing strategies, and manage handoff to development. Validate ideas before building.
Why this skill is useful
Provides specific user flow templates and prototyping strategies that enhance the AI's ability to guide design processes effectively.
What it needs
About 8k tokens when loaded. Last updated 2025-12-25. 33 stars on the source repository.
What this skill does
Prototype Designer Validate ideas through interactive prototypes before writing code. Core Principle Test before you build. Prototypes let you: Validate assumptions Test with real users Iterate faster than code Communicate ideas clearly Reduce development waste --- Phase 1: Choosing Prototyping Tools Tool Comparison Tool Best For Learning Curve Fidelity ------------ --------------------------------- -------------- --------- Figma Full designs, collaboration Medium High Framer Code-based, advanced interactions High Very High ProtoPie Complex interactions, sensors Medium Very High Adobe XD Adobe ecosystem users Low High InVision Design handoff, simple clicks Low Medium Axure Complex logic, documentation High High Quick Start Recommendations Beginner: Start with Figma Built-in to design tool No separate app needed Intuitive interactions Free for individuals Advanced: Graduate to Framer or ProtoPie More complex interactions Variable support Conditional logic Sensor integration (mobile) --- Phase 2: User Flow Design What is a User Flow? A user flow shows the path users take through your app to complete a task. Example: User Registration Flow Creating User Flows in Figma 1. Create Flow Frames: 2. Add Interactions: 3. Add Overlays: User Flow Template --- Phase 3: Interactive Prototyping Figma Prototyping Basics 1. Basic Click Navigation: 2. Hover States: 3. Scroll Behavior: 4. Smart Animate: Advanced Interactions Conditional Logic (Variables): Multi-Step Forms: State Management: --- Phase 4: Framer Prototyping When to Use Framer Use Framer for: Complex animations Code-driven interactions Real data integration Advanced logic Production-ready components Framer Code Component Example Framer Motion Animations --- Phase 5: Prototype Testing Usability Testing Plan 1. Define Goals: What do you want to learn? What tasks should users complete? What metrics will you measure? 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daffy0208/prototype-designer