---
prompt-id: "23"
name: Cross-screen consistency audit (multi-image)
status: live
mcp: none
model: Sonnet 4.6
environment: claude.ai or Claude Desktop
inputs:
  - 3–5 screenshots attached simultaneously
  - tokens.css (canonical) — paste or load from Project
  - Archetype name (Harbor / Sentinel / Current / Lattice / Meridian)
outputs:
  - Per-screen issue list (Critical / Major / Minor)
  - Consistency matrix table (component type × screen × CONSISTENT / INCONSISTENT)
  - Per-screen verdict + overall verdict
chains: []
prereqs: []
documented-in: Ch17 — Claude Design (Multi-image vision section)
---

# Prompt 23 — Cross-Screen Consistency Audit

The audit that single-screenshot critiques can't perform. Per-screen audits run separately will pass two screens that are individually consistent but mutually inconsistent (different padding for the same card type across screens, different shadow on the same nav header). This prompt takes 3–5 screens at once and produces both per-screen findings and a cross-screen consistency matrix.

## When to use

Workflow C — quality gate before code generation. Run when designer hands off a multi-screen flow and you need to confirm cross-screen drift is zero before MCP generates code from any of them. Also useful as a pre-merge check when multiple screens share a component and may have drifted independently.

## Output shape

Two parts:
- **Part 1 — Per-screen issues:** Critical / Major / Minor list per screen, format: `[screen] · [element] · [property] · [observed] → [expected token]`.
- **Part 2 — Consistency matrix:** Table with rows = shared component types, columns = screen names, cells = CONSISTENT / INCONSISTENT (with note).

Verdict: PASS / FIX BEFORE CODE / REWORK per screen, plus overall CONSISTENT / DRIFT DETECTED.

## Chain memberships

- None directly. Cross-references Chain 5 (a11y audit) which uses single-screen checks; this prompt extends to multi-screen.

## Prompt body

```
CROSS-SCREEN CONSISTENCY AUDIT

Archetype: [Harbor | Sentinel | Current | Lattice | Meridian]
Screens attached: [list screen names, e.g. Dashboard, Detail, Settings]
Token system:
  [paste :root block from tokens.css — or load from Project]

PART 1 — Per-screen issues
For each screen, check every visible element for:
1. COLOR — raw hex not in token system
2. SPACING — gaps or padding not on the archetype grid
3. TYPOGRAPHY — font size, weight, or family outside the scale
4. BORDER RADIUS — value not in the archetype's radius set
5. ANTI-PATTERNS — any pattern from the archetype's banned list

Output: ranked issue list per screen
  Critical / Major / Minor
  Format: [screen] · [element] · [property] · [observed] → [expected token]

PART 2 — Consistency matrix
Compare all screens against each other for:
- Shared component types (e.g., all tables, all nav headers, all modals)
- Token application consistency (does the same element use the same
  token across screens, or does it vary?)
- Pattern consistency (same interaction pattern coded the same way?)

Output: a table with rows = component type, columns = screen name,
cells = CONSISTENT / INCONSISTENT + note on the inconsistency.

VERDICT (one per screen + one overall):
  PASS / FIX BEFORE CODE / REWORK
Overall: CONSISTENT / DRIFT DETECTED (list cross-screen issues)

META-FOOTER (chain runner)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
USE WITH
  3–5 screenshots attached simultaneously to the same message
  (not separate messages — Claude must see them together).
  tokens.css pasted or loaded from Project.

SAVE INSTRUCTION
  Save report to: output/cross-screen-audit-<YYYY-MM-DD>.md

VERIFY
  Report contains BOTH parts (per-screen list AND consistency matrix).
  Overall verdict is present.

HANDOFF
  "Cross-screen audit complete. Drift items: <count>.
   If overall = CONSISTENT: ready for code generation.
   If DRIFT DETECTED: designer fixes the cross-screen issues
   in Figma, re-run audit, only generate code once overall = CONSISTENT."
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```