Designing with Claude
A hands-on walkthrough of Claude Design — Anthropic's tool that creates real, code-based designs. Set up a design system, generate and refine a landing page, and see where designing-by-code shines: interactive, animated, production-quality design with a design-to-engineering handoff measured in minutes.
Start watching for free
Free episodes available immediately. Full access with a 15-day free trial.
1. Designing with Claude
Introduction to Claude Design
An introduction to Claude Design and this short, hands-on series: what the tool is, how it designs by writing code, and what we'll build together — a design system and a refined landing page for a fictional company.
Setting up a design system
Bootstrap a design system in Claude Design. Borrow an overall feel from a reference site (Stripe, via Gemini), generate a concise system for a fictional card company, and watch Claude write real code for colors, type, and components — with practical tips on choosing Sonnet vs Opus and keeping token usage under control.
Creating your first design
Generate a landing page from your design system. Kick off a high-fidelity hero, switch to Opus for stronger design sense, steer Claude away from generic 'AI' styling, and stay productive by queuing the next prompt while it works — including a first isometric, code-based illustration.
Refining illustrations
Turn a rough illustration into a polished, animated one. Use Claude Design's markup, direct-edit, and comment tools, keep context clean with fresh chats, and iterate on an animation of cards flowing into a central approval hub — the interactive work where designing-by-code really pays off.
How Claude Design works
Step back and weigh the trade-offs of designing by writing code: complex animations and shaders within reach, design systems that PMs and engineers can build against, handoff in minutes instead of days, and Claude as a creative collaborator. Plus why it's worth experimenting with — ideally alongside your engineers and teammates.
What participants say
"This training has provided valuable insights into AI product development methodologies and practical implementation strategies."
— Course Participant
"Highly relevant for our enterprise software organization as we scale AI feature evaluation processes."
— Course Participant
"The evaluation framework training has been instrumental in establishing our AI quality processes."
— Course Participant