Runs / transfer-form Batch Runs from different design-system versions should not be compared.
The page A screenshot in each theme, as the benchmark took it.
page.tsx As the agent left it; marked lines broke a rule.
Violations 69 counted, under 9 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
Steps One row per model call, with the tools it asked for. An agent that reads the guidelines before writing shows it here; what a checker or submit_view answered is under its call.
Step Tools Tokens in Tokens out Cost 0 list_files 139 30 $0.0000 1 read_file, list_files 183 45 $0.0000 2 list_files 359 39 $0.0000 3
Output cap 20,000 tokens a step 2
3 import { useState } from "react";
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Account = (typeof data.accounts)[number];
8
9 export default function SepaTransferPage() {
10 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
11 const [beneficiary, setBeneficiary] = useState("");
12 const [iban, setIban] = useState("");
13 const [amount, setAmount] = useState("");
14 const [reference, setReference] = useState("");
15 const [submitted, setSubmitted] = useState<{
16 amount: string;
17 beneficiary: string;
18 } | null>(null);
19
20 const account = data.accounts.find((a) => a.id === accountId) as Account;
21 const balance = account.available;
22 const numericAmount = Number(amount);
23 const amountTooHigh =
24 amount.trim() !== "" &&
25 !Number.isNaN(numericAmount) &&
26 numericAmount > balance;
27 const amountInvalid =
28 amount.trim() !== "" &&
29 (Number.isNaN(numericAmount) || numericAmount <= 0);
30
31 const canSubmit =
32 beneficiary.trim() !== "" &&
33 iban.trim() !== "" &&
34 amount.trim() !== "" &&
35 !amountTooHigh &&
36 !amountInvalid;
37
38 const handleSubmit = (e: React.FormEvent) => {
39 e.preventDefault();
40 if (!canSubmit) return;
41 setSubmitted({ amount: amount.trim(), beneficiary: beneficiary.trim() });
42 };
43
44 const handleReset = () => {
45 setBeneficiary("");
46 setIban("");
47 setAmount("");
48 setReference("");
49 setSubmitted(null);
50 };
51
52 if (submitted) {
53 return (
54 <main
55 className={css({
56 maxWidth: "480px",
57 margin: "0 auto",
58 padding: "24px",
59 })}
60 >
61 <h1 className={css({ fontSize: "24px", fontWeight: "700", mb: "16px" })}>
62 Transfer sent
63 </h1>
64 <p
65 className={css({
66 padding: "16px",
67 borderRadius: "8px",
68 background: "#e8f5e9",
69 color: "#1b5e20",
70 })}
71 >
72 You sent {submitted.amount} {data.currency} to {submitted.beneficiary}.
73 </p>
74 <button
75 type="button"
76 onClick={handleReset}
77 className={css({
78 mt: "16px",
79 padding: "10px 16px",
80 borderRadius: "8px",
81 border: "1px solid #ccc",
82 background: "#fff",
83 cursor: "pointer",
84 })}
85 >
86 New transfer
87 </button>
88 </main>
89 );
90 }
91
92 return (
93 <main
94 className={css({
95 maxWidth: "480px",
96 margin: "0 auto",
97 padding: "24px",
98 })}
99 >
100 <h1 className={css({ fontSize: "24px", fontWeight: "700", mb: "16px" })}>
101 SEPA transfer
102 </h1>
103 <form onSubmit={handleSubmit} className={css({ display: "grid", gap: "16px" })}>
104 <div className={css({ display: "grid", gap: "4px" })}>
105 <label htmlFor="account" className={css({ fontWeight: "600" })}>
106 From account
107 </label>
108 <select
109 id="account"
110 value={accountId}
111 onChange={(e) => setAccountId(e.target.value)}
112 className={css({
113 padding: "8px",
114 borderRadius: "8px",
115 border: "1px solid #ccc",
116 })}
117 >
118 {data.accounts.map((a) => (
119 <option key={a.id} value={a.id}>
120 {a.name} — {a.iban}
121 </option>
122 ))}
123 </select>
124 <span
125 className={css({ fontSize: "14px", color: "#555" })}
126 data-testid="available-balance"
127 >
128 Available balance: {balance.toFixed(2)} {data.currency}
129 </span>
130 </div>
131
132 <div className={css({ display: "grid", gap: "4px" })}>
133 <label htmlFor="beneficiary" className={css({ fontWeight: "600" })}>
134 Beneficiary name
135 </label>
136 <input
137 id="beneficiary"
138 type="text"
139 value={beneficiary}
140 onChange={(e) => setBeneficiary(e.target.value)}
141 className={css({
142 padding: "8px",
143 borderRadius: "8px",
144 border: "1px solid #ccc",
145 })}
146 />
147 </div>
148
149 <div className={css({ display: "grid", gap: "4px" })}>
150 <label htmlFor="iban" className={css({ fontWeight: "600" })}>
151 Beneficiary IBAN
152 </label>
153 <input
154 id="iban"
155 type="text"
156 value={iban}
157 onChange={(e) => setIban(e.target.value)}
158 className={css({
159 padding: "8px",
160 borderRadius: "8px",
161 border: "1px solid #ccc",
162 })}
163 />
164 </div>
165
166 <div className={css({ display: "grid", gap: "4px" })}>
167 <label htmlFor="amount" className={css({ fontWeight: "600" })}>
168 Amount
169 </label>
170 <input
171 id="amount"
172 type="number"
173 step="0.01"
174 value={amount}
175 onChange={(e) => setAmount(e.target.value)}
176 className={css({
177 padding: "8px",
178 borderRadius: "8px",
179 border: amountTooHigh ? "1px solid #d32f2f" : "1px solid #ccc",
180 })}
181 />
182 {amountTooHigh && (
183 <span
184 className={css({ fontSize: "14px", color: "#d32f2f" })}
185 role="alert"
186 >
187 Amount exceeds available balance
188 </span>
189 )}
190 {amountInvalid && (
191 <span
192 className={css({ fontSize: "14px", color: "#d32f2f" })}
193 role="alert"
194 >
195 Enter a valid amount
196 </span>
197 )}
198 </div>
199
200 <div className={css({ display: "grid", gap: "4px" })}>
201 <label htmlFor="reference" className={css({ fontWeight: "600" })}>
202 Reference (optional)
203 </label>
204 <input
205 id="reference"
206 type="text"
207 value={reference}
208 onChange={(e) => setReference(e.target.value)}
209 className={css({
210 padding: "8px",
211 borderRadius: "8px",
212 border: "1px solid #ccc",
213 })}
214 />
215 </div>
216
217 <button
218 type="submit"
219 disabled={!canSubmit}
220 className={css({
221 padding: "10px 16px",
222 borderRadius: "8px",
223 border: "none",
224 background: "#1976d2",
225 color: "#fff",
226 cursor: "pointer",
227 opacity: !canSubmit ? 0.5 : 1,
228 })}
229 >
230 Send transfer
231 </button>
232 </form>
233 </main>
234 );
235 }
236
`10px 16px` is a raw length. Use a token.
raw-values/raw-color 15 design-system page.tsx:68:25 · #e8f5e9 `#e8f5e9` is a raw color. Use a semantic color token. page.tsx:69:20 · #1b5e20 `#1b5e20` is a raw color. Use a semantic color token. page.tsx:81:21 · 1px solid #ccc `1px solid #ccc` is a raw color. Use a semantic color token. page.tsx:82:25 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:115:23 · 1px solid #ccc `1px solid #ccc` is a raw color. Use a semantic color token. page.tsx:125:55 · #555 `#555` is a raw color. Use a semantic color token. page.tsx:144:23 · 1px solid #ccc `1px solid #ccc` is a raw color. Use a semantic color token. page.tsx:161:23 · 1px solid #ccc `1px solid #ccc` is a raw color. Use a semantic color token. page.tsx:179:39 · 1px solid #d32f2f `1px solid #d32f2f` is a raw color. Use a semantic color token. page.tsx:179:61 · 1px solid #ccc `1px solid #ccc` is a raw color. Use a semantic color token. page.tsx:184:57 · #d32f2f `#d32f2f` is a raw color. Use a semantic color token. page.tsx:192:57 · #d32f2f `#d32f2f` is a raw color. Use a semantic color token. page.tsx:212:23 · 1px solid #ccc `1px solid #ccc` is a raw color. Use a semantic color token. page.tsx:224:25 · #1976d2 `#1976d2` is a raw color. Use a semantic color token. page.tsx:225:20 · #fff `#fff` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color components/native-element 7 design-system page.tsx:74:9 · <button> `<button>` has a design-system equivalent: use `Button` from `@vektos/ds`. page.tsx:108:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:136:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:153:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:170:11 · <input> `<input>` has a design-system equivalent: use `NumberInput` from `@vektos/ds`. page.tsx:204:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:217:9 · <button> `<button>` has a design-system equivalent: use `Button` from `@vektos/ds`. Every run that broke components/native-element token-names/unknown-token 7 design-system page.tsx:61:60 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:100:58 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:105:65 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:133:69 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:150:62 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:167:64 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:201:67 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. Every run that broke token-names/unknown-token a11y/color-contrast 1 quality page.tsx:1:1 · <span class="fs_14px c_#555" data-testid="available-balance">Available balance: 4821.37 EUR</span> Elements must meet minimum color contrast ratio thresholds (1 element, dark theme) Every run that broke a11y/color-contrast typecheck/TS2769 0 quality 9 write_file 73 2,777 $0.0000