计算机使用智能体分类English
R06.08.01.03 · 任务小类

交互原型

Interactive prototyping

Wire flows and interactions that behave as specified.

20 条本项目编写的提案 · 分类 v1.1 · 新增基准运行 0 次。下方验证方式与部分得分规则是设计,不是执行结果。

典型应用
Figma · ProtoPie · Framer
小类 GUI 需求标签
G2 · GUI 必要

任务提案 · 20

展开查看完整原文与建议检查方式;两种界面均保留提案英文原文。

R06.08.01.03-T01 Wire a six-screen onboarding with Smart Animate

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
drag · 拖放 click · 指向与点击
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
drag · 拖放 click · 指向与点击
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
2 / 5

建议验证方式

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.

建议部分得分

40% overlay action; 30% position and dim; 15% click-outside close; 15% Apply closes.

R06.08.01.03-T03 Build a snapping horizontal carousel

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
drag · 拖放 click · 指向与点击 geom · 精确几何
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
drag · 拖放 click · 指向与点击
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
2 / 5

建议验证方式

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.

建议部分得分

50% variant interactions; 20% transition; 30% instances toggle in prototype.

R06.08.01.03-T05 Prototype a cart counter with variables and conditions

原始指令

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).

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
click · 指向与点击 type · 文字与表单 drag · 拖放
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
4 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
mac · macOS win · Windows
应用
ProtoPie
交互表面
desk · 桌面 GUI
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G3 · 仅 GUI
交互原语
drag · 拖放 click · 指向与点击
工作产物
WP08 · 应用 / 系统状态
条件
licensed · 授权专业软件
提案难度
4 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
mac · macOS win · Windows and · Android
应用
ProtoPie · ProtoPie Player
交互表面
desk · 桌面 GUI mob · 移动触控
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G3 · 仅 GUI
交互原语
click · 指向与点击 drag · 拖放 touch · 触控手势
工作产物
WP08 · 应用 / 系统状态
条件
licensed · 授权专业软件 xdevice · 跨设备
提案难度
4 / 5

建议验证方式

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).

建议部分得分

50% tilt mappings; 20% clamping; 30% on-device test recording.

R06.08.01.03-T08 Prototype inline email validation with conditional states

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
click · 指向与点击 type · 文字与表单
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
4 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
web · 任意系统(网页)
应用
Framer
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
click · 指向与点击 hover · 悬停与上下文 drag · 拖放
工作产物
WP08 · 应用 / 系统状态
条件
licensed · 授权专业软件
提案难度
3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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'.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
click · 指向与点击 drag · 拖放 nav · 平移 / 缩放 / 滚动
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
click · 指向与点击 nav · 平移 / 缩放 / 滚动 hover · 悬停与上下文
工作产物
WP08 · 应用 / 系统状态
条件
hidden · 隐藏 / 过期状态
提案难度
3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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).

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
click · 指向与点击 drag · 拖放
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
2 / 5

建议验证方式

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.

建议部分得分

50% auto-advance; 20% transition; 30% spinner loop.

R06.08.01.03-T13 Wire the onboarding through the Plugin API (control pair of T01)

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma Plugin API
交互表面
api · API / SDK
GUI 需求 · 任务设定
AP · API 足够
GUI 需求 · 普通权限
AP · API 足够
交互原语
code · 代码与命令
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
mac · macOS win · Windows
应用
ProtoPie
交互表面
desk · 桌面 GUI
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G3 · 仅 GUI
交互原语
drag · 拖放 click · 指向与点击
工作产物
WP08 · 应用 / 系统状态
条件
licensed · 授权专业软件
提案难度
3 / 5

建议验证方式

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.

建议部分得分

30% clamped drag; 35% label formula; 35% color interpolation.

R06.08.01.03-T15 Add a spring-animated like button micro-interaction

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
click · 指向与点击 drag · 拖放 geom · 精确几何
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
click · 指向与点击 type · 文字与表单
工作产物
WP08 · 应用 / 系统状态
条件
未声明
提案难度
3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
click · 指向与点击 type · 文字与表单 drag · 拖放
工作产物
WP08 · 应用 / 系统状态
条件
long · 长流程
提案难度
5 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
mac · macOS win · Windows ios · iOS/iPadOS
应用
ProtoPie · ProtoPie Connect · ProtoPie Player
交互表面
desk · 桌面 GUI mob · 移动触控
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G3 · 仅 GUI
交互原语
touch · 触控手势 drag · 拖放 multi · 跨应用
工作产物
WP08 · 应用 / 系统状态
条件
licensed · 授权专业软件 xdevice · 跨设备 long · 长流程
提案难度
5 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
mac · macOS win · Windows
应用
ProtoPie · Figma
交互表面
desk · 桌面 GUI
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G3 · 仅 GUI
交互原语
drag · 拖放 click · 指向与点击
工作产物
WP08 · 应用 / 系统状态
条件
licensed · 授权专业软件
提案难度
4 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台
web · 任意系统(网页)
应用
Figma
交互表面
brow · 浏览器
GUI 需求 · 任务设定
G2 · GUI 必要
GUI 需求 · 普通权限
G2 · GUI 必要
交互原语
click · 指向与点击 drag · 拖放 nav · 平移 / 缩放 / 滚动
工作产物
WP08 · 应用 / 系统状态
条件
long · 长流程
提案难度
5 / 5

建议验证方式

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.

建议部分得分

45% interaction rows correct; 15% overlays; 20% conditional flows; 20% flow starts (10 pts) and no dead links (10 pts).

已有研究映射

当前映射未给此小类指定基准参考。

同工作流族的小类