How to Build a Website with Claude | Artifacts and Claude Code
When you search for "how to build a website with Claude," the first thing you face is choosing the right entry point. There's Artifacts, which you can use right from the claude.ai chat interface; Claude Code, which lets you run full-scale frontend projects from the terminal; and Vision input, where you hand Claude a screenshot and it implements your design. Even though all of these "build a site," the use cases and output formats are completely different. This article, based on official Anthropic information, organizes the three approaches and outlines the workflow from development through deployment.
There are three main routes to building a website with Claude. Artifacts is the quick route that lets you instantly preview and share HTML / React components right from the claude.ai chat interface — available on all plans (Free / Pro / Max / Team / Enterprise). It's ideal for prototypes and first drafts of landing pages.
For serious site development, Claude Code takes center stage. You invoke Claude via IDE extensions for VS Code or JetBrains, or from the terminal CLI, and can delegate changes spanning multiple files consistently across frameworks like Next.js, React, Vite, and Astro. It covers everything from git integration and test execution to dependency resolution, supporting the full cycle from local development through pre-deployment verification.
If you want to start from a design, use Vision input (image attachment). The workflow of passing Figma screenshots or hand-drawn wireframes to Claude and converting them to HTML / Tailwind / React is becoming a standard practice. For finished work: Artifacts let you share via a "Publish" link, while full-scale sites follow the standard route of deploying to Vercel / Cloudflare Pages / Netlify, or your own server.
目次 (13)
- Three Approaches to Building a Website with Claude
- Try In-Browser Preview with Artifacts
- Serious Frontend Development with Claude Code
- Design-to-Implementation Workflow (Vision Input)
- Step 1: Pass a Screenshot to Claude
- Step 2: Review the Rough Implementation in Artifacts
- Step 3: Integrate into Your Project with Claude Code
- Step 4: Local Preview / Mobile Verification
- Step 5: Deploy
- Deployment Targets and Publishing Options
- Pricing Plans and Best Fits
- Frequently Asked Questions
- Summary
Three Approaches to Building a Website with Claude
Website development with Claude falls into three layers depending on the scale of your needs.
- Artifacts (within claude.ai) — Ask in the chat interface, "Make me a landing page," and HTML / React is rendered in the right pane where you can preview, edit, and share it on the spot. Anthropic defines Artifacts as a dedicated window for content that is "significant and self-contained, typically over 15 lines," listing HTML sites, React components, SVGs, and documents as prime examples (source: Anthropic Help Center - Artifacts).
- Claude Code (IDE / Terminal) — Invoke Claude via VS Code / JetBrains extensions or the terminal CLI to build full-scale projects with Next.js, React, Vite, and more. Claude understands and rewrites changes across multiple files, and can execute git, test, and build commands.
- API + Custom Pipeline — An approach where you generate HTML / code from the Messages API and integrate it into your own app or static site generator. Used for batch tasks like mass-producing articles, auto-generating landing pages, and CMS integrations.
The least friction-prone path is to start with Artifacts to build a "working HTML" page and get a feel for the process, then migrate to Claude Code when you're ready to grow it into a real site.
Try In-Browser Preview with Artifacts
Artifacts launched in preview in June 2024 and became generally available (GA) to all plans on August 27, 2024 (source: Anthropic Blog - Artifacts). The usage is simple: just write something like "Create a landing page for [X] in HTML / Tailwind" in the claude.ai chat. An Artifact window opens on the right with an instant preview.
Key features include:
- Editing and Iteration — You can make incremental revisions with natural language, like "move the hero image to the top" or "use two CTA buttons." You can also go back through version history to try alternative designs.
- View / Copy / Download Code — Export the raw HTML / JSX from the menu in the upper-right corner of the window.
- Automatic Error Fixing — If a JS error occurs, the "Try fixing with Claude" button passes the error information to Claude for a fix.
- Persistent Storage (Pro and above) — AI-powered shared apps can be configured with up to 20MB of persistent storage, both personal and shared.
Artifacts itself is available on the Free plan. Note that MCP (Model Context Protocol) refers to the standard protocol that allows Claude to connect with external tools and services. MCP integrations and persistent storage require Pro / Max / Team / Enterprise (for more on external integrations, see the related article Webflow MCP for Claude).
Serious Frontend Development with Claude Code
Claude Code comes into play when you're moving beyond a single landing page into real products built with Next.js + Tailwind + Supabase. On Anthropic's official page, Claude Code is described as "a development tool that can read and edit code on your local machine, run tests, and integrate with git workflows and deployment via the command line" (source: Claude Code Product Page).
The capabilities that directly impact website development include:
- Multi-File Coordination — Reflects changes across
pages/,components/, andstyles/. When you add a new page, it generates a diff that covers routing, navigation, and type definitions together. - Local Execution and Verification — Starts the dev server with
npm run devand Claude can drive the loop of browser check → fix → rebuild. - Git / Deployment Integration — Branch creation, commits, and PR creation all completed from the terminal. Clauder Navi, which runs this very article, operates on a pipeline where Claude Code handles everything from build to rsync to Xserver deployment.
In addition to IDE extensions for VS Code and JetBrains, the terminal CLI alone is also a recommended usage pattern, supporting remote server work over SSH and integration into CI/CD pipelines.
Design-to-Implementation Workflow (Vision Input)
The need to "turn a Figma design into HTML" or "spin up a prototype from a hand-drawn wireframe" can be addressed with Claude's Vision input (image attachment). The Anthropic API provides a Files API for uploading PDFs, images, and text files into context, and you can also drag and drop images directly in Claude.ai and Claude Desktop (source: Claude Platform - Features Overview).
Here is a practical workflow:
Step 1: Pass a Screenshot to Claude
Export a Figma frame as an image, or take a full-page screenshot of a competitor's site and attach it to Claude. Ask: "Recreate this layout in Tailwind + React."
Step 2: Review the Rough Implementation in Artifacts
Check the returned JSX in the Artifact preview and use incremental instructions like "center the hero image" or "increase the font size." Checking the appearance at 375px width (mobile) at the same time reduces mistakes.
Step 3: Integrate into Your Project with Claude Code
Paste the finished HTML / JSX from the Artifact into Claude Code and instruct it: "Integrate this into app/page.tsx and align the nav and footer to the existing shared components." It will integrate in a way that follows your existing project's conventions.
Step 4: Local Preview / Mobile Verification
Start with npm run dev and verify functionality on both PC and iPhone. Visually confirm that design tokens (colors, spacing, typography) are consistent with the existing site.
Step 5: Deploy
Push the finished version to Vercel / Cloudflare Pages / Netlify / your own server. With GitHub integration, production deployment proceeds all the way through the moment Claude Code runs git push.
Deployment Targets and Publishing Options
Where you host the site you built with Claude comes down to three options based on scale.
- Publish Artifacts to Share — Available from the Free plan. The generated HTML / React Artifact is given a unique URL and can be published to the community. For prototypes, standalone landing pages, and single portfolio pages, this is all you need (source: Anthropic Blog - Artifacts GA Announcement).
- Vercel / Cloudflare Pages / Netlify — The standard choice for full-scale sites built with Next.js, Astro, or Vite. Push to GitHub for automatic builds and deployments, with custom domain assignment and PR previews included out of the box. If Claude Code handles everything up to
git push, operations become fully automated. - Own Server (Xserver / VPS / EC2, etc.) — Better suited for sites with Laravel or PHP integration, or CMS functionality. The practical pattern is deploying to production from Claude Code via SSH / rsync. Clauder Navi uses this same type of setup.
Pricing Plans and Best Fits
The cost of building websites with Claude varies greatly depending on use case.
- Free — Can Publish / share Artifacts. Daily message limits make it realistic for rough prototypes and single-page LP experiments.
- Pro ($20/month) — Enables Artifacts persistent storage and MCP integrations. The main plan for individual developers and freelancers.
- Max ($100 / $200/month) — 5x / 20x the usage of Pro. For those who use Claude Code heavily every day.
- Team / Enterprise — Collaborative editing of Artifacts within Projects. For teams building and maintaining a site together.
Claude Code is included in Pro / Max subscriptions, so it can be used separately from API usage-based billing. If your monthly usage is high, the Max plan will often cost less than paying per API call.
Frequently Asked Questions
Q. Can I use websites I build with Claude commercially? Yes. The copyright and terms of use for generated HTML / code are governed by Anthropic's Terms of Service, but there are no restrictions on incorporating generated code into commercial products. Note that image generation is a separate matter (Claude alone does not generate images), so hero images and the like need to be sourced separately.
Q. Can it be done entirely without code? For a single-page LP using Artifacts, it's possible to go from completion to Publish without writing a single line of code. However, assigning a custom domain, building a multi-page structure, or integrating external databases will require at minimum a basic understanding of frontend concepts and the ability to use Claude Code and GitHub.
Q. What about integrating with WordPress or Webflow? Webflow provides an official MCP server, allowing you to operate its CMS and Designer in natural language from Claude Desktop / Claude Code (see: Webflow MCP for Claude). WordPress has multiple third-party MCP integrations, making it possible to draft articles or manage CPTs from Claude.
Summary
The paths to building a website with Claude can be organized into three: the lightweight route of quickly trying things in Artifacts, the development route of building seriously with Claude Code, and the design-first route using Vision. The well-worn path with the least friction and lowest learning curve is to get your first page running in Artifacts, then migrate to Claude Code + Vercel / Cloudflare Pages as your project grows. For integrating with existing CMSes like Webflow or WordPress, MCP integration is the practical solution.
