Runs / statement 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 1 counted, under 2 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 get_guidelines, read_file, list_components 1,525 131 $0.0002 1 get_component, get_component, get_component, list_tokens 4,877 164 $0.0006 2 write_file 9,600 3,562 $0.0027
Output cap The provider's default 4 CardBody,
5 CardDescription,
6 CardHeader,
7 CardTitle,
8 Table,
9 TableBody,
10 TableCell,
11 TableHead,
12 TableHeader,
13 TableRow,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 const { account, transactions } = data;
19
20 const amountFormat = new Intl.NumberFormat("en-GB", {
21 style: "currency",
22 currency: account.currency,
23 signDisplay: "exceptZero",
24 });
25
26 const balanceFormat = new Intl.NumberFormat("en-GB", {
27 style: "currency",
28 currency: account.currency,
29 });
30
31 const dateFormat = new Intl.DateTimeFormat("en-GB", {
32 day: "2-digit",
33 month: "short",
34 year: "numeric",
35 timeZone: "UTC",
36 });
37
38 function formatDate(iso: string): string {
39 return dateFormat.format(new Date(`${iso}T00:00:00Z`));
40 }
41
42 const pendingCount = transactions.filter((tx) => tx.status === "pending").length;
43 const bookedCount = transactions.length - pendingCount;
44
45 export default function StatementPage() {
46 return (
47 <main
48 className={`vektos ${css({
49 minHeight: "100vh",
50 padding: "6",
51 display: "flex",
52 flexDirection: "column",
53 gap: "6",
54 maxWidth: "lg",
55 marginInline: "auto",
56 })}`}
57 >
58 <header className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
59 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
60 Account statement, October 2026
61 </h1>
62 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
63 Period {formatDate(account.period.from)} to {formatDate(account.period.to)}
64 </p>
65 </header>
66
67 <Card>
68 <CardHeader>
69 <CardTitle>Account summary</CardTitle>
70 <CardDescription>Current account in {account.currency}.</CardDescription>
71 </CardHeader>
72 <CardBody>
73 <dl
74 className={css({
75 display: "grid",
76 gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))",
77 gap: "4",
78 margin: "0",
79 })}
80 >
81 <div className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
82 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>Account holder</dt>
83 <dd className={css({ margin: "0", fontWeight: "semibold" })}>{account.holder}</dd>
84 </div>
85 <div className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
86 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>IBAN</dt>
87 <dd className={css({ margin: "0", fontWeight: "medium" })}>{account.iban}</dd>
88 </div>
89 <div className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
90 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>Current balance</dt>
91 <dd className={css({ margin: "0", fontSize: "lg", fontWeight: "semibold" })}>
92 {balanceFormat.format(account.balance)}
93 </dd>
94 </div>
95 </dl>
96 </CardBody>
97 </Card>
98
99 <Card>
100 <CardHeader>
101 <CardTitle>Transactions</CardTitle>
102 <CardDescription>
103 {transactions.length} transactions: {bookedCount} booked, {pendingCount} pending.
104 </CardDescription>
105 </CardHeader>
106 <Table aria-label="Transactions, October 2026" className={css({ marginBlockStart: "4" })}>
107 <TableHead>
108 <TableRow>
109 <TableHeader>Date</TableHeader>
110 <TableHeader>Description</TableHeader>
111 <TableHeader>Category</TableHeader>
112 <TableHeader>Status</TableHeader>
113 <TableHeader numeric>Amount ({account.currency})</TableHeader>
114 </TableRow>
115 </TableHead>
116 <TableBody>
117 {transactions.map((tx) => {
118 const isPending = tx.status === "pending";
119 return (
120 <TableRow key={tx.id}>
121 <TableCell>
122 <time dateTime={tx.date}>{formatDate(tx.date)}</time>
123 </TableCell>
124 <TableCell>{tx.description}</TableCell>
125 <TableCell>{tx.category}</TableCell>
126 <TableCell>
127 {isPending ? (
128 <Badge tone="warning">Pending</Badge>
129 ) : (
130 <Badge tone="success">Booked</Badge>
131 )}
132 </TableCell>
133 <TableCell numeric>{amountFormat.format(tx.amount)}</TableCell>
134 </TableRow>
135 );
136 })}
137 </TableBody>
138 </Table>
139 </Card>
140 </main>
141 );
142 }
143