Claude Design: The Full Walkthrough + Best Prompts

Open it. In any chat, just ask for a design, or pick Output, then Design in the message box. You can also start from a Design template in the Artifacts tab. In Claude Code, type /design.
Add context. Attach screenshots of designs you like, your logo, an old deck or document to restyle, or a code repo so it matches your real components.
Describe it. Say what it is (deck, landing page, one-pager), who it’s for, the content and the style.
Refine it. Use chat for big changes like "switch to a dark theme." Click any element and leave a comment for small ones, or drag and resize things right on the canvas.
Export it. Download a .zip, a PDF, a PPTX or standalone HTML. Send it to Google Slides, Canva, Gamma, Miro, Lovable, Wix and more, or hand it to Claude Code to build for real. Designs start private, and Share lets you pick who can view, comment or edit.

Screenshot a site, borrow the style

See a website you love? Screenshot it, attach it and ask Claude to design your page in that style. It’s the fastest way to get something that doesn’t look like a template.

Borrow A Website’s Style

[Attach a screenshot of a website you love] You're a senior web designer. Use the layout, typography, spacing and overall feel of this screenshot as inspiration for a landing page for my business. Borrow the style, not the content or the logo. My business: [WHAT YOU DO AND WHO IT'S FOR] Headline: [YOUR HEADLINE, or "suggest 3 and pick the strongest"] Brand colors: [YOUR COLORS, or "match the screenshot"] Fonts: [YOUR FONTS, or "match the screenshot"] Sections: 1. Hero with headline, subheadline and one call-to-action button 2. The problem my customer has 3. What I offer (3 to 4 benefits) 4. How it works (3 steps) 5. Testimonials (clearly marked placeholders if I don't have any) 6. Pricing 7. FAQ 8. Final call to action Design it for desktop and mobile from the start. Before you build, tell me in 3 bullets what you're taking from the screenshot so I can correct you.

A full deck in 2 prompts

Give it the content up front, then fix details by clicking on them instead of describing where they are. Clicking the exact element is much faster than typing "the blue button on the third slide."

Investor Deck In 2 Prompts

PROMPT 1: BUILD THE DECK You're a pitch deck designer who has worked on seed-stage decks. Create a 10-slide investor deck. Company: [NAME] What we do: [ONE SENTENCE, e.g. "AI meal planning for busy families"] The problem: [THE PAIN, with a number if you have one] Our solution: [WHAT YOU BUILT] Traction: [REAL NUMBERS: users, revenue, retention] Business model: [PRICE, COST TO SERVE, MARGIN] The ask: [HOW MUCH YOU'RE RAISING AND WHAT IT FUNDS] Slides: 1. Title (name, tagline, logo placeholder) 2. The problem 3. The solution (with a product mockup placeholder) 4. How it works (3-step visual) 5. Market size 6. Traction (a chart or 3 big numbers) 7. Business model 8. Competition (positioning map or comparison) 9. Team (photo placeholders, title, 1-line bio) 10. The ask Style: minimal text, lots of white space, one idea per slide. Use [YOUR BRAND COLORS] or suggest a palette. Rules: only use the numbers I gave you. If a slide needs a number I didn't give, leave a clear [ADD NUMBER] placeholder instead of making one up. PROMPT 2: REFINE (click an element and comment, or type in chat) - "Turn the traction slide into a growth chart of monthly revenue." - "The team slide feels cramped. Give each person more room." - "Make every headline the same size and weight."

Set up your brand once

A design system holds your colors, fonts, logos and layout rules, and Claude applies it to every new design and deck. Ask for one in chat with your brand files attached, or run /design-sync in Claude Code if your brand already lives in React components. Design systems are a beta on Pro and up.

Already made one on claude.ai/design? Go to the Design tab at the bottom of that sidebar and click Move team design systems in the banner. After the move, manage them in Settings, then Capabilities, and click Manage next to Design systems (or go to Settings, then Design systems).

Build My Design System

Build a design system for my brand that you'll apply to every design and deck I make. [Attach whatever you have: brand guide PDF, logo files, font files, a few screenshots of my website or posts, an old deck.] If I don't have a brand guide, use these: Brand name: [YOUR BRAND] What we do: [ONE SENTENCE] Vibe: [e.g. "warm and approachable" / "bold and minimal"] Colors: primary [HEX OR DESCRIBE], secondary [ ], accent for buttons [ ], background [ ], text [ ] Fonts: headlines [e.g. "a modern serif"], body [e.g. "something very readable"] Style rules: [e.g. "lots of white space", "rounded buttons", "no gradients", "line icons, not filled"] Steps: 1. Pull out the colors, fonts, spacing, button and card styles, and image style. 2. Show me a one-page sample (a heading, body text, buttons, a card, a chart) using the system. 3. List anything you had to guess so I can confirm it. Don't invent a logo. If you can't read a font file, tell me and suggest the closest match.

How design systems work →

Swap in your details where you see [brackets].

1. Company One-Pager

Design a one-page company overview I can email to a potential partner or investor. Company: [NAME] What we do: [ONE SENTENCE] Key numbers: [3 TO 5 REAL STATS: revenue, customers, growth] Products or services: [LIST 3 TO 4] Who buys from us: [TARGET CUSTOMER] Contact: [EMAIL, WEBSITE] Logo: [ATTACH IT] Layout: headline and one-line pitch at the top, the numbers as big callouts, products in a simple grid, contact at the bottom. Use my design system or brand colors. Someone should get what we do in 10 seconds. Only use the numbers I gave you. Then export it as a PDF.

2. Instagram Template Pack

Create 5 Instagram templates for my brand that all look like they came from the same place. Brand: [NAME] Colors: [YOUR COLORS, or "use my design system"] Vibe: [clean / bold / minimal / warm] Sizes: 1080x1350 for feed posts, 1080x1080 for the quote post 1. Quote post: bold text on a branded background. Text: "[YOUR QUOTE OR TIP]" 2. Carousel cover: a scroll-stopping first slide. Title: "[YOUR TITLE]" 3. Carousel inside slide: a clean layout for 30 to 50 words, matching the cover 4. Promo post for [YOUR PRODUCT OR OFFER] with price, the main benefit and a call to action 5. Testimonial card with placeholder text, a name and a title Keep text big enough to read on a phone. When I approve them, send them to Canva so I can reuse them.

3. Landing Page From Scratch

You're a conversion-focused web designer. Design a landing page for: Product: [WHAT YOU'RE SELLING] Price: [PRICE, or "free, collecting emails"] Audience: [WHO, AND THE PROBLEM THEY HAVE] Goal: [SIGNUPS / PURCHASES / WAITLIST] Sections: 1. Hero: headline, subheadline, one button, product image placeholder 2. Problem: the 3 pain points my audience feels, in their words 3. Solution: 3 to 4 benefits with icons 4. Social proof: 3 testimonial cards (marked as placeholders) 5. How it works: 3 steps 6. Pricing card with what's included and a button 7. FAQ: 5 real objections with answers 8. Final call to action Style: clean, lots of white space, buttons that stand out. Design mobile first. Write real copy, not lorem ipsum, and keep every claim to what I told you. When it's done, export standalone HTML.

4. Redesign A Document

[Attach your current document: PPTX, DOCX, PDF or a screenshot] This is my current [proposal / report / deck / one-pager]. The content is good. The design isn't. Redesign it. Rules: - Keep ALL the content. Don't cut or rewrite anything unless I ask. If something doesn't fit, tell me instead of dropping it. - Use my design system or these colors: [YOUR COLORS] - Fix the hierarchy: clearer headings, better spacing, shorter lines - Break up text-heavy sections with icons, callouts or simple diagrams - Rebuild any charts so they're clean and easy to read - Make it work on screen and printed Export it in the same format I gave you (PPTX for a deck, PDF for a document).

5. Product Mockups

Make my [app / digital product / course / service] look real with a set of product mockups. What it is: [DESCRIBE IT] Stage: [IDEA / EARLY BUILD / LAUNCHED] Screens or pages to show: [LIST 3 TO 4, or attach screenshots] Create: 1. A hero mockup: my product on a laptop and phone screen, for the top of a landing page 2. A feature layout: 3 to 4 screens arranged together, each labeled with what it does 3. A before and after: the slow manual way next to the way it works with my product 4. A social post: the product with a customer quote over it (placeholder quote) Style: realistic device frames, light background, soft shadows. If I haven't given you real screens, design believable ones and label them "concept." Export as a PDF and a .zip of the files.

6. Newsletter Template

Design a reusable email newsletter template for my brand. Brand: [NAME] How often it goes out: [WEEKLY / MONTHLY] Who reads it: [AUDIENCE] What's usually in it: [e.g. "one tip, product updates, one featured resource"] Layout: 1. Header: logo, newsletter name, date 2. Main story: bold headline and a short intro 3. Three content blocks: small image, headline, 2-line description, "Read more" link 4. Promo block for my product or service: headline, one sentence, button 5. Footer: social links, unsubscribe, company info Rules: 600px max width (the email standard), easy to scan on a phone, my brand colors. Use simple layout that email apps like Gmail and Outlook can display. Export as standalone HTML I can paste into [MAILCHIMP / BEEHIIV / KLAVIYO], plus a PDF preview.

7. Clickable App Prototype

Build a clickable prototype for my app idea so I can show it to [INVESTORS / TEST USERS / MY TEAM]. App name: [NAME] What it does: [1 TO 2 SENTENCES] Who uses it: [TARGET USER] The one thing users come for: [CORE ACTION] Screens: 1. Welcome: what the app does and a "Get started" button 2. Sign up: email or social login 3. Home: the main screen that delivers the core value 4. Core feature: the full flow for the one thing users do most 5. Settings and profile Make the buttons actually move between screens. Use realistic sample data, never lorem ipsum. Design for a phone screen first. Style: [e.g. "clean like Linear", "playful like Duolingo"] When it's done, list the 3 places a first-time user is most likely to get stuck.

Start simple, then layer

Get the structure and content right first, then the layout, then the styling. Each round gets more specific, and you waste fewer messages.

Watch your limits

Design counts against the same limits as your chats and Claude Code. Big codebases and lots of rounds use more, so be specific in your first prompt. When you hit the limit, Design pauses until it resets.

Say mobile in the first prompt

If it needs to work on a phone, say so up front. Asking for a mobile version after the fact means redoing the layout.

Send it to Canva for your team

If other people need to edit it, send it to Canva. They can edit it there without touching Claude. For a real website, hand it off to Claude Code and it builds the design into working code.