Screen design with auto-layout & components
Build responsive screens with auto-layout, constraints and components.
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 · Sketch · Penpot
- Class GUI-need label
HY· Hybrid
Task proposals · 20
Expand to inspect the complete original wording and proposed checks. Original proposal text remains English in both interfaces.
R06.08.01.01-T01 Replicate a mobile screen with auto-layout and library components
Original instruction
In the Figma file 'Recipes App' (test account), recreate ref/recipe_detail.png as a 390x844 frame 'Recipe Detail' using vertical auto-layout (gap 16, padding 24), the library text styles (Heading/L, Body/M, Caption) and instances of 'Button/Primary' and 'Chip/Tag' from the linked library. No raster images except the hero photo fixture.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & dropvis· Visual judgment- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST node tree: frame size 390x844; layoutMode VERTICAL, itemSpacing 16, padding 24; all text nodes use library style ids; buttons/chips are INSTANCE nodes of the library components; frame render SSIM >= 0.90 vs reference. No plugin or write token issued; plugin-run log must be empty.
Proposed partial credit
25% auto-layout settings; 25% styles; 25% component instances; 25% visual match.
R06.08.01.01-T02 Turn a list screen into a two-column card grid
Original instruction
In Figma file 'Shop' modify frame 'Products/List' (390 wide) into 'Products/Grid': a 2-column card grid using nested auto-layout (wrap or rows of 2), card component 'Card/Product' instances, keeping the spacing tokens of the original (gap 12, padding 16) and all 10 products in the same order.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & dropvis· Visual judgment- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: new frame exists; 10 instances of Card/Product in reading order matching original product order; 2 columns (x positions take 2 values); gaps 12 and padding 16 via auto-layout (layoutWrap WRAP or nested rows); card widths equal and fill the frame minus padding. Plugin-run log empty.
Proposed partial credit
30% grid structure; 25% spacing tokens kept; 25% instances in order; 20% equal fill widths.
R06.08.01.01-T03 Set constraints so a card stretches from mobile to desktop
Original instruction
In Figma frame 'Profile' (390 wide), set constraints and resizing on the header, avatar, card and footer so that resizing the frame to 1440 wide gives: header and card stretch left-right with 24 px margins, avatar stays centered, footer pinned to bottom with fill width. Leave the frame at 390.
- Platforms
mac· macOSwin· Windows- Applications
- Figma
- Interfaces
desk· Desktop GUI- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropgeom· Precise geometryclick· Point & click- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 2 / 5
Proposed verifier
Grader duplicates the frame via REST-readable state and computes layout at 1440 (constraints/layoutSizing replay): header and card widths 1392 +/- 1 with x = 24; avatar center at 720 +/- 1; footer bottom-pinned and full width. Frame width still 390. Plugin execution (incl. development plugins) is disabled for the agent's account, no personal access token is issued, and the plugin-run log must be empty.
Proposed partial credit
35% stretch constraints; 25% centered avatar; 25% footer pinning; 15% frame left at 390.
R06.08.01.01-T04 Swap legacy button symbols across all pages in Sketch
Original instruction
In fixtures/banking_app.sketch, replace every instance of symbol 'Old/Button' on all 8 pages with 'Btn/Primary' from the same document, preserving each instance's text override and frame size, then delete the 'Old/Button' master. Save output/banking_app.sketch.
- Platforms
mac· macOS- Applications
- Sketch
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
click· Point & clickhover· Hover & context- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro app- Proposed difficulty
- 2 / 5
Proposed verifier
.sketch (zip JSON) parsed: 0 instances referencing Old/Button symbolID; same count of Btn/Primary instances added at the same frames (+/- 0.5 px); text overrides preserved; Old/Button master removed; no other layers changed.
Proposed partial credit
40% all instances swapped; 30% overrides kept; 15% frames kept; 15% master removed.
R06.08.01.01-T05 Design a responsive dashboard at three breakpoints
Original instruction
In Figma file 'Analytics', build the dashboard in input/dashboard_brief.pdf at 1440 (12-col grid), 768 (8-col) and 390 (4-col) frames, using the same component instances (KPI card, chart card, table) with auto-layout wrap so cards reflow 4 -> 2 -> 1 per row, and side nav collapsing to a bottom tab bar on mobile.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropclick· Point & clickvis· Visual judgment- Work product
WP03· Visual layout- Conditions
long· Long-horizon- Proposed difficulty
- 4 / 5
Proposed verifier
REST: 3 frames with layout grids (columns 12/8/4); KPI cards per row 4/2/1 measured from positions; instances of the same main components in all 3; side nav variant vs bottom tab variant per breakpoint; no detached instances; content order identical.
Proposed partial credit
25% grids; 30% reflow per breakpoint; 25% shared components; 20% nav adaptation.
R06.08.01.01-T06 Build a settings screen from a wireframe with component overrides
Original instruction
Using the 'Mobile UI Kit' library in Figma, build frame 'Settings' (390x844) from ref/settings_wireframe.png: 3 grouped sections of 'List/Row' instances with the right variant (toggle, chevron, value), toggles set on/off per the wireframe, section headers with Caption style, and auto-layout throughout.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & drop- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: 14 List/Row instances with variant properties matching the wireframe (type and toggle state) in the right order; 3 section containers with vertical auto-layout; header text nodes use Caption style; no absolute-positioned children inside auto-layout.
Proposed partial credit
40% correct row variants and states; 25% order and sections; 20% auto-layout; 15% styles.
R06.08.01.01-T07 Repair detached instances and absolute layers without visual change
Original instruction
Frame 'Checkout' in Figma file 'Store' was hand-edited: 6 component instances were detached, 4 layers are absolutely positioned inside auto-layout, and spacing was faked with empty rectangles. Restore real instances, remove spacers, and rebuild spacing with auto-layout so the render stays the same.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickvis· Visual judgmentdrag· Drag & drop- Work product
WP03· Visual layout- Conditions
hidden· Hidden/stale state- Proposed difficulty
- 3 / 5
Proposed verifier
REST: 0 detached copies of library components (matched by structure) and the 6 GT spots are INSTANCE nodes; 0 spacer rectangles; layoutPositioning ABSOLUTE count 0 in auto-layout parents; render diff vs original: SSIM >= 0.98 and max element displacement <= 2 px.
Proposed partial credit
35% instances restored; 25% spacers replaced by auto-layout; 15% absolute layers fixed; 25% visual unchanged.
R06.08.01.01-T08 Build a login screen with flex layout in Penpot
Original instruction
In Penpot (self-hosted test instance), create board 'Login' 390x844 with a centered column using flex layout: logo, two input components (email, password), primary button, and a 'Forgot password?' link, gap 16, padding 24, all inputs fill width.
- Platforms
web· Any OS (web)- Applications
- Penpot
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & drop- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 2 / 5
Proposed verifier
Penpot file export (.penpot JSON) parsed: board size; flex layout column with gap 16 and padding 24; inputs and button are component copies with fill-width sizing; vertical order exact; centered alignment.
Proposed partial credit
30% flex settings; 30% component copies; 25% fill sizing; 15% order and alignment.
R06.08.01.01-T09 Create a resizable data-table component
Original instruction
In Figma build component 'Table' from rows of auto-layout cells: header row plus 'Table/Row' component with 5 cells (Name fill, Status hug, Date fixed 120, Amount fixed 100 right-aligned, Actions hug), so that resizing the table from 800 to 1200 wide only grows the Name column. Show 8 rows with realistic synthetic data.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropclick· Point & clickgeom· Precise geometry- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
REST: Table/Row component with 5 children and layoutSizingHorizontal FILL/HUG/FIXED per spec; amount text right-aligned; table instance resized by grader to 1200 (computed from sizing modes): only Name width changes (+400 +/- 1); 8 row instances; header aligned to row cells (x offsets equal).
Proposed partial credit
35% sizing modes; 30% resize behaviour; 20% component structure; 15% alignment.
R06.08.01.01-T10 Adapt a screen for German strings without truncation
Original instruction
Duplicate frame 'Onboarding/EN' in Figma as 'Onboarding/DE' and paste the German strings from input/strings_de.json (30-60% longer). Adjust auto-layout (wrapping, hug, min/max widths) so no text is truncated or overflows its container, buttons keep 48 px height or grow to fit 2 lines, and the screen stays 390 wide.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
type· Text & formsclick· Point & clickvis· Visual judgment- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: all text nodes contain the DE strings exactly; textTruncation DISABLED and no text bbox exceeds its parent's bounds; buttons height 48 or auto-grown with 2 lines; frame width 390; render shows no overlaps (bbox intersection check).
Proposed partial credit
25% strings applied; 35% no truncation/overflow; 20% button rules; 20% no overlaps.
R06.08.01.01-T11 Fix touch targets and contrast on a mobile screen
Original instruction
Frame 'Feed' in Figma has accessibility issues. Make every interactive element at least 44x44 pt (enlarge hit areas via padding, not icons), raise text contrast to >= 4.5:1 (body) and >= 3:1 (large text) using only colors from the library palette, and keep layout spacing tokens.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickvis· Visual judgment- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: all nodes in the GT interactive set have bounds >= 44x44; icon vector sizes unchanged; computed WCAG contrast for every text node against its rendered background meets thresholds; all fills are library style ids; auto-layout gaps unchanged.
Proposed partial credit
35% touch targets; 40% contrast; 15% palette only; 10% spacing preserved.
R06.08.01.01-T12 Design a product detail page from a brief
Original instruction
In Figma, design 'PDP' at 1440 per input/pdp_brief.pdf: image gallery (main + 4 thumbs), title, rating, price with sale variant, size selector component (variants), add-to-cart button, accordion for details, and 'You may also like' carousel of 4 product cards, all with auto-layout and library components.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropclick· Point & clickvis· Visual judgment- Work product
WP03· Visual layout- Conditions
long· Long-horizon- Proposed difficulty
- 4 / 5
Proposed verifier
REST: required sections present (detected by component instances and names); size selector instance with 6 options and one selected; sale price variant shows strike-through; 12-col layout grid with content aligned to columns (x on column edges +/- 1); all auto-layout; VLM rubric vs brief hierarchy (15%).
Proposed partial credit
35% required sections; 20% component variants; 30% grid alignment (20 pts) and auto-layout (10 pts); 15% rubric.
R06.08.01.01-T13 Build the recipe screen through the Plugin API (control pair of T01)
Original instruction
Control pair of T01: write and run a Figma development plugin that builds the same 'Recipe Detail' frame (390x844, vertical auto-layout gap 16 padding 24, library styles and Button/Primary + Chip/Tag instances) in a copy of the file, without manual canvas 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
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
Same structural and SSIM checks as T01. Here the plugin-run log must show the plugin; version history must show no manual edits. Scored side by side with T01 for the GUI-vs-API delta.
Proposed partial credit
25% auto-layout settings; 25% styles; 25% component instances; 25% visual match.
R06.08.01.01-T14 Lay out three onboarding screens on an 8-point grid
Original instruction
Create 3 onboarding frames (390x844) in Figma from input/onboarding_copy.txt and illustrations in fixtures/illus/: identical structure (illustration, title, body, page dots, Next button), every position and size on the 8 pt grid, title baselines at the same y on all three, and Next button bottom-pinned at 32 from the bottom.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
geom· Precise geometrydrag· Drag & dropclick· Point & click- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: 3 frames; all child x/y/width/height multiples of 8 (text height excepted); title node y equal across frames; illustrations 342 wide centered; page-dot component variant shows current page 1/2/3; Next button bottom offset 32 via constraints or auto-layout.
Proposed partial credit
35% 8-pt grid; 25% consistent structure; 20% page dots; 20% button pinning.
R06.08.01.01-T15 Prepare a screen for developer handoff
Original instruction
Prepare frame 'Checkout/Payment' for handoff in Figma: rename layers per notes/naming.md (kebab-case, no 'Frame 123'), mark icons as exportable SVG and hero image as PNG @1x/2x/3x, add Dev Mode annotations for the 3 interactive states, and set 'Ready for dev' status.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP03· Visual layout- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
REST: 0 default layer names in the frame subtree; names match naming regex; exportSettings on GT icon nodes (SVG) and hero (PNG 1x/2x/3x); 3 annotations attached to the GT interactive nodes; devStatus READY_FOR_DEV on the frame.
Proposed partial credit
30% layer naming; 30% export settings; 25% annotations; 15% ready status.
R06.08.01.01-T16 Rebuild an imported flat screen as auto-layout components
Original instruction
fixtures/legacy_screen.svg (a flat export: groups and absolutely placed shapes) is imported into Figma as 'Legacy/Orders'. Rebuild it as 'Orders' using auto-layout everywhere and the library components (List/Row, Badge, Button) instead of raw shapes, matching the original render.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropvis· Visual judgmentclick· Point & click- Work product
WP03· Visual layout- Conditions
long· Long-horizon- Proposed difficulty
- 4 / 5
Proposed verifier
REST: new frame uses auto-layout on all containers (absolute children 0); >= 90% of GT component spots are INSTANCE nodes of the right components; text uses library styles; render SSIM >= 0.93 vs the legacy render and element positions within 3 px.
Proposed partial credit
30% auto-layout; 30% components replacing shapes; 15% styles; 25% visual match.
R06.08.01.01-T17 Build a multi-breakpoint landing page in Framer
Original instruction
In Framer (test workspace), build the landing page in input/landing_brief.pdf with desktop 1200, tablet 810 and phone 390 breakpoints: hero, 3-feature row becoming a column on phone, pricing cards stack, footer; use stacks with gap tokens and publish to a staging subdomain.
- Platforms
web· Any OS (web)- Applications
- Framer
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropclick· Point & clickvis· Visual judgment- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro app- Proposed difficulty
- 4 / 5
Proposed verifier
Grader loads the staging URL at 1200/810/390 viewport (Playwright): section order; feature items in a row (same y) at 1200 and stacked (same x) at 390; pricing cards stack on phone; gaps match tokens +/- 1 px; no horizontal scroll at 390; publish timestamp in session.
Proposed partial credit
30% section structure; 35% responsive behaviour; 20% spacing tokens; 15% published.
R06.08.01.01-T18 Design a six-screen mobile app flow from a PRD
Original instruction
From input/prd_habit_tracker.pdf design the 6 screens (Today, Habit detail, New habit form, Stats, Settings, Empty state) at 390x844 in Figma using the 'Mobile UI Kit' library: auto-layout everywhere, components for repeated items, consistent spacing tokens, every PRD field and state represented.
- Platforms
web· Any OS (web)- Applications
- Figma
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
drag· Drag & dropclick· Point & clickvis· Visual judgment- Work product
WP03· Visual layout- Conditions
long· Long-horizon- Proposed difficulty
- 5 / 5
Proposed verifier
REST: 6 frames named per PRD; PRD requirement checklist (32 items: fields, buttons, states) matched by node names/text (>= 90%); repeated items are instances; spacing values only from the token set; 0 absolute children in auto-layout. VLM rubric for hierarchy/consistency (15%).
Proposed partial credit
40% PRD coverage; 20% components; 25% spacing tokens (15 pts) and auto-layout (10 pts); 15% rubric.
R06.08.01.01-T19 Rebuild a web page from a screenshot at pixel accuracy
Original instruction
Rebuild ref/saas_pricing_1440.png (full-page screenshot) as a 1440-wide Figma frame with auto-layout, text styles extracted from the screenshot (font Inter), and components for the 3 pricing cards and FAQ items, so the frame render is near pixel-identical.
- 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
vis· Visual judgmentgeom· Precise geometrydrag· Drag & drop- Work product
WP03· Visual layout- Conditions
long· Long-horizon- Proposed difficulty
- 5 / 5
Proposed verifier
Render vs screenshot: SSIM >= 0.92, element bbox IoU >= 0.9 for 40 GT elements, text content exact, font sizes within 1 px, colors ΔE2000 <= 2; pricing cards and FAQ items are instances; auto-layout throughout. Pasting the screenshot as an image layer fails (image fills limited to GT photo areas). Plugins (incl. html-to-design importers and dev plugins) are disabled for the agent's account; no access token is issued.
Proposed partial credit
40% visual match; 25% element geometry; 20% components/auto-layout; 15% typography and color.
R06.08.01.01-T20 Migrate a Sketch screen set into Figma components
Original instruction
Import fixtures/legacy_app.sketch (12 screens, 40 symbols, shared text and color styles) into Figma, convert symbols to components with variants where Sketch used override-based states, map shared styles to Figma styles, and rebuild the 4 most-used layouts with auto-layout. Keep all 12 screens visually identical.
- Platforms
mac· macOSwin· Windows- Applications
- Figma · Sketch
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & dropvis· Visual judgment- Work product
WP03· Visual layout- Conditions
licensed· Licensed pro applong· Long-horizonmultiapp· Multi-app- Proposed difficulty
- 5 / 5
Proposed verifier
REST: 12 frames with render SSIM >= 0.97 vs Sketch exports; >= 40 components (state symbols merged into variant sets per GT mapping); all text and fills reference styles; 4 GT layouts use auto-layout; 0 detached imports in those 4 layouts.
Proposed partial credit
25% visual fidelity; 30% components and variants; 20% styles mapped; 25% auto-layout rebuilds.
Mapped research references
Existing benchmark-to-class links from the research catalog. They are not record-level annotations, executions or product endorsements.