A taxi membership screen brought seven passenger components home
/taxi-membershipCaptured 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
A taxi membership screen brought seven passenger components home
Build log series: I give an AI that has never seen Gunjo (
@gunjo/ui) only the public npm package and the gunjo.jp docs, then ask it to build a real screen. This fifth deeper passenger-facing taxi round covered membership, subscriptions, and coupons: tiers, points, ride passes, coupons, and referrals.
Result: 4.5/5, the strongest domain fit in the series
The screen passed tsc and fit a 375px mobile-first layout. The agent reported:
The library fit this screen so well that it almost looked suspicious. A new adopter building a Japanese ride-hailing membership and coupon screen was led by JSDoc that literally names coupons, point balances, plans, and membership cards to purpose-built components for almost everything.
Seven components (LoyaltySummaryCard, RadioCard, TicketStub, ListCard, ExpiryBadge, BottomActionBar, and PageHeader) covered about 95 percent of the screen with correct accessibility and touch targets. The catalog found the right component for six of the seven needs without prior context.
The core observation: components returned to their natural homes
Several components built or settled in the series reached either their original purpose or another industry without prompting:
-
LoyaltySummaryCard, built in #118 for a prominent points and tier summary, landed exactly where it belongs. Member name, tier, point balance, progress to the next tier, expiry, and a history action mapped one-to-one. -
TicketStub, built in #128 for coupon and membership faces, returned to coupon presentation with a QR, readable code, and perforation. -
ExpiryBadge, built for qualification expiry in #142, was independently found for a coupon deadline. The date-against-deadline axis had crossed crew qualifications, vehicle inspections, and coupons. -
BottomActionBar was independently found again after #147, #148, and #149.
The agent: Together,
LoyaltySummaryCard,RadioCard,TicketStub,ListCard,ExpiryBadge,BottomActionBar, andPageHeadercovered about 95 percent with correct accessibility and touch targets, and the catalog guided me without prior knowledge. This is the strongest domain fit I have seen for a passenger membership screen in a third-party library.
What I took away: near the end of deep coverage, the foundation assembles the screen
The first passenger taxi screen in #147 still hand-rolled BottomActionBar. By the fifth, components built across earlier screens returned to their natural uses, leaving only one referral card block hand-rolled. This is the target state of a design system:
- the passenger foundation has
PageHeader,ListCard,FilterChips,RadioCard,AmountBreakdown,TicketStub,LoyaltySummaryCard,ExpiryBadge, andBottomActionBar; and - a new passenger screen becomes mostly composition rather than invention.
Staff coverage had followed the same curve across 14 industries and five transportation modes. Passenger coverage was nearing it too. By the fifth taxi screen, the compound return from independent reuse produced the strongest fit in the series. The deeper the coverage, the more readily the next screen stands on existing foundations.
What it flagged in passenger loyalty
- 🟠
ReferralCard for a referral reward, copyable code chip, and share action. It was the only hand-rolled block, recorded on issue #408. - 🟡
PromoCodeField for alphanumeric coupon entry.InputOTPandScanInputwere both the wrong pattern, and the catalog had no supported answer. I added it to issue #408. - 🟡 A
tierToneforLoyaltySummaryCard. Its brand tone always uses the Gunjo blue gradient, so a gold member cannot receive a gold tier treatment. I added the extension to issue #408.
Nothing new was added under src this round. The 4.5/5 showed about 95 percent cross-industry reuse in the loyalty foundation and logged the remaining loyalty gaps.
📊 Component scoreboard (15 built)
Earlier components plus PageHeader / Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge / BottomActionBar In progress: ReferralCard and PromoCodeField, RatingInput, SectionList, DateTimePicker, and StatusLevel at two of three.
📋 Passenger-facing taxi progress
- 🚕 Taxi: six staff / five passenger screens (ride hailing, booking, history, support, membership), one away from symmetry
- Remaining candidate: corporate rides and taxi tickets, a business-to-customer flow mediated by an employer
Next up: build log #152
- Finish passenger-facing taxi with corporate rides or tickets, reaching six staff and six passenger screens.
The run
- gunjo.jp / LoyaltySummaryCard / TicketStub / ExpiryBadge / npm
@gunjo/ui/ GitHub / previous rounds #1 through #150 - GunjoUI by UIXHERO
Seven components returned to their natural homes. Near the end of deep coverage, a settled foundation starts assembling each new screen on its own.
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.