R06.08.01.01 · 任务小类

自动布局与组件化屏幕设计

Screen design with auto-layout & components

Build responsive screens with auto-layout, constraints and components.

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

典型应用: Figma · Sketch · Penpot
小类 GUI 需求标签: HY · 混合

任务提案 · 20

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

R06.08.01.01-T01 Replicate a mobile screen with auto-layout and library components

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 drag · 拖放 vis · 视觉判断
工作产物: WP03 · 视觉排版
条件: 未声明
提案难度: 3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 drag · 拖放 vis · 视觉判断
工作产物: WP03 · 视觉排版
条件: 未声明
提案难度: 3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台: mac · macOS win · Windows
应用: Figma
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: G2 · GUI 必要
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: drag · 拖放 geom · 精确几何 click · 指向与点击
工作产物: WP03 · 视觉排版
条件: 未声明
提案难度: 2 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台: mac · macOS
应用: Sketch
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: CL · CLI 足够
交互原语: click · 指向与点击 hover · 悬停与上下文
工作产物: WP03 · 视觉排版
条件: licensed · 授权专业软件
提案难度: 2 / 5

建议验证方式

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

建议部分得分

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

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: drag · 拖放 click · 指向与点击 vis · 视觉判断
工作产物: WP03 · 视觉排版
条件: long · 长流程
提案难度: 4 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 drag · 拖放
工作产物: WP03 · 视觉排版
条件: 未声明
提案难度: 3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 vis · 视觉判断 drag · 拖放
工作产物: WP03 · 视觉排版
条件: hidden · 隐藏 / 过期状态
提案难度: 3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台: web · 任意系统（网页）
应用: Penpot
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 drag · 拖放
工作产物: WP03 · 视觉排版
条件: 未声明
提案难度: 2 / 5

建议验证方式

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.

建议部分得分

30% flex settings; 30% component copies; 25% fill sizing; 15% order and alignment.

R06.08.01.01-T09 Create a resizable data-table component

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: drag · 拖放 click · 指向与点击 geom · 精确几何
工作产物: WP03 · 视觉排版
条件: 未声明
提案难度: 4 / 5

建议验证方式

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

建议部分得分

35% sizing modes; 30% resize behaviour; 20% component structure; 15% alignment.

R06.08.01.01-T10 Adapt a screen for German strings without truncation

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: type · 文字与表单 click · 指向与点击 vis · 视觉判断
工作产物: WP03 · 视觉排版
条件: 未声明
提案难度: 3 / 5

建议验证方式

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

建议部分得分

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

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 vis · 视觉判断
工作产物: WP03 · 视觉排版
条件: 未声明
提案难度: 3 / 5

建议验证方式

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.

建议部分得分

35% touch targets; 40% contrast; 15% palette only; 10% spacing preserved.

R06.08.01.01-T12 Design a product detail page from a brief

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: drag · 拖放 click · 指向与点击 vis · 视觉判断
工作产物: WP03 · 视觉排版
条件: long · 长流程
提案难度: 4 / 5

建议验证方式

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

建议部分得分

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)

原始指令

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.

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

建议验证方式

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.

建议部分得分

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

原始指令

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.

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

建议验证方式

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.

建议部分得分

35% 8-pt grid; 25% consistent structure; 20% page dots; 20% button pinning.

R06.08.01.01-T15 Prepare a screen for developer handoff

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 type · 文字与表单
工作产物: WP03 · 视觉排版
条件: 未声明
提案难度: 3 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: drag · 拖放 vis · 视觉判断 click · 指向与点击
工作产物: WP03 · 视觉排版
条件: long · 长流程
提案难度: 4 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台: web · 任意系统（网页）
应用: Framer
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: drag · 拖放 click · 指向与点击 vis · 视觉判断
工作产物: WP03 · 视觉排版
条件: licensed · 授权专业软件
提案难度: 4 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: drag · 拖放 click · 指向与点击 vis · 视觉判断
工作产物: WP03 · 视觉排版
条件: long · 长流程
提案难度: 5 / 5

建议验证方式

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

建议部分得分

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

原始指令

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.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: G2 · GUI 必要
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: vis · 视觉判断 geom · 精确几何 drag · 拖放
工作产物: WP03 · 视觉排版
条件: long · 长流程
提案难度: 5 / 5

建议验证方式

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.

建议部分得分

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

原始指令

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.

平台: mac · macOS win · Windows
应用: Figma · Sketch
交互表面: desk · 桌面 GUI
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 drag · 拖放 vis · 视觉判断
工作产物: WP03 · 视觉排版
条件: licensed · 授权专业软件 long · 长流程 multiapp · 多应用
提案难度: 5 / 5

建议验证方式

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.

建议部分得分

25% visual fidelity; 30% components and variants; 20% styles mapped; 25% auto-layout rebuilds.

已有研究映射

以下沿用研究目录中的基准与小类映射，不是逐题标注、执行记录或产品背书。

自动布局与组件化屏幕设计

任务提案 · 20

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

已有研究映射

同工作流族的小类