8.7 KiB
Preset: wireframes-mockups
Last updated: 2026-05-17 | Verified: research/03-prompt-patterns-intent-presets.md Evidence grade: Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
Anthropic names wireframes-mockups in the launch enumeration at https://anthropic.com/news/claude-design-anthropic-labs but publishes no dedicated tutorial, support article, or canonical prompt set for it. The patterns below come from community practitioners; treat them as field-tested but not Anthropic-authoritative.
(a) What this preset is
Anthropic launch post one-sentence description: wireframes-mockups covers the spectrum from low-fidelity layout sketches (boxes, labels, structure-only) to high-fidelity mockups (visual design applied, but not interactive). The output is structural — the goal is to communicate layout, not aesthetic and not interaction.
Distinguishing properties:
- Static (not interactive) — wireframes and mockups do not have working state transitions; for interaction logic, use
prototypes - Low-fi or high-fi — the preset spans both ends; the operator picks via prompt
- Pre-visual-design — wireframes are often deliverables before the visual designer commits to a direction
- Iteration-cheap — wireframes are intended to be iterated quickly, so the prompt patterns lean on N-variations-first generation
(b) Why Anthropic published no per-preset guidance
Wireframes occupy a niche between designs (visual exploration) and prototypes (interaction validation). Anthropic appears to treat the preset as a destination shape rather than a distinct generation mode. The Goal / Layout / Content / Audience framework (../01-prompt-fundamentals.md Layer 1) applies — Layout is the dominant concern, Content becomes structural labels, Audience determines fidelity level.
Community practitioners have converged on the patterns below (Section c).
(c) Community patterns
N-variations-first
Community pattern from https://designwithai.substack.com (cited in research/03): wireframes are most useful when generated in N variations and compared. Brief the model to produce N distinct layout variations in the first turn, then pick one to refine.
Convergent N values from community practice: 3 or 4 variations is the sweet spot. More than 4 dilutes the operator's attention; fewer than 3 does not surface meaningful alternatives.
The brief pattern:
Generate 4 distinct wireframe variations for [feature/page]. For each:
- One sentence describing the structural direction
- The wireframe itself (boxes, labels, no visual design)
After I pick one, refine that variation into a mockup with visual
design applied.
This composes with Layer 2b (propose-options-before-building) from ../01-prompt-fundamentals.md.
Wireframe vs High-Fidelity sub-preset selection
Community pattern from https://computingforgeeks.com (cited in research/03): the preset spans low-fi to high-fi, but the model behaves differently across the spectrum. Brief the fidelity level explicitly:
Fidelity: low-fi
- boxes with labels, no typography weights other than 500
- one color (greyscale) — bg, surface, muted, fg
- no images, no icons — represent visual elements as labelled boxes
- 8pt grid visible if helpful
OR
Fidelity: high-fi
- actual typography, full color palette, real icons, real images
- production-ready visual treatment
- no interaction logic (this is wireframes preset, not prototypes)
Pick one explicitly. The default-mode failure is the model producing a mid-fidelity output that satisfies neither the low-fi structural goal nor the high-fi visual-validation goal.
The Aakashg / Nielsen "low-fi-is-deprecated" debate (flagged as unsettled)
A community debate documented across Aakash Gupta's and Jakob Nielsen's posts in 2024-2025 (cited in research/03) argues that AI-generated high-fi mockups have made low-fi wireframes operationally obsolete — the marginal cost of generating a high-fi mockup is now low enough that there is no reason to start with low-fi. The counter-argument: low-fi wireframes still serve a communication function (forcing reviewers to focus on structure, not aesthetic) that high-fi mockups undermine.
This plugin treats the debate as unsettled. The brief should pick the fidelity level deliberately, with the choice tied to the audience and the review purpose, not to a default assumption that one fidelity dominates. Flag the debate when the operator's choice seems unconsidered.
(d) Critical caveats
Aesthetic drift if starting in high-fi
When starting in high-fidelity mode, the model imports its convergent middle-ground aesthetic defaults more aggressively (because the visual decisions are within scope). Layer-3 negative constraints (../01-prompt-fundamentals.md) apply with extra weight on high-fi mockups.
Iteration economy — wireframes burn turns
Each variation requested in the N-variations-first pattern costs a fraction of a turn (the model generates all N in one chat round). But subsequent refinement of the chosen variation often requires multiple turns (typography decisions, color palette, component-level styling). Budget accordingly — a wireframe-to-mockup flow can consume 4-6 turns for a single page.
Wireframe ≠ prototype
If the operator describes user interactions ("the user clicks here, then sees this"), they want prototypes, not wireframes-mockups. Wireframes capture structure; prototypes capture behaviour. Misclassification leads to wasted turns regenerating an artifact in the wrong preset.
(e) One worked prompt — layers 1 + 3 composed, N-variations-first pattern
Goal: 4 wireframe variations for a customer-onboarding page, audience is product team for review.
Goal: 4 distinct wireframe variations for the first page of a customer
onboarding flow. The page introduces the product, captures
essential information, and routes the customer to one of three
paths (self-serve, sales-assisted, partner-handoff).
Layout: Single page, viewport ~1440x900. Each variation lays out the
same content differently.
Content: Real placeholder content — actual headlines, actual button
labels, actual form field labels. No lorem ipsum.
Audience: Internal product team (PM, design lead, eng lead) reviewing
structure choices before committing to a direction
Fidelity: low-fi (community pattern from
https://computingforgeeks.com — fidelity affects iteration
path)
- boxes with labels, no typography weights other than 500
- greyscale only (bg, surface, muted, fg)
- no images, no icons — labelled boxes
- 8pt grid visible
N-variations-first (community pattern from
https://designwithai.substack.com):
Generate 4 distinct wireframe variations. For each variation:
- One-sentence description of the structural direction (e.g.,
"Top-down narrative — story first, paths second")
- The wireframe itself
- One-line rationale tying the structure to the audience and goal
The 4 variations should be meaningfully distinct from each other —
not minor tweaks of one base layout.
After I pick one, generate a fifth output: a refined mockup of the
chosen variation, transitioning fidelity from low-fi to medium-fi.
Negative constraints (Anthropic AI-slop avoid-list):
- Inter, Roboto, Arial, Space Grotesk as primary typeface (the
fidelity-low constraint covers most of this, but flag explicitly)
- Purple gradients (low-fi means greyscale anyway)
- Three-column feature grid as the default structural pattern
- Centered-hero with single CTA as the default
- Cookie-cutter framing
Expected follow-up turns:
- Turn 1: 4 wireframe variations generated
- Turn 2: operator picks variation, refined low-fi mockup generated
- Turn 3: aesthetic family applied (full layer-2a brief), medium-fi mockup
- Turn 4: layer-4 dimensions applied (typography modular scale, color palette, component stylings)
- Turn 5+: Tweak panel for spacing and density adjustments
Sources
https://anthropic.com/news/claude-design-anthropic-labs— preset enumeration, one-sentence descriptionhttps://designwithai.substack.com— community pattern: N-variations-firsthttps://computingforgeeks.com— community pattern: explicit Wireframe-vs-High-Fidelity fidelity selectionhttps://claude.com/blog/improving-frontend-design-through-skills— AI-slop avoid-list (composed for high-fi mode)https://github.com/anthropics/skills/skills/frontend-design/SKILL.md— Design-Thinking Framework reference
Re-research trigger: Anthropic publishing a dedicated wireframes-mockups tutorial; the Aakashg/Nielsen low-fi-is-deprecated debate reaching practitioner consensus; new sub-fidelity tier surfacing in community practice.