Visual acceptance before frontend implementation

Visual acceptance gives design work an artifact and a gate before frontend code expands the cost of change. The team turns intent.md into an inspectable mock, tests important states and breakpoints, records acceptance criteria, and names the approver. Claude Code, Cursor, or Codex can assist through images, browser tools, or an approved design integration without owning the design decision.

Scorecard question: How do you prototype and validate user interfaces before implementing code?

Maximum-score answer: intent.md produces an inspectable mock through an approved design tool, iterated before code generation.

The visual artifact contract

A useful artifact includes:

the primary task and success outcome;
empty, loading, error, success, permission-denied, and destructive states;
mobile and desktop breakpoints that matter;
content hierarchy, real or representative copy, and keyboard behavior;
component or token constraints from the design system;
accessibility expectations and reduced-motion behavior;
a stable link, exported asset, or committed local prototype;
a named approver and dated decision.

Choose the medium that answers the design risk: Figma for system alignment, an HTML prototype for interaction, images for direction, or a local app state for high-fidelity validation. Verify the actual capabilities and permissions of any design connector before relying on it.

Prompts to copy

Read intent.md and the design-system documentation.
Propose three materially different information hierarchies.
For each, show the primary flow plus empty, loading, error, and denied states.
Do not write production code. List assumptions and decisions for a human owner.

Turn the accepted direction into a testable prototype.
Cover the agreed breakpoints, keyboard path, focus order, validation,
reduced motion, and destructive confirmation. Record exact acceptance criteria
and keep any generated assets in the approved project location.

Compare the implementation with the accepted visual artifact.
Inspect the actual UI at required breakpoints and states.
Return only evidence-backed mismatches with screenshots, route/state,
severity, and the smallest suggested correction.

Tool mapping

Claude Code: attach or reference approved visual artifacts and use browser or design tools only when configured for the session.
Cursor: use image input, browser capabilities, or an approved MCP/design connection exposed in the workspace.
Codex: use app/browser/image capabilities available in the environment and preserve evidence in the task or repository.

The workflow does not require Claude Design, a universal Figma MCP, or an assumed Cursor/Codex bot. Claude Design is a real beta option for eligible Claude plans, but account and administrator availability must be confirmed before it becomes part of the team contract.

Failure modes

Only the happy path is designed. Require error, loading, empty, permission, and destructive states before acceptance.

The artifact is not reproducible. Store a stable link, version, export, seed data, viewport, and route.

The agent judges its own output. Use a separate review pass and named product/design approval.

Pixel matching replaces product judgment. Validate comprehension, task completion, accessibility, and system consistency—not only screenshot similarity.

Verify visual acceptance

The accepted artifact has a version, owner, and date.
Critical states and breakpoints are represented.
Acceptance criteria can become tests or a review checklist.
The implementation is inspected in the real application.
Evidence-backed mismatches are resolved or explicitly accepted.
Visual tools operate inside approved data and credential boundaries.

Move from design to build

Commit or link the accepted artifact in Design, then carry its criteria into Build and Test.

Artifact chain Pass accepted evidence between stages.

Governance and autonomy Control design data and tool permissions.