Interactive prototyping
Wire flows and interactions that behave as specified.
20 project-authored proposals · taxonomy v1.1 · 0 new benchmark runs. Verifiers and partial-credit rules below are designs, not executed results.
- Typical applications
- Figma · ProtoPie · Framer
- Class GUI-need label
G2· GUI-essential
Task proposals · 20
Expand to inspect the complete original wording and proposed checks. Original proposal text remains English in both interfaces.
R06.08.01.03-T01 Wire a six-screen onboarding with Smart Animate
Original instruction
In Figma file 'Onboarding' (test account) wire frames OB-1..OB-6: 'Next' navigates to the next frame with Smart Animate 300 ms ease-out, 'Skip' jumps to OB-6 with Instant, a drag-right gesture on OB-2..OB-6 goes back (Smart Animate 300 ms), and set a flow starting point 'Onboarding' on OB-1.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropclick· Point & click- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST node interactions: per Next button ON_CLICK NAVIGATE to the right frame with SMART_ANIMATE, duration 0.3, EASE_OUT; Skip -> OB-6 instant; ON_DRAG back links on 5 frames; flowStartingPoints contains OB-1. Playwright click-through of the shared prototype confirms reachability. Plugins are disabled for the test account and no personal access token is issued; plugin-run log must be empty.
Proposed partial credit
35% Next links with transition; 20% Skip; 25% drag-back; 20% flow start and click-through.
R06.08.01.03-T02 Open a centered filter overlay with background dim
Original instruction
In Figma frame 'Search Results', make tapping the 'Filter' button open frame 'Filter Sheet' as an overlay centered on screen with 40% black background dim and close-on-outside-click enabled; the overlay's 'Apply' button closes the overlay.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropclick· Point & click- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 2 / 5
Proposed verifier
REST interactions: Filter ON_CLICK OPEN_OVERLAY to Filter Sheet; Filter Sheet overlayPositionType CENTER, overlayBackground color rgba(0,0,0,0.4), overlayBackgroundInteraction CLOSE_ON_CLICK_OUTSIDE; Apply has CLOSE action. Plugins are disabled for the agent's account and no personal access token is issued; plugin-run log must be empty.
Proposed partial credit
40% overlay action; 30% position and dim; 15% click-outside close; 15% Apply closes.
R06.08.01.03-T03 Build a snapping horizontal carousel
Original instruction
In Figma frame 'Home' (390x844), turn the 'Featured' row into a horizontally scrolling carousel: 6 cards of 300 px inside a 390 px clipped container, horizontal scroll only, snap to each card (use a scroll-snapping pattern via variants or interactive components), with the first card left-aligned at 16 px.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropclick· Point & clickgeom· Precise geometry- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: container clipsContent true, overflowDirection HORIZONTAL_SCROLLING; 6 cards 300 wide with 16 px leading padding; Playwright drag on the shared prototype at 3 distances ends with a card edge at x = 16 +/- 2 (snap behaviour) or the variant-based carousel reaches all 6 cards. Plugins (incl. development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
30% scroll container setup; 20% card layout; 40% snapping behaviour; 10% first card offset.
R06.08.01.03-T04 Make an interactive toggle switch component
Original instruction
In Figma file 'DS Core', make component set 'Toggle' (variants State=Off/On) interactive: clicking Off changes to On and On to Off with Smart Animate 150 ms ease-in-out, so every instance in frame 'Settings' toggles in the prototype without screen-level wiring.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropclick· Point & click- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 2 / 5
Proposed verifier
REST: variant Off has ON_CLICK CHANGE_TO destination On and vice versa with SMART_ANIMATE 0.15 EASE_IN_AND_OUT; Settings frame instances have no own interactions; Playwright prototype test: clicking each of 5 toggles flips its state. Plugins (incl. development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
50% variant interactions; 20% transition; 30% instances toggle in prototype.
R06.08.01.03-T05 Prototype a cart counter with variables and conditions
Original instruction
In Figma file 'Shop' create a number variable cartCount (0) and boolean canCheckout; 'Add' buttons on 4 product cards increment cartCount, the badge text binds to cartCount, 'Checkout' is shown as Disabled variant while cartCount = 0 and navigates to 'Checkout' only when > 0 (conditional).
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & formsdrag· Drag & drop- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
REST: variables exist; Add buttons have SET_VARIABLE actions with expression cartCount + 1; badge text boundVariables to cartCount; Checkout has CONDITIONAL action on cartCount > 0. Playwright run: Checkout does nothing at 0, badge shows 3 after 3 adds, navigation succeeds afterwards. Plugins (incl. development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
25% variables; 25% increment actions; 20% binding; 30% conditional behaviour verified.
R06.08.01.03-T06 Build a drag-to-dismiss bottom sheet in ProtoPie
Original instruction
In ProtoPie, create a pie from fixtures/map_screen.png and sheet.png: dragging the bottom sheet down follows the finger (y only), releasing past 30% of its height dismisses it with an ease-out 250 ms, otherwise it springs back; the map dims 0-50% as the sheet rises. Save output/bottom_sheet.pie.
- Platforms
mac· macOSwin· Windows- Applications
- ProtoPie
- Interfaces
desk· Desktop GUI- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G3· GUI-only- Interaction primitives
drag· Drag & dropclick· Point & click- Work product
WP08· App/system state- Conditions
licensed· Licensed pro app- Proposed difficulty
- 4 / 5
Proposed verifier
Grader plays the pie in ProtoPie Player (web) under Playwright: drags of 20% and 40% height produce spring-back and dismiss respectively (final sheet y); during drag sheet y equals pointer delta within 2 px and x fixed; dim opacity 0.5 at full open and interpolates with y (r >= 0.95). The VM has no terminal or editor besides ProtoPie, and .pie files written outside ProtoPie are logged and fail.
Proposed partial credit
30% drag follows y; 35% threshold logic; 20% dim interpolation; 15% easing/timing.
R06.08.01.03-T07 Make a tilt-parallax card and test it on a phone
Original instruction
In ProtoPie build a card with 3 layers that shift by device tilt (Tilt trigger): background +/-10 px, middle +/-20 px, foreground +/-30 px over +/-30 deg, then open it in ProtoPie Player on the Android test phone and record a 10 s screen capture tilting left and right to output/tilt_test.mp4.
- Platforms
mac· macOSwin· Windowsand· Android- Applications
- ProtoPie · ProtoPie Player
- Interfaces
desk· Desktop GUImob· Mobile touch- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G3· GUI-only- Interaction primitives
click· Point & clickdrag· Drag & droptouch· Touch gestures- Work product
WP08· App/system state- Conditions
licensed· Licensed pro appxdevice· Cross-device- Proposed difficulty
- 4 / 5
Proposed verifier
Pie inspected via Player automation with simulated tilt values: layer offsets per tilt within 2 px of spec at -30/0/+30 deg; clamped beyond. Screen recording shows the Player app and visible layer motion correlated with logged tilt (optical flow direction matches). The .pie must be saved by ProtoPie (no terminal in the VM) and the video must come from the Android test phone's screen recorder (device metadata checked).
Proposed partial credit
50% tilt mappings; 20% clamping; 30% on-device test recording.
R06.08.01.03-T08 Prototype inline email validation with conditional states
Original instruction
In Figma frame 'Sign Up', using variables and interactive components, make the email field show the 'Error' variant with message 'Enter a valid email' when the user taps 'Continue' with a value lacking '@' (simulate entry via 3 preset suggestion chips: valid, missing-at, empty), and navigate to 'Verify' only for the valid preset.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
REST: string variable emailValue set by chips; Continue has CONDITIONAL with branches; field instance binds variant to error state; Playwright: each chip then Continue yields Error (missing-at, empty) or navigation to Verify (valid). Plugins are disabled for the agent's account and no personal access token is issued; plugin-run log must be empty.
Proposed partial credit
25% variable and chips; 35% conditional logic; 20% error variant; 20% verified paths.
R06.08.01.03-T09 Add hover effects and page transitions in Framer
Original instruction
On the Framer test site 'Studio' add: nav links underline on hover (200 ms), project cards scale to 1.03 with shadow on hover, page transitions fade 300 ms between Home and Work, and a 'Contact' button that opens an overlay. Publish to staging.
- Platforms
web· Any OS (web)- Applications
- Framer
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickhover· Hover & contextdrag· Drag & drop- Work product
WP08· App/system state- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
Playwright on staging: hover on nav link produces underline within 250 ms; card computed transform scale 1.03 +/- 0.005 on hover; navigation Home->Work shows opacity transition ~300 ms (frame sampling); Contact opens an overlay element with focus trap. Publish timestamp updated. Framer plugins, code overrides/components and API tokens are disabled for the test workspace; changes must appear in the project's version history.
Proposed partial credit
25% nav hover; 25% card hover; 25% page transition; 25% overlay.
R06.08.01.03-T10 Set fixed headers and sticky section titles in a scrolling prototype
Original instruction
In Figma frame 'Inbox' (390x2400 content in a 390x844 device), make the top app bar fixed, the tab bar fixed at bottom, and the 3 date section headers sticky while scrolling, then set the flow starting point 'Inbox'.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & dropnav· Pan/zoom/scroll- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: app bar and tab bar scrollBehavior FIXED; section headers STICKY_SCROLLS; frame overflow vertical; flow start set. Playwright: after scrolling 1200 px, app bar y = 0, tab bar at bottom, the active section header pinned under the app bar. Plugins (incl. development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
30% fixed bars; 40% sticky headers; 20% scroll setup; 10% flow start.
R06.08.01.03-T11 Repair a prototype with dead ends and wrong links
Original instruction
The 14-screen Figma prototype 'Banking Flow' has 4 dead-end screens, 3 buttons linking to the wrong frames and a missing Back action on 5 detail screens (see the flow map ref/banking_flow.pdf). Fix it so every screen is reachable from the start point and matches the flow map.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicknav· Pan/zoom/scrollhover· Hover & context- Work product
WP08· App/system state- Conditions
hidden· Hidden/stale state- Proposed difficulty
- 3 / 5
Proposed verifier
Graph built from REST interactions: edges equal the GT flow-map edges (precision and recall 1.0 on the 7 broken edges; others unchanged); all 14 frames reachable from the start point; each detail screen has BACK action. Playwright crawl confirms no dead ends. Plugins (incl. development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
35% wrong links fixed; 30% dead ends resolved; 20% Back actions; 15% crawl passes.
R06.08.01.03-T12 Auto-advance a splash screen to home
Original instruction
In Figma file 'Weather', make frame 'Splash' advance automatically to 'Home' after 1500 ms with a Dissolve 400 ms ease-out transition, and make the loading spinner on Splash rotate continuously using an interactive component loop (After delay 1 ms change-to rotated variant).
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & drop- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 2 / 5
Proposed verifier
REST: Splash AFTER_TIMEOUT 1.5 s NAVIGATE Home, DISSOLVE 0.4 EASE_OUT; spinner component variants loop via AFTER_TIMEOUT CHANGE_TO with Smart Animate; Playwright: Home visible at 1.6-2.2 s after load. Plugins (incl. development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
50% auto-advance; 20% transition; 30% spinner loop.
R06.08.01.03-T13 Wire the onboarding through the Plugin API (control pair of T01)
Original instruction
Control pair of T01: write and run a Figma development plugin that sets the same reactions on a copy of 'Onboarding' (Next Smart Animate 300 ms ease-out, Skip instant to OB-6, drag-back, flow start OB-1) using node.setReactionsAsync, with no manual prototype edits.
- Platforms
web· Any OS (web)- Applications
- Figma Plugin API
- Interfaces
api· API/SDK- GUI need · task setting
AP· API-sufficient- GUI need · ordinary access
AP· API-sufficient- Interaction primitives
code· Code & commands- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
Same REST and click-through checks as T01; plugin-run log must show the plugin. Scored side by side with T01 to measure the GUI-wiring cost.
Proposed partial credit
35% Next links with transition; 20% Skip; 25% drag-back; 20% flow start and click-through.
R06.08.01.03-T14 Drive text and color from a slider with formulas in ProtoPie
Original instruction
In ProtoPie build a brightness slider: dragging the knob along a 280 px track (x clamped) sets a text label to the percentage (0-100, integer, formula) and interpolates the preview card color from #1A1A2E at 0% to #F5F5F5 at 100%. Save output/slider.pie.
- Platforms
mac· macOSwin· Windows- Applications
- ProtoPie
- Interfaces
desk· Desktop GUI- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G3· GUI-only- Interaction primitives
drag· Drag & dropclick· Point & click- Work product
WP08· App/system state- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
Player automation drags to 0/25/50/100% of the track: label text equals round(pct); knob clamped to track; card color matches linear interpolation within ΔE2000 <= 2 at each point. The VM has no terminal or editor besides ProtoPie, and .pie files written outside ProtoPie are logged and fail.
Proposed partial credit
30% clamped drag; 35% label formula; 35% color interpolation.
R06.08.01.03-T15 Add a spring-animated like button micro-interaction
Original instruction
In Figma, make interactive component 'LikeButton' (variants Default/Liked) toggle on click with a Spring transition (mass 1, stiffness 300, damping 15) so the heart scales via an intermediate 'Pop' variant (scale 1.25) for 120 ms before settling to Liked; clicking Liked returns to Default with Gentle.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & dropgeom· Precise geometry- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: interaction chain Default -> Pop (ON_CLICK, SPRING custom mass 1 stiffness 300 damping 15) -> Liked (AFTER_TIMEOUT 0.12); Liked -> Default with GENTLE; Pop variant icon scaled 1.25 +/- 0.01; Playwright click shows Liked within 1 s. Plugins (incl. development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
35% chain structure; 30% spring parameters; 20% Pop scale; 15% reverse path.
R06.08.01.03-T16 Prepare two prototype flows for a moderated usability test
Original instruction
In Figma file 'Checkout Test' create two flow starting points 'Variant A - one page' and 'Variant B - stepper' on the right frames, set device to iPhone 15, hide Figma UI and hotspot hints, set prototype link access to password-protected 'test2026' viewers-only, and paste both flow links into output/test_links.txt.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP08· App/system state- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: flowStartingPoints with both names on GT frames; prototypeDevice iPhone 15; links in txt contain node-id and starting-point params and hide-ui=1, hotspot-hints=0; share settings fetched via the test team admin API show password protection and view-only. Plugins (incl. development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
30% two flow starts; 20% device; 30% link parameters; 20% access settings.
R06.08.01.03-T17 Prototype a checkout with computed totals and shipping options
Original instruction
In Figma file 'Shop', build a working checkout prototype: product quantity steppers (variables qty1..qty3), shipping radio (standard 5, express 15), promo chip that applies 10% off when subtotal >= 50, live subtotal/total text bound to expressions, and 'Pay' navigating to Success only when total > 0. No real payments.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & formsdrag· Drag & drop- Work product
WP08· App/system state- Conditions
long· Long-horizon- Proposed difficulty
- 5 / 5
Proposed verifier
Playwright scripted sessions (8 GT scenarios): displayed subtotal, discount and total match expected values exactly; promo only applies at subtotal >= 50; shipping updates total; Pay behaviour per rule. REST: variables and expressions exist; no hard-coded result frames. Plugins (incl. development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
20% steppers; 15% shipping; 25% promo rule; 40% totals correct (25 pts) and Pay gating (15 pts).
R06.08.01.03-T18 Connect a phone controller to a TV prototype with ProtoPie Connect
Original instruction
Build two pies: a phone remote (swipe pad, OK, Back) and a TV home screen (5x3 tile grid with focus ring). Using ProtoPie Connect, swipes on the phone (in ProtoPie Player on the iOS test device) move focus on the TV pie running on the desktop; OK opens the focused tile, Back returns.
- Platforms
mac· macOSwin· Windowsios· iOS/iPadOS- Applications
- ProtoPie · ProtoPie Connect · ProtoPie Player
- Interfaces
desk· Desktop GUImob· Mobile touch- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G3· GUI-only- Interaction primitives
touch· Touch gesturesdrag· Drag & dropmulti· Cross-app- Work product
WP08· App/system state- Conditions
licensed· Licensed pro appxdevice· Cross-devicelong· Long-horizon- Proposed difficulty
- 5 / 5
Proposed verifier
Connect message log captured: swipe events send messages 'left/right/up/down' and OK/Back; TV pie focus index changes correctly for a 12-step GT input script (grader replays messages and reads TV state via Player automation); edge clamping at grid borders; on-device run evidenced by Connect device list. Connect's Socket.IO API and plugins are disabled; only the paired iOS Player and desktop pie may connect.
Proposed partial credit
30% phone messages; 35% TV focus logic; 20% open/back; 15% on-device connection.
R06.08.01.03-T19 Build a drag-and-drop sorting game prototype
Original instruction
In ProtoPie build a recycling sort game: 8 item images can be dragged into 3 bins (paper, plastic, glass); correct drops snap into the bin and increment a score, wrong drops spring back to the start position; after all 8, show 'Done' with the score. Save output/sort_game.pie.
- Platforms
mac· macOSwin· Windows- Applications
- ProtoPie · Figma
- Interfaces
desk· Desktop GUI- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G3· GUI-only- Interaction primitives
drag· Drag & dropclick· Point & click- Work product
WP08· App/system state- Conditions
licensed· Licensed pro app- Proposed difficulty
- 4 / 5
Proposed verifier
Player automation drags each item to each bin (24 cases): correct-bin drops snap inside bin bounds and score increments by 1; wrong drops return to start within 2 px; 'Done' screen appears after 8 correct with score text 8. Logic implemented with variables/conditions in the pie. The VM has no terminal or editor besides the two apps, and .pie files written outside ProtoPie are logged and fail.
Proposed partial credit
35% correct-drop snapping; 25% wrong-drop return; 20% score; 20% completion state.
R06.08.01.03-T20 Prototype a 20-screen app from an interaction spec table
Original instruction
From input/fitness_app_spec.xlsx (20 screens, 64 interactions with triggers, destinations, transitions, durations), wire the provided Figma screens in 'Fitness App' accordingly, including 6 overlays, 3 interactive components, 2 conditional flows with variables, and 4 flow starting points.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & dropnav· Pan/zoom/scroll- Work product
WP08· App/system state- Conditions
long· Long-horizon- Proposed difficulty
- 5 / 5
Proposed verifier
REST interaction graph vs spec: trigger/action/destination/transition/duration correct for >= 95% of 64 rows; overlays positioned per spec; conditionals produce the right branches in Playwright tests (6 scenarios); flow starts present; no extra dead links. Plugins (incl. development plugins) are disabled for the agent's account and no personal access token is issued.
Proposed partial credit
45% interaction rows correct; 15% overlays; 20% conditional flows; 20% flow starts (10 pts) and no dead links (10 pts).
Mapped research references
No benchmark reference is assigned to this class in the current mapping.