A complete 8-step workflow for leveraging Anthropic's Claude to generate wireframes, slide decks, brand design systems, and code bundles.
Step 1: Open claude.ai/design
- Claude Design has its own dedicated URL.
- Pro or Max plan required to access these features.
- Team and Enterprise admins must toggle it on via: Organization settings → Capabilities → Anthropic Labs.
Step 2: Pick Your Format
Choose your format before typing, as it shapes the entire system prompt:
- Wireframe (websites)
- Slide deck
- From template (animated videos)
- Freeform
Step 3: Get a DESIGN.md
Select one of two paths to establish your design system:
Path 1 (Build your own): Drop every brand asset into a Cowork folder and prompt:
Path 2 (Steal one in 30 seconds): Grab pre-built profiles from getdesign.md (e.g., Mastercard, Airbnb, Ferrari, Pepsi, or any global brand).
Step 4: Prompt Correctly
Ensure every prompt explicitly covers: Goal, layout, content, and constraints.
Example Prompt:
Step 5: Video-to-Slides
For pitch decks, avoid asking for slides directly. Generate a 30-second animated video first, then enter this prompt in the same chat:
Note: The video step forces visual thinking, yielding significantly cleaner slides than direct deck prompts.
Step 6: Iterate in Two Places
- Structural changes go in the chat: Prompt
"show me 3 alternative layouts." - Pixel-level changes go on the canvas: Click the edit button, highlight the specific element to change until it lights up green, and make localized adjustments.
Step 7: Always Validate
Run these three validation prompts every time to catch visual and structural issues:
"List WCAG 2.1 AA violations with fixes.""Generate desktop, tablet, and mobile versions.""Suggest 2 A/B variations of the hero section."
Step 8: Export
Navigate to Top right → Export and choose the format for your deployment pipeline:
- PPTX
- Standalone HTML
- Bundle for Claude Code
