Claude Design is Anthropic's AI design tool that turns a plain-English prompt into working HTML, CSS and React. These Claude Design prompts cover websites and landing pages, dashboards, app UI, pitch decks and logos. Paste one into Claude Design and change the brand name and colours first.
How we picked them: each one is written for a real job (a website, an app screen, a deck, a graphic) and names its design system, sections and constraints. The selection is our own judgement, not a benchmark.
Full website pages: SaaS, developer tool, mobile app, waitlist, pricing, portfolio and product pages. Change the brand name, the hex values and the copy first.
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
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
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
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
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
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
Claude Design/ Landing Page
> Developer Tool Landing Page
DESIGN.md — Developer Automation SaaS Landing Page
Brand: Cascade (Python automation platform for engineering teams)
Aesthetic family: Editorial Minimalism × Terminal-Core
Personality: Confident, technical, understated
Style reference: Linear × Vercel × Stripe developer docs — muted palette, code is the hero visual
Design system:
- Background: #0b0d0e
- Surface: #131619
- Border: #22262b
- Foreground: #e8eaed
- Accent: #7c9cff (periwinkle — links, code keywords, one CTA)
- Muted: #7c848c
- Font headings: Newsreader 500 italic (serif display face — deliberate contrast against the mono)
- Font body: Hanken Grotesk 400/500
- Font mono: JetBrains Mono 400 (all code blocks, inline code, nav)
Sections in order:
1. Nav — wordmark left, "Docs / Pricing / Blog" in Mono center, "Get API key" periwinkle button right
2. Hero — H1 Newsreader italic 64px ("Automation that reads like Python, because it is"), one-line Hanken subhead, primary CTA + an "npm i cascade" copy-to-clipboard Mono pill. The hero visual is a syntax-highlighted code block of real Python (periwinkle keywords, muted comments) — no illustration.
3. Logos — "Running in production at" + 6 muted Mono text-logos
4. Features — alternating rows (text left / code right, then swapped): Mono label, Hanken headline, 2 real paragraphs, a runnable snippet
5. Metrics — 3 JetBrains Mono 48px numbers: "40M runs/mo · 99.99% uptime · 8ms cold start"
6. Pricing — 3 tiers (Free / Team / Enterprise), Team column with a 1px periwinkle border, Mono prices
7. CTA — "Ship your first automation in 5 minutes", API-key button + docs link
Anti-slop constraints:
- Code blocks are real, runnable Python — never fake or garbled syntax
- No teal (#16d5e6), no purple-on-white gradient
- No Lucide icons — Mono labels + CSS shapes
- No three-column feature grid — alternating text/code rows only
- No Inter or Roboto — Newsreader, Hanken Grotesk, JetBrains Mono only
- No lorem ipsum — real developer-tool copy throughout
- Standalone HTML, all CSS inline
Claude Design/ Landing Page
> Consumer Mobile App Landing Page
DESIGN.md — Consumer Mobile App Landing Page
Brand: Bloom (habit and mood tracking app)
Aesthetic family: Playful Color × Glass / Soft-Futurism
Personality: Warm, encouraging, calm
Style reference: Headspace × Toss — soft gradients used with restraint, rounded but never childish
Design system:
- Background: #fdfcff
- Surface: #ffffff
- Border: #ece9f5
- Foreground: #241f36
- Accent: #6d5ae6 (soft violet — primary)
- Secondary: #ff8fab (blush — one warm highlight, used sparingly)
- Muted: #7d7791
- Font headings: Clash Display 600
- Font body: Hanken Grotesk 400/500
- Radius: 20px cards, 999px buttons (generous rounding is justified by the consumer tone)
Sections in order:
1. Nav — logo left, "Features / Pricing / Blog" center, "Download" violet pill right
2. Hero — H1 Clash 60px ("Small habits. Real bloom."), a subhead, CSS-drawn App Store + Google Play badges (not stock), and a CSS-only rounded phone mockup showing the app's real home screen (no stock screenshot)
3. Feature trio — 3 soft cards (one may carry the blush highlight): CSS glyph, headline, one sentence each
4. Social proof — 3 short testimonial cards + a single "4.9 ★ · 40k reviews" stat line
5. Pricing — Free vs Plus toggle, Plus card with a violet border
6. Footer CTA — one soft violet→transparent radial, "Start your first habit today", download badges
Anti-slop constraints:
- One subtle gradient maximum (footer CTA only) — never a gradient on every section
- Blush (#ff8fab) used exactly once as a highlight — never as a full background
- No teal (#16d5e6)
- No Lucide icons — simple CSS glyphs only
- No stock app screenshots — CSS-drawn phone UI
- No Inter or Roboto — Clash Display + Hanken Grotesk only
- Standalone HTML, all CSS inline
Dashboard, app and UI prompts
Product screens instead of marketing pages: analytics dashboards, app shells, onboarding flows, component kits and clickable prototypes.
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
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
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
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
Claude Design/ Prototype
> Map-Based Photo Album Prototype
DESIGN.md — Map-Based Travel Photo Album (Interactive Prototype)
Brand: Wander (personal travel photo product)
Aesthetic family: Warm Editorial × Glass / Soft-Futurism
Personality: Warm, exploratory, quietly premium
Style reference: Airbnb map view × Apple Photos Memories — content is the hero, chrome disappears
Design system:
- Background: #faf7f2 (warm paper)
- Surface: #ffffff
- Border: #e7e0d6
- Foreground: #1c1a17
- Accent: #c2683c (terracotta — pins, active states, CTAs)
- Muted: #8a8177
- Font headings: Fraunces 600 (trip and place names)
- Font body: Hanken Grotesk 400/500
- Font labels: IBM Plex Mono 400 (photo metadata — date, camera, GPS)
Screens (3, synced state via CSS :target / radio toggle — no framework):
1. Trip Selection — grid of trip cards; each has a CSS-gradient cover, trip name in Fraunces, and date range + photo count in Plex Mono. Clicking a card enters that trip.
2. Map View — full-bleed stylized map (hand-built CSS abstraction of landmasses, NOT a real map tile), terracotta pins clustered by area. Clicking a pin opens a location popover with heading, description, and photo thumbnails. A "Map / Grid" toggle pill sits top-right.
3. Album Grid — masonry-style grid grouped by location heading; each photo card reveals a metadata row (date/time · location · camera) in Plex Mono on hover.
Interactions to specify:
- Selecting a location in either view highlights it in the other (shared state)
- "Story View" overlay: full-screen single photo + caption, arrow-key navigable
- Multiple trips supported via a Trip Selection back-button
Anti-slop constraints:
- No real map tiles or Google Maps embed — hand-built CSS map abstraction only
- No teal (#16d5e6), no purple gradients
- No Lucide icons — terracotta CSS pin shapes + Plex Mono labels
- No stock travel photos — CSS gradient placeholders with location labels
- No Inter or Roboto — Fraunces, Hanken Grotesk, IBM Plex Mono only
- Standalone HTML, all CSS inline
Claude Design/ Prototype
> Internal Review Queue Tool
DESIGN.md — Content Review Queue (Internal Tool Prototype)
Brand: Ledger (internal moderation tool for a content team)
Aesthetic family: Data-Dense Pro (light) × Terminal-Core accents
Personality: Utilitarian, fast, keyboard-first
Style reference: Linear triage view × Superhuman — dense, keyboard-driven, zero decoration
Design system:
- Background: #f7f8fa
- Surface: #ffffff
- Border: #e3e6ea
- Foreground: #0b0e14
- Accent: #4338ca (indigo — selection + primary action)
- Approve: #15803d | Reject: #b91c1c | Pending: #b45309
- Font UI: Geist 500
- Font mono: JetBrains Mono 400 (IDs, timestamps, keyboard shortcuts)
Layout (3-pane, fixed):
- Left rail 260px — queue filters (All / Pending / Flagged / Mine), each with a live count badge in JetBrains Mono
- Center list 380px — submission rows: title, submitter, age (Mono), status dot. Selected row gets a 2px indigo left rule + tinted background. Footer shows "j / k to navigate" in Mono.
- Right detail panel (fills remaining width) — full submission content, a metadata table (ID, submitted, category, flags), and a sticky action bar: Approve (green) / Reject (red) / Skip, each with a Mono keyboard-shortcut badge (A / R / S)
Interactions to specify:
- Selecting a row loads it in the detail panel
- Approve/Reject removes the row and auto-advances to the next
- Filter counts update live as items are actioned
- Empty state when the queue is cleared ("Queue clear. 0 pending.")
Anti-slop constraints:
- Status shown as a colored dot only — never pill badges
- Depth via borders + background tint only — no box-shadows
- No Lucide icons — Mono shortcut badges + CSS shapes
- No teal (#16d5e6), no gradients
- No Inter or Roboto — Geist + JetBrains Mono only
- Realistic moderation content — no lorem ipsum
- Standalone HTML, all CSS inline
Claude Design/ UI Design
> UI Component Kit
DESIGN.md — UI Component Kit (Design-System Starter)
Brand: [INSERT — e.g., "Cascade, a developer automation platform"]
Aesthetic family: Editorial Minimalism × Data-Dense Pro
Personality: Precise, calm, engineered
Style reference: Linear's component discipline × Geist design system — every state designed, nothing left to browser defaults
Design system:
- Background: #0d1013 | Surface: #14181d | Border: #262c33
- Foreground: #e9edf1 | Muted: #7d8590
- Accent: #5b8cff (periwinkle — primary actions and focus rings only)
- Success: #3fb950 | Warning: #d29922 | Danger: #f85149
- Font UI: Hanken Grotesk 400/500/600
- Font mono: JetBrains Mono 400 (code, data, kbd)
- Radius: 6px inputs and buttons, 10px cards | Base unit: 4px
Render a single-page component sheet, each component group in a labeled section with all states side by side:
1. Buttons — primary / secondary / ghost / danger × default / hover / focus-visible / disabled / loading (CSS spinner). Focus ring: 2px accent offset 2px.
2. Inputs — text field, select, textarea × default / focus / error (danger border + message) / disabled. Labels above, help text below, error text in Danger.
3. Cards — base card, interactive card (hover lift via border-color shift, no shadow), stat card with JetBrains Mono number
4. Navigation — horizontal tab set with active underline, vertical sidebar group with active item (accent left-rule, the ONLY left-rule on the sheet)
5. Feedback — toast (success / error), inline banner (warning), empty state block with one-line CTA
6. Data — table with header row, zebra hover, one right-aligned numeric column in mono; status badges as dot + text (never filled pills)
7. Overlay — modal mockup with backdrop, title, body, button pair (rendered open, static)
Rules for every component:
- Every interactive element shows a designed focus-visible state — keyboard users are first-class
- All states visible simultaneously on the sheet (no JS toggles needed to see them)
- Real label text ("Deploy branch", "Search environments…") — no lorem ipsum, no "Button"
Anti-slop constraints:
- No box-shadows for depth — borders and background shifts only
- No teal (#16d5e6), no gradient buttons, no Inter or Roboto
- No icon libraries — CSS shapes and mono glyphs only
- Accent appears only on: primary buttons, focus rings, active nav — never decorative
- Standalone HTML, all CSS inline
Investor, sales and conference decks. Each prompt sets the slide order, so replace the placeholder numbers with your own.
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 · May 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
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
Claude Design/ Presentation
> B2B Sales Deck with Speaker Notes
DESIGN.md — B2B Sales Deck (with Speaker Notes)
Brand: Meridian (enterprise data-governance platform)
Aesthetic family: Editorial Minimalism (light corporate) × Data-Dense Pro
Personality: Credible, corporate, evidence-led
Style reference: McKinsey deck rigor × Stripe press design — restrained, grid-locked, data-forward
Design system:
- Background: #ffffff
- Surface: #f6f7f9
- Border: #dfe3e8
- Foreground: #10151c
- Accent: #1d4ed8 (corporate blue — one accent element per slide)
- Positive: #15803d | Muted: #6b7280
- Font headings: Familjen Grotesk 600
- Font body: Familjen Grotesk 400/500
- Font numbers: DM Mono 500 (all metrics and figures)
Slides (7, 16:9, CSS scroll-snap), each with a visible "Speaker notes" strip beneath the slide frame:
1. Title — "Meridian" 64px, subtitle "Data governance for regulated enterprises", presenter + date in DM Mono
2. The Problem — headline + 3 stat callouts (compliance cost, breach rate, audit hours) in DM Mono blue
3. Market — TAM / SAM / SOM as 3 concentric CSS rings with DM Mono figures
4. Solution — a 3-step horizontal flow (Ingest → Classify → Govern) with CSS arrows
5. Proof — 2 mini case studies: text logo + one metric result each ("−63% audit time")
6. Pricing / ROI — simple table, one column blue-bordered, payback-period figure highlighted
7. Next steps — 3 CTA bullets + a contact block
Speaker notes: beneath each slide, a muted italic Familjen Grotesk paragraph (2–3 sentences) of a real, specific talk-track the presenter would say aloud — never placeholder.
Anti-slop constraints:
- Every slide obeys the same 12-column grid — titles align across slides
- Accent blue: one element per slide maximum
- No teal (#16d5e6), no gradient slide backgrounds
- No stock business photos — CSS charts, rings, and flows only
- No Inter or Roboto — Familjen Grotesk + DM Mono only
- Real, specific enterprise copy and speaker notes — no lorem ipsum
- Standalone HTML, all CSS inline
Claude Design/ Presentation
> Conference Talk Deck
DESIGN.md — Conference Talk Deck (Big-Type Minimal)
Brand: Personal talk — "Why Interfaces Are Getting Slower" (a design-engineering talk)
Aesthetic family: Neon Brutalist × Cinematic Dark
Personality: Bold, opinionated, one-idea-per-slide
Style reference: Stripe Sessions keynote slides × Pentagram type posters — one idea, huge type, high contrast
Design system:
- Background: #0a0a0a
- Foreground: #f5f5f5
- Accent: #ff4d2e (signal red — one word or number per slide)
- Muted: #6b6b6b
- Font display: Archivo Black (giant statements)
- Font body: Archivo 400/500 (supporting lines)
- Font mono: Space Mono 400 (slide numbers, code, data)
Slides (8, full-viewport, CSS scroll-snap), one idea each:
1. Title — talk name in Archivo Black 96px, speaker + conference + date in Space Mono at the bottom
2. Big claim — a single sentence at 72px, one word in signal red
3. Data slide — one number at 160px in Space Mono (e.g., "1.4s") with a caption below
4. Code slide — a single centered code block, signal red highlight on the offending line
5. Comparison — two stacked "Before / After" rows with a red delta figure
6. Principle — a 3-word principle in Archivo Black + a one-line expansion
7. Demo — a bordered 16:9 CSS frame labeled "LIVE DEMO", slide number in Mono
8. Closing — "Thanks" + handle + slides URL in Space Mono
Anti-slop constraints:
- One idea per slide — never a bullet list of five points
- Signal red on exactly one element per slide
- No teal (#16d5e6), no gradients, no stock imagery
- No Lucide icons — type and CSS geometry only
- No Inter or Roboto — Archivo Black, Archivo, Space Mono only
- Standalone HTML, all CSS inline
Marketing, social and graphics prompts
Campaign sets, carousels, testimonial sections, animated explainers and data infographics.
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
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
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 May 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
Claude Design/ Graphics
> Reusable LinkedIn Carousel Template
DESIGN.md — Reusable LinkedIn Carousel Template
Brand: A reusable system for a founder's LinkedIn content (copy lives as swappable data)
Aesthetic family: Editorial Minimalism × Playful Color accent
Personality: Systematic, confident, legible at thumbnail size
Style reference: Stripe Press covers × Toss carousels — one idea per card, brand-locked
Design system (declared once, applied to every card):
- Background: #101418
- Surface: #171c22
- Foreground: #f4f6f8
- Accent: #ffd23f (amber — one element per card)
- Muted: #8b939c
- Font headings: Clash Display 600
- Font body: Hanken Grotesk 500
- Font labels: Space Mono 400 (card index "01/06", handle)
Content model — separate the SYSTEM from the DATA so cards are swappable:
- Define a data array: [{ index, kicker, headline, body }]
- The template renders one 1080×1350px card per entry
- Changing only the data array regenerates the whole carousel — the layout never changes
Cards (6, shown as a labeled horizontal gallery, each 1080×1350px):
1. Cover — a large Clash headline, amber underline on one key word, handle + "Swipe →" in Space Mono
2–5. Point cards — Space Mono index "0X/06" top, Clash sub-headline, Hanken body (2–3 lines), consistent 64px margins
6. CTA card — "Follow for more" + handle + one amber button shape
System rules enforced on every card:
- Index "0X/06" top-left and handle bottom-left, both Space Mono — identical position on every card
- Amber: exactly one element per card
- 64px safe margins on all four sides of every card
Anti-slop constraints:
- Output editable, data-driven HTML/SVG PLUS a rendered preview of all 6 cards
- No teal (#16d5e6), no stock photos, no emoji
- No Lucide icons — type + CSS geometry only
- No Inter or Roboto — Clash Display, Hanken Grotesk, Space Mono only
- No lorem ipsum — write a real 6-card carousel on one topic
- Standalone HTML, all CSS inline
Claude Design/ Graphics
> Animated Data-Viz Infographic
DESIGN.md — Animated Data Infographic (Year-in-Review)
Brand: Orbit (SaaS) — a shareable "2026 in review" infographic
Aesthetic family: Data-Dense Pro × Cinematic Dark
Personality: Precise, celebratory, data-led
Style reference: The Pudding scrollytelling × Stripe annual-report graphics — data animates in, never decorative
Design system:
- Background: #0c1018
- Surface: #141a24
- Border: #232b38
- Foreground: #eef2f7
- Accent: #34d399 (emerald — data marks and growth)
- Secondary: #fbbf24 (amber — one comparison highlight)
- Muted: #7a8798
- Font headings: Familjen Grotesk 600
- Font numbers: JetBrains Mono 500 (every figure)
Single tall shareable canvas (1080px wide), sections top to bottom:
1. Header — "Orbit · 2026 in review" + one hero stat (JetBrains Mono 72px, emerald) that counts up on load (CSS @keyframes)
2. Timeline — 4 quarters as a vertical spine with milestone nodes (Q1–Q4); each has a Mono date label + one-line milestone; nodes stagger-fade in
3. Bar chart — hand-coded SVG bars (revenue by quarter) that grow from zero via CSS animation, values labeled in Mono
4. Comparison stat — "3.2× vs last year" with an amber highlight and before/after mini bars
5. Ring — one CSS conic-gradient ring showing a percentage (e.g., retention 91%) with a Mono center label
6. Footer — logo + "orbit.app" + share handle in Space Mono
Animation rules (CSS only, no JS libraries):
- Numbers count up once on load
- Bars grow bottom-up on load
- Timeline nodes stagger-fade in
- All animations run once and respect prefers-reduced-motion
Anti-slop constraints:
- All charts are hand-coded SVG/CSS — no chart library, no chart images
- Emerald for data, amber for exactly one comparison — nothing decorative
- No teal (#16d5e6), no gradient-on-white
- No Lucide icons — numbers and CSS geometry only
- No Inter or Roboto — Familjen Grotesk + JetBrains Mono only
- Real, plausible figures — no 1234 / 9999 placeholders
- prefers-reduced-motion: reduce → show the final state, no animation
- Standalone HTML, all CSS inline
Logo, design system and handoff prompts
The prompts around a build: a DESIGN.md brand file, a logo and brand mark, a design critique, and a handoff spec for Claude Code.
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.
Claude Design/ Handoff
> Claude Code Handoff Spec
You are a design-to-code handoff engineer. I have a finished Claude Design prototype and I am about to use the one-click "Hand off to Claude Code" flow. Before I do, generate a precise HANDOFF.md so Claude Code builds production code that matches the design exactly — no drift, no invented styles.
I will paste or describe my Claude Design output. Produce a HANDOFF.md with these exact sections:
## Stack Target
- Framework (default: Next.js App Router + TypeScript), styling (default: Tailwind), component library if any.
- State the assumption explicitly so Claude Code never guesses.
## Design Tokens (source of truth)
- Extract every color as a named token — background, surface, border, foreground, accent, semantic — with exact hex.
- Typography scale: font families, weights, and px/line-height for Display / H1 / H2 / Body / Caption.
- Spacing base unit + the specific values used; radius, border, and shadow policy (one line each).
- Output a ready-to-paste Tailwind theme extension.
## Component Inventory
- List every distinct component (Nav, Hero, MetricCard, PricingTier, …).
- For each: the props it needs, its variants, and which section uses it.
- Flag components that repeat so they are built once and reused.
## Layout & Responsive Rules
- Grid/container widths, breakpoints, and how each section reflows at 375 / 768 / 1440.
- Call out anything that must NOT change across breakpoints.
## Interaction & State
- Hover/focus/active states, toggles, and empty/loading/error states to implement.
- Accessibility must-haves: focus rings, aria labels, and the contrast pairs to preserve.
## Do-Not-Drift Constraints
- The 5 things Claude Code must NOT invent or "improve" (e.g. don't swap fonts, don't add shadows, don't introduce teal, keep exact hex, no icon library unless specified).
## Build Order
- The sequence to build in: tokens → layout shell → components → sections → responsive pass → a11y pass.
Output ready-to-paste Markdown only, no preamble. Ask up to 3 clarifying questions first ONLY if the stack target is ambiguous; otherwise proceed with the defaults above.
Claude Design/ Handoff
> Design Critique & Variations
You are a senior design engineer reviewing a Claude Design output before I ship it. I will paste or describe the current design. Do two things: a rigorous critique, then concrete variations I can apply as follow-up prompts.
## 1. Audit (be specific — cite the element)
Rate each dimension Pass / Warn / Fail with a one-line fix:
- Visual hierarchy — does the eye land on the primary action first?
- Type scale — clear steps between Display / H1 / H2 / Body? any two sizes too close?
- Spacing rhythm — consistent vertical rhythm, or arbitrary gaps?
- Color discipline — is the accent used sparingly and consistently? any stray colors?
- Contrast (WCAG) — list any text/background pair below 4.5:1 (3:1 for large text) with the failing ratio.
- Alignment — anything off-grid?
- Anti-slop check — flag any of these if present: teal #16d5e6, Inter/Roboto, three-column icon grid, animated status dots, container soup, lorem ipsum.
- Responsive risk — what breaks at 375px?
## 2. Three hero variations
Propose 3 distinct directions for the hero/first section, each as a ready-to-paste follow-up prompt I can send to Claude Design:
- Variation A — a safer, refined version of the current design
- Variation B — a bolder typographic direction
- Variation C — a different layout structure entirely
Each variation: a 2-sentence rationale + the exact prompt text.
## 3. Prioritized fix list
Rank the top 5 changes by impact-to-effort so I know what to fix first.
Be direct. If something is genuinely good, say so briefly and move on — do not pad. Output Markdown only, no preamble.
Claude Design/ Logo Design
> Logo & Brand Mark Design
DESIGN.md — Logo & Brand Mark Exploration Sheet
Brand: [INSERT — e.g., "Meridian, a data-governance platform for regulated enterprises"]
Aesthetic family: pick the best fit for the brand from: Editorial Minimalism / Terminal-Core / Warm Editorial / Neon Brutalist / Playful Color
Personality: [3 adjectives — e.g., "precise, credible, quietly confident"]
Style reference: Sagi Haviv's rule — a logo must be appropriate, distinctive, and simple enough to draw from memory
Deliverable — a single presentation sheet showing 3 distinct logo directions, each in a labeled container:
Direction A — Wordmark:
- Brand name set in ONE distinctive font (never Inter, Roboto, or a default serif) with custom-feeling adjustments: tightened tracking, one modified letterform or ligature
- Show at 3 sizes: 320px hero, 120px nav, 24px favicon-scale
Direction B — Geometric mark + wordmark lockup:
- An abstract CSS/SVG mark built from 2-3 geometric primitives (circle, square, stroke) that encodes ONE brand idea — name the idea in a caption
- Horizontal lockup with the wordmark, plus the mark alone
Direction C — Monogram:
- The brand's initial(s) as a crafted monogram — negative space or joined strokes, drawn as inline SVG
- Shown inside a square app-icon container (with radius) and bare
For every direction, show:
- Light and dark versions side by side (swap foreground/background, mark must survive both)
- One-line rationale in a muted caption: why this direction fits the brand personality
- A "minimum size" test row proving legibility at 16px
Anti-slop constraints:
- All marks are hand-built inline SVG or pure CSS — no emoji, no icon-library glyphs, no stock imagery
- No gradients inside the mark — flat, solid shapes only (gradients kill reproduction at small sizes)
- No teal (#16d5e6), no generic swoosh or orbit clichés
- One accent color maximum across the whole sheet
- Each direction must be visually distinct from the other two — not three weights of the same idea
- Standalone HTML, all CSS inline
01 — Workflow
How to use Claude Design prompts.
01
Step 01
Browse the prompt library
Find a prompt matching your use case. Each card shows its use case, and its vote score once people have voted on it.
02
Step 02
Copy the prompt
Click the copy button on any card. The whole prompt, with its design system, sections and constraints, goes to your clipboard.
03
Step 03
Open Claude and paste
Go to claude.ai on any plan, Free included. Claude Design now runs inside Claude: paste the prompt into a new chat and the design is created as an artifact.
04
Step 04
Refine with follow-up messages
Ask for changes in plain English, such as 'make the background darker', 'add a pricing section' or 'switch the font to Playfair Display'. Claude updates the design in place.
02 — The thesis
What makes a good Claude Design prompt.
A one-line prompt gets a generic page.
Vague prompts leave Claude Design guessing at the design system, the layout, the typography. Structured prompts hand it the answers up front, so the first generation needs less cleanup.
Standalone HTML with inline CSS, ready to ship or hand off to Claude Code.
Votes
Thumbs up or down on any card. A prompt's score shows once it has votes.
03 — Comparison
Claude Design vs Figma vs Framer.
Claude Design
Figma
Framer
Best for
Prompt-based prototyping
Production design systems
Published marketing sites
Output
Live HTML, CSS, React
Design files + Dev Mode
Published site, hosted on Framer
Workflow
Chat-driven
Canvas + AI features
Visual canvas + AI assist
Handoff
Claude Code
Dev Mode to any stack
Publish on Framer
Claude Design is built for prompt-driven prototyping and fast iteration. Figma remains the standard for production design systems. Framer fits better when the end goal is a published marketing site rather than handed-off code.
04 — Questions
Claude Design FAQ.
What is Claude Design and how is it different from Figma?
Claude Design is Anthropic's AI design tool, launched in April 2026. Figma is a design canvas you work in by hand, with AI features added on top. Claude Design turns plain-English prompts into live HTML, CSS, and React components you can refine, share, or hand off to Claude Code. Figma remains the standard for production design systems. Claude Design is for fast prototyping and iteration.
Do these prompts work in regular Claude, without Claude Design?
Yes. They are plain text, so you can paste one into a normal Claude chat or into Claude Code and get HTML or React back. Claude Design adds the visual canvas, the refinement tools and the exports on top. The design system, section order and constraints in each prompt do the same job in either place.
What kind of prompts work best in Claude Design?
The best Claude Design prompts specify four things: (1) the exact design system, with background, foreground and accent hex values; (2) the fonts, naming a pairing like Fraunces + Space Grotesk instead of a default like Inter or Roboto; (3) the sections in order; and (4) hard constraints on what NOT to generate, such as lorem ipsum, placeholder images or purple gradients. A vague prompt leaves all of that to Claude Design, and the output comes back generic. Most prompts on this page follow this structure.
Can Claude Design generate actual React or HTML code?
Yes. Claude Design generates live HTML, CSS, and React components, not static mockups. Outputs can be exported as standalone HTML, PDF, or PPTX, or handed off directly to Claude Code for full development. This is the main difference from traditional design tools: the output is real code, not a visual spec a developer still has to translate.
What's the best way to prompt Claude to implement UI components?
Describe one component at a time: what it is for, its props, and every state it needs (default, hover, focus, disabled, loading, empty and error). Give it the design tokens to use, such as colours, spacing and type, plus the framework and styling library, and tell it to reuse your existing tokens instead of inventing new ones. End with what to leave out. The prompts on this page follow the same pattern at page scale: design system first, then the sections, then the constraints.
How do I get Claude Design to match my brand colors?
Pass exact hex values in your prompt. Write 'background: #0a0a0a, foreground: #f5f5f5, accent: #6366f1' so it has exact tokens to apply. Avoid color names like 'dark blue', which can be read differently each time. You can also import a design system from a GitHub repo, design files or a local codebase.
Is Claude Design free to use?
Yes. Anthropic's help centre says Claude Design is available on Free, Pro, Max, Team and Enterprise plans. It now lives inside Claude, where new designs are created as artifacts, and the standalone claude.ai/design site closes on 14 December 2026. The prompts on this page are free to copy and work on any of those plans.
How does Claude Design compare to Google Stitch?
Both turn written prompts into user interfaces. Claude Design comes from Anthropic and launched in April 2026; it generates live HTML and React and hands off to Claude Code. Google Stitch comes from Google Labs and was announced in May 2025; it exports front-end code and pastes into Figma. We have not benchmarked them against each other, so try the same prompt in both.
