Claude Design examples: what people build, and how each became a live site

TL;DR. Claude Design (Anthropic's beta design tool, as of August 2026) turns a conversation into designs, interactive prototypes and slides, then exports standalone HTML or hands the work to Claude Code. The Claude Design examples below are the project types people build most, with the path each one takes to a live website: a zip import at hatchable.com/deploy for a static export, or Claude Code connected to Hatchable when the design needs a database and sign-in.

What Claude Design produces, as of August 2026

Claude Design came out of Anthropic Labs in April 2026 and Anthropic still describes it as a beta. You chat on the left and a canvas fills in on the right. Per Anthropic's help center it makes "designs, interactive prototypes, presentations, and more", and the example prompts it gives are a dashboard showing monthly revenue, a mobile app onboarding flow, a landing page, a form for collecting customer feedback, and an internal tool for an ops team. It is available on the web at claude.ai/design and in Claude Desktop, on the Pro, Max, Team and Enterprise plans, and it counts toward the same usage limits as chat and Claude Code.

When a design is done, the export menu offers, as of this writing: download as a .zip, export as PDF or PPTX, export as standalone HTML (a self-contained web page), "Send to" partner apps (the help center lists Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel and Wix), and a handoff to Claude Code with two options, "Send to local coding agent" and "Send to Claude Code Web". The handoff packages a bundle so Claude Code continues from your design instead of starting from a screenshot. Anthropic's product page also mentions moving between the two with /design inside Claude Code.

What the export does not include is anywhere for the site to live. A Claude Design project has no hosting, no database, no sign-in for visitors and no domain. That is the gap the rest of this page closes.

Details about Claude Design are drawn from Anthropic's public help center and product pages as of August 2026. The export menu and plan availability change, so check Anthropic for current specifics.

Two ways a Claude Design website goes live

Every example below ends one of two ways.

Route A, the static export. Export standalone HTML, zip it, and import it at /deploy. Hatchable recognises a plain website (an index.html with its assets), sets a project up around it and deploys it to your-app.hatchable.site. No agent, no terminal. The click-by-click version is at /howto/publish-claude-design, and it is the same flow as turning a Claude artifact into a live website.

Route B, the handoff to Claude Code. Choose "Send to local coding agent", then in Claude Code, with Hatchable connected, say where the design should go. Connecting is one command, covered at /howto/connect-claude-code:

claude mcp add --transport http hatchable https://hatchable.com/mcp

Claude Code signs you in with OAuth (no API key), creates a project, writes the files, deploys, and hands back a live URL. Every project comes with its own Postgres database, sign-in for the app's users (email codes and passkeys, with Google available), file storage, email, scheduled jobs and custom domains, so the prototype's invented data can become real data in the same session. The deploy side is at /howto/deploy-from-claude-code.

A useful habit: do Route A first so there is a URL to look at, then Route B for everything past a static page.

Claude Design examples, and how each became a live site

1. A landing page

The most common Claude Design app example is also the simplest: a hero, three feature blocks, a sign-up box. As a static export it is live in a minute through Route A. The moment you want the sign-up box to save addresses, the page needs a table and an endpoint, which is a Claude Code request: "import this export, add a signups table and a public API route, wire the form to it, deploy." The design does not change. The form gains a destination.

2. A portfolio

Designers and photographers use the canvas for what it is good at, spacing and type, then export. Route A, done. A contact form is the usual second step, and on Hatchable a project can send email from its own address, so "message me" works without a third-party form service.

3. A pricing page

A pricing page is static until someone clicks Start. If Start goes to a product that lives elsewhere, Route A is enough. If this page is the product's front door, Route B: Claude Code puts sign-up (email code or passkey) behind the button and records the plan the visitor picked on their row.

4. A dashboard mock

"Create a dashboard showing monthly revenue" is one of Anthropic's own example prompts, and a prototype full of plausible numbers is exactly what comes back. Making it real is Route B: a table or two, a migration, an API route that queries them, and sign-in so only your team can open it. Claude Code swaps the hard-coded arrays for fetches and the mock becomes a tool.

5. An event page

Date, venue, schedule, RSVP. Static for the information, Route B for the RSVP list: a public route that accepts a name and a headcount, a member-only page that lists replies, and, if you like, a scheduled job that emails you the tally each morning.

6. A restaurant or cafe menu

A menu is the textbook static export and Route A is the right first step. Owners tend to ask for one more thing: changing a price without redesigning the page. That is a small admin view over a menu_items table, gated to the owner's sign-in, which is a short Claude Code session on the same project.

7. A product page

Photos, copy, specifications and a "request a quote" or "order" form. Route B when you want each submission to land in a table and arrive in your inbox. Stock or availability becomes a column the admin view edits, and the public page reads it.

8. An internal tool prototype

"Design an internal tool for our ops team" is another of Anthropic's example prompts. The prototype proves the workflow; Route B ships it: sign-in for the team, tables for the records, routes that respect who is signed in, and cron for reminders. Projects are private by default, so an internal tool can stay reachable only by the people you invite.

A short Claude Design tutorial for the handoff

1. Export

   Open the export menu in Claude Design. For a static site pick standalone HTML. For an app pick "Send to local coding agent".

2. Connect Claude Code to Hatchable

   Run the claude mcp add command above once. It opens an OAuth tab and creates a free account if you do not have one.

3. Ask for the live version

   Something like: "Put this design on Hatchable as a new project. Keep the layout exactly. Add a table and a route for the form, turn on sign-in, deploy, and give me the URL."

4. Publish

   New projects are private. "Publish to the web" on the project page makes one public. The free plan includes unlimited private projects and one published app, no card. Builder is $12 a month for unlimited published apps, custom domains and badge removal (see pricing).