R06.08.01.02 · 任务小类

设计系统、变量与主题

Design systems, variables & theming

Maintain tokens, variants and themes across a library.

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

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

任务提案 · 20

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

R06.08.01.02-T01 Create a light/dark color variable collection and bind layers

原始指令

In Figma file 'DS Core' (Professional test team), create variable collection 'Color' with modes Light and Dark and the 12 tokens in input/color_tokens.csv (e.g. bg/surface, text/primary, border/subtle), then bind the fills/strokes of the 30 layers listed in input/bind_list.csv to the right tokens.

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

建议验证方式

REST GET /v1/files/:key/variables/local: collection with 2 modes named exactly, 12 variables with per-mode values equal to CSV (hex exact); node tree: each listed layer's fill/stroke boundVariables points to the expected variable id. No REST write token issued; plugin-run log empty.

建议部分得分

25% collection and modes; 30% token values; 45% layer bindings.

R06.08.01.02-T02 Build a Button component set with size and state variants

原始指令

In Figma file 'DS Core', build component set 'Button' with variant properties Size {S, M, L} x State {Default, Hover, Pressed, Disabled} (12 variants), a boolean property 'hasIcon' toggling a leading icon, and a text property 'Label'. Heights 32/40/48, horizontal padding 12/16/20, auto-layout.

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

建议验证方式

REST: COMPONENT_SET 'Button' with 12 variants and exact property names/values; componentPropertyDefinitions include BOOLEAN hasIcon bound to the icon visibility and TEXT Label bound to the text; heights and paddings per size; state fills differ per spec table; auto-layout on each variant.

建议部分得分

30% variant matrix; 25% boolean and text properties; 30% sizing per spec; 15% state styling.

R06.08.01.02-T03 Replace hard-coded colors with the nearest tokens

原始指令

Four screens in Figma file 'Legacy App' use 214 hard-coded hex fills. Replace each with a binding to the nearest token in the 'Color' collection (ΔE2000 <= 1 required; flag the 6 colors with no match by adding them to a page 'Unmatched' as swatches) without detaching instances or changing the render.

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

建议验证方式

REST: every fill in the 4 screens is either bound to a variable whose value is within ΔE2000 <= 1 of the original hex, or belongs to the GT unmatched set and appears as a swatch on 'Unmatched'; instance count unchanged; render SSIM >= 0.995 vs before.

建议部分得分

50% fills bound to correct tokens; 20% unmatched handled; 15% no detaching; 15% render unchanged.

R06.08.01.02-T04 Bind spacing variables to auto-layout gaps and padding

原始指令

In Figma file 'DS Core', create number collection 'Spacing' (space-4, 8, 12, 16, 24, 32) and bind the auto-layout gap and padding values of the 6 components on page 'Components' (Card, ListItem, Modal, Toast, Input, Button) to the matching variables; values must not change.

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

建议验证方式

REST variables: 6 FLOAT variables with exact values; nodes: itemSpacing and padding fields of every auto-layout node in the 6 components have boundVariables to the variable matching the current value (100% of GT fields); computed values unchanged.

建议部分得分

30% spacing collection; 60% bindings coverage; 10% values unchanged.

R06.08.01.02-T05 Create a typography scale of text styles

原始指令

In Figma create 8 text styles from input/type_scale.csv (Display, H1, H2, H3, Body/L, Body/M, Caption, Overline) using Inter, a 1.25 modular scale from 16 px, line heights per CSV, letter spacing for Overline +8%, and apply them to the specimen frame 'Type Specimen'.

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

建议验证方式

REST styles: 8 TEXT styles with exact names; fontFamily Inter; font sizes per CSV (16 x 1.25^n rounded per CSV); line heights and letter spacing exact; specimen text nodes reference the right style ids.

建议部分得分

50% style definitions; 30% applied in specimen; 20% naming.

R06.08.01.02-T06 Import a Tokens Studio JSON as variables and styles

原始指令

Import input/tokens.json (Tokens Studio format: primitives, semantic aliases, 2 themes) into Figma file 'DS Import' so primitives become one collection, semantic tokens a second collection aliasing primitives with modes Light/Dark, and typography tokens text styles. Use the Tokens Studio plugin or manual entry.

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

建议验证方式

REST variables: primitives collection values match JSON; semantic variables are VARIABLE_ALIAS to the correct primitive per mode (100% of GT aliases); modes named Light/Dark; text styles match typography tokens; no hard-coded duplicates of aliased values.

建议部分得分

25% primitives; 40% semantic aliases per mode; 20% typography styles; 15% no duplicates.

R06.08.01.02-T07 Set up multi-brand theming with aliased semantic tokens

原始指令

Extend Figma file 'DS Core' to support two brands: add modes 'Brand A' and 'Brand B' to a new 'Brand' collection of primitives, make semantic 'Color' tokens alias brand primitives, and set the 'Promo Page' frame to Brand B / Dark so it renders per ref/promo_brandB_dark.png.

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

建议验证方式

REST variables: Brand collection with 2 modes and values per input/brands.csv; semantic tokens alias brand primitives (not hex) for all 12 colors; frame explicitVariableModes set to Brand B and Dark; render SSIM >= 0.97 vs reference.

建议部分得分

25% brand primitives; 35% aliasing; 20% frame modes; 20% render match.

R06.08.01.02-T08 Publish a library change and update consumer files

原始指令

In 'DS Core' change component 'Card' (corner radius 8 -> 12, shadow token updated), publish the library with a description, then in consumer files 'App iOS' and 'App Web' accept the update so all Card instances reflect it without losing overrides.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 multi · 跨应用
工作产物: WP08 · 应用 / 系统状态
条件: licensed · 授权专业软件
提案难度: 3 / 5

建议验证方式

REST: DS Core component Card has radius 12 and new effect style; library publish version exists with description; in both consumer files every Card instance references the new component version (componentId/key latest) with radius 12; text overrides identical to before.

建议部分得分

25% component edited; 20% published with description; 40% both consumers updated; 15% overrides kept.

R06.08.01.02-T09 Expose nested instance and text properties on a card component

原始指令

Refactor component 'Card/Article' in Figma so consumers can change the nested 'Avatar' size variant, the 'Badge' instance (instance-swap property preferred-values: Badge/New, Badge/Sale), the title and excerpt text (text properties) and toggle the image (boolean), without detaching. Update the 5 existing instances to use these properties.

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

建议验证方式

REST componentPropertyDefinitions: INSTANCE_SWAP with the 2 preferred values, TEXT title/excerpt, BOOLEAN image, nested instance Avatar exposed (isExposedInstance); the 5 instances set properties matching GT values; no detached copies.

建议部分得分

45% property definitions; 20% nested exposure; 25% instances updated; 10% no detaching.

R06.08.01.02-T10 Set up color variables and text styles in Sketch

原始指令

In fixtures/brand_kit.sketch create 10 Color Variables from input/colors.csv and 6 Text Styles from input/type.csv, apply them to the 'Style Guide' artboard's swatches and specimens, and enable the document as a library. Save output/brand_kit.sketch.

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

建议验证方式

.sketch JSON: sharedSwatches 10 with exact names and RGBA; sharedTextStyles 6 with font/size/line-height per CSV; artboard layers reference swatch and style IDs; document saved with library enabled flag.

建议部分得分

35% color variables; 35% text styles; 20% applied; 10% library flag.

R06.08.01.02-T11 Audit a library for components that bypass tokens

原始指令

Audit Figma file 'DS Core': find every component layer that uses a hard-coded color, radius or spacing instead of a variable or style, and record each in output/token_audit.csv (component, layer path, property, raw value, suggested token). Do not change the file.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 nav · 平移 / 缩放 / 滚动 hover · 悬停与上下文
工作产物: WP02 · 记录 / 表格
条件: 未声明
提案难度: 3 / 5

建议验证方式

CSV vs GT list (built by the grader from the REST tree): recall >= 0.9 and precision >= 0.9 on (component, layer, property); suggested token correct for >= 80% of matched rows; file version unchanged.

建议部分得分

45% recall; 25% precision; 20% token suggestions; 10% file unchanged.

R06.08.01.02-T12 Add breakpoint modes for responsive type and spacing

原始指令

In Figma file 'DS Core' add collection 'Responsive' with modes Mobile, Tablet, Desktop holding font-size and spacing variables per input/responsive_tokens.csv, bind the text styles' font sizes and the page template's paddings to them, and set frames 'Home/390', 'Home/768', 'Home/1440' to the matching modes.

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

建议验证方式

REST variables: 3 modes and per-mode values exact; text styles' fontSize bound to variables; template paddings bound; each frame's explicitVariableModes correct; rendered font sizes in frames match CSV per mode.

建议部分得分

25% collection values; 30% style bindings; 20% padding bindings; 25% frame modes.

R06.08.01.02-T13 Build an icon component library with size variants

原始指令

Turn the 48 SVG icons in fixtures/icons/ into a Figma component library page 'Icons': each icon a component set 'Icon/<name>' with Size 16 and 24 variants, strokes outlined and colored via the token icon/default, consistent 2 px stroke at 24 and 1.5 px at 16, named per notes/icon_naming.md.

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

建议验证方式

REST: 48 component sets with exact names; each with Size=16 and Size=24 variants of exact bounds; fills bound to icon/default; stroke widths per size (pre-outline geometry check via vector network); rasterized icon IoU vs source >= 0.95. Plugins (incl. icon-import and development plugins) are disabled for the agent's account and no personal access token is issued.

建议部分得分

30% component sets and names; 20% size variants; 25% token-bound color; 25% fidelity.

R06.08.01.02-T14 Create the color variables via the Plugin API (control pair of T01)

原始指令

Control pair of T01: write and run a Figma development plugin that creates the same 'Color' collection (Light/Dark, 12 tokens from input/color_tokens.csv) and binds the 30 listed layers, in a copy of 'DS Core', with no manual canvas edits.

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

建议验证方式

Same checks as T01; plugin-run log must show the plugin and version history no manual edits. Scored side by side with T01 for the GUI-vs-API delta.

建议部分得分

25% collection and modes; 30% token values; 45% layer bindings.

R06.08.01.02-T15 Deprecate legacy components and swap instances across files

原始指令

In 'DS Core' move the 9 legacy components listed in notes/deprecate.csv to a page 'Deprecated' with a '[Deprecated]' prefix, publish, then in consumer files 'App iOS', 'App Web' and 'Marketing' swap all their instances to the replacements in the CSV, preserving overrides.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 multi · 跨应用 nav · 平移 / 缩放 / 滚动
工作产物: WP08 · 应用 / 系统状态
条件: licensed · 授权专业软件 long · 长流程 multiapp · 多应用
提案难度: 4 / 5

建议验证方式

REST: 9 components renamed and on the Deprecated page; library published; in the 3 consumer files 0 instances of deprecated keys remain and the replacement count equals the original count; text overrides preserved >= 95%; renders SSIM >= 0.97 vs before (replacement visuals equivalent).

建议部分得分

20% deprecation in library; 15% publish; 45% instances swapped; 20% overrides/render kept.

R06.08.01.02-T16 Fix dark-mode token values to meet contrast

原始指令

Switching Figma file 'Banking UI' to Dark mode produces 17 text/background pairs below WCAG AA. Adjust only Dark-mode values of semantic tokens (never Light) so every text/background pair in the 8 screens meets 4.5:1 (body) or 3:1 (large) in both modes, keeping hue within 10 deg of the original.

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

建议验证方式

Grader renders all 8 screens in both modes and computes contrast for every text node vs underlying background: 100% pass; Light-mode variable values unchanged; Dark values hue within 10 deg of original; no node rebound to different tokens.

建议部分得分

50% contrast pass rate; 20% Light untouched; 15% hue constraint; 15% bindings unchanged.

R06.08.01.02-T17 Export variables as W3C design tokens and CSS

原始指令

Export the 'Color', 'Spacing' and 'Radius' collections of 'DS Core' as W3C Design Tokens format output/tokens.json (with mode-specific values as separate theme files) and output/tokens.css with :root and [data-theme='dark'] custom properties, using Dev Mode or a plugin, then fix names to kebab-case.

平台: web · 任意系统（网页）
应用: Figma · Tokens Studio
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 multi · 跨应用 code · 代码与命令
工作产物: WP02 · 记录 / 表格
条件: 未声明
提案难度: 3 / 5

建议验证方式

tokens.json validates against the DTCG schema ($value/$type); every variable present with values per mode; aliases preserved as references; tokens.css custom properties match JSON values; names kebab-case; dark theme block present.

建议部分得分

35% DTCG JSON correctness; 25% aliases; 25% CSS output; 15% naming.

R06.08.01.02-T18 Build a starter design system for a product team

原始指令

From input/startup_brand.pdf build a design system in a new Figma file: primitive and semantic color variables (Light/Dark), spacing and radius variables, 8 text styles, components Button, Input, Checkbox, Select, Card, Modal, Toast with variants and properties, a documentation page per component, published as a library.

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

建议验证方式

REST: collections/modes present with aliasing; 7 components with variant matrices per brief; every component fill/spacing/radius bound to variables (>= 95% of properties); text uses styles; doc pages exist; library published. VLM rubric for brand fidelity (15%).

建议部分得分

25% variables and aliasing; 35% components; 25% binding coverage (15 pts) and docs/publish (10 pts); 15% rubric.

R06.08.01.02-T19 Merge two design libraries after a team reorganization

原始指令

Teams A and B maintain 'DS-A' and 'DS-B' Figma libraries with overlapping tokens and components. Create 'DS-Unified': dedupe tokens (merge values within ΔE2000 <= 2 per notes/merge_rules.md), keep the A naming scheme, map each B component to an A equivalent or migrate it, and swap instances in 'Product B' to the unified library.

平台: web · 任意系统（网页）
应用: Figma
交互表面: brow · 浏览器
GUI 需求 · 任务设定: HY · 混合
GUI 需求 · 普通权限: G2 · GUI 必要
交互原语: click · 指向与点击 multi · 跨应用 nav · 平移 / 缩放 / 滚动
工作产物: WP03 · 视觉排版
条件: licensed · 授权专业软件 long · 长流程 multiapp · 多应用
提案难度: 5 / 5

建议验证方式

REST: unified collection token count equals GT deduped count (+/- 2) with values per rules; mapping table output/mapping.csv covers all B items; Product B has 0 instances from DS-B and render SSIM >= 0.95 vs before; no orphaned variable bindings.

建议部分得分

30% token dedupe; 25% component mapping; 30% Product B migrated; 15% no broken bindings.

R06.08.01.02-T20 Build a stateful input-field component system with density modes

原始指令

In 'DS Core' build component set 'Input' with variants Type {Text, Password, Search, Select} x State {Default, Focus, Error, Disabled}, properties for label, helper text (boolean + text), leading icon swap, and bind all colors, radii and paddings to variables, with a 'Density' collection (Comfortable/Compact) changing heights 48/36 and paddings.

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

建议验证方式

REST: 16 variants with exact property values; component properties per spec wired to layers; >= 95% of color/radius/padding fields variable-bound; Density modes: instances in Compact frame compute height 36 and Comfortable 48; error state uses danger token on border and helper text.

设计系统、变量与主题

任务提案 · 20

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

原始指令

建议验证方式

建议部分得分

已有研究映射

同工作流族的小类