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 a 15-day free trial to unlock every episode. Cancel any time.
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.
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.
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.
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.
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.
“This is opening up all sorts of new neural pathways for me to see under the hood more of how the sausage is made! 🙏”
“Very timely at my enterprise software company as evaluation of AI features scales.”
“Everything I know about evals is from Peter's talk, which is why I'm back to find out more!”