Monthly statement of a current account: holder, IBAN, balance and a table of transactions with pending ones marked.
What the agent reads, word for word.
Build the October statement page for a current account.
At the top, show the account holder, the IBAN and the current balance.
Below, list every transaction of the period with its date, description, category and amount. Amounts are in the account currency; money going out is negative. Pending transactions are not final yet and must be visibly marked as pending.
The data is in `./fixture.json`.
The page must show these texts, or the run is not done. A good answer uses these components.
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 |
| beam-free at genui-spec | 0 | $0.0000 |
Mean design-system violations per run on this task.
| Context | Mean | claude-haiku-5.5 | deepseek-v4.1-flash-1017 | kimi-k3.1-pro | nemotron-3.5-lightning-free | gpt-6-luna | beam-free |
|---|---|---|---|---|---|---|---|
| none File tools only | 96.6 | 40.8 |
Written by hand, graded with zero violations, rendered by the browser check in every build. The agent never sees it.
import { Badge, Card, CardBody, CardDescription, CardHeader, CardTitle, Table, TableBody, TableCell, TableHead, TableHeader,| Run |
|---|
| Design system |
|---|
| Cost |
|---|
| kimi-k3.1-pro at none | 227 | $0.1185 |
| gpt-6-luna at none | 146 | $0.0024 |
| gpt-6-luna at none | 146 | $0.0026 |
| 227 |
| 13.7 |
| 135.7 |
| 38.6 |
| storybook-mcp Storybook's own MCP | 6.9 | 17.7 | 0 | 0 | 0.7 | 23 | 0.3 |
| ds-mcp Our design-system MCP | 0.9 | 0.5 | 0 | 0 | 2.3 | 2 | 0.3 |
| ds-mcp-check The MCP and a checker | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| ds-mcp-check-full A checker with compiler and linter | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| genui-spec A view from the catalog, six tasks | 0 | – | – | – | 0 | – | 0 |