PricingTemplate overpromised and brought an unused dependency
/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
PricingTemplate overpromised and brought an unused dependency
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 SaaS pricing page.
The pricing round used the same cold-test boundary, exposing only the shipped package and docs. The /pricing assignment included three or four plan cards with a Most popular treatment, a monthly/annual toggle with discounted annual prices that update immediately, feature lists with included and excluded items, a comparison table, and an FAQ.
Result: 3.5/5
tsc and next build passed, with static rendering. The toggle updated $19 to $15. At 375px, cards collapsed to one column and the comparison table scrolled internally, with no page-level overflow and zero console errors. The base components were production-ready. The dedicated pricing component was not.
What worked:
Switchsupports controlled state androle="switch", so it handled monthly and annual billing directly.Tablecontains its own horizontal scrolling. Thedecorativeandlabelprops onIconsupplied the right accessible treatment for check and cross marks.Intl.NumberFormatfixes the locale for currency, avoiding a server/browser hydration mismatch. Every type was exported from the single entry point, so type checking passed immediately.
The rough edges: another name that overpromised, another fixed width, and dependency pollution
1. PricingTemplate was too thin for real pricing work. Despite being public, it has no monthly/annual toggle, hard-codes every feature as <Check> so excluded features are impossible, and fixes the layout at max-w-4xl md:grid-cols-3, which breaks when a fourth plan wraps. The cold agent expected it to work, then abandoned it within minutes and hand-rolled the page from base components. This repeated the OnboardingFlow failure from #13: the name promised more than the component delivered. I logged issue #80. It was also absent from the docs, where /patterns/pricing returned 404, making it one of the four thin sample templates tracked in issue #74.
2. Accordion was fixed at w-[400px]. It overflowed the 375px FAQ. This continued the fixed-width family from issues #47, #58, #66, and #72, so I logged issue #78.
3. A new class appeared: an unnecessary dependency for consumers. @vercel/analytics sat in dependencies even though the shipped source never uses it. Only the docs site does. As a result, npm install @gunjo/ui also installed an unrelated analytics package. I logged issue #79.
What I fixed this round
- Issue #79, the unused dependency: I moved
@vercel/analyticstodevDependenciesin PR #81. The docs build passed, and consumers no longer receive it as a required dependency. - Issue #78, the fixed-width accordion: Starting from
.pen, I replaced the 400px width with full parent width in PR #82. At 375px in a real browser, the page had zero overflow and the accordion matched its parent. - Issue #80, the thin
PricingTemplate: I grouped it with issue #74 for the beta catalog gate. It needs a data-driven redesign and registration under Patterns.
What I took away: dependency hygiene is design-system quality too
Round #13: OnboardingFlow lacked the control that blocks Next.
Round #14: PricingTemplate lacked exclusions, billing toggles, and flexible columns.
A component called a template must be tested against the job its name promises before I know whether it is data-driven. This round also exposed a new class: dependency pollution. A component can behave correctly while one line in dependencies adds unnecessary weight to every consumer. The base components were ready for real work. The template layer and package hygiene still needed more rounds. The 3.5 score reflected that honestly.
Next up: build log #15
- I will continue through editor, error, and notification-feed screens until it stops turning up anything new.
The run
- gunjo.jp / npm
@gunjo/ui/ GitHub - Earlier rounds: #1 through #13
- 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.