🎨 Claude Design — Text-to-Prototype Inside Cowork
Anthropic Labs shipped Claude Design on April 17, 2026 — a text-to-prototype tool that lives inside Claude Cowork and turns prompts (or whole codebases) into design systems, websites, and slide decks. It's powered by Opus 4.7 and uses the new xhigh effort tier by default. Here's how to set it up, prompt it well, and avoid the obvious traps.
What it actually does
Three output types, one tool:
- Design systems. Generate a token set (color, spacing, type scale, shadows), a component library (buttons, cards, forms, navigation), and a Storybook-style preview. Exports to CSS variables, Tailwind config, or Figma library.
- Websites & web apps. Multi-page prototypes — landing pages, marketing sites, dashboards. Outputs HTML/CSS, React (with Tailwind or shadcn/ui), or full Next.js scaffolds. One-click deploy to Cloudflare Pages, Vercel, or Netlify.
- Slide decks. Pitch decks, internal updates, customer presentations. Exports to Google Slides, PowerPoint (.pptx), and PDF. Can pull in your project's existing brand tokens for visual consistency.
The killer feature: it can read an existing GitHub repo (via Cowork's GitHub integration), infer your design tokens, and generate new screens that match. Going from "we need a settings page" to a working PR draft takes minutes, not hours.
How to access it
-
Step 1: Open any Cowork project
Claude Design is a tool surface within existing Cowork projects — there's no separate signup. If you have Pro, Business, or Enterprise, you already have access. The Free tier gets a small daily quota for trying it.
-
Step 2: Click the Design tab in the project
New tab next to Chat and Artifacts. Opens the Design canvas — a side-by-side prompt + preview interface. Output appears as a new artifact in the project, with version history.
-
Step 3: Pick an output mode
Toggle at the top: Design system, Website, or Slide deck. The mode determines the export options and prompt scaffolding Claude uses underneath. You can switch mid-conversation.
-
Step 4: (Optional) Connect a codebase
If you have the Cowork GitHub integration set up, "Attach repo" lets Claude Design read existing components and design tokens. New generations will match the inferred patterns. Strongly recommended for any work that has to ship into an existing product.
-
Step 5: Prompt, iterate, export
Generations show in real-time. Refine with follow-up prompts ("make the buttons rounded," "tighten the spacing on cards," "add a dark variant"). When ready, export to your target — code, Figma, deploy URL, or .pptx.
Prompt patterns that actually work
For design systems
Generate a design system for a B2B SaaS analytics dashboard targeting
data-savvy ops teams. Tone: precise, calm, slightly dense. Light + dark
themes. 8-step type scale. Color: cool grays + one accent (your pick).
Output: CSS custom properties + Tailwind config + Storybook preview.For websites
Build a landing page for [product]. Target reader: [persona]. Hero,
3-feature row, social proof, pricing snapshot, FAQ, CTA footer.
Match the design tokens in the connected repo. Output: Next.js with
Tailwind. Deploy to Cloudflare Pages preview. Mobile-first.For slide decks
10-slide investor update for Q1 2026. Cover, agenda, KPI snapshot,
top 3 wins (with one chart each), top 3 risks, ask, Q&A. Use our
brand tokens (in the connected repo). Export: .pptx. Each slide
self-contained, presenter notes optional.The pattern: output spec + audience + token source + export format. Skipping any one of those produces generic output.
Pricing
| Tier | Claude Design access | Effort levels available |
|---|---|---|
| Free | ~5 generations/day, watermarked exports | low / medium |
| Pro ($20/user/mo) | Unlimited generations, no watermark | low / medium / high / xhigh |
| Business ($30/user/mo) | Pro + shared brand tokens across projects, team Figma library export | All tiers including xhigh |
| Enterprise (custom) | Business + SSO, audit logs, dedicated support, custom token retention | All tiers + max |
Pricing as of April 2026; verify current rates at anthropic.com. Claude Design generations count against your existing Cowork message quota — there is no separate Design billing meter during the launch period.
Pitfalls to avoid
- Treating it as a Figma replacement. It's not. Figma is still the right tool for detailed visual design, multi-frame interaction flows, and team design libraries. Use Claude Design for the 0-to-1 step and Figma for refinement.
- Skipping the codebase connection. If you have an existing product, connecting the GitHub repo doubles the quality of every output. The unattached version generates generic-looking results that don't match your brand.
- Prompting without a target audience. "Build a landing page" produces something. "Build a landing page for engineering managers evaluating internal AI tools" produces something useful.
- Deploying directly to production. The deploy-to-Cloudflare-Pages button is for previews, not production. Pipe through your normal review/CI before shipping anything customer-facing.
How it compares
| Tool | Strength | Weakness vs Claude Design |
|---|---|---|
| Vercel v0 | Mature React/shadcn output, fast iterations | No design-system or slide-deck modes; no codebase awareness without manual paste |
| Figma + AI plugins | Best-in-class visual editor, mature collaboration | Plugin AI is fragmented and generally weaker than Opus 4.7; no code export |
| Bolt.new / Lovable | End-to-end app generation with backend | Less brand-aware; not optimized for design-system output; separate tool from Cowork |
| Cursor / Claude Code | Best for finishing code in your real repo | Not optimized for visual prototyping or slides |
The honest summary: if you're already in Cowork, Claude Design is the lowest-friction prototyping tool available. If you live in Figma or Cursor, you don't need it, but the GitHub integration is genuinely useful for "design a feature that matches our existing app" workflows.
Limitations to know
- No native mobile (iOS/Android) output — web only at launch. SwiftUI/Jetpack Compose said to be coming.
- Animations are limited to CSS transitions; no Lottie or complex motion.
- The Figma export uses the Figma plugin, which only the project owner can install — Business tier or above for team library sharing.
- Generated React uses shadcn/ui by default; opting into other component libraries (Radix, MUI, Chakra) requires explicit prompting.
- Long codebases (>~50k LOC) may not all fit in context — Claude Design samples representative files rather than reading every line.
Related
- Claude Cowork hub — the parent product
- Projects & Artifacts guide — where Design outputs live
- Cowork pricing breakdown — full tier comparison
- Use case: social content with AI — pairs well with Design's slide-deck mode
← Back to the Claude Cowork hub · See also our decision guide.