DSN-03 · SEC. 06 Design & UI

UI Approval Gate: Stop the Agent Before It Ships a Visual Change

Force your AI to describe the mockup and wait for your yes before touching production UI.

FORMAT: workflow
DIFFICULTY: intermediate
TIME: 10 min
TOOLS: universal
MODELS: any
COPIES: 0 so far

When to use this

You asked for a UI change and the agent went straight to editing files, three components deep, before you saw a single screenshot. Use this when you want a hard stop between "here's what I plan to build" and "I built it."

The pattern

Pastes as plain text

Before you write or edit any UI code for this task, you must stop at these checkpoints and wait for my explicit approval at each one:

CHECKPOINT 1: Describe the visual change in plain language. List every screen, component, and state affected. Do not write code yet.

CHECKPOINT 2: Produce a text-based mockup or ASCII layout of the new UI (or a static HTML preview if the stack supports it). Show before and after for the affected area.

CHECKPOINT 3: List the specific files you will touch and what changes in each.

After each checkpoint, stop and ask "Approve to continue, or revise?" Do not proceed to the next checkpoint or write production code until I reply with an explicit yes.

Work out the affected pages and components yourself from my task description; that's
part of Checkpoint 1.

First, ask me to describe the UI change I want, then wait for my reply. Don't start
Checkpoint 1 until you have it.

Real example output

CHECKPOINT 1: Visual change summary
- Pricing page: replace 3-column card grid with a comparison table on desktop, accordion on mobile.
- Affects: PricingPage.tsx, PricingTable.tsx (new), PricingCard.tsx (removed)
- States: default, "most popular" highlight row, mobile collapsed/expanded

Approve to continue, or revise?
```
User: approve
```
CHECKPOINT 2: Layout mockup

DESKTOP (>1024px)
+------------------+--------+--------+--------+
| Feature          | Basic  | Pro*   | Team   |
+------------------+--------+--------+--------+
| Users            |   1    |   5    |   20   |
| Support          |  Email | Priority| 24/7  |
+------------------+--------+--------+--------+
*Pro column has a highlighted top border and "Most Popular" badge.

MOBILE (<640px)
[ Basic  v ]  (collapsed accordion, tap to expand rows)
[ Pro*   v ]
[ Team   v ]

Approve to continue, or revise?

Why it works

Naming the checkpoints forces the agent to externalize its plan before it commits to code, which is the only point where you can catch a wrong direction cheaply. Requiring an explicit reply, not just a pause, stops agents that treat silence or "looks fine" phrasing in their own output as permission to proceed.

Related patterns

OPS-10Pre-Push, Pre-Merge Approval GateStop an agent from pushing or merging without your explicit go-ahead, every time.DSN-07Hit a Named Quality Bar: Design Review Against Reference ScreenshotsCompare your UI with a reference screenshot, name material gaps, and verify any approved changes.ENG-06Decision Batch CheckpointCollect small pending decisions during a long task and approve them together at one checkpoint.