You've probably been there: you have an idea for a design, but the path to actually making it is a whole bundle of tools. One for the wireframe, another for the mockup, a third for the landing page, a fourth for the slides. Claude Design clears all that out of the way. You describe what you want, Claude generates a polished prototype, you iterate through conversation, and when the design is right, it hands off cleanly to Claude Code for the real build. By the end of this lesson, you'll have a personal portfolio website ready to ship. Let's get started!

Claude Design is Anthropic's product for visual-first work. Two things make Claude Design distinct from a regular Claude conversation or an Artifact:

You've already seen Claude produce visual and interactive output — Artifacts and Claude Code both do it, just in different shapes. Claude Design joins the lineup as a third surface, and each one fits a different stage of work.

Reach for Claude Code when an Artifact would have done, and you've over-built. Send an Artifact when stakeholders need a polished Design prototype, and you've undercommunicated.

Imagine this: you've been meaning to scale your online presence. A real personal site: your work, how you think about your field, and how to reach you. You've talked yourself out of building it for two years because of everything it involves:

Today, that whole sequence collapses.

Over this lesson, you'll go through three iterations of a portfolio site in Claude Design. Each iteration focuses on a different layer of the work:

At the end of the third iteration, you'll hand the design off to Claude Code for the real build.

Claude Design opens from Claude on the web. When you open it, the first thing you do is pick the project type:

You can also start a blank project when none of the above fits — simply click the text below the template ideas.

For the portfolio site, choose the Prototype. Now you're in the workspace. The workspace is split into two:

Claude Design opens with "Start with context." The work isn't just text-to-design — Claude Design accepts richer inputs that anchor the prototype in real material:

You can also drop files into the workspace, sketch something rough, or draft notes by hand and snap a photo. The brief you write is the foundation; these are the materials that ground it.

Before you open Claude Design, the most important thing is what you bring to it. The brief you write determines the prototype you get. A vague brief produces a generic prototype that you'll spend many rounds iterating to make specific. This is the same principle from every lesson so far: brief quality drives prototype quality more than any tool skill does.

A useful design brief names five things:

The first iteration is about what's on the page and in what order. Before any visual work, the content hierarchy has to be right.

Before writing the brief, one thing worth knowing: Claude Design generates the layout, structure, and visual treatment — but the specific content (your real projects, your actual bio, real client names) needs to come from you. For a first iteration, plausible placeholder content is fine. You'll swap in the real details once the structure works.

The preview pane shows the first version of the site. You scroll through it, reading as if you were the audience — an outdoor brand founder deciding whether to keep reading or close the tab.

The sections are in the right order, but you notice three things:

Iteration 1 isn't done. The hierarchy needs a pass.

This is where the working pattern matters. You don't open a settings panel, drag elements around, or learn a tool's interface. You describe the changes you want.

Three ways to make changes:

For structural changes, conversational prompts are best. For surgical fixes, inline comments work better. For copy you want to control word-by-word, direct edits are the right call.

You give Claude three specific changes through the chat. The preview updates in a few seconds. You scroll through again. Now everything is exactly as you wanted. Iteration 1 is done. The content is in the right shape.

With the content hierarchy locked, the second iteration focuses on the visual: how the page looks, reads, and feels. Visual structure is best iterated in passes, too. Start with typography — it carries the most weight on a text-heavy site. Then move to layout: spacing, rhythm, and structural shapes. Color and accents come last, as the lightest layer.

After Iteration 2, the prototype now has real shape: editorial typography, a single-column layout that breathes, a clean accent color, and your actual case studies sitting where they belong. Reading through it, the page feels like you. But a portfolio exists for someone else to read. The visual iteration got the page looking right; the next iteration checks whether the page works for the person it's for.

The first two iterations were about you — your content, aesthetic, and sense of what the page should be. The third iteration tests whether the page works for someone who isn't you. The test: pick a person from the actual audience. You don't have to send the page to a real person. The exercise here is to read it through their eyes. What's confusing? What's missing? What's there that shouldn't be? You can also delegate this task to Claude.

In the chat panel on the left, tell Claude Design who's reading the page and what to look for. This works as a regular conversation — no separate skill needed. Claude Design treats the design as context for the review.

Claude reads the prototype with that audience in mind and surfaces what you'd never catch on your own.

You revise the page based on the gaps the Claude Design review surfaced. The page now does what it was supposed to do. An outdoor brand founder reading it cold can describe what you do, what you're looking for, and why you might be a fit. Three iterations, one site. Ready to hand off.

At every other prototype tool, this is where the work gets harder. You have a polished output, but production is a different system. Claude Design's handoff to Claude Code is easy. The prototype is code. When you hand it off, Claude Code receives the actual HTML, CSS, and JavaScript with the design intent intact — typography choices, color decisions, spacing rules, interaction patterns. Everything is preserved from the file.

When the design is approved, you don't manually export the prototype, copy it elsewhere, or write a separate brief for Claude Code. The handoff is built into Claude Design. In your project workspace, the action is one step: you tell Claude Design to hand the design off to Claude Code. The instruction can be conversational ("hand this off to Claude Code for the production build") or triggered through the workspace's handoff action.

When you click Handoff in Claude Design, a dialog appears with two ways to send your work to Claude Code:

The bundle itself carries the approved prototype's code, the design intent from your conversation, and any constraints you've specified. And no copy-paste between tools!

You've built tools, automated work, and shipped a real visual prototype — each on a different Claude surface suited to a different shape of work. The skill that ties it all together is knowing which surface fits which problem before you start. The next lesson is exactly about this skill. You'll learn how to read a project, choose the right Claude surface for the work, and combine them when the work needs more than one. Let's keep going!