Generating views with AI
The prompt pattern for UI that comes back right: context, one screen, the data shape, and the constraints — plus the review-and-iterate loop that keeps you in charge.
UI generation is where AI-assisted building feels like magic — full screens from a paragraph — and where undisciplined prompting produces the haunted house. The pattern that keeps it right:
- Context first, every time: the relevant spec section + the data shape ('a message has: sender_name, sender_email, subject, body, status, received_at') + what already exists ('I have a StatusBadge component that takes a status prop'). Assistants build an inbox without context; they build your inbox with it.
- One screen (or one component) per request. 'Build the inbox page' — not 'build the inbox, thread, and settings.' Big asks produce big diffs, and big diffs are where your review breaks down. The unit of generation should match the unit you're willing to read.
- State the constraints that matter: 'use mock data for now (an array of 5 sample messages in the file)', 'no libraries beyond what's installed', 'mobile-friendly', 'match the wireframe: filter tabs on top, list below, unread bold.' Constraints are cheaper than corrections.
- Then iterate in small, named moves: 'the cards are cramped — more vertical spacing', 'move the badge to the right edge', 'empty state: friendly message + no table header.' Each iteration is one visual sentence. Ten small rounds beat two big ones, and each round you watch the diff, which is how the reading skill compounds.
Mock data now, real data next module (this is strategy, not laziness)
Module 3 builds every screen against hard-coded sample data — five fake messages living in an array. This is deliberate sequencing: UI problems and data problems are both hard, and beginners who face them simultaneously can't tell which one is biting. With mock data, every glitch this week is a UI glitch by definition. Next module swaps the array for the database and — because the components only ever knew 'I receive messages as props' — the swap barely touches them. That clean seam is the three-place model paying rent.
Before accepting any generated screen: (1) 'Where did my data shape go?' — find each spec column in the JSX; missing ones mean the assistant invented its own shape (it loves adding an avatar you don't have). (2) 'What happens when the list is empty / the text is huge?' — if the answer isn't visible in the code, ask for the empty state and a long-text test now. Assistants default to happy-path UI; the edges are yours to demand.