Welcome to the Claude Design Bible

A practical AI Con Todo guide for non-technical creators who want to turn ideas into on-brand designs, decks, prototypes, one-pagers, landing pages, and handoffs without getting buried in design jargon.

Follow the course

Make a real design by day 2.

First design

Landing page, deck, or mockup.

Stay on brand

Use real colors and components.

Hand off

Export or move to build tools.

The Claude Design loop

BriefDescribe the audience, goal, content, brand, and format.

ExploreAsk for 3 directions before choosing one.

RefineEdit text, spacing, color, layout, and components on canvas.

ShipExport, share, or hand off to Claude Code and connected tools.

What this guide teaches

Design briefs

Translate messy ideas into visual instructions Claude can execute.

Brand systems

Use colors, fonts, components, voice, and examples consistently.

Artifacts

Create interactive prototypes and AI-powered artifacts when useful.

Handoff

Move work to PDF, PPTX, HTML, Claude Code, Canva, Adobe, Gamma, and more.

Designer Safety Checklist

I know the audience and purpose before asking for visuals.I provide brand examples, not just adjectives like modern or premium.I review text, spacing, contrast, mobile fit, and brand match.I know whether the final output should be a concept, deck, PDF, HTML, or handoff.

Ask Claude This

prompt

I am non-technical. Help me create a polished visual deliverable in Claude Design.

Goal:
[what this design must accomplish]

Audience:
[who will see it]

Format:
[landing page / pitch deck / one-pager / prototype / social asset / document]

Brand inputs:
[colors, logo, website, example designs, tone]

Before creating, give me:
1. The recommended format
2. Three visual directions
3. The content sections you need
4. What I should review before exporting

Fast Mental Model

Tool	Plain English
Claude Design	Canvas for visual drafts, prototypes, decks, and brand work.
Artifacts	Interactive outputs Claude creates beside the chat.
Claude Code	Builds production software from a design or repo.
Connectors	Move work to tools like Canva, Adobe, Gamma, Miro, Vercel, and Wix.

Course Path

10-Day Claude Design Builder Path

Students should not study every design feature before making anything. They should create one useful visual deliverable by day 2, then add brand systems, artifacts, exports, and advanced handoffs only when those features solve a real problem.

The promise

Day 1: understand Claude Design, Artifacts, plans, and what to use it for. Day 2: create a real first design: landing page, deck, one-pager, mockup, or prototype. Day 3: refine the design with brand rules and a review checklist. Days 4-10: import systems, edit on canvas, use artifacts, export, hand off, and govern team workflows.

10-day path

Day	Level	Module	Outcome
1	Beginner	Setup + Mental Model	Know where Claude Design lives, what it creates, and when to use it.
2	Beginner	First Visual	Create a landing page concept, deck, one-pager, or app mockup.
3	Beginner	Brand Review	Check colors, fonts, layout, content, and brand consistency.
4	Builder	Prompting Visual Direction	Ask for multiple directions and choose one to refine.
5	Builder	Brand System Import	Bring in examples, design files, GitHub, or codebase components.
6	Builder	Canvas Editing	Edit text, comment on elements, tune spacing, color, alignment, and layout.
7	Power	Artifacts + Prototypes	Create interactive prototypes, tools, or AI-powered artifacts.
8	Power	Export + Handoff	Export PDF, PPTX, HTML, or send to Claude Code and connected apps.
9	Advanced	Design to Build	Use `/design-sync`, `/design`, and production handoff prompts.
10	Advanced	Team System	Create shared guidelines, approved systems, review gates, and governance.

What to teach now vs later

Level	Teach first	Hold until later
Beginner	Briefs, first design, visual direction, simple brand inputs, export basics.	MCP, persistent storage, admin-approved design systems.
Builder	Canvas editing, component consistency, brand review, prototype feedback loops.	Complex connector chains and production app architecture.
Power user	Artifacts, Claude Code handoff, PDF/PPTX/HTML export, Canva/Adobe/Gamma flows.	Team governance and custom MCP workflows.
Super advanced	MCP, shared storage, approved design systems, enterprise controls, design-to-code operations.	Only teach after students can judge design quality manually.

Part 1

What Claude Design Is

Claude Design is Anthropic's beta product for collaborating with Claude on visual work: prototypes, wireframes, mockups, design explorations, pitch decks, marketing collateral, documents, resumes, and one-pagers.

What's new in Claude Design (2026)

The latest Claude Design update adds four things worth knowing before you start. Three of them get a full lesson later in this course; the fourth is a quiet but useful change to how usage limits work.

Build in your design system

Import from GitHub, design files, or your local codebase so Claude builds with your real components instead of a template. Full lesson in Part 5.

Edit directly on the canvas

New layout controls let you drag, resize, and align elements by hand. Full lesson in Part 6.

Higher usage limits

Claude Design now shares limits with the rest of Claude, so you have more room to work. See Part 2.

Send to more tools

Export to PDF and PowerPoint, or hand off to Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, and Wix. Full lesson in Part 8.

Use it for

Exploring directions, making first drafts, creating on-brand visuals, building prototypes, and preparing handoffs.

Do not use it as

A replacement for human taste, legal review, accessibility review, or final brand approval.

Claude Design vs related tools

Surface	Best for	Beginner advice
Claude Design	Visual drafts, mockups, decks, prototypes, and branded assets.	Use when the output must be seen, not just read.
Artifacts	Interactive outputs inside Claude conversations.	Use when a design should behave like a tool or prototype.
Claude Code	Turning designs into real code in a project.	Use after the concept and flow are clear.
Canva, Adobe, Gamma, Miro	Finishing, collaboration, presentation, and distribution.	Use after Claude Design gives you a strong first version.

I know the difference between a visual concept, artifact, and production build. I can name the final format I want before I start.

Part 2

Setup, Plans, and Where to Click

Claude says Claude Design is in beta on Pro, Max, Team, and Enterprise plans. Enterprise admins may need to enable it in organization settings.

New: higher, shared usage limits. Claude Design used to draw on a separate allowance. It now shares usage limits with the rest of Claude, so the time you spend designing comes from the same pool as your chats and Claude Code. In plain terms: there is no separate design cap to track, and you have more room to work in one place.

Setup SOP

1. Open Claude Design

Claude

Go to claude.ai/design

or open Claude desktop sidebar

Choose Claude Design

If you do not see it, check your plan or ask your Enterprise admin.

2. Add design inputs

Inputs

Upload examples

Add brand colors, logo, fonts

Paste copy or outline

Claude can import from codebases, design files, raw uploads, and web captures depending on context.

3. Create a first draft

Canvas

Ask for 3 directions

Pick one

Refine on canvas

Start with exploration. Do not force the first draft to be the final answer.

Setup prompt

prompt

I am starting in Claude Design and I am not a designer.

Before creating anything, help me set up the design brief.

Ask me only for what you need:
1. Goal
2. Audience
3. Format
4. Brand inputs
5. Required sections
6. Final export or handoff target

Then propose 3 visual directions I can choose from.

I can find Claude Design or know who must enable it. I gather brand inputs before asking for final output.

Part 3

Your First Design by Day 2

The first win should be visible. A non-technical student should end day 2 with something they can show: a landing page, deck, one-pager, social post pack, or app prototype.

Best first projects

Landing page concept

Hero, sections, call to action, visual direction, and mobile notes.

Pitch deck

10-slide outline, visual theme, speaker flow, and editable export.

App mockup

Dashboard, form, onboarding, or customer portal screen.

One-pager

Offer, benefits, proof, pricing, and next step in a clean PDF-ready layout.

Copy-paste first design prompt

prompt

Create my first Claude Design project.

Format:
[landing page / pitch deck / one-pager / app mockup / social post pack]

Business or project:
[name and short description]

Audience:
[who this is for]

Goal:
[what they should understand or do]

Brand:
[colors, website, logo, tone, examples]

Please create 3 different visual directions first.
For each direction, explain:
1. Who it is best for
2. What feeling it creates
3. What layout it uses
4. What could go wrong

Wait for me to choose one before making the final version.

I created one visible design before studying advanced features. I asked for multiple directions before choosing one.

Part 4

Prompting for Visual Direction

Visual prompts should give Claude constraints it can see: audience, hierarchy, layout, reference mood, brand rules, content, and output format.

The V.I.S.U.A.L. framework

Part	Meaning	Example
Viewer	Who will use or judge this.	Busy small-business owner, investor, course student.
Intent	What the design must do.	Explain, sell, onboard, compare, teach, convert.
Style	The visual world.	Clean SaaS, editorial, premium, playful, operational.
UI or layout	The structure.	Hero, cards, table, deck, dashboard, form, canvas.
Assets	Inputs Claude should use.	Logo, colors, screenshots, examples, copy, design system.
Limits	What to avoid.	No generic stock feel, no unreadable text, no off-brand colors.

Direction prompt

prompt

Act as a senior product designer using Claude Design.

Create visual directions for this project:
[project]

Viewer:
[audience]

Intent:
[what the design must accomplish]

Style constraints:
[brand, mood, examples]

Layout requirements:
[sections, slides, screen types, or content blocks]

Avoid:
[things that would make it feel generic or off-brand]

Give me 3 directions with names. For each one, include layout, colors, typography feel, image style, strengths, risks, and when to choose it.

I describe visual constraints instead of asking for something vague like make it better.

Part 5

Brand System and Design System Import

Claude says Claude Design can bring in design systems from GitHub repos, design files, raw uploads, web captures, and codebases so output looks like your company instead of a template.

Brand kit checklist

Input	What to provide	Why it matters
Logo	SVG, PNG, or screenshot.	Prevents fake marks and wrong proportions.
Colors	Hex codes and usage rules.	Keeps surfaces, buttons, and accents consistent.
Fonts	Font names or examples.	Controls the personality of headings and body text.
Components	Existing website, GitHub repo, design file, or screenshots.	Helps Claude reuse real patterns.
Voice	Examples of copy that sounds like you.	Design and words feel like one brand.

Brand import prompt

prompt

Before designing, build a mini brand system from these inputs.

Inputs:
[website, logo, colors, screenshots, files, repo, examples]

Extract:
1. Colors and when to use them
2. Typography personality
3. Button and card style
4. Image or icon style
5. Layout rules
6. Voice and tone
7. What not to do

Then use this brand system for the design. If anything is missing, ask for it before inventing.

I provide real brand examples before asking Claude to stay on brand.

Part 6

Canvas Editing and Review

Claude Design supports direct control: comments on elements, direct text edits, sliders for spacing and color, and layout controls such as drag, resize, and align.

What to edit first

Review pass	Ask	Do not obsess over
Message	Does the first screen say the right thing?	Minor icon choices.
Hierarchy	Can someone scan it in 5 seconds?	Decorative details.
Brand	Does it match our colors, tone, and examples?	Personal taste unrelated to audience.
Mobile	Does text fit and stay readable?	Desktop-only polish.
Export	Will this work as PDF, PPTX, HTML, or handoff?	Features not needed for the final format.

Canvas feedback prompt

prompt

Review this Claude Design canvas like a senior designer.

Focus on:
1. Message clarity
2. Visual hierarchy
3. Brand consistency
4. Spacing and alignment
5. Mobile readability
6. Accessibility and contrast
7. What to simplify

Give me the 5 highest-impact edits first. Do not redesign everything unless the concept is fundamentally wrong.

I review message, hierarchy, brand, and mobile before exporting.

Part 7

Artifacts and Interactive Prototypes

Artifacts are Claude outputs displayed in a dedicated window. They can be documents, code, websites, SVGs, tools, games, and AI-powered apps. Claude says AI-powered artifacts can run on Anthropic infrastructure, use each viewer's Claude account, connect through MCP, and use persistent storage on supported plans.

When to use an artifact

Need	Artifact type	Example
Static explanation	Markdown or document	One-pager, checklist, project brief.
Visual concept	Website, SVG, or prototype	Landing page, dashboard, campaign visual.
Interactive learning	Small app	Flashcard app, quiz, calculator, simulator.
AI-powered workflow	AI artifact	Coach, writing assistant, planning tool.
Stateful tool	Persistent artifact	Journal, tracker, leaderboard, shared board.

Prototype prompt

prompt

Create an interactive artifact prototype for this idea.

Idea:
[describe tool or experience]

User:
[who uses it]

Core interaction:
[what they click, type, choose, or generate]

Keep it simple:
- one main screen
- clear controls
- no fake complexity
- mobile readable
- beginner friendly

After building, explain what would need to change before this becomes production software.

Before entering sensitive information, check whether an artifact uses personal or shared storage and whether MCP access is approved.

I know when an artifact is better than a static design.

Part 8

Export and Handoff

Claude Design can export to PDF, PowerPoint, or HTML, share within an organization, hand off to Claude Code, and send work to connected apps such as Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, and Wix.

Handoff map

Destination	Use when	Prompt line
PDF	You need a shareable one-pager or document.	Prepare this for PDF export with clean page breaks.
PPTX / Gamma	You need a pitch, training, or sales deck.	Turn this into editable slides with speaker flow.
Claude Code	You want the design built into a real app or website.	Prepare a developer handoff with components, states, and responsive notes.
Canva / Adobe	You need polished marketing or social assets.	Keep elements editable and brand-safe for finishing.
Vercel / Replit / Lovable / Wix	You want a path from concept to working software or site.	Separate visual intent from production requirements.
Miro	You need team alignment and collaboration.	Organize the concept for comments and decisions.

Developer handoff prompt

prompt

Prepare this Claude Design project for handoff to Claude Code.

Include:
1. Goal and audience
2. Page or screen list
3. Component inventory
4. Design tokens: colors, typography, spacing, radius, shadows
5. Responsive behavior
6. Interactive states
7. Assets needed
8. What must stay on brand
9. What can be simplified for the first build
10. Acceptance checklist for review

I know the correct export or handoff path for my design.

Part 9

Advanced: Design Sync, MCP, Storage, and Governance

Advanced Claude Design is about scaling quality: sync with Claude Code, approved design systems, MCP tool access, persistent artifacts, shared storage, and team review rules.

Advanced feature map

Feature	Use when	Risk
`/design-sync`	You want Claude Design to use components from Claude Code.	Bad source components can spread bad design.
`/design`	You want to create or edit design projects from Claude Code.	Needs clear design acceptance criteria.
MCP in artifacts	A prototype needs external services like calendar, Slack, or task tools.	Users must approve access and authenticate independently.
Persistent storage	The artifact needs data across sessions.	Shared storage can expose data to other users.
Approved systems	Teams need every output to follow one brand system.	Admins must keep the approved system current.

Governance prompt

prompt

Review this Claude Design workflow before my team uses it.

Check:
1. Which brand system it uses
2. What can be edited freely
3. What requires approval
4. Whether it uses MCP tools
5. Whether it uses personal or shared storage
6. What export formats are allowed
7. How we verify brand, accessibility, and accuracy

Return a simple team policy for non-technical users.

I know which advanced design workflows require admin or team approval.

Reference

Official Sources and Research Notes

This Bible is based on current Claude Design and Artifacts documentation, last refreshed July 1, 2026 to reflect the latest "What's new in Claude Design" update: design system import, canvas layout controls (drag, resize, align), higher shared usage limits, and expanded export and connector options.

Source	What it supports
Claude Design product page	Claude Design purpose, supported design types, design system import, Claude Code sync, canvas controls, export paths, connectors, plans, and FAQ.
Claude Design stays on brand for daily work	June 17, 2026 update: design system import, `/design-sync`, `/design`, editor controls, connectors, limits, and getting started.
Artifacts help center	How to enable artifacts, edit, export, view code, fix errors, AI-powered artifacts, MCP, persistent storage, and storage/privacy rules.
AI-powered artifacts announcement	Artifacts space, no-code app creation, sharing, mobile availability, MCP and persistent storage updates.
Claude 3.5 Sonnet announcement	Original Artifacts framing: a dedicated workspace for code snippets, documents, and website designs alongside conversation.

Teaching stance: students build a visible design first, then learn brand systems, artifacts, sync, exports, connectors, MCP, and governance as leverage layers.