How to build a website with Claude Artifacts

To build a website with Claude Artifacts, start a design in any Claude conversation, give it a complete art direction, refine it on the canvas, and export the result as standalone HTML or send it to a host such as Netlify or Vercel. The artifact is where the page gets made and reviewed. The export is what goes live.

Most of the work is in one phrase of that sentence: the art direction. An artifact built from "make me a website for my studio" comes back as the same page everyone gets, and one built from a page of exact values comes back looking designed. The steps below cover both halves.

What an artifact is in Claude now#

An artifact, in Anthropic's help article, is anything Claude makes that you would put in front of someone: a design, a deck, a document, a dashboard or a small interactive tool. It opens beside the conversation, you can edit it there, and everything you make is saved in the Artifacts tab in the sidebar.

New artifacts can also start from a template:

• Design: visuals, mockups, prototypes, one-pagers and landing pages, built with your design system. This is Claude Design, and it is the one to use for a website.
• Docs: living documents you write with Claude and your team.
• Slides: presentations you can edit, present and export to PowerPoint or PDF.
• Dashboards (beta): charts built from your data platforms or connected apps.
• Motion (beta, Team and Enterprise): animated explainers exported as MP4.

Artifacts are available on the Free, Pro, Max, Ultra, Team and Enterprise plans, and the Design, Docs and Slides templates are on all of them. They need one setting: Cloud code execution and file creation, called "Create and edit files" in the newer Settings layout, under Settings, then Capabilities. Artifacts made in a chat before September 16, 2026 are now "legacy" artifacts; they keep working and can still be published and shared, but you can no longer make new ones of that kind.

Everything starts private. You share an artifact from its Share menu with view, comment or edit access, and who can open a link depends on your plan, which Anthropic's sharing article sets out in a table. For a website, sharing is for review. Going live is the export, covered in the last steps.

What one artifact page can hold#

Anthropic documents the page limits most precisely for artifacts published from Claude Code, and they describe what a single artifact page is. According to the Claude Code artifacts documentation:

• One page, no backend. An artifact is a static, self-contained page that cannot serve multiple routes, so long content uses in-page anchors rather than separate pages.
• Fonts from Google Fonts. It is the one external font source; other typefaces are inlined.
• Scripts from five CDN hosts. cdnjs, unpkg, the Tailwind and jQuery CDNs, and selected paths on jsDelivr. Other external scripts are blocked.
• No external images. The content policy blocks images from other hosts, so pictures are embedded in the page.
• 16 MiB at most. Large embedded images are the usual reason a page is too big.

A design made from the Design template works on a canvas of artboards and layers, and it leaves the tool as standalone HTML or a .zip. Think of the artifact as the studio and the exported file as the website.

One page is enough for a lot of real sites: a launch page, a portfolio, a product page, a café's menu and hours, an event. These two are each a single scrolling page:

A single artifact cannot be a multi-page site with a blog, a CMS or logins. A site like that starts here and finishes in a codebase, through the Claude Code handoff in step 8, and the Claude Code website guide covers the rest of that route.

Set up the artifact and brief it#

1. Turn on artifacts#

Open Settings, then Capabilities, and turn on Cloud code execution and file creation (shown as "Create and edit files" in the newer layout). On Team and Enterprise plans an owner controls it in Organization settings; on Enterprise, the Design template has been on by default since October 15, 2026.

2. Start a design#

In any conversation, choose Output, then Design, in the message box, or open the Artifacts tab and pick a Design template. From the terminal, Claude Code's /design command does the same (it needs Claude Code v2.1.265 or later). You can also simply ask for a single-page website in chat, which Claude can make as an artifact, but the Design template gives you the canvas, inline comments and the export menu, which is what a website needs. OpenAI's equivalent is ChatGPT Sites, which builds a page from a conversation.

3. Paste the art direction before the first request#

Put the values in the first message, above the request, so every later block can refer to them:

One-page site. Sections are anchors on one page, no separate routes.
page #0F1012, text #EDE8DF, muted #9C9488, accent #E4572E on buttons only
display: Fraunces from Google Fonts, clamp(3.25rem, 9vw, 8.5rem), line-height 0.94
body: 17px / 1.6, measure 64ch, two weights
reveal: opacity and translateY(20px), cubic-bezier(0.22, 1, 0.36, 1), 700ms, first screen only
hover: 180ms, cubic-bezier(0.32, 0.72, 0, 1)
sections: 1 hero with film, 2 three works in a 5/7 grid, 3 studio in two sentences, 4 contact
breakpoints: 390, 768, 1280; on mobile the hero film focuses at 60% 40%

Writing that block is the design work. If you would rather not write it, every design in the Thanor library comes with one, much longer and finished: the palette in hex, the typefaces and scale, spacing, easing curves and durations, the section order and every interaction, and the hosted media the page uses. Paste the prompt whole. With the Thanor MCP connected, which is included in every paid plan, Claude can pull a design's full art direction into the conversation itself. The Claude Design prompt guide shows how to write your own.

Build and refine the page#

4. Build in passes#

Anthropic's advice for Claude Design is to start simple and layer in complexity: the core layout and content first, then interactions, edge cases and polish. For a website that means three passes. Ask for the structure with real copy, then the motion and media, then the details. Say early which screen sizes matter, which is another of Anthropic's tips; a page designed only at desktop width needs a second pass for phones, and stating 390px up front avoids it.

On a long page, one section per message keeps each response focused, and each message can point back to the tokens instead of repeating them.

5. Refine with comments, chat and the canvas#

Claude Design gives you three ways to change the page, and Anthropic's guidance on which to use is practical:

1. Inline comments for targeted changes: click the element and write "padding 24px 32px" or "use the accent here".
2. Chat for structure, new sections and anything that needs explaining.
3. Direct editing on the canvas to drag, resize and align elements quickly.

Write every change in the same units as the brief. "Make the headline bigger" invites a guess; "headline clamp(3.75rem, 10vw, 9.5rem), tracking -0.03em" does not. Anthropic's own example of feedback that works is "Tighten the spacing between form fields to 8px".

Claude Design has no version history yet, so before you try a different direction, say "Save what we have and try a completely different approach", which Anthropic suggests for exactly this. If you open a new chat tab in the same project, paste the tokens again so the new thread starts from your values.

Media, fonts and motion within the limits#

The limits in the second section shape three decisions on any page that wants to look directed.

• Fonts. Name a Google Fonts face in the brief and Claude loads it. If your brand face is not on Google Fonts, it gets inlined, which adds weight; for a heavy family, choose one weight per role.
• Motion libraries. GSAP and Three.js are both published on cdnjs, so a scroll-driven sequence or a 3D object fits inside the page. Say which library, which version and what drives the motion: scroll position, the pointer, or time. For a 3D object written as values, the 3D guide covers the scene, the material and the camera.
• Films and stills. Anthropic's Claude Code documentation says the artifact viewer blocks images from other hosts, and its sharing article says artifacts that connect to other websites cannot be shared by public link. So keep hosted media out of the artifact's critical path: upload the clip or still into the design, since design artifacts accept uploaded images and videos, or keep the hosted URL in the brief and check the media in the exported page once it is on your host. The animated backgrounds page supports both: copy a clip's URL, or download the file and upload it. The video background guide covers sizing and posters.

Each of these hangs on a single idea: one film in the first, one cursor mechanism in the second. That is a good budget for a single artifact, with everything else on the page kept still.

Publish the page as a real website#

6. Export the page#

Use the Export button in the upper right of the design. The options include a .zip, PDF, PPTX, Google Slides and standalone HTML. For a website, take the standalone HTML or the .zip.

7. Put it on a host#

The same menu sends a design straight to Netlify, Vercel or Wix, among other tools. Or upload the exported HTML to any static host and point your domain at it. Hosting the file yourself is also where the page gets what an artifact link cannot give it: your own <title>, a meta description, Open Graph tags and an indexable URL on your domain.

8. Or hand it to Claude Code#

When the page has to grow into a site with more routes, a form with a backend or a CMS, use the handoff to Claude Code, either to a local coding agent or to Claude Code on the web. Anthropic says Claude Code continues from your existing work instead of starting over from a screenshot, so the tokens and the structure carry over into a real project.

Before any of the three, share the artifact with whoever has to approve it. Comment access lets a client leave notes on the page itself, which saves a round of screenshots and emails.

Mistakes that make an artifact site look generated#

Most generic artifact sites come from the same handful of habits:

• Asking for "a website" with adjectives. "Modern, clean, premium" names no values, so Claude fills the slots from the median: a neutral sans, #6B7280 gray, 8px corners. The sameness piece shows where those defaults come from.
• Animating every section. When everything fades up 20px over 300ms, nothing is the moment. Pick one mechanism for one section and keep the rest still.
• A hero with nothing in it. A centered headline with two buttons is the default hero. A subject, a film or a type treatment is a decision; the hero section guide covers the options.
• Sections without a job. "Features, testimonials, pricing" gets you three card grids. Give each block one job and one interaction, in an order that argues; the landing page structure guide has the sequence.
• Treating the share link as the website. The artifact lives on claude.ai. Export it, host it and give it your own metadata.
• Losing the tokens between threads. A new chat tab without the values tends to drift back toward the defaults.

Start with Vesperion on the Free plan#

Open Vesperion and copy its prompt; it is free with a free Thanor account, and the Design template is on Claude's Free plan, so the whole path from prompt to exported page costs nothing.

Start a conversation, choose Design, paste the prompt whole and let Claude build it. Refine with two or three inline comments, export the standalone HTML and put it on a host. Then compare your page against the live preview and check the values arrived. When you want a page for a real project, browse the library for the one that fits; the paid designs and the MCP come with the plans on the pricing page.