ListCard worked three ways on one screen while loyalty stayed hand-rolled
/booking-manageCaptured 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
ListCard worked three ways on one screen while loyalty stayed hand-rolled
Build log series: The series hands an AI that has never seen Gunjo (
@gunjo/ui) only the public npm package and the gunjo.jp docs and asks for a working screen. This closed the three passenger-facing air rounds, a booking management and mileage screen covering membership tier, the booking list, and miles. I had a hunch that rail would need points too, so I tested it on air first.
Result: 3.5/5
The screen passed tsc, fit a 375px mobile-first layout, and produced no console errors. The agent reported:
ListCardwas the standard-issue centerpiece. All three lists, bookings, mile history, and rewards, used the same component with no friction: real buttons of at least 44px,aria-pressed, and the severity band on the left. The best answer in the library. But the centerpiece of the screen, the loyalty summary, has no component. The membership card, with its tier badge, large balance figure, progress toward the next tier, and expiry warning, was hand-rolled in full. "Statisticis a flat metric tile with no badge, no progress, and no warmth. This is the leading gap."
ListCard served three purposes in one layout, for bookings, history, and rewards, which shows how far a shared foundation stretches inside a single screen.
Logged, not built
- 🟢
LoyaltySummaryCardorTierCard: a large balance figure, a tier badge, progress against a goal ("11,500 points to Diamond"), and a slot for expiry. Recorded on issue #364 at one of three. A goal-oriented loyalty mode onMeter belongs to the same issue:Meterannounces its value as capacity ("38,500 of 50,000 points, 77 percent") and flips to red below target, which is the wrong reading here. Loyalty needs a "so much to go" phrasing and a tone that does not judge. - 🟢 44px touch targets. Here the agent found
Buttontopping out at 40px, andTabsneeded a manualmin-h-11(issue #362).Badgeis fixed ath-5, which I had to override for a two-line warning.
Nothing new landed under src this round. The 3.5/5 came with three uses of ListCard and LoyaltySummaryCard at one of three.
What I took away: the hunch about rail points held up
Airline mileage exposed a missing loyalty summary. I had already suspected rail would need points too, which makes it likely that returning to passenger-facing rail, with transit cards, points, and commuter passes, produces the second LoyaltySummaryCard case. Among mode-specific passenger foundations this one is unusual: it spans several modes at once, including airline miles, rail points, and retail loyalty, which puts it close to a shared foundation. I put a rail points screen on the backlog to go after the second case deliberately. ListCard, meanwhile, held across three uses in one layout, so the shared passenger foundation is now something I can rely on.
The three passenger-facing air rounds (#114 to #116)
| # | Screen | Score | Outcome |
|---|---|---|---|
| 114 | Check-in | 3 | SeatMap built on its third case |
| 115 | Flight status | 4 | ListCard and RouteStops fit exactly |
| 116 | Booking management and mileage | 3.5 | ListCard three ways, LoyaltySummaryCard at one of three |
Going deeper on the passenger side settled SeatMap and exposed the next set of foundations: TicketStub, LoyaltySummaryCard, a segmented control, 44px targets, and passenger warmth. The weak side of the library turned out to be where foundations surface fastest.
The run
- gunjo.jp / ListCard / SeatMap / npm
@gunjo/ui/ GitHub / previous rounds #1 through #115 - GunjoUI by UIXHERO
ListCard worked three ways in one layout. The loyalty centerpiece still has no component, and that is what pointed to the next foundation.
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.