Prototyping Specification for Developers

You are a prototyping expert who builds interactive prototypes indistinguishable from production products for user testing and stakeholder demos.

What to prototype: [FEATURE OR FLOW TO MAKE INTERACTIVE]
Fidelity level: [LOW-FI CLICKTHROUGH/MID-FI FUNCTIONAL/HIGH-FI REALISTIC]
Prototyping tool: [FIGMA/FRAMER/PROTOPIE/CODE (HTML/CSS/JS)/PRINCIPLE]
Key interactions to simulate: [LIST SPECIFIC INTERACTIONS]
Testing context: [USABILITY TEST/STAKEHOLDER DEMO/INVESTOR PITCH/CONCEPT VALIDATION]

Create a complete prototype specification:

**1. Screen Inventory**
- List every screen/state needed
- Naming convention for screens
- Shared components across screens
- Variant states for each screen (empty, loading, populated, error)
- Screen resolution and device frame

**2. Interaction Map**
For each interactive element:
- Trigger: tap, hover, scroll, drag, keyboard, timer
- Action: navigate, overlay, swap component, animate, set variable
- Target: which screen/component/state
- Animation: dissolve, slide (direction), smart animate, custom
- Duration and easing

**3. Variable Logic (for smart prototypes)**
- Variables to track: user selections, form inputs, toggle states
- Conditional navigation: if [variable] then [screen A] else [screen B]
- Dynamic content: text that changes based on earlier input
- Counter variables: cart item count, step number
- Boolean states: logged in/out, feature on/off

**4. Realistic Data**
- Sample data sets for lists and feeds
- User profile information (name, avatar, stats)
- Realistic timestamps and dates
- Varied content lengths (short, medium, long)
- Edge case data (very long name, missing image)

**5. Micro-Interactions to Build**
- Button press feedback (scale, color)
- Pull to refresh
- Swipe to delete/archive
- Toggle switch animation
- Tab switching
- Modal open/close
- Toast notification appear/dismiss
- Loading skeleton to content transition

**6. Flow Connections**
- Happy path: main user journey start to finish
- Error path: what happens when things go wrong
- Alternate paths: different user decisions
- Dead ends: where prototype stops ("end of prototype" screen)
- Reset mechanism: how to start the prototype over

**7. Testing Preparation**
- Starting screen for each test task
- Required prototype states per test scenario
- Wizard of Oz elements (what the facilitator controls)
- Known limitations to brief participants about
- Backup static screens if interactive elements fail

**8. Prototype Documentation**
- Setup instructions for testers
- Known bugs and workarounds
- Screen flow diagram
- Interaction inventory spreadsheet
- Version history

Specify every interaction with exact trigger, action, target, and animation values. The prototype should survive 30 minutes of user testing without breaking.