How to Use Claude Design: 25+ Working Prompts (2026)

"Claude Design" is not a product you buy — it is the practice of designing interfaces by prompting Claude instead of pushing pixels on a canvas. You describe what you want, and Claude returns working React, HTML, and SVG inside an Artifact you can see, click, and ship. Done well, it collapses the first 80% of a design workflow from days into minutes.

The difference between a useful result and a throwaway one is the prompt. This guide gives you 27 prompts that actually work, grouped by job — full-page layouts, components, design systems, responsive behavior, Figma-to-code, and iteration. Each is copy-ready with bracketed placeholders. If you want the strategic case for designing this way, read Claude Design vs Figma first; this post is the hands-on companion.

The 27 Prompts at a Glance

How to Use These Prompts

Every prompt below follows the same conventions:

• Replace the [BRACKETED] placeholders with your specifics. The more concrete you are, the better the output — "[fintech dashboard for SMB accountants]" beats "[a dashboard]".
• Paste into Claude.ai for instant Artifacts (the live preview panel), or into Claude Code when you want the result written directly into your repository.
• Select and copy the prompt text from the code wells below — long-press on mobile, click-and-drag on desktop.
• Iterate in the same thread. Claude keeps context, so "now make the hero bolder" works without re-explaining the whole brief.

Why Claude for Design Specifically

Before the prompts, the positioning — because it shapes how you should prompt:

• Output is code, not vectors. What Claude produces already runs in a browser. There is no design-to-code translation step.
• Iteration is conversational. "Three more variants, one minimal" is a 30-second request, not 30 minutes of duplicating frames.
• It writes real copy. Headlines, microcopy, empty states — no lorem ipsum unless you ask for it.
• It knows modern stacks. Tailwind, shadcn/ui, and Radix are native vocabulary, which is exactly what most 2026 product teams ship.

The Meta-Rules: 8 Patterns That Make Any Design Prompt Better

These patterns lift the quality of every prompt in this guide. Apply them before blaming the model for a weak result.

1. Assign a role. Open with "You are a senior product designer." It measurably raises the bar of the output.
2. Specify the stack. Name Tailwind, shadcn/ui, Radix. Without it Claude guesses, and you get inconsistent markup.
3. Give a spacing scale. "Use the 8px spacing scale" prevents the random-gutter look that screams AI-generated.
4. Demand real copy. "No lorem ipsum" forces Claude to write content, which surfaces layout problems early.
5. Ask for all interactive states. Hover, focus, active, disabled, loading, empty. Naming them gets them built.
6. Constrain the palette. Provide exact hex values. "Use #6366F1 as primary, neutral grays elsewhere" beats "make it modern".
7. Request variants in one Artifact. "Show A, B, C with a toggle" lets you compare without three round-trips.
8. End with a rationale request. "After the code, explain your layout choices in 3 bullets" exposes the reasoning so you can correct it.

Category 1: Full-Page Layouts

1. SaaS Landing Page

The fastest way to a shippable marketing page.

You are a senior product designer. Design a SaaS landing page for [PRODUCT: one-line description] aimed at [AUDIENCE].
Stack: React + Tailwind + shadcn/ui. Spacing: 8px scale. Primary color [HEX], font [FONT].
Sections: sticky nav, hero with one clear CTA, social proof strip, 3-feature grid, pricing teaser, FAQ, footer.
Write real copy, no lorem ipsum. Make it fully responsive. Include hover and focus states on all interactive elements.
After the code, list 3 reasons for your layout choices.

2. Pricing Page With Three Tiers

High-intent page that benefits most from variant exploration.

Design a 3-tier pricing page for [PRODUCT]. Stack: React + Tailwind + shadcn/ui.
Tiers: [Free / Pro / Team] with realistic feature lists and prices.
Highlight the middle tier as recommended. Include a monthly/annual toggle that updates prices.
Add a comparison table below the cards and an FAQ. Responsive, with all interactive states.
Real copy only. Use the 8px spacing scale.

3. Application Dashboard

The hardest layout to get right by hand, the easiest to prompt.

Design a dashboard for [PRODUCT: e.g. a fintech analytics tool]. Stack: React + Tailwind + shadcn/ui.
Layout: collapsible left sidebar nav, top bar with search and user menu, main grid of 4 KPI cards,
one large chart placeholder, and a recent-activity table. Include empty and loading states for the table.
Use a neutral palette with [HEX] as the single accent. Responsive down to tablet. Real labels, no placeholders.

4. Marketing Page Section Library

Generate a kit of reusable sections at once.

Create a library of 6 reusable marketing page sections as separate React components: hero, logo cloud,
feature-with-screenshot, testimonial, stats band, and CTA banner. Stack: Tailwind + shadcn/ui.
Each section self-contained and responsive. Consistent 8px spacing and one shared accent color [HEX].
Render them stacked in one Artifact so I can preview the full page.

5. Onboarding Flow

Multi-step UI with progress, the kind that takes hours in a canvas tool.

Design a 3-step onboarding flow for [PRODUCT]. Stack: React + Tailwind + shadcn/ui.
Steps: [account basics], [workspace setup], [invite team]. Include a progress indicator,
back/next navigation, validation states, and a success screen. Make each step a distinct view in one Artifact.
Real microcopy. Responsive. All interactive states.

6. 404 and Empty States

The polish details that separate finished products from prototypes.

Design a 404 page and three empty-state screens (no results, no data yet, error) for [PRODUCT].
Stack: Tailwind + shadcn/ui. Each should have an illustration placeholder (SVG only, no raster),
a clear headline, supporting line, and a recovery action. Warm, helpful tone. Responsive. Real copy.

Category 2: Components

7. Responsive Navigation Bar

The component everyone needs and few get right on mobile.

Build a responsive navigation bar in React + Tailwind + shadcn/ui for [PRODUCT].
Desktop: logo left, links center, CTA button right. Mobile: hamburger that opens a slide-in menu.
Include a sticky-on-scroll behavior, active-link styling, and full keyboard accessibility.
Use the 8px spacing scale and [HEX] accent.

8. Data Table With Sorting and Filters

Complex interactive component, fully specified.

Build a data table component in React + Tailwind + shadcn/ui for [DATA: e.g. customer records].
Features: sortable columns, a search filter, row selection with checkboxes, pagination, and a row-action menu.
Include empty, loading, and error states. Realistic column headers and sample rows. Responsive with horizontal scroll on mobile.

9. Form With Validation

Forms are where state handling matters most.

Build a [SIGNUP / CONTACT] form in React + Tailwind + shadcn/ui.
Fields: [list fields]. Include inline validation, error messages, a loading state on submit,
and a success confirmation. Accessible labels and focus management. Real copy. Responsive.

10. Modal and Dialog Set

A reusable overlay system, not a one-off.

Build a reusable modal system in React + Tailwind using Radix Dialog primitives.
Variants: confirmation, form modal, and full-screen on mobile. Include focus trapping, escape-to-close,
backdrop click, and entrance/exit transitions. Show all three variants in one Artifact with trigger buttons.

11. Card Component Variants

One prompt, a whole card family.

Design a card component family in React + Tailwind + shadcn/ui: product card, profile card,
stat card, and content/blog card. Consistent radius, shadow, and 8px spacing across all four.
Include hover states. Render in a responsive grid in one Artifact. Real content, no placeholders.

12. Toast and Notification System

Feedback UI with the states built in.

Build a toast notification system in React + Tailwind. Types: success, error, warning, info.
Auto-dismiss with a progress bar, manual close, and stacking when multiple appear.
Trigger buttons for each type in one Artifact. Accessible (role=status). Smooth enter/exit animation.

Category 3: Design Systems and Tokens

13. Design Token Set

Scaffold the foundation of a system in one shot.

Generate a design token set for [BRAND] as a Tailwind config plus a CSS-variables file.
Include: a color scale (primary, neutral, semantic success/warning/error each with 50-900 steps),
an 8px-based spacing scale, a type scale, radius tokens, and shadow tokens.
Base the primary on [HEX]. Output both files and a visual swatch preview Artifact.

14. Component Style Guide

Document the system visually.

Create a single-page component style guide in React + Tailwind showing our design system:
color swatches with hex values, type scale samples, spacing scale, and live examples of buttons,
inputs, cards, and badges in every variant and state. Use [HEX] as primary. This is documentation, make it clean and scannable.

15. Button System

The most-reused component deserves a dedicated system.

Design a complete button system in React + Tailwind + shadcn/ui.
Variants: primary, secondary, outline, ghost, destructive. Sizes: sm, md, lg.
States: default, hover, focus, active, disabled, loading. Support leading/trailing icons.
Render a matrix of every combination in one Artifact. Primary color [HEX].

16. Dark Mode Variant

Convert an existing design correctly, not just by inverting.

Take this component [PASTE CODE] and add a dark mode using Tailwind's dark: variant and CSS variables.
Do not simply invert colors — design proper dark surfaces, adjust contrast for accessibility (WCAG AA),
and soften shadows. Include a toggle in the Artifact to preview both modes.

Category 4: Responsive and States

17. Make an Existing Design Responsive

Fix desktop-only output fast.

Take this component [PASTE CODE] and make it fully responsive.
Breakpoints: mobile (default), sm 640, md 768, lg 1024, xl 1280.
Describe in comments what changes at each breakpoint. Keep the desktop design intact, adapt down.
Ensure tap targets are at least 44px on mobile.

18. Add All Interactive States

Turn a static mockup into a real component.

Take this component [PASTE CODE] and add every interactive state: hover, focus-visible, active,
disabled, loading, and (where relevant) empty and error. Use Tailwind state variants.
Keep transitions subtle (150-200ms). Show the states in the Artifact with labels.

19. Accessibility Pass

Bake in a11y instead of bolting it on.

Audit and fix this component [PASTE CODE] for accessibility.
Add semantic HTML, ARIA roles/labels where needed, keyboard navigation, visible focus states,
and WCAG AA color contrast. List every change you made and why, then output the corrected code.

Category 5: Figma-to-Code and Polish

20. Figma Frame to Production Code

The core handoff prompt, used with a screenshot or the Figma MCP server.

Recreate this design [PASTE SCREENSHOT or Figma URL] as a React component using Tailwind + shadcn/ui.
Match spacing, typography, and color exactly. Extract colors and spacing as design tokens in a separate file.
Use SVG placeholders for any images, sized to the original. Note in comments any place the design was ambiguous.
Mobile-first responsive. Do not improvise beyond what the design shows.

21. Screenshot to Editable UI

Rebuild any interface you admire as a starting point.

Rebuild the UI in this screenshot [PASTE] as clean React + Tailwind code.
This is for learning the structure, not pixel-cloning. Use neutral placeholder content and our accent [HEX].
Componentize repeated elements. Explain the layout structure (grid vs flex) in a short comment block.

22. Polish an Ugly Component

Upgrade a functional-but-rough UI.

This component works but looks unpolished [PASTE CODE].
Improve only the visual design: spacing rhythm, type hierarchy, color use, alignment, and shadows.
Do not change the functionality or structure. Apply the 8px spacing scale. Explain each visual change in one line.

23. Brand Restyle

Reskin without rebuilding.

Restyle this component [PASTE CODE] to match a [premium / playful / corporate] brand.
New primary [HEX], font [FONT], tone [describe]. Adjust radius, shadow, and spacing to fit the brand.
Keep all functionality and structure identical. Show before/after side by side in the Artifact if possible.

Category 6: Critique and Iteration

24. Design Critique

Use Claude as a reviewer, not just a generator.

You are a senior design critic. Review this UI [PASTE CODE or SCREENSHOT].
Evaluate: visual hierarchy, spacing consistency, color and contrast, typography, accessibility, and mobile readiness.
Give a score out of 10 per dimension, the 3 highest-impact problems, and a prioritized fix list. Be direct, not polite.

25. Generate Three Directions

Diverge before you converge.

Design 3 distinct directions for [SURFACE: e.g. a settings page] in one Artifact with a toggle to switch between them.
Direction A: minimal and spacious. Direction B: dense and information-rich. Direction C: bold and expressive.
Same content in all three. Stack: React + Tailwind. After, recommend which fits [CONTEXT] and why.

26. Tighten the Spacing

The single highest-leverage polish request.

Review the spacing in this component [PASTE CODE]. Enforce a strict 8px spacing scale everywhere,
fix inconsistent gaps, improve the vertical rhythm, and align related elements.
Change only spacing — leave colors, type, and structure alone. Output the corrected code.

27. Convert to a Reusable Component

Turn a one-off into a system piece.

Refactor this one-off UI [PASTE CODE] into a reusable, prop-driven React component.
Extract sensible props with TypeScript types, sensible defaults, and a variants API.
Keep the visual result identical. Show 3 usage examples with different props in the Artifact.

Chaining Prompts Into a Full Workflow

The real power comes from running these in sequence inside one thread. A typical end-to-end flow:

1. Diverge with Prompt 25 (three directions) to explore.
2. Commit to one and expand it with the relevant layout prompt (1–6).
3. Componentize repeated pieces with Prompt 27.
4. Systematize tokens and buttons with Prompts 13 and 15.
5. Harden with the responsive (17), states (18), and accessibility (19) passes.
6. Critique with Prompt 24, then apply the fix list.
7. Polish spacing with Prompt 26 as the final step.

This pipeline takes a surface from blank to production-ready in well under an hour. For non-UI assets — hero illustrations, marketing imagery — Claude only outputs SVG, so pair it with a dedicated image model; our image-tool comparison covers the options.

Common Mistakes to Avoid

1. One-sentence briefs. "Design a pricing page" gives generic output. The prompts above are long on purpose.
2. Not naming the stack. Omit Tailwind/shadcn and you get inconsistent markup you have to rewrite.
3. Skipping the spacing scale. The fastest tell of AI-generated UI is random spacing. Always enforce 8px.
4. Accepting the first output. The first result is a draft. Iterate in-thread — that is the whole advantage.
5. Asking for raster images. Claude cannot generate photos. Request SVG placeholders and bring images from an image model.
6. Forgetting accessibility. It will not add full a11y unless asked. Run Prompt 19 before shipping.

Keep Reading

• Claude Design vs Figma — when to prompt and when to use a canvas.
• 100 best Claude Opus prompts for power users — beyond design.
• 50+ Next.js prompts for Claude Opus — ship the design as a real app.
• Claude Opus 4.8 vs GPT-5.5 — which model to design with.

Browse the full PromptsRush blog, our prompt library, and the AI model directory for more.