Design and build Fjora's responsive Taste the North campaign landing page from the frozen prompt, rules, facts, photography, and requirements.
Difficulty: Easylanding-page · 12 outputs · 12 runs · 12 revisions · frozen 2026-09-16 22:44 UTC
One archived screenshot per published Run against version 1.2.0, of the Run’s representative Revision. Ordered by setup and then by repetition, not by quality.
Frozen with this version. Requirement IDs are stable across versions and are cited unchanged by evaluation records.
Automated checks are not an accessibility certification. Recorded axe findings describe what the tooling observed at capture time, on a pinned browser and viewport. A check that reports no violation is not proof that the interface is accessible, and a selector problem is inconclusive rather than an implementation failure.
| # | Model | Tool | Revision | Status | Actions |
|---|---|---|---|---|---|
| Fig. 01 | Claude Fable 5.1 (low) | Claude Code | 0 · initial | live | |
| Fig. 02 | Claude Opus 5 (high) | Claude Code | 0 · initial | live | |
| Fig. 03 | Claude Opus 5.5 (medium) | Claude Code | 0 · initial | live | |
| Fig. 04 | Claude Sonnet 5 (high) | Claude Code | 0 · initial | live | |
| Fig. 05 | GPT-5.6-Luna (max) | Codex CLI | 0 · initial | live | |
| Fig. 06 | GPT-5.6-Sol (max) | Codex CLI | 0 · initial | live | |
| Fig. 07 | GPT-5.6-Sol (low) | Codex CLI | 0 · initial | live | |
| Fig. 08 | GPT-5.6-Terra (max) | Codex CLI | 0 · initial | live | |
| Fig. 09 | GPT-5.6-Terra (low) | Codex CLI | 0 · initial | live | |
| Fig. 10 | GPT-6-Astra (max) | Codex CLI | 0 · initial | live | |
| Fig. 11 | GPT-6-Astra (low) | Codex CLI | 0 · initial | live | |
| Fig. 12 | GPT-6-Astra (high) | Codex CLI | 0 · initial | live |
Fig. 01Claude Fable 5.1 (low)
Fig. 02Claude Opus 5 (high)
Operator-attested: the Configuration, tool version, displayed model, and elapsed time were recorded by the operator from what the tool showed at Run time. They are not independently verified. An exact model ID appears only when the tool exposed one; it is never inferred.
Published sites are independent, AI-generated demos served from separate preview origins with local mock data. They are not products, and no UIBenchmark session data crosses to them.
Exact model ID, tool version, elapsed time, run state, stop reason, discarded attempts and every published Revision, repairs included, in run log order. Each Run and each Revision links to its own page.
01Run 1 · Claude Fable 5.1 (low) · Claude Code
Every Run here received exactly the frozen inputs of this version, so they form one cohort. Runs against another frozen version are listed on that version’s own page.
All published Runs of Fjora — Taste the NorthDesign and build Fjora's responsive Taste the North campaign landing page from the frozen prompt, rules, facts, photography, and requirements.
The workflow designs the interface itself from the frozen brief.
Read PROMPT.md and BENCHMARK_RULES.mdThis is the immutable Challenge Version: the exact inputs every Run against it received. Frozen inputs never change, so an older Run stays readable against precisely the brief it was given.
Both are shown as the stored source text, unrendered and unedited, so what you read is byte-for-byte what the frozen version contains.
Launch prompt
The prompt submitted at the start of every Run against this version.
# Fjora — “Taste the North” campaign site Build the campaign landing page for **Fjora**, a fictional Nordic botanical sparkling-water brand, launching its “Taste the North” seasonal line. ## Brand - **Name:** Fjora. - **Voice:** calm, crisp, quietly confident. Short sentences. No exclamation marks, no discount language. - **Feel:** cold, clear, natural — glacial water, botanicals, northern light. - **Supplied photography.** Five images ship under `public/assets/`: three product photos (one per flavor, referenced from `products.json`), a fjord hero image (`hero-fjord.webp`), and a botanical macro for the story section (`story-botanicals.webp`). Use them; do not recreate or replace them. - **You own the rest of the visual identity.** Design the wordmark/logo, color palette, type scale, and layout yourself; nothing beyond the photography is prescribed. Any additional graphics you need must be created in this workspace (inline SVG or CSS) — external images, fonts, and network resources are prohibited. ## Copywriting is part of the task You write all customer-facing copy yourself, in the brand voice: headlines, the brand story, tasting notes, FAQ questions and answers, and microcopy. Ground every claim in the facts supplied in `public/data/brand.json` (`positioning_facts`, `product_facts`) and `public/data/products.json` (flavor names, botanicals). Do not invent product claims (health benefits, prices, retail availability) beyond those facts. ## Page One landing page, these sections in this order: 1. **Hero** — campaign name “Taste the North”, a brand wordmark you design, the supplied fjord image (`hero-fjord.webp`) as visual anchor, one primary call-to-action that scrolls to the flavor selector. 2. **Flavor selector** — the three seasonal flavors from `public/data/products.json`, each with its supplied product photo. Selecting a flavor updates a detail area: product photo, name, botanical list, and a tasting note you write for that flavor. Exactly one flavor is selected at all times; the first flavor is selected initially. 3. **Story** — a brand story you write from the positioning facts, presented with the supplied botanical macro image (`story-botanicals.webp`). 4. **FAQ** — at least four question/answer pairs you write, each grounded in a `product_facts` entry, as expandable items: collapsed by default, individually expandable and collapsible. 5. **Footer** — the contact line from `brand.json` and the note “Fjora is a fictional brand created for UIBenchmark.” (verbatim, must be visible). ## Interactions and constraints - Implement required interactions as real behavior, not static mockups. - Responsive at 1440×900 (desktop) and 390×844 (mobile). At mobile width the navigation between sections must remain reachable (your choice of pattern). - Use only the supplied images, supplied data facts, and graphics you create yourself in this workspace. No external network requests, fonts, or images. System font stack only. See `BENCHMARK_RULES.md` for binding rules and `REQUIREMENTS.json` for the behaviors that will be evaluated.
Shared rules
The rules every Configuration worked under for this version.
# Benchmark rules (shared, v3) These rules are binding and identical for every Configuration. ## Allowed - The supplied starter, images, data files, and installed dependencies. - Additional graphics you create yourself inside this workspace (inline SVG, CSS art, or authored SVG files). - Local development preview while working. - Building, testing, and correcting your implementation before completion. ## Required - Browser-compatible production output under `dist/` via the starter's build script, deployable at a hostname root. - Implement required interactions as working behavior. - Responsive behavior at 1440×900 and 390×844. - Keep demo state in memory or origin-scoped local storage; no cookies. - Required forms, if any, simulate behavior locally and never transmit data. - All navigation stays within the demo. ## Prohibited - Modifying `BENCHMARK_RULES.md`, `PROMPT.md`, `REQUIREMENTS.json`, `AGENTS.md`, `CLAUDE.md`, or the dependency lockfile. - Delegating any part of the work to subagents, sub-sessions, or spawned agent tasks; complete the task in this single session. - Adding, removing, or updating dependencies. - External network resources of any kind: requests, fonts, images, embeds, analytics, service workers, or background requests. - Researching on the web while you work: searching the web or fetching web pages or online documentation. - Generating images with an image-generation tool or model. - Backend services, databases, credentials, payments, or personal data. - Deploying the result or accessing deployment credentials. ## Completion Before declaring completion, run the production build. In your final response, state whether it succeeded and identify any incomplete requirements.
The declared rules and viewports this version was executed and captured under.
Fig. 03Claude Opus 5.5 (medium)
Fig. 04Claude Sonnet 5 (high)
Fig. 05GPT-5.6-Luna (max)
Fig. 06GPT-5.6-Sol (max)
Fig. 07GPT-5.6-Sol (low)
Fig. 08GPT-5.6-Terra (max)
Fig. 09GPT-5.6-Terra (low)
Fig. 10GPT-6-Astra (max)
Fig. 11GPT-6-Astra (low)
Fig. 12GPT-6-Astra (high)
02Run 1 · Claude Opus 5 (high) · Claude Code
03Run 1 · Claude Opus 5.5 (medium) · Claude Code
04Run 1 · Claude Sonnet 5 (high) · Claude Code
05Run 1 · GPT-5.6-Luna (max) · Codex CLI
06Run 1 · GPT-5.6-Sol (max) · Codex CLI
07Run 1 · GPT-5.6-Sol (low) · Codex CLI
08Run 1 · GPT-5.6-Terra (max) · Codex CLI
09Run 1 · GPT-5.6-Terra (low) · Codex CLI
10Run 1 · GPT-6-Astra (max) · Codex CLI
11Run 1 · GPT-6-Astra (low) · Codex CLI
12Run 1 · GPT-6-Astra (high) · Codex CLI
Discarded attempts failed for a technical reason — a crashed session, a tool outage, a broken upload — and were discarded and retried from the same frozen inputs. The count is not a quality signal.
Generation cost: Not separately metered. Runs were executed on the operator’s personal tool subscriptions, which do not itemize a per-Run charge. No amount is attributed, and no zero-cost claim is made.
Starter and asset hashes are published so every run can be shown to have received the same bytes. There is no starter download and no asset download.
Starter SHA-256
c719934a49c705dd266e4cfa55c3b68faa36fc0f8f095aaee848cb0678dfb68d
Asset pack SHA-256
4ba7a63f9ec62eaf342e775e9f8ce984967ac5433999555e48f9960599c242bb
