1In one sentence
A finished design can be handed to Claude Code, which builds it as a real website or app, so the picture becomes the thing.
2New words
- Handoff — passing the design from Claude Design to Claude Code with everything it needs: the layout, the colors, the text, the images.
- Claude Code — the version of Claude that writes and runs software (Part 6). You do not need to read code to use it for this.
- Bundle — the package the handoff creates. One file to give to Claude Code.
3Why you would want it
This is the shortest path from "I want a website" to having one: describe it (3.1), make it look right (3.2), test it as a prototype (3.4), hand it off, and Claude Code builds it. For a simple landing page the whole path is an afternoon, and nobody wrote a line of code by hand.
4Try it now
(paid plans; Claude Code set up as in Chapter 6.1)
- Open the finished landing page from Chapter 3.1. Use the export or share menu to create the handoff bundle for Claude Code.
- Open Claude Code (the Code tab in the app, or the desktop app) in an empty folder.
- Type: Build this design as a static website. Keep the layout and colors exactly. Replace the placeholder hours and address with: [your details].
- Open the result in a browser.
5What you will see
[Picture pending: the handoff menu in Design, and the built site open in a browser.] Claude Code reads the bundle, creates the files, runs the site locally and shows you the address to open. The page looks like the design, and now the buttons can do real things (a booking form, a map link).
6Watch out
- A website needs a home on the internet (hosting). Claude Code can set that up with you, but it is an extra step and sometimes a small cost.
- Keep the design and the site in step: change the design, hand off again, rather than editing both by hand.
7Go further
Part 6 explains Claude Code properly: how it works in your folders, how to keep it safe, and how to make it follow your rules every time.