163 lines
8.7 KiB
Markdown
163 lines
8.7 KiB
Markdown
# 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.
|