New: Earn 20% as an AgentAlley affiliate. Share your link and earn on every sale you refer. Join now New: Earn 20% as an affiliate. Join now

Plan prototype interactions and flows for user testing

Figma Prototype Plan Skill

by mohitagw15856 · MIT license · ★ 1,395 on GitHub · updated Sep 23

Figma Prototype Plan Skill cover

Plan prototype interactions and flows for user testing in Figma. Use when asked to plan a Figma prototype, set up prototype interactions, define what to prototype for a user test, or prepare a Figma prototype for usability testing.

---
name: figma-prototype-plan
description: "Plan prototype interactions and flows for user testing in Figma. Use when asked to plan a Figma prototype, set up prototype interactions, define what to prototype for a user test, or prepare a Figma prototype for usability testing. Produces a prototype scope, interaction specification, test task scripts, and Figma setup guide."
---

# Figma Prototype Plan Skill

Plans what to prototype in Figma and how — scoping to what the user test needs, defining every interaction, and setting up the test scenarios. Prevents over-building and ensures the prototype answers the research question.

## Required Inputs

- **Research question** (what are you trying to learn?)
- **Feature or flow being prototyped**
- **Prototype fidelity** (low wireframe / mid functional / high pixel-perfect)
- **Testing method** (moderated in-person / moderated remote / unmoderated)
- **Number of test tasks**

## Output Structure

Overview

Plans what to prototype in Figma and how — scoping to what the user test needs, defining every interaction, and setting up the test scenarios. Prevents over-building and ensures the prototype answers the research question.

Manual install (npx, ZIP)
Claude Codenpx skills add mohitagw15856/pm-claude-skills --skill figma-prototype-plan -g -a claude-code
Claude Code (manual)mkdir -p ~/.claude/skills && curl -sL https://codeload.github.com/mohitagw15856/pm-claude-skills/tar.gz/f6ca79348c55 \ | tar -xz -C ~/.claude/skills --strip-components=2 pm-claude-skills-f6ca79348c55/skills/figma-prototype-plan
Windows (PowerShell)New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null; Invoke-WebRequest "https://m.agentalley.io/zip/76a0b73ff15c89514b22/figma-prototype-plan.zip" -OutFile "$env:TEMP\figma-prototype-plan.zip"; Expand-Archive "$env:TEMP\figma-prototype-plan.zip" -DestinationPath "$HOME\.claude\skills" -Force
Claude.ai / desktopDownload the ZIP and upload it under Settings → Capabilities → Skills.
Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

  • SKILL.md3.4 KB
Read the files here
mohitagw15856/f6ca7931 file
SKILL.md
Show the full text92 lines

Figma Prototype Plan Skill

Plans what to prototype in Figma and how — scoping to what the user test needs, defining every interaction, and setting up the test scenarios. Prevents over-building and ensures the prototype answers the research question.

Required Inputs

  • Research question (what are you trying to learn?)
  • Feature or flow being prototyped
  • Prototype fidelity (low wireframe / mid functional / high pixel-perfect)
  • Testing method (moderated in-person / moderated remote / unmoderated)
  • Number of test tasks

Output Structure

1. Prototype Scope

In scope: [Flows with real interactions — specific screens listed] Out of scope: [Screens to show as static — not worth building as interactive] Rationale: Prototypes should be the minimum needed to test the hypothesis.

2. Interaction Specification

Interaction N: [Description]

  • Trigger: Tap/Swipe/Hover/Form submit
  • Element: [Figma layer name]
  • Destination: [Figma frame name]
  • Animation: Instant/Dissolve/Push left/Push right/Slide up
  • Timing: [ms]
  • Reset after: Yes/No
3. Prototype Flow Diagram
[Start frame]
  -> Tap "Action"
[Next frame]
  -> Tap "Complete" -> [Success frame]
  -> Tap "Cancel"   -> [Back to start]
4. Test Task Scripts

Task N: [Title]

Scenario (read to participant): "[Realistic scenario giving context without directing the click path]"

Observing:

  • [What to watch for]

Success when: [Specific trigger]

5. Figma Setup Guide
  • Starting frame: [Name]
  • Device preview: [Device]
  • Prototype settings: background colour, show device, type
  • Sharing: Can view link, reset process between participants
6. Build vs Fake Table
Element Build Fake Notes
Primary CTA flow Yes Core to research
Secondary nav Yes Not being tested
Error state Yes Testing recovery

Quality Checks

  • Scope limited to what the research question requires
  • Every interaction has a named destination frame
  • Task scripts are scenario-based (not "click on X")
  • Success criteria defined for each task
  • Reset process defined for between participants

Anti-Patterns

  • Do not prototype everything — scope must be limited to the interactions that answer the specific research questions
  • Do not design prototype flows without also writing the test task scripts — the two must align exactly
  • Do not skip the reset process between participants — unsettled prototype state contaminates results
  • Do not plan a prototype without specifying which interactions are clickable vs static — ambiguity causes scope creep
  • Do not scope a prototype without first defining the research questions it needs to answer

Example Trigger Phrases

  • "Plan the Figma prototype for our user test on [feature]"
  • "What interactions do I need to build for this prototype?"
  • "Help me set up a Figma prototype for [research question]"
  • "Write the test task scripts for our [feature] prototype"
  • "What should I prototype vs leave as static screens?"
1---
2name: figma-prototype-plan
3description: "Plan prototype interactions and flows for user testing in Figma. Use when asked to plan a Figma prototype, set up prototype interactions, define what to prototype for a user test, or prepare a Figma prototype for usability testing. Produces a prototype scope, interaction specification, test task scripts, and Figma setup guide."
4---
5 
6# Figma Prototype Plan Skill
7 
8Plans what to prototype in Figma and how — scoping to what the user test needs, defining every interaction, and setting up the test scenarios. Prevents over-building and ensures the prototype answers the research question.
9 
10## Required Inputs
11 
12- **Research question** (what are you trying to learn?)
13- **Feature or flow being prototyped**
14- **Prototype fidelity** (low wireframe / mid functional / high pixel-perfect)
15- **Testing method** (moderated in-person / moderated remote / unmoderated)
16- **Number of test tasks**
17 
18## Output Structure
19 
20### 1. Prototype Scope
21 
22**In scope:** [Flows with real interactions — specific screens listed]
23**Out of scope:** [Screens to show as static — not worth building as interactive]
24**Rationale:** Prototypes should be the minimum needed to test the hypothesis.
25 
26### 2. Interaction Specification
27 
28**Interaction N: [Description]**
29- Trigger: Tap/Swipe/Hover/Form submit
30- Element: [Figma layer name]
31- Destination: [Figma frame name]
32- Animation: Instant/Dissolve/Push left/Push right/Slide up
33- Timing: [ms]
34- Reset after: Yes/No
35 
36### 3. Prototype Flow Diagram
37 
38```
39[Start frame]
40 -> Tap "Action"
41[Next frame]
42 -> Tap "Complete" -> [Success frame]
43 -> Tap "Cancel" -> [Back to start]
44```
45 
46### 4. Test Task Scripts
47 
48**Task N: [Title]**
49 
50Scenario (read to participant):
51"[Realistic scenario giving context without directing the click path]"
52 
53Observing:
54- [What to watch for]
55 
56Success when: [Specific trigger]
57 
58### 5. Figma Setup Guide
59- Starting frame: [Name]
60- Device preview: [Device]
61- Prototype settings: background colour, show device, type
62- Sharing: Can view link, reset process between participants
63 
64### 6. Build vs Fake Table
65 
66| Element | Build | Fake | Notes |
67|---|---|---|---|
68| Primary CTA flow | Yes | | Core to research |
69| Secondary nav | | Yes | Not being tested |
70| Error state | Yes | | Testing recovery |
71 
72## Quality Checks
73- [ ] Scope limited to what the research question requires
74- [ ] Every interaction has a named destination frame
75- [ ] Task scripts are scenario-based (not "click on X")
76- [ ] Success criteria defined for each task
77- [ ] Reset process defined for between participants
78 
79## Anti-Patterns
80 
81- [ ] Do not prototype everything — scope must be limited to the interactions that answer the specific research questions
82- [ ] Do not design prototype flows without also writing the test task scripts — the two must align exactly
83- [ ] Do not skip the reset process between participants — unsettled prototype state contaminates results
84- [ ] Do not plan a prototype without specifying which interactions are clickable vs static — ambiguity causes scope creep
85- [ ] Do not scope a prototype without first defining the research questions it needs to answer
86 
87## Example Trigger Phrases
88- "Plan the Figma prototype for our user test on [feature]"
89- "What interactions do I need to build for this prototype?"
90- "Help me set up a Figma prototype for [research question]"
91- "Write the test task scripts for our [feature] prototype"
92- "What should I prototype vs leave as static screens?"
View all files on GitHub →

Details

Updated
Sep 23, 2026
License
MIT
Stars on the repo
★ 1,395
Checked
Source
mohitagw15856/pm-claude-skills ↗
Creator
mohitagw15856 · 193 listings
View creator

Made with figma-prototype-plan

Figma Prototype Plan Skill — Galaxy 3D — fly through all 1170 skills as a glowing constellation you orbit and click into (from the mohitagw15856/pm-claude-skills README)
Figma Prototype Plan Skill — Galaxy 3D — fly through all 1170 skills as a glowing constellation you orbit and click into (from the mohitagw15856/pm-claude-skills README)

by mohitagw15856

Figma Prototype Plan Skill — PM Skills Wrapped — your practice turned into a shareable, Spotify-Wrapped-style story (from the mohitagw15856/pm-claude-skills README)
Figma Prototype Plan Skill — PM Skills Wrapped — your practice turned into a shareable, Spotify-Wrapped-style story (from the mohitagw15856/pm-claude-skills README)

by mohitagw15856

Similar skills

See all →
SkillClick-engagement analyst that pulls element-level click dataHeatmap analystHumblytics/humblytics-marketing-skills · by HumblyticsClick-engagement analyst that pulls element-level click data, a page-level scroll proxy, and bounce/exit signals from Humblytics to surface UX friction and ignored CTAs. Generates prioritized, data-backed optimization recommendations. NOTE: Humblytics does NOT provide pixel-level click heatmaps, scroll-depth distributions, or rage-click detection — those need a dedicated heatmap tool. Use when auditing element-level click patterns, finding ignored CTAs, gauging scroll engagement, or diagnosing on-page friction. Triggers: click analysis, element clicks, ignored CTA, click engagement, scroll engagement, UX friction, interaction audit.★ 85 GitHub starsSkillResearch, design, implement, auditB0rk's UI/UX SKILLDrB0rk/Borks-uiux-skill · by DrB0rkResearch, design, implement, audit, and validate UI/UX in web, mobile, and developer tools. Use for frontend coding, interface design, redesigns, responsive layouts, design systems and tokens, component interactions, agent/chat interfaces, forms, accessibility, content design, keyboard usability, interaction state modeling, performance, and AI-generated UI quality review. Produce evidence-backed fixes, complete states, and practical verification rather than generic visual polish.★ 3 GitHub starsPromptGenerate a comprehensiveMake UI/UX better of an already Created Applicationf/prompts.chat · by Watson CharlieGenerate a comprehensive, actionable development plan to enhance the existing web application.New listingMCPYou need to design user research plansUX researcherdavila7/claude-code-templates · by davila7Use this agent when you need to design user research plans, analyze user-supplied data (interview transcripts, analytics, notes/transcripts from session recordings you provide), and generate actionable insights to validate design decisions and uncover user needs. Invoke when you need usability-test planning, interview/survey design, analytics interpretation, persona development, or competitive UX benchmarking to inform product strategy. Specifically:\\n\\n<example>\\nContext: A product team is launching a new feature and needs a research plan to validate it with real users before full release.\\nuser: "We've built a new checkout flow, but we want to test it with real users first to catch any issues. Can you help us plan usability testing?"\\nassistant: "I'll design a comprehensive usability test plan including task flows, screener criteria for recruiting participants, a moderation/observation guide, and an analysis framework for the sessions your team runs. Once you share session notes or transcripts, I'll analyze drop-off points and synthesize findings into specific design recommendations to improve conversion and reduce friction."\\n<commentary>\\nInvoke ux-researcher when you need a rigorous usability-test protocol and the analysis framework to translate results into design recommendations. This agent designs the research and analyzes data the team gathers or provides — it does not recruit participants or run live sessions itself.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: A product manager is exploring a new market segment and needs to understand user needs and behaviors before defining requirements.\\nuser: "We want to expand into a new user segment, but we don't know their pain points or workflows. How can we understand what they need?"\\nassistant: "I'll design a mixed-methods research plan: a discussion guide and screener for target-user interviews, an in-context observation protocol, and a survey instrument to validate findings across a broader population. Once you provide interview transcripts, survey responses, or field notes, I'll synthesize results into personas, journey maps, and opportunity areas to guide your product roadmap."\\n<commentary>\\nUse ux-researcher for exploratory research design when you need instruments and a synthesis framework to understand user needs, motivations, and behaviors in unfamiliar segments. The agent designs the protocols and analyzes the data you supply.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Analytics show a 40% drop-off in your user funnel but the team doesn't understand why users are leaving.\\nuser: "Our analytics show users are abandoning the onboarding flow at the same step. What's causing this and how do we fix it?"\\nassistant: "I'll analyze the behavioral analytics export you provide to map the exact moment and context of drop-offs, design a targeted interview guide for users who abandoned at that step, review publicly available competitor onboarding flows for comparison, and synthesize findings into design recommendations. I'll prioritize the highest-impact changes and design iterations to test next."\\n<commentary>\\nInvoke ux-researcher when quantitative metrics show a problem but you need qualitative understanding of the root cause. This agent combines analytics interpretation (from data you provide) with research-design expertise to translate metrics into actionable insights.\\n</commentary>\\n</example>★ 32.3k GitHub starsSkillUX research and design toolkit for Senior UXUX researcher designerdavila7/claude-code-templates · by davila7UX 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.★ 32.3k GitHub starsMCPUX research agent for research planning, persona generationCs UX researcheralirezarezvani/claude-skills · by alirezarezvaniUX research agent for research planning, persona generation, journey mapping, and usability test analysis. Use when product decisions need user evidence — e.g., planning interview scripts and recruiting criteria for a discovery study, or synthesizing usability-test sessions into prioritized findings and updated personas.★ 26.3k GitHub stars

More from mohitagw15856

SkillDesign a 360-degree feedback survey or write a structured360-Degree Feedback Template Skillmohitagw15856/pm-claude-skills · by mohitagw15856Design a 360-degree feedback survey or write a structured 360 feedback report. Use when asked to build a 360 feedback process, write 360 feedback for a colleague, design a feedback survey, or produce a feedback report. Produces either a complete survey instrument with rating scales and open-ended questions, or a structured narrative feedback report with themes, strengths, and development areas.★ 1.4k GitHub starsSkillDesign statistically rigorous A/B tests for product featuresA/B Test Planner Skillmohitagw15856/pm-claude-skills · by mohitagw15856Design statistically rigorous A/B tests for product features, UI changes, onboarding flows, and pricing experiments. Use when asked to set up an experiment, design an A/B test, calculate sample size, or interpret test results. Produces a complete test plan with hypothesis, variant definitions, sample size, duration estimate, guardrail metrics, and a results interpretation guide.★ 1.4k GitHub starsSkillGenerate a WCAG 2.2 accessibility audit checklistAccessibility Audit Skillmohitagw15856/pm-claude-skills · by mohitagw15856Generate a WCAG 2.2 accessibility audit checklist and remediation suggestions for any UI or design. Use when asked to audit for accessibility, check WCAG compliance, review a design for a11y issues, or create an accessibility remediation plan. Produces a prioritised checklist with pass/fail assessments and specific fixes.★ 1.4k GitHub starsSkillBuild a structured account plan for any key customerAccount Plan Skillmohitagw15856/pm-claude-skills · by mohitagw15856Build a structured account plan for any key customer or target account. Use when asked to create an account plan, key account strategy, strategic account review, or territory plan. Produces a complete account plan with relationship map, growth opportunities, risks, and 90-day action plan.★ 1.4k GitHub starsSkillOptimize an article for Answer Engine Optimization so AIAEO Optimizer Skillmohitagw15856/pm-claude-skills · by mohitagw15856Optimize an article for Answer Engine Optimization (AEO) so AI engines like ChatGPT, Perplexity, and Claude can extract, quote, and cite it. Use when asked to AEO-optimize, make content AI-readable, improve AI citation chances, or adapt an article for answer engines. Produces an AEO-optimised rewrite with question headings, 50–80 word answer capsules, a paragraph-length audit, and flagged trust signals.★ 1.4k GitHub starsSkillConduct a structured ethical review of an AI or ML featureAI Ethics Review Skillmohitagw15856/pm-claude-skills · by mohitagw15856Conduct a structured ethical review of an AI or ML feature, model, or product. Use when preparing to deploy an AI system, assessing algorithmic risk, auditing a model for bias, or producing a responsible AI impact assessment. Produces a structured ethics review covering fairness, transparency, privacy, safety, accountability, and societal impact with a risk tier score, pre-deployment checklist, and prioritised mitigations.★ 1.4k GitHub stars