# 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: 1. Turn 1: 4 wireframe variations generated 2. Turn 2: operator picks variation, refined low-fi mockup generated 3. Turn 3: aesthetic family applied (full layer-2a brief), medium-fi mockup 4. Turn 4: layer-4 dimensions applied (typography modular scale, color palette, component stylings) 5. Turn 5+: Tweak panel for spacing and density adjustments --- ## Sources - `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration, one-sentence description - `https://designwithai.substack.com` — community pattern: N-variations-first - `https://computingforgeeks.com` — community pattern: explicit Wireframe-vs-High-Fidelity fidelity selection - `https://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.