Why this lesson exists
Encoding design judgement as prompt constraints so generated UI does not look generated.
What this lesson covers
This lesson sits in Module 6 — Building Apps Step by Step. It is scoped to a single 45-minute session with a concrete outcome at the end rather than a survey of the topic.
Learning objectives
- Express layout rules as durable constraints
- Catch the mobile failures models reliably produce
- Replace emoji, default fonts and nav chrome with deliberate choices
Session agenda
- 5 minFraming — why this exists and what you will be able to do
- 10 minCore concept — the idea, explained from first principles
- 15 minWorked walkthrough — watch it happen, with the real fields and output
- 10 minHands-on exercise — you run it and measure the result
- 5 minCheckpoint — recall questions and a note to your future self
Session outline
The full written lesson is in production. The session is built around the objectives above and follows the standard agenda: framing, the core concept explained from first principles, a worked walkthrough using the real API fields and outputs, a hands-on exercise you run yourself, and a recall checkpoint.
Every practical lesson in this course follows the same evidence rule — you run the thing and read the actual output rather than accepting a description of it. Where a lesson touches cost, you measure tokens and cache splits from the response. Where it touches code, you execute it. Where it touches design, you look at it at phone width.
Where it fits
| Position | Lesson |
|---|---|
| Previous | Building Workflows and Automation |
| This lesson | Front-End Quality: Design Rules That Survive |
| Next | Verification and QA: How to Not Trust the Model |
Checkpoint
At the end of this session you should be able to satisfy each of the learning objectives above without notes. If any one of them is still fuzzy, re-read that section before moving on — the next lesson assumes it.
Next
Verification and QA: How to Not Trust the Model