Form to send a SEPA transfer from one of the user's accounts, with the available balance and an error when the amount is too high.
What the agent reads, word for word.
Build a form to send a SEPA transfer.
The user picks the account to pay from, then enters the beneficiary name, the beneficiary IBAN, the amount and an optional reference, and submits.
Show the available balance of the selected account. If the amount is higher than that balance, show an error on the amount field and do not let the user submit. After a successful submit, show a short confirmation with the amount and the beneficiary.
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 |
|---|---|---|
| nemotron-3.5-lightning-free at genui-spec | 0 | $0.0000 |
| beam-free at genui-spec | 0 | $0.0000 |
| nemotron-3.5-lightning-free at ds-mcp-check-full | 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 | 56.8 | 26.3 |
Written by hand, graded with zero violations, rendered by the browser check in every build. The agent never sees it.
"use client"; import { Button, Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle, FormField, Input,| Run | Design system | Cost |
|---|
| gpt-6-luna at none | 155 | $0.0030 |
| beam-free at none | 63 | $0.0000 |
| beam-free at none | 61 | $0.0000 |
| – |
| 4.3 |
| 155 |
| 38.1 |
| storybook-mcp Storybook's own MCP | 5.1 | 1.7 | 0 | 1 | 10 | 17 | 1 |
| ds-mcp Our design-system MCP | 1.2 | 1.7 | 0 | 0 | 1 | 4 | 0.5 |
| 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 |