I had an AI build a homeowner portal: the components that were ready for business users felt stiff on a warm, consumer-facing screen (build log #178)

⁠Build log series⁠: I hand my own design system @gunjo/ui (Gunjo) to an AI that has never seen it, and have it build real screens. This is the fifth construction screen, and the first one aimed at the homeowner who ordered the house. The brief: a "my home progress portal" for someone having a house built to order. It gathers the construction stage, photos sent in from the site, the record of past meetings and the next appointment, decisions still waiting on the homeowner, the payment schedule, and a way to reach the site manager.

Result: 4/5. The skeleton went together, but the warmth a consumer screen needs was not in the existing components

I gave an AI that had never seen Gunjo nothing but the public npm package and the gunjo.jp docs, and asked it to build the screen. tsc passed clean, and it led with the phone layout.

The four construction screens before this one were for people at work: site supervisors and cost estimators. The fifth is for the customer, the homeowner. The short version is that the skeleton of the screen went together out of existing components, but ⁠Gunjo still has few components that carry consumer warmth, so the AI hand-rolled several pieces⁠.

The parts that show stages and schedules carried over as they were, even though they were built for business users.

• ⁠Stepper (construction stages)⁠: groundbreaking, foundation, framing, interior, completion. It showed the whole arc with a marker for where the build has got to.
• ⁠ProgressWidget (overall progress)⁠ and ⁠EventCalendar (next meeting)⁠: both the progress figure and the appointment calendar worked on a consumer screen unchanged. The calendar even has keyboard operation and screen reader support built in.
• ⁠Timeline (meeting records)⁠, ⁠MetadataList (what was decided)⁠, and ⁠CheckList (decisions still on the homeowner)⁠: plain in tone, but the wording and the choice of icons were enough to make them feel gentle.

What was missing: the consumer-facing components are thin

Three things could not be filled from the catalog, and all three are about ⁠warmth for a consumer⁠.

1. ⁠There is no gentle photo-with-a-caption card.⁠ I wanted the photos coming in from the site laid out with a line like "the frame went up today" beside each one. The photo management components that exist lean hard toward ⁠managing work assets⁠, with favorites, ratings and selection, which is too heavy for a homeowner's album. The gallery viewer cannot hold a caption at all. This time the AI put something plain together by hand from a card and an image, about 20 lines.
2. ⁠There is no simple message composer.⁠ I wanted an input for writing to the site manager. The composer that ships is built for talking to an AI, with a model picker, voice and attachments, and that is too heavy for a short note between a homeowner and their contact. The AI hand-rolled a text field and a send button, about 15 lines.
3. ⁠There is no payment schedule row.⁠ I wanted the deposit, the interim payment and the final payment listed with an amount, a paid or unpaid state, and a due date. The cost breakdown component is a ledger that totals things up, and it cannot carry a state per row. The AI used a checklist instead.

The hand-rolled code came to around 55 lines out of roughly 570 for the whole screen, so it is a small part of it. But these are shapes that come up often on consumer screens, so they are likely to be needed again on other screens aimed at homeowners and customers. My rule is that a missing component gets built for real only once three separate screens have needed it independently, and these three are at one.

For now the warmth comes from the copy and the icons

The other thing this round made clear is that ⁠the components do not carry warmth themselves⁠. The cards, the progress display, the contact thread: all of them are neutral and work for business users and consumers alike, which is another way of saying they are plain. This screen reads as gentle because of how the sentences and the icons were chosen, not because a component made it so. The components for business users are well covered by now. Consumer warmth is still ahead of us.

Where the names got confusing

The candidates for showing progress stages were scattered across stage display, approval steps, progress widget and timeline, and the names alone did not say which one was meant for a long consumer-facing arc, so the AI had to read the descriptions to be sure. The photo components had the same problem: plenty of candidates, and no way to tell from the names which one was the shortcut for "I just want these laid out with captions".

Wrapping up

The fifth construction screen was the first consumer-facing one. The skeleton of it, the stages and progress and schedule and records, went together out of components built for business users. The consumer-facing parts, the photo album and the simple message and the payment schedule, had no good match and were built by hand. Components for business users are broadly in place, while ⁠consumer warmth is an area still to be grown⁠. Which components carry across, and where the gaps are, is now visible along a second axis as well: work against customer.