R02.04.02.01 · TASK CLASS

No-code builders & CMS block editors

Build or change pages in Webflow, WordPress/Gutenberg, Wix or Shopify themes to a spec.

20 project-authored proposals · taxonomy v1.1 · 0 new benchmark runs. Verifiers and partial-credit rules below are designs, not executed results.

Typical applications: Webflow · WordPress · Wix · Shopify theme editor
Class GUI-need label: G3 · GUI-only

Task proposals · 20

Expand to inspect the complete original wording and proposed checks. Original proposal text remains English in both interfaces.

R02.04.02.01-T01 Build a Gutenberg landing page from a mockup

Original instruction

A WordPress 6.6 sandbox is open in the block editor. Build page /launch from input/launch_mock.png and input/copy.md: a Cover block with hero.jpg and the H1 text, a 3-column feature section (icon image, H3, paragraph each), and two buttons ('Start trial', 'Book demo') linking to /signup and /demo. Publish it.

Platforms: web · Any OS (web)
Applications: WordPress · Gutenberg
Interfaces: brow · Browser
GUI need · task setting: G2 · GUI-essential
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: drag · Drag & drop click · Point & click type · Text & forms vis · Visual judgment
Work product: WP03 · Visual layout
Conditions: None declared
Proposed difficulty: 3 / 5

Proposed verifier

Parse post_content of /launch: core/cover with hero.jpg, core/columns with exactly 3 core/column, 2 core/button hrefs exact, copy text exact. Rendered page SSIM ≥0.85 vs mock at 1440 px. No application password, WP-CLI or SSH is issued; REST writes are accepted only from the editor's cookie+nonce session, and the revision must carry an editor autosave.

Proposed partial credit

25% block structure; 25% copy and links exact; 20% hero image and overlay; 30% rendered SSIM threshold

R02.04.02.01-T02 Control pair of T01: build the same page via WP-CLI only

Original instruction

Control pair of T01. Same spec (input/launch_mock.png, input/copy.md) but the browser is unavailable: create and publish page /launch using WP-CLI in the terminal by writing valid block markup (cover, 3 columns, 2 buttons).

Platforms: lin · Linux
Applications: WordPress · WP-CLI
Interfaces: term · Terminal
GUI need · task setting: CL · CLI-sufficient
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: code · Code & commands type · Text & forms
Work product: WP03 · Visual layout
Conditions: None declared
Proposed difficulty: 2 / 5

Proposed verifier

Same checks as T01 on post_content and rendered page (block structure, copy, links, SSIM ≥0.85 at 1440 px). Block markup must parse without 'invalid block' recovery (validate via @wordpress/blocks parse in Node). Reported as the CLI half of the T01 pair.

Proposed partial credit

30% valid block markup; 30% structure; 20% copy/links; 20% SSIM

R02.04.02.01-T03 Restyle a block theme through Global Styles and the footer part

Original instruction

In the Site Editor of a Twenty Twenty-Four sandbox, set Global Styles: primary color #0B5FFF, body font Inter 18px/1.6, links underlined only on hover, H2 weight 700. Edit the Footer template part to show three links (Privacy, Terms, Contact) in that order and remove the 'Proudly powered by' line. Save all.

Platforms: web · Any OS (web)
Applications: WordPress · Site Editor
Interfaces: brow · Browser
GUI need · task setting: G2 · GUI-essential
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: click · Point & click type · Text & forms nav · Pan/zoom/scroll
Work product: WP08 · App/system state
Conditions: None declared
Proposed difficulty: 3 / 5

Proposed verifier

Read wp_global_styles JSON for color, font family/size/line-height, link :hover rule, H2 weight. Render home, a post and /contact: computed CSS matches on all three; footer DOM has exactly 3 links in order, no 'powered by' text. theme.json on disk unchanged (edits live in the user styles post). No app password, WP-CLI or SSH is issued; REST writes are accepted only from the editor's cookie+nonce session.

Proposed partial credit

40% global style values; 20% hover rule; 30% footer part; 10% theme files untouched

R02.04.02.01-T04 Lay out a responsive pricing grid in Webflow Designer

Original instruction

In the Webflow sandbox project 'Acme Site', add a Pricing section below the hero on the Home page: 3 plan cards (copy in input/pricing.md) in a CSS grid using class 'price-card', 3 columns on desktop, 2 on tablet, 1 on mobile landscape and portrait, 24 px gaps, the middle card with combo class 'is-featured' and a 2 px #0B5FFF border. Publish to the webflow.io staging domain.

Platforms: web · Any OS (web)
Applications: Webflow
Interfaces: brow · Browser
GUI need · task setting: G3 · GUI-only
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: click · Point & click type · Text & forms geom · Precise geometry vis · Visual judgment
Work product: WP03 · Visual layout
Conditions: None declared
Proposed difficulty: 4 / 5

Proposed verifier

Playwright on the staging URL at 1440/991/767/478 px: card bounding boxes give 3/2/1/1 columns, gap 24±1 px; featured card has border 2px rgb(11,95,255); copy exact. No Webflow API token is issued and Designer Extensions are disabled for the workspace; HTML Embed elements are rejected by a DOM check.

Proposed partial credit

20% copy exact; 40% breakpoint column counts and gaps; 20% featured combo class; 20% published

R02.04.02.01-T05 Create a scroll-triggered entrance interaction in Webflow

Original instruction

On the Webflow sandbox Home page, make the hero H1 and subtitle animate when 25% of the hero is in view: opacity 0→1 and translateY 40px→0 over 600 ms ease-out, subtitle starting 150 ms after the H1, playing once. Do not use custom code. Publish to staging.

Platforms: web · Any OS (web)
Applications: Webflow
Interfaces: brow · Browser
GUI need · task setting: G3 · GUI-only
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: click · Point & click type · Text & forms vis · Visual judgment
Work product: WP05 · Time-based media
Conditions: None declared
Proposed difficulty: 4 / 5

Proposed verifier

Playwright scrolls the staging page and samples computed opacity/transform at 0, 300, 650, 900 ms after trigger: H1 ends at opacity 1 and translate 0 by ~600 ms (±80 ms); subtitle lags ~150 ms; no replay on re-scroll. No Webflow API token is issued and Designer Extensions are disabled; any <script> or embed beyond Webflow's IX2 runtime is detected and fails.

Proposed partial credit

30% trigger at 1/4 of hero in view; 30% H1 timing/curve; 25% subtitle offset; 15% plays once

R02.04.02.01-T06 Set up a Webflow CMS collection and filtered list

Original instruction

In the Webflow sandbox, create CMS collection 'Case Studies' with fields Name, Client (plain text), Industry (option: Healthcare, Fintech, Retail), Hero Image, Body (rich text). Import the 12 items in fixtures/case_studies.csv with the Designer's CSV import, then on page /healthcare add a Collection List showing only Healthcare items sorted by Name, 2 per row.

Platforms: web · Any OS (web)
Applications: Webflow
Interfaces: brow · Browser
GUI need · task setting: G3 · GUI-only
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: click · Point & click drag · Drag & drop type · Text & forms
Work product: WP08 · App/system state
Conditions: None declared
Proposed difficulty: 4 / 5

Proposed verifier

Grader reads the collection schema and items via a read-only API key: field types and option values exact, 12 items with matching values. Staging /healthcare renders exactly the Healthcare items (5 expected) in alphabetical order, 2 per row at 1440 px. Agent has no API token, so items must come from the Designer import.

Proposed partial credit

25% schema; 30% 12 items imported correctly; 30% filter and sort; 15% layout

R02.04.02.01-T07 Rebuild a restaurant home page in the Wix Editor

Original instruction

Wix sandbox site 'Trattoria' is open in the Editor. Rebuild the home page per input/home_mock.pdf: full-width strip with the video background fixtures/kitchen.mp4, a 3-item menu section, and a reservation form (name, email, date, party size 1-12, notes). Hide the video strip on mobile. Publish.

Platforms: web · Any OS (web)
Applications: Wix
Interfaces: brow · Browser
GUI need · task setting: G3 · GUI-only
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: drag · Drag & drop click · Point & click type · Text & forms vis · Visual judgment
Work product: WP03 · Visual layout
Conditions: None declared
Proposed difficulty: 3 / 5

Proposed verifier

Published site at 1280 and 390 px: video strip present on desktop and display:none on mobile; menu text exact; form has 5 fields with correct types and range. A grader submission through the live form must appear in Wix Forms submissions. Velo Dev Mode stays disabled and no Wix API key is issued; any page code or custom embed in the published site fails.

Proposed partial credit

25% video strip and mobile hiding; 20% menu content; 35% form fields and test submission; 20% visual match

R02.04.02.01-T08 Align a Wix gallery to exact pixel positions

Original instruction

On page /portfolio of the Wix sandbox site (classic editor, absolute positioning), arrange the 6 image elements so their top-left corners and sizes match input/positions.json (desktop, ±2 px) and the 2-column mobile layout in the same file. Keep them unlocked and unanchored to strips. Publish.

Platforms: web · Any OS (web)
Applications: Wix
Interfaces: brow · Browser
GUI need · task setting: G3 · GUI-only
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: drag · Drag & drop geom · Precise geometry nav · Pan/zoom/scroll
Work product: WP03 · Visual layout
Conditions: None declared
Proposed difficulty: 4 / 5

Proposed verifier

Playwright measures each image's bounding box on the published page at 980 and 320 px against positions.json: pass if all 12 boxes within ±2 px. Image identity checked by src hash. Velo Dev Mode stays disabled and no Wix API key is issued; published pages carrying page code or custom CSS fail, so boxes must come from Editor placement.

Proposed partial credit

50% desktop boxes within tolerance (per image); 40% mobile boxes; 10% correct image order

R02.04.02.01-T09 Add and order a featured collection in the Shopify theme editor

Original instruction

Shopify development store with theme Dawn (draft copy 'Dawn-dev'). In the theme editor, add a Featured collection section to the home template showing 'Summer 25' with 8 products, 4 per row desktop and 2 on mobile, color scheme 2, heading 'Summer picks'. Move it directly above 'Image with text'. Save without publishing the theme.

Platforms: web · Any OS (web)
Applications: Shopify theme editor
Interfaces: brow · Browser
GUI need · task setting: G2 · GUI-essential
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: drag · Drag & drop click · Point & click vis · Visual judgment
Work product: WP08 · App/system state
Conditions: None declared
Proposed difficulty: 3 / 5

Proposed verifier

Grader downloads Dawn-dev templates/index.json: new featured_collection section with collection handle summer-25, products_to_show 8, columns 4/2, color_scheme scheme-2, heading exact; 'order' array places it immediately before image_with_text. Live theme unchanged. No Theme Access password or Admin API token is issued (no CLI or Asset API pushes), and the staff account lacks the 'Edit code' permission.

Proposed partial credit

40% section settings; 30% order; 20% heading/scheme; 10% live theme untouched

R02.04.02.01-T10 Create a pre-order product template and assign it

Original instruction

On the Shopify development store, in Dawn-dev create alternate product template 'preorder': replace the Buy buttons with a 'Pre-order — ships 15 Nov' button text, add two Collapsible row blocks (Shipping, Returns) with text from input/policies.md, and hide the quantity selector. Assign the 5 products tagged 'preorder' to this template and preview one.

Platforms: web · Any OS (web)
Applications: Shopify theme editor · Shopify admin
Interfaces: brow · Browser
GUI need · task setting: G2 · GUI-essential
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: click · Point & click type · Text & forms drag · Drag & drop
Work product: WP08 · App/system state
Conditions: multiapp · Multi-app
Proposed difficulty: 4 / 5

Proposed verifier

Grader reads templates/product.preorder.json (blocks, order, settings) and product.template_suffix via read-only Admin API: exactly the 5 tagged products use 'preorder', no others. Storefront preview of each shows button text exact, 2 collapsible rows, no quantity input. No Theme Access password or Admin API write token is issued, and the staff account lacks the theme 'Edit code' permission.

Proposed partial credit

35% template blocks and settings; 15% collapsible text exact; 40% 5/5 products assigned and no others; 10% preview render

R02.04.02.01-T11 Fix mobile overflow in an Elementor hero

Original instruction

The WordPress sandbox page /services, built with Elementor, scrolls horizontally on phones. Using the Elementor editor's responsive mode, make the hero's two columns stack on mobile (≤767 px), set the H1 to 32 px on mobile only, and hide the decorative image on tablet. Desktop must look unchanged.

Platforms: web · Any OS (web)
Applications: WordPress · Elementor
Interfaces: brow · Browser
GUI need · task setting: G2 · GUI-essential
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: click · Point & click vis · Visual judgment nav · Pan/zoom/scroll
Work product: WP03 · Visual layout
Conditions: None declared
Proposed difficulty: 3 / 5

Proposed verifier

Playwright at 390 px: document scrollWidth ≤ viewport width, columns stacked (same x), H1 computed font-size 32px; at 820 px decorative image display:none; at 1440 px screenshot SSIM ≥0.98 vs the pre-task baseline. _elementor_data must change only responsive keys of the 3 elements. No WP-CLI, SSH, DB or app password is issued; meta changes only via the Elementor editor session (admin-ajax + nonce).

Proposed partial credit

30% no overflow at 390 px; 20% H1 mobile size; 20% tablet hide; 30% desktop unchanged

R02.04.02.01-T12 Convert a classic-editor page into clean blocks

Original instruction

Page /handbook in the WordPress sandbox is one Classic block with pasted HTML. Convert it to native blocks: 4 HTML tables become Table blocks with header rows, the 9 images become Image blocks with alt text from fixtures/alt_text.csv, and headings keep their levels. No Classic or Custom HTML blocks may remain. Update the page.

Platforms: web · Any OS (web)
Applications: WordPress · Gutenberg
Interfaces: brow · Browser
GUI need · task setting: G2 · GUI-essential
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: click · Point & click type · Text & forms
Work product: WP01 · Document
Conditions: None declared
Proposed difficulty: 3 / 5

Proposed verifier

Parse post_content: zero core/freeform and core/html blocks; 4 core/table with hasHeader true and cell text equal to the original; 9 core/image whose alt equals the CSV by filename; heading levels sequence identical. No app password, WP-CLI or SSH is issued; REST writes are accepted only from the block editor's cookie+nonce session.

Proposed partial credit

25% no classic/html blocks; 30% tables with headers; 30% image alt text; 15% heading levels

R02.04.02.01-T13 Rebuild the site navigation with a submenu

Original instruction

In the WordPress sandbox Site Editor, rebuild the header Navigation block: top-level items Home, Services, About, Contact in that order; under Services a submenu with Audit, Design, Build, Support (in that order). Set the overlay menu to 'Always' on mobile. Save.

Platforms: web · Any OS (web)
Applications: WordPress · Site Editor
Interfaces: brow · Browser
GUI need · task setting: G2 · GUI-essential
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: drag · Drag & drop click · Point & click
Work product: WP08 · App/system state
Conditions: None declared
Proposed difficulty: 2 / 5

Proposed verifier

Read the wp_navigation post: 4 top-level links with exact labels and URLs in order; Services has 4 child links in order. Header block attribute overlayMenu = 'always'. Playwright at 390 px opens the overlay and finds all 8 links. No app password, WP-CLI or SSH is issued; REST writes are accepted only from the Site Editor's cookie+nonce session.

Proposed partial credit

40% top-level order; 40% submenu items and order; 20% overlay setting

R02.04.02.01-T14 Build a team page in the Squarespace Fluid Engine

Original instruction

In the Squarespace 7.1 trial site, create page /team from fixtures/team.csv (8 people: photo, name, role, LinkedIn URL). Use a Fluid Engine section with 4 cards per row on desktop and 2 on mobile; images cropped square; names as H3. Link the page in the main navigation after 'About'.

Platforms: web · Any OS (web)
Applications: Squarespace
Interfaces: brow · Browser
GUI need · task setting: G3 · GUI-only
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: drag · Drag & drop click · Point & click type · Text & forms geom · Precise geometry
Work product: WP03 · Visual layout
Conditions: None declared
Proposed difficulty: 3 / 5

Proposed verifier

Published /team at 1440 and 390 px: 8 cards in 4/2 per row (bounding-box rows), image aspect 1:1 ±2%, H3 text and role exact, LinkedIn hrefs exact; nav order has Team right after About. No Squarespace API key is issued (its APIs cover commerce, not pages); any custom CSS, code block or Code Injection is detected and fails.

Proposed partial credit

30% 8 cards with exact text/links; 30% desktop/mobile grid; 20% square crops; 20% nav position

R02.04.02.01-T15 Recreate a hero section in Framer from two mockups

Original instruction

Framer sandbox project 'Launch' has an empty Home page. Recreate the hero from input/hero_desktop.png and input/hero_mobile.png using stacks (no absolute positions): logo, nav with 4 links, headline, subcopy, email input with button, product screenshot. Use the provided fonts and colors in input/tokens.json and publish to the framer.app subdomain.

Platforms: web · Any OS (web)
Applications: Framer
Interfaces: brow · Browser
GUI need · task setting: G3 · GUI-only
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: drag · Drag & drop geom · Precise geometry vis · Visual judgment type · Text & forms
Work product: WP03 · Visual layout
Conditions: None declared
Proposed difficulty: 4 / 5

Proposed verifier

Published page screenshots at 1440 and 390 px: SSIM ≥0.85 vs mockups, text exact, colors ΔE2000 ≤3 vs tokens. DOM check that hero children use flex layout (stacks) rather than absolute positioning. No Framer Server API key is issued and plugins are disabled for the project; code components or overrides in the hero are detected and fail.

Proposed partial credit

20% text and links; 20% token colors and fonts; 30% desktop SSIM; 30% mobile SSIM

R02.04.02.01-T16 Apply page SEO settings and redirects in Wix

Original instruction

For the Wix sandbox site, set the SEO title, meta description and URL slug of the 10 pages listed in fixtures/seo.csv, and add 301 redirects from the 3 legacy URLs in the same file to their new slugs. Publish.

Platforms: web · Any OS (web)
Applications: Wix
Interfaces: brow · Browser
GUI need · task setting: G3 · GUI-only
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: click · Point & click type · Text & forms
Work product: WP08 · App/system state
Conditions: None declared
Proposed difficulty: 2 / 5

Proposed verifier

Crawler fetches each new URL: <title> and meta description exact; old slugs return 301 to the new URLs; no other page's SEO changed (diff against a baseline crawl). No Wix API key is issued and Velo Dev Mode stays disabled (no router or SEO code), so changes must be made in the Wix dashboard/Editor and show in Site History.

Proposed partial credit

40% titles and descriptions; 30% slugs; 30% redirects

R02.04.02.01-T17 Configure a mega menu and storefront filters on Shopify

Original instruction

On the Shopify development store, build the main menu as three levels per input/menu.yaml (Women/Men/Accessories, each with categories and collections) and enable collection filters for Size, Color and Price in the Search & Discovery app with Color shown as swatches. Ensure Dawn-dev's header renders it as a mega menu.

Platforms: web · Any OS (web)
Applications: Shopify admin · Shopify theme editor · Search & Discovery
Interfaces: brow · Browser
GUI need · task setting: G2 · GUI-essential
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: drag · Drag & drop click · Point & click type · Text & forms
Work product: WP08 · App/system state
Conditions: multiapp · Multi-app
Proposed difficulty: 3 / 5

Proposed verifier

Read-only Admin GraphQL: menu 'main-menu' item tree equals menu.yaml (titles, nesting, order, targets). Storefront collection page shows filter groups Size, Color (swatch UI), Price in that order. Dawn-dev header setting menu_type_desktop = 'mega'. No Admin API write token or Theme Access password is issued, and the staff account lacks the theme 'Edit code' permission.

Proposed partial credit

40% menu tree; 30% filters and order; 20% swatch display; 10% mega menu setting

R02.04.02.01-T18 Build a custom single-post template with related posts

Original instruction

In the WordPress sandbox Site Editor, create template 'Single: Recipe' applied to posts in category Recipes: featured image full width, title, a Details group showing the custom fields prep_time and servings via Block Bindings, the content, then a Query Loop of 3 other Recipes posts (excluding the current one) as cards. Save.

Platforms: web · Any OS (web)
Applications: WordPress · Site Editor
Interfaces: brow · Browser
GUI need · task setting: G2 · GUI-essential
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: click · Point & click drag · Drag & drop type · Text & forms
Work product: WP06 · Code/engineering
Conditions: tutorial · Follow docs/tutorial
Proposed difficulty: 4 / 5

Proposed verifier

wp_template 'single-recipe' (or category-scoped equivalent) exists with the required blocks in order; binding attributes reference prep_time and servings. Render 3 recipe posts: each shows its own field values and 3 related links, all category Recipes, never itself. A non-recipe post still uses the default single template. No app password, WP-CLI, SSH or theme-file access is issued; REST writes need the Site Editor session.

Proposed partial credit

20% template exists and is scoped; 25% block order; 25% field bindings render; 30% related-posts query correct

R02.04.02.01-T19 Clone a reference landing page in Webflow across 4 breakpoints

Original instruction

Recreate the reference landing page in input/reference/ (screenshots at 1440, 991, 767, 478 px plus copy.md and assets/) in the empty Webflow sandbox page /clone. Use classes and Webflow layout only; no HTML Embed or custom code. Navbar must collapse to a hamburger at 991 px and below. Publish to staging.

Platforms: web · Any OS (web)
Applications: Webflow
Interfaces: brow · Browser
GUI need · task setting: G3 · GUI-only
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: drag · Drag & drop geom · Precise geometry vis · Visual judgment click · Point & click
Work product: WP03 · Visual layout
Conditions: long · Long-horizon
Proposed difficulty: 5 / 5

Proposed verifier

Playwright screenshots of /clone at the 4 widths: SSIM ≥0.80 each vs reference; all copy exact; image srcs match assets by hash; hamburger visible and nav links hidden ≤991 px, opening on click. DOM scan rejects embed elements and inline <style>/<script>. No Webflow API token is issued and Designer Extensions are disabled.

Proposed partial credit

10% copy; 15% assets; 60% breakpoint SSIM (15 pts per width); 15% navbar collapse behavior

R02.04.02.01-T20 Migrate a 6-page Wix site to WordPress blocks

Original instruction

Migrate the Wix sandbox site 'Studio North' (6 pages, header nav, contact form) into the empty WordPress sandbox using the block editor. Wix has no export: carry text, images (with alt) and nav order across manually, rebuild the contact form with the same fields using the installed Contact Form 7 plugin, and keep page slugs identical.

Platforms: web · Any OS (web) mac · macOS win · Windows
Applications: Wix · WordPress · Gutenberg · Contact Form 7
Interfaces: brow · Browser
GUI need · task setting: G3 · GUI-only
GUI need · ordinary access: G2 · GUI-essential
Interaction primitives: multi · Cross-app click · Point & click type · Text & forms vis · Visual judgment
Work product: WP08 · App/system state
Conditions: multiapp · Multi-app long · Long-horizon
Proposed difficulty: 5 / 5

Proposed verifier

For each of 6 slugs: WordPress page exists, visible text similarity ≥0.95 to Wix page, images present by perceptual hash with alt equal to source; nav labels and order identical; form field names/types equal and a test submission is stored. Wix pages unchanged. WordPress import plugins are deactivated and no app password, WP-CLI or SSH is issued, so pages are built in the block editor session.

Proposed partial credit

30% pages and slugs; 30% text and images per page; 20% navigation; 20% working form

Mapped research references

Existing benchmark-to-class links from the research catalog. They are not record-level annotations, executions or product endorsements.

Framer CanvasBench v0.1