~/zerotwo/design-prompts — zsh — 100×30
reed@zerotwo:~/design$ cat prompt-library.md

$ AI Prompt for Expert Web Design

// 10 production-grade prompts that turn Claude, GPT, v0 and Lovable into a senior-designer collaborator — discovery brief, IA, wireframes, tokens, Tailwind components, accessibility audits.

▶ Run across 60+ models — $19.99/moopen multi-model chat →
✓ 60+ frontier models in one chat
✓ Claude · GPT · Gemini · Grok · FLUX · Midjourney
✓ One subscription. No per-model bills.
// TL;DR

An AI prompt for expert web design is a structured instruction (Role + Context + Constraints + Output format + Examples) that turns generic chat models into senior-designer collaborators. Below: 10 production-grade prompts spanning discovery → wireframe → tokens → Tailwind code. Every prompt on this page is an AI prompt for expert web design you can paste into Claude, GPT, v0, Lovable, or Bolt today — and you can run all 10 across 60+ models inside one ZeroTwo chat for $19.99/month.

## Prompt anatomy: the RCCOE framework

Every prompt on this page follows RCCOE. It is the cheapest, most repeatable way to lift output from "blog filler" to "senior designer first pass."

R ──── Role "You are a senior product designer with 15 years shipping B2B SaaS."
C ──── Context Audience, product, current pains, brand voice.
C ──── Constraints Stack, word budget, accessibility targets, anti-patterns.
O ──── Output Markdown sections, JSON, table, ASCII wireframe.
E ──── Examples Optional 1-2 worked examples (few-shot).
// Anthropic, OpenAI, and Google AI all converge on the same advice: be specific, be structured, show examples.

## The 10 expert prompts

┌─── prompt-01-discovery-brief.md ───┐// model:Claude Sonnet 4.6
prompt-01 :: Discovery brief generator
01You are a senior product designer with 15 years shipping B2B SaaS.
02Goal: produce a one-page discovery brief for a new web product.
03Inputs I will paste: company name, audience, current pains, success metrics.
04Constraints:
05  - Max 250 words. No marketing fluff. Plain language.
06  - Surface 3 risky assumptions and 3 open questions.
07Output format (markdown):
08  ## Audience  ## Job-to-be-done  ## Success metrics
09  ## Risky assumptions  ## Open questions  ## Recommended next step
10Then ask me one clarifying question before generating.
// why it works: Role priming + explicit word budget + structured output forces senior-level synthesis instead of generic discovery checklists.
┌─── prompt-02-sitemap.md ───┐// model:GPT-5
prompt-02 :: Information architecture / sitemap
01Act as an IA lead. Produce a sitemap for {product} targeting {primary persona}.
02Constraints:
03  - Max depth: 3. No orphan pages. Group by user job, not by department.
04  - Mark every node as [marketing] [product] or [trust].
05  - Flag any node that competes for the same query intent.
06Output: indented bullet tree + a 4-row table of URL → primary keyword → intent → CTA.
// why it works: Forces the model to think in user jobs and search intent rather than echoing a corporate org chart.
┌─── prompt-03-wireframe.md ───┐// model:Claude Sonnet 4.6
prompt-03 :: Low-fi wireframe spec (ASCII)
01You are a wireframer. For the page {page name}, output:
02  1. ASCII wireframe (max 80 chars wide) using boxes [ ], lines |---|, and labels.
03  2. A numbered annotation list explaining each region's purpose, content type, and CTA.
04  3. Mobile variant of the same wireframe stacked vertically.
05Constraints: no colors, no fonts, no copy beyond placeholder. F-pattern above the fold.
06Audience: {persona}. Primary action: {goal}.
// why it works: ASCII output is reviewable inline in chat and feeds cleanly into v0/Lovable as structural context.
┌─── prompt-04-moodboard.md ───┐// model:FLUX 1.1 Pro / Midjourney v7
prompt-04 :: Visual moodboard prompt
01Editorial moodboard tile, 4-up grid, for a {industry} web product targeting
02{persona}. Mood: {3 adjectives, e.g. confident / quiet / precise}.
03Style anchors: Swiss grid, generous whitespace, single accent color {hex}, neutral
04greys, photographic hero with shallow depth of field.
05Avoid: stock-photo cliches, gradients, drop shadows, generic "tech bro" imagery.
06Aspect 4:5, sharp focus, photoreal, no text overlays.
// why it works: Concrete style anchors + an explicit avoid-list eliminate the AI moodboard sameness problem.
┌─── prompt-05-component-spec.md ───┐// model:Claude Sonnet 4.6
prompt-05 :: Component library spec
01Design lead role. For component {Button}, write a spec covering:
02  - Anatomy (with named slots)
03  - Variants (intent × size × state)
04  - Interaction states (default, hover, focus-visible, active, disabled, loading)
05  - Accessibility (role, aria, keyboard, contrast targets)
06  - Usage do's / don'ts (3 each, concrete)
07  - Anti-patterns observed in the wild
08Output as markdown with H3 sections. No code yet.
// why it works: Separating spec from code prevents Tailwind hallucination and forces the model to think about a11y first.
┌─── prompt-06-tokens.json.md ───┐// model:GPT-5
prompt-06 :: Design system tokens (JSON)
01Generate a W3C Design Tokens JSON for a {brand voice: e.g. precise, warm}
02SaaS. Required token groups:
03  color (semantic: bg, fg, accent, success, warning, danger, plus 9-step scales)
04  spacing (4px base, 0-32 scale)
05  radius, shadow, motion (durations + easings), typography (family, size, weight,
06  line-height, tracking).
07Constraints: WCAG AA contrast for every fg/bg pair. Output a single valid JSON
08object, no commentary. Add a // comment block above it explaining the rationale
09in 5 bullets.
// why it works: Asking for valid JSON + WCAG AA constraint stops the model from emitting decorative-but-broken palettes.
┌─── prompt-07-hero-copy.md ───┐// model:Claude + GPT side-by-side
prompt-07 :: Hero copy generator (compare models)
01Senior copywriter. Write 5 hero variants for {product}.
02Each variant: 1 H1 (≤9 words), 1 sub (≤22 words), 1 CTA (≤4 words).
03Constraints:
04  - Lead with outcome, not feature. No "AI-powered" cliche.
05  - One variant must be a question. One must be a number/stat. One must be a
06    direct command.
07  - Score each variant 1-5 on clarity, specificity, tension. Pick a winner.
// why it works: Forced variant constraints + self-scoring is how you escape the bland 'AI-powered platform' trap.
┌─── prompt-08-hero-html.md ───┐// model:Claude Sonnet 4.6 (or v0)
prompt-08 :: Landing page hero HTML
01Output a single semantic HTML5 hero section for {product}. Constraints:
02  - Tailwind v4 utility classes only. No custom CSS, no inline styles.
03  - Mobile-first. Fluid typography via clamp() utility-equivalent.
04  - Accessible: one h1, descriptive button text, aria-labels where needed.
05  - Include eyebrow tag, h1, sub, primary + secondary CTA, social proof row.
06  - No images yet — use a labeled <div> placeholder with explicit aspect-ratio.
07Return only the JSX-safe HTML, nothing else.
// why it works: Tailwind-only + mobile-first + explicit aspect ratios prevents CLS and matches v0/Lovable conventions.
┌─── prompt-09-tailwind-component.md ───┐// model:GPT-5 / Claude Sonnet 4.6
prompt-09 :: Tailwind component prompt
01Build {component, e.g. pricing table} as a single React + Tailwind v4
02component. Constraints:
03  - TypeScript. Props typed. forwardRef where appropriate.
04  - Dark-mode aware via class-based variants.
05  - Keyboard navigable. Focus-visible rings (≥3:1 contrast).
06  - No third-party UI libs. No inline styles.
07Return: (1) the component, (2) a 60-second usage example, (3) a 3-row test plan.
// why it works: Pinning the stack + a11y rules + a test plan converts the model from a code generator into a code reviewer.
┌─── prompt-10-a11y-audit.md ───┐// model:Claude Sonnet 4.6 (thinking on)
prompt-10 :: Accessibility audit (extended thinking)
01Senior accessibility auditor. I will paste a JSX component. For each
02issue found, return a row:
03  | Severity | WCAG ref | Issue | Why it matters | Minimal fix (diff) |
04Severity: blocker / serious / moderate / minor.
05Cover: semantics, keyboard order, focus management, color contrast, motion,
06labels, alt text, aria misuse. Skip non-issues. End with a 3-bullet "biggest
07risk" summary.
// why it works: Tabular output is scannable in code review; extended thinking surfaces aria misuse the model would normally invent.

Pair these prompts with our AI code generator when you're ready to ship the components.

## Why this matters (the numbers)

65%

of designers used generative AI in 2024

→ Figma AI Report 2024
75%

of knowledge workers use AI at work

→ Microsoft / LinkedIn Work Trend Index 2024
72%

of organizations use AI in at least one function

→ McKinsey State of AI 2024
Structure wins

structured prompts beat unstructured by significant margins

→ Anthropic Prompt Engineering
Throughput

AI assistants substantially raise business-user task throughput

→ Nielsen Norman Group
run.sh
$ ./run-all-prompts --models=60 --plan=zerotwo

▶ Run all 10 prompts across Claude, GPT, Gemini, FLUX, Midjourney — in one tab.

Stop juggling five subscriptions to A/B prompts. ZeroTwo bundles 60+ frontier models for $19.99/month.

▶ Open multi-model chatget started →
"Design systems are the API for your brand."
— Brad Frost, author of Atomic Design. The prompts above (especially #5 and #6) operationalize this idea — tokens and component specs are how you ship a brand at scale.

## Frequently asked questions

? What is an AI prompt for expert web design?
An AI prompt for expert web design is a structured instruction — Role + Context + Constraints + Output format + Examples (RCCOE) — that turns a generic chat model into a senior-designer collaborator. The prompt sets the role, gives the model real context, locks down constraints (stack, audience, accessibility), specifies the output shape, and optionally shows worked examples. Without that structure you get generic listicle output; with it you get something close to a senior designer's first pass.
? Which AI model is best for web design prompts?
There is no single best model. Claude Sonnet 4.6 tends to be stronger for design specs, accessibility audits, and writing. GPT-5 is strong at structured JSON output like design tokens and at hero copy variants. v0 and Lovable are tuned for shipping React + Tailwind directly. FLUX 1.1 Pro and Midjourney are for moodboards and hero imagery. The fastest workflow is testing the same prompt across multiple models in one tab.
? How does ZeroTwo help me test these prompts?
ZeroTwo gives you 60+ frontier models — GPT-5, Claude Sonnet 4.6, Gemini 3 Pro, Grok 4, Llama 4, FLUX, Midjourney and more — in one chat for $19.99/month. You can paste any of the 10 prompts on this page, switch model with one click, and compare outputs side by side without juggling five separate subscriptions. Open the multi-model chat to try it: https://zerotwo.ai/c.
? Will AI replace web designers?
No, but it changes the job. AI handles the first 60% — discovery briefs, IA drafts, token systems, component scaffolds, copy variants — at a fraction of the time. The remaining 40% is judgment: brand voice, visual hierarchy, motion, accessibility nuance, and stakeholder alignment. Designers who use AI to compress the mechanical work and spend their time on judgment will out-ship designers who do not.
? What is the RCCOE prompt framework?
RCCOE stands for Role, Context, Constraints, Output, Examples. Role primes the model ("senior product designer with 15 years in B2B SaaS"). Context is the brief, audience, brand. Constraints are the non-negotiables — stack, word count, accessibility, anti-patterns. Output specifies the exact shape (markdown, JSON, table). Examples (optional) show the model one or two ideal outputs. Every prompt on this page follows RCCOE.
? How long should an AI prompt for web design be?
Long enough to specify the role, the constraints, and the output shape — usually 80 to 250 words. Shorter than that and the model defaults to generic output. Longer than that and it starts to lose track of constraints. The exception is example-rich prompts (few-shot) for visual moodboards or copy generation, where adding 2-3 worked examples noticeably improves quality.
? Can I use these prompts in v0, Lovable, or Bolt?
Yes. Prompts 03 (wireframe), 05 (component spec), 06 (tokens), 08 (hero HTML), and 09 (Tailwind component) feed v0.dev, Lovable, and Bolt directly. The trick is to run the spec prompts in Claude or GPT first, then paste the output into v0/Lovable as the build instruction — you'll get noticeably better React + Tailwind output than typing a one-line prompt.
? Do I need to be a designer to use these prompts?
No. The 10 prompts are written so a developer or founder can run them end-to-end and produce a coherent design system, sitemap, wireframes, copy, and shippable React + Tailwind components. A designer will get sharper output by tightening the constraints and brand voice fields, but the scaffold works for anyone.

## Key takeaways

  • ✓ Use the RCCOE framework (Role, Context, Constraints, Output, Examples) for every design prompt.
  • ✓ Run spec prompts in Claude/GPT first, then paste the spec into v0/Lovable/Bolt as build context.
  • ✓ Pin the stack and accessibility targets up front — it eliminates 80% of the rework.
  • ✓ Compare the same prompt across 3+ models for hero copy, tokens, and a11y audits.
  • ✓ One ZeroTwo subscription replaces five model subscriptions for $19.99/month.

## Related

author = ZeroTwo Editorial
role = Design + AI research team
published = 2026-05-03
updated = 2026-05-03

Test your prompts across 60+ models — $19.99/mo

One chat. Every frontier model. Built for designers, devs, and founders who ship.

▶ Get startedopen multi-model chat →