Best Claude Design
Prompts for UI
& Prototypes

• 

  Claude Design/ Landing Page

  > SaaS Hero Landing Page

  DESIGN.md — SaaS Analytics Landing Page
  Brand: Metric (B2B analytics tool)
  Aesthetic family: Editorial Minimalism (dark variant)
  Personality: Precise, confident, slightly editorial
  Style reference: Vercel.com homepage — surgical typographic hierarchy, no hero illustration, data is the visual
  
  Design system:
  - Background: #0a0a0a
  - Surface: #111111
  - Border: #1e1e1e
  - Foreground: #fafafa
  - Accent: #d4f756 (acid green — used sparingly, max 3 instances)
  - Muted: #737373
  - Font headings: Fraunces 700 italic (hero H1 only)
  - Font body: Space Grotesk 400/500
  - Font mono: JetBrains Mono (all numbers and metrics)
  
  Sections in order:
  1. Nav — logo left, 4 links center, "Start free" button right (acid green bg, black text, no radius)
  2. Hero — H1 in Fraunces italic 72px ("Know what your users do, before they leave"), one-line subhead Space Grotesk 20px, two CTAs (primary acid-green + ghost outline), CSS-only dashboard mockup below — a dark card with metric rows, no stock art
  3. Logos — "Trusted by engineering teams at" + 6 company name text-logos in #525252, no actual logos
  4. Features — 2-col asymmetric layout (NOT a 3-column grid). Each: section-divider line + label in mono + headline + 2 paragraphs of real copy
  5. Metrics bar — 3 numbers in JetBrains Mono 48px: "11M events/day · 99.97% uptime · <50ms p99"
  6. CTA — full-width #111 section, headline, email input + acid-green button
  
  Anti-slop constraints (hard rules — no exceptions):
  - No teal (#16d5e6) anywhere in the design
  - No Lucide icons — geometric SVG shapes or text labels only
  - No Inter or Roboto fonts — only fonts listed above
  - No purple gradient on white backgrounds
  - No three-column feature grids with icons
  - No lorem ipsum — write real B2B analytics copy throughout
  - No placeholder stock images — CSS-only UI mockups
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ Dashboard

  > Product Analytics Dashboard

  DESIGN.md — Product Analytics Dashboard
  Brand: Pulse (product analytics platform)
  Aesthetic family: Data-Dense Pro (light variant — think Vercel Analytics + Linear)
  Personality: Data-dense, focused, no wasted pixels
  Style reference: Linear.app + Vercel Analytics — light mode, tight spacing, monospace for all data values
  
  Design system:
  - Background: #fafafa
  - Surface: #ffffff
  - Panel border: #e4e4e7
  - Foreground: #09090b
  - Accent: #2563eb (blue)
  - Positive: #16a34a | Negative: #dc2626 | Warning: #d97706
  - Font UI: Geist 500 (nav labels, buttons, headings)
  - Font mono: IBM Plex Mono 400 (all numbers, metrics, data values — no exceptions)
  
  Layout:
  - Left sidebar 240px fixed: logo area, section nav (Overview / Events / Users / Funnels / Reports), collapse to 60px icon mode via CSS :checked toggle
  - Top bar 52px: breadcrumb + page title left, date range pill + Export button right
  - Main content: 24px gap grid
  
  Metric cards row (4 cards, equal width):
  - IBM Plex Mono 40px number (MAU: "18,240", Retention: "71.3%", Conversion: "4.8%", MRR: "$34,700")
  - Trend: colored dot + percentage + "vs last 30d" in Geist 13px muted
  - 7-day SVG sparkline (hand-coded SVG path, not a chart library)
  - Card: 1px #e4e4e7 border, no shadow
  
  Below cards:
  - Full-width area chart: Weekly Active Users, SVG-only, gradient fill #2563eb to transparent, labeled axes in IBM Plex Mono
  - 2-col below: events table (left) with alternating #f4f4f5 rows, top pages list (right)
  
  Anti-slop constraints:
  - No teal (#16d5e6) anywhere
  - No Lucide or Heroicons — geometric CSS shapes only
  - No Inter or Roboto — Geist and IBM Plex Mono only
  - Status indicators: colored dot only, never pill badges
  - Depth through borders and background color only — no box-shadows
  - Realistic data only — no 1234, 9999, or "N/A" placeholders
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ Presentation

  > Investor Pitch Deck

  DESIGN.md — Investor Pitch Deck
  Brand: Forge (AI infrastructure startup)
  Aesthetic family: Cinematic Dark × Editorial Minimalism
  Personality: Editorial, confident, numbers-forward
  Style reference: Nancy Duarte "Resonate" narrative structure meets Swiss International typographic grid
  
  Design system:
  - Background: #0c1222 (deep ink)
  - Surface: #131d30
  - Border: rgba(255,255,255,0.08)
  - Foreground: #f0f4ff
  - Accent: #4fffb0 (phosphor green — key numbers only, max 2 per slide)
  - Muted: #8899aa
  - Font headings: Playfair Display 700 italic
  - Font body: DM Sans 400/500
  - Font numbers: DM Mono 500 (all metrics and dollar amounts)
  
  Slides (6, full-viewport, CSS scroll-snap vertical):
  1. Cover — centered: "FORGE" Playfair 80px, one-line tagline, "Series A · April 2026" DM Mono, geometric CSS mark above name
  2. Problem — headline left (Playfair 48px), 3 pain-point statements right in DM Sans, market size number in phosphor green DM Mono
  3. Solution — split: left text description, right CSS-drawn terminal mockup (black box, green cursor, real CLI commands)
  4. Traction — 4 metric blocks: "$2.4M ARR" / "340% YoY" / "62 enterprise customers" / "NPS 71" — all DM Mono 56px, phosphor green
  5. Business Model — 3-tier table: Starter / Growth / Enterprise, one column with 2px phosphor-green border
  6. Ask — "$12M Series A" Playfair 96px, use-of-funds horizontal bar (CSS only, labeled), 5 team avatar circles (initials)
  
  Anti-slop constraints:
  - No teal (#16d5e6) or purple gradient on slide backgrounds
  - No stock illustration placeholders — CSS geometric shapes only
  - Phosphor green only on numbers and one highlighted table column — never decorative
  - No Inter or Roboto — Playfair, DM Sans, DM Mono only
  - Slide transitions: CSS scroll-snap only, no JS
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ Portfolio

  > Dark Minimal Portfolio

  DESIGN.md — Senior Product Designer Portfolio
  Brand: Personal (Jordan Lee, senior product designer, 8 years experience)
  Aesthetic family: Neon Brutalist × Terminal-Core hybrid
  Personality: Edgy, typographic, high-contrast, no fluff
  Style reference: Teenage Engineering product pages — sparse, precise, every element earns its place
  
  Design system:
  - Background: #0e0e0e
  - Surface: #171717
  - Border: rgba(255,255,255,0.07)
  - Foreground: #f2f2f2
  - Accent: #e8ff5a (acid yellow — 3 uses maximum across the entire page)
  - Muted: #5a5a5a
  - Font display: Bebas Neue (headings, uppercase)
  - Font body: Syne 400/500
  - Font labels: Courier New (categories, dates, metadata, skills)
  
  Sections:
  1. Hero — full viewport, "PRODUCT DESIGNER" Bebas 120px, "Available for work" status badge with static acid-yellow dot (no pulse, no animation), 2-sentence bio in Syne 18px, scroll arrow in Courier
  2. Selected Work — asymmetric grid: 1 wide card (60% width) + 2 stacked right (40%). Each card: project name Bebas, role + year Courier, category tag. Hover state reveals 1-line description + acid-yellow right-arrow →
  3. About — 2-col split: left 3 paragraphs (story, process, background), right skills list in Courier with "→ " prefix (no bullet points)
  4. Contact — email as H2-sized text link, LinkedIn + GitHub as Courier text links below
  
  Anti-slop constraints:
  - No Lucide or icon libraries — Courier "→" text labels and Bebas numbers only
  - No teal (#16d5e6), no rounded avatar bubbles, no gradient backgrounds
  - No animated status dots or blinking indicators — availability dot is static
  - Accent (#e8ff5a) only on: static availability dot, one CTA element, card hover arrow
  - Cards use border-only design — no filled backgrounds
  - No Inter, Roboto, or default system fonts
  - Negative space is intentional — resist filling it
  - Mobile: Bebas drops to 72px, all cards stack single column
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ SaaS

  > Pricing Page with Billing Toggle

  DESIGN.md — SaaS Pricing Page
  Brand: Relay (workflow automation tool)
  Aesthetic family: Editorial Minimalism (light — Linear/Stripe/Vercel lineage)
  Personality: Clear, confident, conversion-focused without being pushy
  Style reference: Vercel pricing page — clean light mode, price is the hero, no decorative distractions
  
  Design system:
  - Background: #ffffff
  - Surface: #f8f8f8
  - Border: #e5e5e5
  - Foreground: #111111
  - Accent: #5c47f5 (electric violet)
  - Font headings: Outfit 700
  - Font body: Outfit 400
  - Font prices: Outfit 700 with font-variant-numeric: tabular-nums
  
  Structure:
  1. Heading — "Pricing that scales with you" + subtitle + CSS-only monthly/annual toggle. Annual mode shows "Save 20%" pill badge next to toggle.
  2. Three pricing cards (desktop 3-col, mobile stacked):
     - Free: $0/mo, 5 features as text list with checkmarks (text only, no icon components), ghost button "Get started"
     - Pro: $49/mo ($39/mo annual), 10 features, filled accent button "Start Pro trial", "Most popular" pill above card. 2px accent border + 4px offset box-shadow (no glow)
     - Enterprise: Custom pricing, unlimited features, "Contact sales" outline button
  3. Full feature comparison table — features as rows, 3 plan columns, "✓" and "—" text only
  4. FAQ accordion (4 questions, CSS :checked + ~ sibling selector, zero JavaScript)
  
  CSS toggle mechanics:
  - Pure CSS :checked + ~ label targeting, no JS
  - Annual prices appear with line-through on monthly price, animate via CSS transition
  
  Anti-slop constraints:
  - No teal (#16d5e6) anywhere
  - No Lucide or icon libraries — text checkmarks and "—" only
  - No purple gradient on white — solid borders and offset shadow only
  - Prices use font-variant-numeric: tabular-nums — prevents layout shift
  - No decorative background patterns or blobs
  - Mobile: comparison table hides, feature lists shown per card
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ Marketing

  > Animated Product Explainer

  DESIGN.md — Animated Product Explainer (Storyboard Format)
  Brand: Nova (AI email assistant)
  Aesthetic family: Editorial Minimalism with purposeful motion
  Personality: Clear, punchy, earns attention in the first 3 seconds
  Style reference: Stripe explainer videos — every frame is a slide, motion is purposeful not decorative
  
  Design system:
  - Background: #f5f7fa
  - Card: #ffffff
  - Border: #e8ecf0
  - Foreground: #0f172a
  - Accent: #6366f1 (indigo)
  - Font headings: Plus Jakarta Sans 700
  - Font body: Plus Jakarta Sans 400
  - Font mono: Fira Code 400 (code and terminal frames)
  - Animation: CSS @keyframes only — no GSAP, no JS animation libraries
  
  Build a 6-scene explainer as a scrolling storyboard. Each scene is a full-width card at 16:9 ratio (960px × 540px):
  
  Scene 1 — Hook: White card, centered. Large: "You spend 2 hours on email. Every day." Fade-in via CSS @keyframes. No product yet.
  Scene 2 — Problem: CSS-drawn inbox mockup, unread count badge animating 0→47 via CSS counter. "It never ends." caption below.
  Scene 3 — Product intro: Nova logomark appears (CSS geometric shape), "Nova reads, prioritizes, and replies — in seconds." CSS wipe-in left-to-right.
  Scene 4 — Demo frame: Split layout. Left: cluttered inbox CSS mockup. Right: Nova-sorted inbox (3 categories: Urgent / FYI / Archive). 3 labeled diff callouts with animated pointer lines.
  Scene 5 — Social proof: Full-width quote, Plus Jakarta Sans italic 28px, name + company + title, 5-star rating below (text ★).
  Scene 6 — CTA: "Try Nova free for 14 days." Centered. Email input + indigo button. "No credit card required." in Fira Code below.
  
  Frame navigation: Prev / Next buttons. 6 indicator dots at bottom, active dot filled accent.
  
  Anti-slop constraints:
  - No stock images or AI-generated illustrations
  - No teal (#16d5e6) or three-column icon grids
  - All animations: CSS @keyframes only
  - No Lucide icons
  - Every scene has real copy — no "Headline here" or Lorem Ipsum
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ UI

  > Mobile App Onboarding Flow

  DESIGN.md — Mobile App Onboarding Flow
  Brand: Vault (personal finance app)
  Aesthetic family: Cinematic Dark (restrained, fintech-grade)
  Personality: Calm, trustworthy, removes friction at every step
  Style reference: Revolut onboarding — dark, clean, progress always visible, copy does the reassuring
  
  Design system (mobile viewport 390×844px):
  - Background: #0a0a0a
  - Card: #141414
  - Border: rgba(255,255,255,0.07)
  - Foreground: #ffffff
  - Accent: #00d68f (mint green)
  - Danger: #ff4d6d (decline states only)
  - Font: Plus Jakarta Sans 400/700
  
  Screens (4, horizontal scroll-snap, each 390px wide, rendered inside CSS phone frame):
  
  Screen 1 — Welcome: Vault logomark (CSS geometric shape: stacked 3 rectangles suggesting a vault), "Build wealth quietly." Headline, "Start in under 2 minutes." subline, "Get started" full-width button (accent), "I already have an account" text link
  Screen 2 — Connect bank: "Link your bank in 30 seconds" headline, CSS abstract illustration (3 rounded rects in a layer suggesting security depth), bank text grid: Chase · BofA · Wells Fargo · Capital One, "Secured with 256-bit AES encryption" trust line, "Connect securely →" button
  Screen 3 — Set your goal: "What's your main focus?" headline, 3 full-width cards: "Save an emergency fund" / "Invest for 10 years" / "Pay off debt fast". Radio-select: chosen card gets 1px accent border + accent dot left. "Continue →" button
  Screen 4 — Ready: Vault logomark animates in via CSS scale + fade (0.5s ease-out), "You're set, Jordan." headline, summary card (shows chosen goal + estimated timeline), "Open my dashboard →" CTA
  
  Phone frame: CSS border-radius 44px, border 6px #1f1f1f, inner screen radius 38px. Screens side-by-side on desktop.
  Progress dots top-center each screen: 4 dots, active = accent filled, inactive = #2a2a2a
  
  Anti-slop constraints:
  - No Lucide or illustration libraries — CSS geometric shapes only
  - No teal (#16d5e6) — accent is specifically mint green #00d68f
  - No Inter or Roboto — Plus Jakarta Sans only
  - Accent color only on: CTAs, selected goal card state, active progress dot
  - No blinking dots as decorative elements
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ Design System

  > DESIGN.md Brand File Generator

  You are a design systems architect. Generate a complete DESIGN.md file for any software product — the same DESIGN.md spec Claude Design uses natively to keep output on-brand across every prototype, slide, and page it produces.
  
  I will give you a product description. Output a ready-to-paste DESIGN.md that serves as a brand source-of-truth.
  
  My product: [INSERT — e.g., "Forge — a developer platform for deploying ML models. B2B, users are engineers in their 30s. Tone: precise, confident, a little austere."]
  
  Before writing, pick the single best-fit aesthetic family from these nine (used to anchor every downstream choice):
  1. Editorial Minimalism (Linear, Stripe, Vercel) — calm neutrals, single accent
  2. Terminal-Core (Ollama, Warp, Raycast) — monospace, phosphor on near-black
  3. Warm Editorial (Claude, Notion, Substack) — terracotta, cream, serif body
  4. Data-Dense Pro (ClickHouse, PostHog, Grafana) — charts hero, fixed-width numerals
  5. Cinematic Dark (RunwayML, NVIDIA) — film gradients, oversized type
  6. Playful Color (Figma, Duolingo, Toss) — saturated, rounded, illustrated accents
  7. Glass / Soft-Futurism (Apple, Arc, Spotify) — frosted blur, translucency
  8. Neon Brutalist (The Verge, Pitchfork, PlayStation) — hard edges, oversized numerals
  9. Cult / Indie (Thesephist, Criterion, A24) — magazine-leaning, indie character
  
  Your DESIGN.md must include these exact sections with full detail:
  
  ## Brand
  - Product name + one-line positioning statement
  - Aesthetic family (one of the nine above) + why it fits
  - Personality in exactly 3 adjectives
  - Voice: 2 copy dos + 2 copy don'ts (with short examples)
  
  ## Color System
  - Background, Surface, Border, Foreground (exact hex values)
  - Accent color (ONE color only — justify why it fits brand, NEVER default to teal #16d5e6)
  - Semantic: Success, Warning, Danger hex values
  - Rule: when to use accent vs muted text
  
  ## Typography
  - Heading font: name + weight + why this font fits the brand (never Inter, Roboto, Arial, or system-font defaults)
  - Body font: name + weight
  - Mono font: use case (code, data, metrics)
  - Scale: Display / H1 / H2 / H3 / Body / Caption — px size, line-height, letter-spacing
  
  ## Spacing & Layout
  - Base unit (4px or 8px), grid columns, gutter width
  - Card padding, section vertical padding
  - Container nesting depth cap (max 2 levels — prevent container soup)
  
  ## Component Constraints
  - Buttons: border-radius, allowed hover state
  - Cards: border vs shadow vs filled — which approach and why (pick one)
  - Icons: exact policy (e.g., "SVG only, no icon libraries, text labels preferred")
  - 3 layout patterns to avoid with reasons
  
  ## Anti-Patterns (the fingerprints to reject)
  List these 8 defaults explicitly and state the counter-rule for each:
  1. Teal accent (#16d5e6 or adjacent) — pick brand-specific accent
  2. Animated / blinking status dots — no motion on status indicators
  3. Container soup (excessive nesting) — cap at 2 levels
  4. Default serif headlines (Tiempos / Source Serif) — specify font stack with weight + tracking
  5. Accent bar on every card (4px left rule) — reserve left-rule for one semantic role
  6. Three-column feature grid in hero — use marquee, alternating rows, or single column
  7. Lucide icon stack everywhere — commit to one icon family or ship type-only
  8. Inter / Roboto / Arial / system fonts — specify brand-distinct fonts
  
  ## Reference Products
  2–3 products whose aesthetic is adjacent to this brand. One sentence each on why.
  
  Output format: Ready-to-paste Markdown only. No preamble, no meta-commentary — just the DESIGN.md content itself.

  Copy
• 

  Claude Design/ Landing Page

  > Brutalist Landing Page

  DESIGN.md — Brutalist Creative Agency Landing Page
  Brand: FORM (creative production studio)
  Aesthetic family: Neon Brutalist (The Verge / Pitchfork lineage, cream variant)
  Personality: Anti-polish, raw, intentional disruption — ugliness as craft
  Style reference: Balenciaga.com × Bloomberg Businessweek — heavy type, deliberate visual tension
  
  Design system:
  - Background: #f0ebe0 (raw cream)
  - Foreground: #0a0a0a
  - Accent: #e8000d (raw red — CTAs and key numbers only)
  - Font headings: Impact — max weight, uppercase (intentional brutalist choice, not a system-font fallback)
  - Font body: Courier New — monospace throughout, including body copy (intentional brutalist choice)
  
  Brutalist rules (absolute — no exceptions allowed):
  - All borders: 4px solid #0a0a0a
  - No border-radius anywhere — hard rectangles only
  - No shadows, no gradients, no glassmorphism
  - Hero headline: clamp(72px, 14vw, 160px) — intentionally extreme
  - Asymmetric grid — deliberate misalignment is the design system
  - Red (#e8000d) only on: main CTA button and ONE number per section
  - Hover state: CSS filter: invert(1) on all interactive elements
  
  Sections:
  1. Marquee — "WE MAKE THINGS THAT WORK → " repeating, 4px black top/bottom borders, black bg, white text, 25s linear infinite animation
  2. Hero — "FORM" Impact clamp(80px,16vw,160px), agency manifesto statement in Courier 16px below
  3. Work — 4 project tiles numbered 01–04: 4px black borders, project name Impact, category + year Courier, hover: red bg + white text invert
  4. Stats — "FOUNDED 2019" / "CLIENTS 47" / "PROJECTS 200+" in massive Impact numbers, Courier labels below
  5. Contact — "LETS TALK" Impact clamp(80px,16vw,180px), email as the single clickable element
  
  Anti-slop constraints:
  - No Lucide or any icon library
  - No teal (#16d5e6), no rounded corners, no gradients
  - Nothing smooth, polished, or soft — every choice must feel deliberate
  - No decorative dots, blobs, or abstract shapes
  - Mobile: all brutalist rules maintained, sections stack vertically
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ Landing Page

  > Waitlist / Coming Soon Page

  DESIGN.md — Developer Tool Waitlist Page
  Brand: Plane (developer deployment tool, private beta)
  Aesthetic family: Editorial Minimalism (dark variant, developer-targeted)
  Personality: Technical, restrained, developer-respecting — no hype, just what it does
  Style reference: Vercel launch pages — single column, no decoration, copy does all the work
  
  Design system:
  - Background: #09090b
  - Surface: #111113
  - Foreground: #fafafa
  - Accent: #a78bfa (soft violet)
  - Border: rgba(255,255,255,0.07)
  - Font headings: Sora 800
  - Font body: Sora 400
  - Font mono: Fira Code 400 (countdown timer, join count, technical copy)
  
  Layout (single column, max-width 520px, centered):
  1. "Private beta" pill — 1px #333 border, static violet dot (no pulse, no animation)
  2. Headline — "Deploy anywhere. In 30 seconds." Sora 800, 60px, line-height 1.0
  3. Subline — "Plane handles infra, secrets, and rollbacks so you don't have to." Sora 400, 18px, muted
  4. Countdown — real JS countdown to a specific date. Fira Code 48px numbers. 4 square boxes: DAYS / HRS / MIN / SEC. Each box: 1px rgba(255,255,255,0.1) border, label below in Fira Code 11px muted
  5. Email form — borderless dark input (bg #1a1a1a, 1px border) + "Join the beta" button (violet bg, black text)
  6. Social proof — "Join 4,230 engineers already waiting" Fira Code muted, 5 initials-only avatar circles
  7. Feature previews — 3 lines: "→ Zero-config deployment" / "→ Native secrets management" / "→ One-click rollbacks". Text arrows, no icons.
  
  Anti-slop constraints:
  - No teal (#16d5e6) anywhere
  - No hero illustration or decorative shapes — typography and countdown are the entire design
  - No Lucide or icon libraries — "→" text arrows only
  - No Inter, Roboto, or system fonts — Sora and Fira Code only
  - No animated status dots or blinking indicators — the dot is static
  - Accent (violet) only on: button bg, static dot, countdown box hover state
  - Containers nest at most 2 levels deep — no container soup
  - Readable at 375px — test all elements at mobile width
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ E-commerce

  > E-commerce Product Page

  DESIGN.md — Premium E-commerce Product Page
  Brand: Keycult (premium mechanical keyboard — collector grade)
  Aesthetic family: Glass / Soft-Futurism × Editorial Minimalism (Apple lineage)
  Personality: Surgical, materials-obsessed, every detail conveys premium
  Style reference: Apple product pages × Teenage Engineering — clean specs, no fluff, premium conveyed through typography precision
  
  Design system:
  - Background: #fafafa
  - Surface: #ffffff
  - Border: #ebebeb
  - Foreground: #0a0a0a
  - Accent: #e55b00 (burnt orange — single CTA only)
  - Muted: #737373
  - Font headings: DM Serif Display 400 (product name H1 only)
  - Font body: DM Sans 400/500
  - Font specs: DM Mono 400 (all specs, dimensions, prices, SKUs)
  
  Layout (2-column desktop, 55/45 split):
  
  Left — image gallery:
  - Main image: CSS gradient rect suggesting brushed aluminum (#c8c8c8 → #f0f0f0), 1px #e0e0e0 border
  - Thumbnail strip: 4 items, active gets 2px burnt orange border
  
  Right — product info:
  - Breadcrumb: "Keyboards / TKL / No. 2" in DM Mono 12px muted
  - H1: "No. 2 TKL Aluminum Keyboard" DM Serif Display 28px
  - CSS star rating (5 ★ text symbols) + "203 verified reviews"
  - Price: "$289" DM Mono 32px + "$349" line-through muted
  - 3-sentence description: real keyboard copy about gasket-mount feel, 6063 aluminum build
  - Switch selector: 3 text buttons (Tactile / Clicky / Linear), 1px border, active gets 2px accent border
  - Color swatches: 4 circles showing actual colors — Space Gray #4a4a4a, Lunar White #f5f5f0, Midnight #1a1a2e, Forest #2d5016. Active: 2px offset orange ring.
  - Qty: − [1] + controls, 1px bordered
  - "Add to cart" full-width burnt orange button
  - "Free shipping · arrives in 2–4 days" below button in DM Mono 13px muted
  
  Below fold:
  - CSS tab bar: Description / Specs / Reviews — :checked switch, no JS
  - Specs tab: DM Mono table — Hot-swap PCB, Gasket-mounted, 1.8kg, 6063 aluminum, QMK/VIA compatible
  
  Anti-slop constraints:
  - No teal (#16d5e6) anywhere
  - No Lucide or icon libraries
  - "Add to cart" becomes position: fixed bottom bar on mobile
  - Real keyboard copy throughout — no Lorem Ipsum
  - No placeholder stock images — CSS-only product representation
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ Presentation

  > Editorial Slide Deck with Style Reference

  DESIGN.md — Editorial Design Review Deck
  Brand: Internal (design critique / stakeholder presentation)
  Aesthetic family: Warm Editorial × Neon Brutalist hybrid
  Personality: Art-directed, opinionated, willing to defend every typographic choice
  Style reference: Nancy Duarte "Resonate" narrative structure × Andy Warhol grid repetition × Swiss International typographic grid
  
  Design system:
  - Background: #fefdf8 (warm white — not pure #ffffff)
  - Grid lines: #e8e3d8 (visible Swiss-grid rules as a design element, not decoration)
  - Foreground: #0d0d0d
  - Accent: #d4341c (fire red — maximum ONE element per slide)
  - Pull quote color: #f5c518 (golden yellow — pull quotes only, nowhere else)
  - Font display: Bebas Neue (slide numbers and large section labels)
  - Font headings: Libre Baskerville 700 italic
  - Font body: Source Sans 3 400
  - Font mono: Source Code Pro 400 (data, footnotes, dates)
  
  Build 8 slides as a horizontal-scroll presentation deck (each slide 1280×720px):
  
  Slide 1 — Title: Product/project name Bebas 120px, subtitle Libre Baskerville italic, date Source Code Pro, red 40×40px corner block top-left
  Slide 2 — Big Question: Full-width red (#d4341c) strip, white "What is the actual problem?" left-aligned Libre Baskerville, slide number Bebas top-right
  Slide 3 — Data Slide: Swiss 3-col grid layout, 3 metrics shown large, key number in golden yellow, footnote Source Code Pro 11px
  Slide 4 — Warhol Grid: 4×4 repetition of one UI screenshot (CSS placeholder rect), each cell a different CSS hue-rotate() filter value — visualizes design iteration space
  Slide 5 — Decision: 3-column comparison — each column is ONE sentence argument (not a feature list)
  Slide 6 — Pull Quote: Full-width, Libre Baskerville italic 48px, 6px golden yellow left border, author credit Source Code Pro below
  Slide 7 — Timeline: Horizontal rule at vertical center, 5 events with Bebas labels alternating above/below the line
  Slide 8 — Next Steps: Numbered list, each item has Bebas number (56px, red) and Source Sans description right
  
  Anti-slop constraints:
  - No teal (#16d5e6) or purple gradient backgrounds
  - No Lucide icons — geometric CSS marks only
  - No Inter or Roboto — only Bebas, Libre Baskerville, Source Sans 3, Source Code Pro
  - Red used on exactly ONE element per slide — enforce this strictly
  - No rounded corners on any decorative element
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ UI

  > Branded 404 Error Page

  DESIGN.md — Branded 404 Error Page
  Brand: Consistent with dark product aesthetic
  Aesthetic family: Terminal-Core (Ollama / Warp lineage)
  Personality: Dry wit, no panic, reorients the user quickly
  Style reference: Stripe 404 page — minimal, immediately useful, still unmistakably on-brand
  
  Design system:
  - Background: #0d0d0d
  - Foreground: #f0f0f0
  - Accent: #00ff94 (neon mint — sparingly)
  - Muted: #525252
  - Font display: Space Mono (the "404" numeral only)
  - Font body: Space Grotesk 400/700
  
  Layout (full viewport, centered, single column):
  1. "404" — Space Mono 200px, transparent fill with -webkit-text-stroke: 1px #00ff94 (outline text). CSS @keyframes flicker: opacity 0.9 → 1.0 → 0.9, 3s ease-in-out infinite, stagger 3 digits with animation-delay for natural feel
  2. Eyebrow — "Error 404 · Page not found" Space Mono 12px muted, centered above headline
  3. Headline — "You found the void." Space Grotesk 700, 32px, foreground
  4. Subline — "The page you're looking for doesn't exist. Here's where to go instead." Muted, 16px.
  5. Navigation pills — 3 pills horizontal: "← Home" / "Prompts" / "Contact". 1px #333 border, transparent bg. Hover: fills #00ff94, text color #0d0d0d, 150ms ease-out transition
  6. Easter egg — small ASCII art ghost in Courier New 12px muted, centered below pills. Keep it minimal.
  
  Anti-slop constraints:
  - No decorative illustrations or crying robot clichés
  - No teal (#16d5e6) — accent is specifically #00ff94
  - No Lucide or icon libraries
  - No blinking dots as decorative elements — the flicker is on the 404 numeral only
  - Accent used only on: 404 text-stroke + hovered navigation pills
  - Mobile: 404 drops to 120px, all elements remain centered and readable at 375px
  - Links go to real pages: /, /prompts, /about
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ Marketing

  > Social Proof & Testimonials Section

  DESIGN.md — Social Proof & Testimonials Section
  Brand: Relay (workflow automation tool)
  Aesthetic family: Editorial Minimalism (Linear lineage)
  Personality: Confident, peer-validated, B2B credibility without corporate stiffness
  Style reference: Linear.app testimonials — tight cards, real people, zero stock photos
  
  Design system:
  - Background: #f5f5f5
  - Card: #ffffff
  - Border: #e0e0e0
  - Foreground: #111111
  - Accent: #5b21b6 (deep violet)
  - Font headings: Cabinet Grotesk 700
  - Font body: DM Sans 400
  - Font labels: DM Mono 12px (role + company metadata)
  
  Structure:
  1. Section eyebrow — "CUSTOMER STORIES" small-caps, flanked by two 1px lines using a 1fr auto 1fr grid
  2. Heading — "Built by teams who've tried everything else." Cabinet Grotesk 48px, max-width 600px
  3. Testimonials grid — 2 rows × 3 cols:
     - 5 regular cards: 1px border, 12px radius, violet "★★★★★" text rating, quote DM Sans, initials circle (violet bg) + name + DM Mono role + company
     - 1 featured card (row 1, col-span 2): violet 2px border, #f5f0ff tinted surface, quote in DM Sans italic, slightly larger
  4. Trust bar — "Trusted by teams at:" + 5 company names in #a0a0a0 DM Mono
  
  Write 6 realistic testimonials from these personas:
  - Sr. Product Designer at Notion: about design workflow speed
  - Engineering Manager at Stripe: about reducing process overhead
  - Startup Founder (Loom, pre-acquisition): about scaling without headcount
  - Marketing Lead at Vercel: about cross-team coordination
  - Agency Principal at Ueno: about client project management
  - Product Manager at Linear: about shipping cadence improvement
  
  Anti-slop constraints:
  - No purple gradient on white — only solid 2px border + tinted surface (#f5f0ff) on featured card
  - No Lucide icons anywhere
  - Initials-only circles — no stock face images, no AI avatar placeholders
  - Star ratings as text "★★★★★" — never icon components
  - No teal (#16d5e6) anywhere
  - Mobile: single column, featured card first
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ Dashboard

  > Dark Mode SaaS App Shell

  DESIGN.md — Dark SaaS App Shell
  Brand: Pulse (SaaS infrastructure tooling)
  Aesthetic family: Data-Dense Pro (dark — Linear / PostHog lineage)
  Personality: Focused, zero-chrome, every pixel serves a function
  Style reference: Linear.app app shell × Vercel dashboard — depth through color only, no decorative shadows
  
  Design system:
  - App background: #0a0a0a
  - Sidebar: #111111
  - Top bar: #0f0f0f
  - All borders: 1px #1e1e1e (no exceptions, no gradient borders)
  - Foreground: #e4e4e7
  - Muted: #71717a
  - Accent: #3b82f6 (blue)
  - Active nav item: rgba(59,130,246,0.1) bg + 2px solid blue left border
  - Sidebar hover: #1a1a1a bg + foreground text
  - Font: Geist 400 body / 500 nav labels
  
  App chrome structure:
  
  Sidebar (240px fixed left):
  - Logo area 52px: product name + version number
  - Nav group "WORKSPACE" (Geist 11px muted, letter-spacing 0.1em): Dashboard, Projects, Team
  - Nav group "SETTINGS": Billing, Integrations, API Keys
  - Bottom: user initials circle + name + "⌘" expand button
  - Collapse mode: CSS :checked → 60px icon-only. Icons are 2-letter text initials, not SVG libraries.
  
  Top bar (52px):
  - Left: "Projects / Analytics" breadcrumb in Geist muted
  - Center: search input (bg #1a1a1a, 1px border) with "⌘K" badge inside right edge
  - Right: notification count badge + user avatar circle (initials)
  
  Main area: 32px padding, 3 skeleton loading bars (CSS @keyframes: opacity 0.4 → 1.0 → 0.4, staggered delays)
  
  Command palette overlay: CSS :checked toggle, dark bg with backdrop-filter blur, centered search input
  
  Anti-slop constraints:
  - Depth through color values only — no box-shadows anywhere in the design
  - No Lucide or SVG icon libraries — text initials and "⌘" / "→" only
  - All borders exactly 1px #1e1e1e — no variation, no glow
  - No teal (#16d5e6) — accent is specifically blue #3b82f6
  - Mobile: sidebar collapses to bottom tab bar (4 items only)
  - Standalone HTML, all CSS inline

  Copy
• 

  Claude Design/ Marketing

  > Social Media Campaign Set

  DESIGN.md — Social Media Campaign Asset Set
  Brand: Nova (AI email assistant) — product launch campaign
  Aesthetic family: Cinematic Dark (RunwayML lineage, saturated launch energy)
  Personality: Bold, launch-energy, systematic — every asset feels from the same hand
  Style reference: Teenage Engineering product drops × Figma launch campaigns — system coherence across every format
  
  Design system:
  - Background: #0d0117 (near-black violet)
  - Foreground: #ffffff
  - Accent: #ff5ce8 (magenta pink — ONE hero element per asset, enforced)
  - Secondary: #72f5ff (electric cyan — text highlights only, never backgrounds or borders)
  - Font headings: Raleway 800 uppercase
  - Font body: Nunito 400/600
  - Font mono: Source Code Pro 400 (dates, technical labels)
  
  Four assets shown as a labeled horizontal scroll gallery (each in a titled container with dimensions label):
  
  1. Instagram Post — 1080×1080px:
     - Nova logomark + name top-left (32px from edges, consistent)
     - Product name Raleway 80px centered, tagline Nunito 24px, launch date Source Code Pro
     - ONE magenta radial glow at center (CSS radial-gradient, subtle)
  
  2. Instagram Story — 1080×1920px:
     - "LAUNCHING APRIL 30" Raleway 96px at top third
     - CSS placeholder rect for product visual at center
     - "Join free →" CTA at bottom, gradient fade overlay top + bottom
     - Logo top-left, 32px from edges
  
  3. Twitter/X Card — 1200×628px:
     - Left: product name Raleway large; Right: one benefit sentence Nunito
     - 3px magenta bottom border — sole accent element (no glow; Twitter audience is analytical)
     - Logo top-left, 32px from edges
  
  4. LinkedIn Banner — 1584×396px:
     - "Nova · Now in public beta" centered Raleway 48px + Nunito 20px
     - Gradient: #0d0117 → #1a0230, no glow, professional restraint
     - Logo top-left, 32px from edges
  
  System rules enforced on every asset:
  - Logo: top-left, exactly 32px from edges — no exceptions
  - Magenta: ONE hero element per asset — never two
  - Cyan: text highlights only, never backgrounds or borders
  
  Anti-slop constraints:
  - No teal (#16d5e6) — accents are only magenta and cyan as defined above
  - No three-column feature grids
  - No Lucide or icon libraries
  - No stock photos or AI image placeholders — typography and geometry only
  - Standalone HTML, all CSS inline

  Copy

1. 01

   Step 01

   Browse the prompt library

   Find a prompt matching your use case. Each card shows the use case tag and community vote badge so you know what has been tested.

2. 02

   Step 02

   Copy the prompt

   Click the copy button on any card. The full prompt including design system specs, section breakdown, and constraints copies to your clipboard.

3. 03

   Step 03

   Open Claude Design and paste

   Go to claude.ai (Pro, Max, Team, or Enterprise plan required). Start a new Claude Design project and paste the prompt into the chat.

4. 04

   Step 04

   Refine with follow-up messages

   Describe changes in plain English 'make the background darker', 'add a pricing section', 'switch the font to Playfair Display'. Claude Design iterates in real time.

Claude Design is built for prompt-driven prototyping and fast iteration. Figma remains the standard for production design systems. Framer is the stronger choice when the end goal is a published marketing site rather than handed-off code.