PROMPTS
Claude Design: The Complete Guide ⚡
Build prototypes, presentations, posters, and full marketing assets without touching a design tool. How to access Claude Design, what you can build, and.
Claude Design is Anthropic's visual creation tool built directly into Claude. You describe what you want to build, and Claude generates a working visual draft on a live canvas. Then you refine it through conversation, inline comments, or direct editing until it is exactly what you need.
It is not a simple image generator. Claude Design produces fully interactive prototypes, working presentations, editable documents, and code-powered visualizations. The output is real HTML, CSS, and JavaScript that you can export, hand off to developers, or send directly to tools like Canva, Figma, or Vercel.
Claude Design is available on Pro, Max, Team, and Enterprise plans at no extra cost. It works on claude.ai/design and in the Claude Desktop app.
How to Access It
Option A (Desktop App): Open the Claude desktop app. In the bottom left corner of the sidebar, you will see Design. Click it.
Option B (Web): Go to claude.ai/design in your browser. Same interface, same capabilities.
Claude Design uses a project-based workflow. Each project has its own conversation history, canvas, and design context. Click New Project to start fresh.
Type your request in the chat panel on the left side. Claude generates the visual on the canvas to the right. The more specific you are, the better the first draft. But you can always refine after.
What You Can Build
Interactive Prototypes
Fully clickable prototypes with working navigation, hover states, animations, and transitions. These are not static mockups. They behave like real apps.
Build an interactive prototype for a task management app. Include:
- A sidebar with project categories
- A kanban board with drag-and-drop columns (To Do, In Progress, Done)
- A task detail modal with due date, assignee, and description fields
- Dark mode toggle in the top bar
Make all interactions functional.
Presentations and Pitch Decks
Full slide decks with consistent styling, transitions, and speaker-ready layouts. Claude handles the structure, design, and content.
Create a 10-slide pitch deck for a Series A fundraise. The company is an AI-powered legal research platform. Include: title slide, problem, solution, market size, product demo screenshots, business model, traction metrics, competitive landscape, team, and ask. Use a clean, modern design with navy blue and white. Professional but not corporate.
Social Media Graphics
Instagram posts, carousel slides, story templates, LinkedIn banners, Twitter headers, and any other social format.
Design an Instagram carousel (5 slides) about '5 AI Tools You Need in 2026.' Style: bold sans-serif headings, dark gradient backgrounds, neon blue accent color. Each slide should have one tool name, a one-line description, and a visual icon. First slide is the hook, last slide is the CTA.
Posters and Marketing Materials
Design a poster for a tech conference called 'Build 2026.' Date: September 15-17. Location: San Francisco. Style: futuristic, dark background, holographic gradient accents. Include speaker headshot placeholders, sponsor logos area, and QR code for registration.
Documents and Resumes
Professional documents with proper typography, layout, and formatting. Resumes, one-pagers, case studies, and reports.
Design a modern resume for a senior product designer. Two-column layout. Left column: contact info, skills bar charts, education, certifications. Right column: experience with role, company, dates, and 3 bullet points each. Clean sans-serif font. Subtle color accents. Print-ready.
3D and Interactive Visualizations
Claude Design can build code-powered prototypes with 3D graphics, animations, WebGL shaders, and even voice or video integration. This is what Anthropic calls "frontier design."
Build an interactive 3D solar system. Let me click on each planet to see its facts: diameter, distance from the sun, orbital period, number of moons, and surface temperature. Use realistic colors and relative sizing. Add orbital paths and a slow rotation animation. Include a zoom control.
The Edit Mode
Everything Claude Design generates is fully customizable. Click the Edit button at the top of the canvas to enter direct editing mode. But editing is not limited to one method. You have three ways to refine your designs.
Chat edits: Describe what you want changed in the chat panel. Claude updates the design on the canvas. This is best for broad changes like "make the header taller" or "change the color scheme to green."
Inline comments: Click anywhere on the canvas to drop a comment pin. Type your feedback directly on the element you want changed. Claude reads the comment and adjusts that specific element. This is best for precise, targeted feedback like "move this button 10px to the right" or "this text should be bold."
Direct manipulation: Click the Edit button at the top of the canvas. This unlocks direct controls: drag to move elements, resize handles on every box, text editing by clicking into it, color pickers for any fill, and layer reordering via drag and drop. This is best for when you know exactly what you want and do not want to explain it.
Design Systems
If you are building multiple projects for the same brand, Claude Design can save your design system so every new project starts with your exact colors, typography, and component styles. No more re-explaining your brand every time.
To set up your brand design system, open any project and click the Design System button in the top bar. Add your brand colors, typography choices, and component styles. Save it. From then on, every new project in that workspace can pull from that saved system.
If you are also using Claude Code, you can sync your design system between the two with the /design-sync command. This keeps your codebase and design prototypes visually consistent.
Import and Export
Claude Design connects to other tools through built-in connectors.
Import from: Figma (paste a share link), PDF (upload directly), Images (drag and drop), Text and Markdown (paste content).
Export to: Canva, Figma, Adobe, Vercel, Wix, Gamma, Webflow, Framer, and Base44. Each connector sends your design to the target tool in the right format.
Tips and Best Practices
- Be specific about dimensions. "1080x1080" or "16:9" gets you the right size on the first try.
- Use reference images. Upload a screenshot of a design you like and say "make something like this."
- Start broad, then refine. Get the full layout first, then use Edit mode or comments for details.
- Save versions. Claude Design autosaves, but you can also manually save versions to compare iterations.
- Export early and often. Check how your design looks in the target tool before finalizing.
If you get a "chat upstream error," just refresh the page and resubmit your last message. Your project is saved automatically, so you won't lose any work.
The real unlock of AI agents is not full autonomy, but human-in-the-loop systems design. Structure your agent inputs with explicit constraints, negative prompts, and automated test checkpoints. When building tools, keep token consumption lean by caching system prompts and isolating tasks into specialized sub-agents.