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.
What we'll discuss
- What is Claude Design all about?
- What is it specifically good at?
- How can you incorporate this in a team?
- How to use it.
Who is this for
- Individual practicioners that want a quick intro to Claude Design in short videos.
- Leaders that want to get a feel for this and give some thought to if and how to incorporate this in their teams
Designing with Claude
- All 5 videos in this series
- Prompts, templates and resources from each episode
- Watch at your own pace, on any device
- Full access to every other course on model context experience
Full access to all courses, $79/m after the trial. Cancel anytime.
What you'll learn
- What Claude Design is and how it works under the hood
- How to set up a design system it can follow
- How to generate and refine a real, code-based landing page
- Where designing-by-code shines, and where it does not
Learn from Peter
Peter Van Dijck
Peter has been building AI products since 2023 and teaching teams how to build them since 2024. He has spent that time in the trenches with evals, observability, synthetic data and context engineering, and turns what actually works into practical, no-fluff lessons.
Every episode is taught by Peter himself, in plain language, for product managers, designers, researchers and strategists who need to understand how AI systems are really built, without needing to be an engineer.
Peter on LinkedInWho this is for
Designers
You want to see what designing directly in code looks like, without becoming an engineer.
Product managers
You want production-quality prototypes in hours, not weeks.
Design leads
You are deciding how AI design tools fit into your team and handoff process.
What's included
- All 5 videos in this series
- Prompts, templates and resources from each episode
- Watch at your own pace, on any device
- Full access to every other course on model context experience
- A complete landing page built and refined on camera
What participants say
“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!”
The videos
1. Claude Design 101
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.
Also included
Your subscription unlocks every course on model context experience.
AI 101
Build a deeper understanding of AI. Why do models have a personality? What is context engineering?
Course details →Evals 101
How do we know if our AI systems are working well? *The* key skill for UX researchers and product people.
Course details →Claude Code for non-engineers
Despite the "code" in its name, Claude Code is perhaps the most popular agentic AI system right now. Understanding and using it gives you a glimpse into what's coming the coming months and years in terms of agents. And it can be incredibly useful for non-coding tasks.
Course details →UX.md
Why should I make an UX.md file, and how do I know it's working?
Course details →Project Planning for AI
If AI is different, and AI projects are different, how do we plan projects for AI? What are the roles and tracks we should consider? What are some common gotchas?
Course details →Evals for agents
How do you build evaluations for agents? Model capabilities are evolving fast, user expectations are shifting, and both inputs and outputs are highly variable. This series walks through how to think about agent evals — from the kinds of agents you might be building, to identifying risk, defining quality, and combining qualitative research with metrics.
Course details →Content Strategy for LLMs
Content strategy is changing now that LLMs are reading, writing, and rewriting most of what we publish. This series is a practical walkthrough for content folks: setting up the right tools, structuring content as markdown, defining tone of voice and microcopy in ways an LLM can actually follow, and evaluating what comes out the other end.
Course details →