Pricing components earned 4/5; the flagship template did not
/pricingCaptured at a 375px viewport. Long pages scroll inside the frame.
The screenshots stay in Japanese. Every round is a real screen for a real Japanese industry, so an English re-render would no longer be the screen the agent actually produced.
Write-up
Pricing components earned 4/5; the flagship template did not
Build log series: I hand a real screen to an AI that has never seen Gunjo (
@gunjo/ui) and let it build. This round covered a pricing comparison page.
The setup exposed the shipped npm package and docs site, never the source. The assignment called for a monthly and annual toggle that changed the prices, three or four plan cards with one recommendation, a feature-comparison matrix (features in rows, plans in columns, and ✓, ✗, or values in the cells), an FAQ, and a final CTA.
Gunjo has a flagship component built specifically for this job, PricingTemplate. The central test was whether it could carry the page.
Result: 4/5, the highest score in several rounds
tsc and build passed, the console stayed clear, the page had exactly one h1 and skipped no heading levels, and the matrix was a real <table>. Every <th> had the appropriate scope (col, row, or colgroup), each ✓ or ✗ had screen-reader-only "Included" or "Not included" text, and the toggle announced state changes through aria-live. Nothing overflowed at 375px, and dark mode worked throughout. The components alone produced a fully accessible pricing comparison.
The cold agent also praised a fix from the previous round:
The
asprop onCardTitleis the best-designed accessibility mechanism on this page. It made it easy to preserve the heading hierarchy.
That was issue #116 from #23. A defect fixed in one round had become an advantage in the next. Passing scope through Table and giving Tooltip its own internal provider from issue #52 also paid off.
Why it stopped at 4: the flagship missed its job
1. PricingTemplate was a thin, hard-coded demo rather than a data-driven component (issue #80, major). It had no monthly and annual toggle; fixed md:grid-cols-3 broke with four plans; featured only inverted the colors, with no badge, recommended label, or screen-reader text; every feature was a fixed <Check>, so the matrix could not show exclusions or values; and the template supplied its own <h1>, which conflicted with the page title. The cold agent bypassed it and hand-rolled the comparison from Card, Badge, and Button. The name promised more than the template delivered.
2. Badge broke a <p> (issue #128, a component bug). It rendered a block-level <div> and offered neither as nor asChild. Placing it in a paragraph caused both "<div> cannot be a descendant of <p>" and a hydration mismatch. Card already had as; Badge did not.
What I fixed this round: three small component defects
- Issue #128: I added
as?: "div" | "span"toBadge, following the same pattern as issue #116.as="span"now works inline. - Issue #129: I made
ToggleGroupacceptvariantandsizeon the parent and pass them to each item. Previously,<ToggleGroup variant="outline">failed type checking. - Issue #130: I added
labelanddescriptiontoSwitch, connecting them witharia-labelledbyandaria-describedbyinstead of leaving all labeling to the consumer.
All three shipped from the source without breaking existing calls. Making PricingTemplate data-driven in issue #80 required a redesign that included .pen, so it went to the beta gate.
What I took away: components and flagship templates mature at different rates
Component layer (Card, Table, ToggleGroup, Button, Badge, and dark mode): enough for a fully accessible pricing comparison
Flagship template (PricingTemplate): still a demo, and its name promised more than it delivered
The stronger the components became, the more obvious the thin template looked. The cold agent showed that bypassing the template and composing the components could earn 4/5, while trusting the flagship led away from the required page. The work was not to replace the components. It was to bring the template up to the same standard as the components, together with the other overpromising templates in issues #74 and #90.
Next up: build log #26
- An error page, calendar schedule, or inbox, continuing to test overpromising templates and higher-level composition.
The run
- gunjo.jp / npm
@gunjo/ui/ GitHub - Earlier rounds: #1 through #24
- Overview: Gunjo (
@gunjo/ui) / Why it exists: Design systems in the age of AI - GunjoUI by UIXHERO
Gunjo was still in early alpha at the time; issues are welcome.
This series is co-created with AI (Claude and Codex). A human designs the experiments, makes the calls, and fact-checks before publishing; the AI does the hands-on work and drafting.
Components from @gunjo/ui
The components this screen's source imports directly.
The code the agent actually wrote
Click a file to expand its source.