What this sample containsThe complete book has fifteen chapters. This page contains the opening premise and the first practical exercise. It does not represent the full paid book.
00 · Why capable developers still ship inconsistent interfaces
You can write clean code, understand APIs and deploy a reliable application. Yet the finished interface may still feel less considered than the software underneath it.
The gap is rarely one missing effect. It appears when dozens of small visual decisions have no shared rule: one blue becomes three, spacing changes by section, headings lose hierarchy and components acquire different shapes.
Strong product teams do not solve every screen from taste alone. They restrict the decision space. Colours have roles. Typography has levels. Spacing follows a scale. Components have known states. Exceptions are visible rather than accidental.
The central rule
Do not ask an agent to invent the visual system while it is also writing the interface. Decide the system first, then make the implementation answer to it.
What the complete method teaches
Direction
Translate the product and audience into a visual position with explicit boundaries.
System
Define colour roles, typography, spacing, layout, components and interaction states.
Instruction
Put those decisions into files and prompts that a coding agent can reuse.
Verification
Inspect the rendered result rather than accepting the final message from the agent.
01 · Write the brand brief before choosing the interface
A useful brand brief is short enough to remain visible while you work. Start with four decisions. Avoid abstract language that could describe any software company.
What should the product feel like?
Choose three precise qualities. Explain each one through a visible consequence. “Calm” may mean quiet contrast and restrained motion. “Operational” may mean dense, aligned information.
Who is making the decision?
Name the user, the task and the moment. “A freelance developer presenting a client build” is more useful than “developers.”
Which action deserves emphasis?
Choose one primary action for the page or workflow. Hierarchy fails when every button and section asks for equal attention.
How should the product speak?
Write one sentence describing the voice, then add examples of words it uses and words it avoids.
One-page brand brief
Copy this structure and replace every bracketed field. Leave an item unresolved rather than filling it with a vague adjective.
# Brand brief ## Product Name: [product name] Audience: [specific user in a specific situation] Primary task: [one task] Primary action: [one action] ## Direction The interface should feel: [quality], [quality], [quality] This means: [visible consequence for each quality] Avoid: [three patterns that conflict with the direction] ## Voice Voice: [one sentence] Use: [approved words or sentence pattern] Avoid: [words or claims that do not fit] ## Colour roles Canvas: [value and purpose] Structure: [value and purpose] Accent: [value and restricted purpose] Muted: [value and purpose] ## Typography Display: [family, role, weight range] Body: [family, role, weight range] Mono: [family and restricted role] ## Layout Container: [maximum width] Spacing unit: [base unit] Primary composition: [approved structure] Mobile rule: [how it reflows] ## Agent instruction Read this brief before editing the visual layer. Preserve product logic and existing routes. Use declared values. Ask before inventing an undefined visual decision.
Review the brief
- Can another person explain the intended feeling without using the word “modern”?
- Does every colour have a role rather than only a hex value?
- Is one action clearly more important than the others?
- Does the brief name visual patterns that should not appear?
- Could a coding agent tell when it needs to ask instead of guessing?
End of the free sample
The remaining chapters cover DESIGN.md, colour systems, typography, layout, spacing, components, motion, accessibility, agent prompts and final review.