Notification settings

Alerts that apply at once with a short confirmation, and a summary email whose frequency and product-news consent are saved with a button.

The brief

What the agent reads, word for word.

Build the notification settings page of a business account. Show who the notifications go to: the company name and the email address.

Alerts: each alert in the data can be turned on or off, with its description under its name. The change applies at once, and a short message that goes away by itself confirms it, for example "Payment failed alerts on".

Summary email: the user chooses how often to receive it, one of the options in the data, and whether to receive product news ("Send me product news", off unless the data says otherwise). These two are saved together with a Save button, confirmed by the same kind of short message.

The data is in `./fixture.json`.

What a good answer has

The page must show these texts, or the run is not done. A good answer uses these components.

Best and worst runs

By design-system violations.

Run	Design system	Cost
beam-free at genui-spec	0	$0.0000
nemotron-3.5-lightning-free at genui-spec	0	$0.0000
nemotron-3.5-lightning-free at genui-spec	0	$0.0000

By context and model

Mean design-system violations per run on this task.

Context	Mean	nemotron-3.5-lightning-free	beam-free
none File tools only	24.2	12.7	35.7
storybook-mcp Storybook's own MCP

The reference answer

Written by hand, graded with zero violations, rendered by the browser check in every build. The agent never sees it.

1"use client";2 3import {4  Button,5  Card,6  CardBody,7  CardDescription,8  CardFooter,9  CardHeader,10  CardTitle,11  Checkbox,12  RadioGroup,

beam-free at none	59	$0.0000
beam-free at none	48	$0.0000
nemotron-3.5-lightning-free at none	25	$0.0000