What does it actually mean to use Claude as a website builder?
Claude is a large language model that happens to be exceptionally capable at writing code. When you describe a webpage. Its sections, its colors, its content. Claude produces clean, semantic HTML and CSS. You are not learning to code. You are learning to direct.
The mental model that works best: think of Claude as a skilled web developer who works purely from written instructions. Your job is to be a clear, specific client. The clearer your instructions, the better your output. Vague instructions produce generic results. Specific instructions. "use a warm neutral background (#f5f2ee), a serif headline font, and a two-column layout with a sticky sidebar". Produce something that looks and feels intentional.
There are two main ways to use Claude for website building. The first is the chat interface at claude.ai. You paste prompts, Claude generates code, you copy it into a file manually. This works for simple single-page projects. The second is Claude Code, Anthropic's terminal-based interface, which reads your project folder and writes files directly. For a multi-page authority website, Claude Code is the only practical option. It maintains full context across every file in your project.
How do you start a website build with Claude from nothing?
The sequence that works is: brief first, structure second, design system third, content pages fourth.
Step 1: Write your project brief
Before you open Claude, write a one-page document that describes your website. Include: who you are, who the site is for, what the site does, your brand colors (exact hex codes if you have them), your typography preferences, your key pages, and any specific constraints (pure HTML/CSS/JS, no framework, no CMS). This brief becomes the context you give Claude at the start of every session.
Step 2: Build the global CSS file first
Give Claude your brief and ask it to create a global CSS file with design tokens. CSS custom properties that define your colors, typography, spacing, and component styles. Once this file exists, every subsequent page can reference it with a single <link> tag, and your visual consistency is guaranteed without repeating style instructions page by page.
Step 3: Build the homepage as your template
Build your homepage with full attention to every section and component. This page becomes your structural reference. When you build subsequent pages, Claude will match the patterns it established here. Corrections made to the homepage cascade naturally through later builds.
What makes a good prompt for website building?
Good prompts for website building share four qualities: they are specific about structure, specific about content, specific about design, and specific about constraints.
A weak prompt: "Build me an about page."
A strong prompt: "Build an about page for vibecodeyourleads.com using the exact same nav, footer, and global.css as the homepage. The page should have these sections in order: (1) a hero with a short headline and 2-paragraph intro, (2) Cindy's origin story in 4 paragraphs, (3) a philosophy block with 3 pull quotes, (4) a CTA block. Use the design tokens from global.css. Warm neutral backgrounds for alternating sections, coral (#ff7f50) for accent elements. All content must be in static HTML. No JavaScript-injected content."
The principle: Claude works best when you eliminate ambiguity. Anything you leave open, Claude will fill in with a reasonable default. Which may or may not match what you wanted. The more you specify, the less you have to correct.
How do you maintain context across multiple pages and sessions?
Context management is the most important skill in Vibe Coding. Claude's context window is large but not infinite. For a big website build across many sessions, you need a system.
The approach that works: maintain a project brief document. A single file that describes your site architecture, your design system, your component patterns, and any decisions made in previous sessions. At the start of each new session, give Claude this document. Include the instruction: "Read this before building anything. These are the ground rules for every page on this site."
Also reference existing files explicitly. Tell Claude: "The nav, footer, and global styles are established in index.html and global.css. Match those exactly on every new page." When Claude can see a reference file, it will mirror it far more accurately than when it is working from description alone.
For projects using Claude Code, a CLAUDE.md file in the project root is the most elegant solution. Claude Code reads this file automatically at session start, so your ground rules are always present without manual re-entry.
What should you never let Claude do when building for AI visibility?
The most critical constraint for any website built for AI recommendation: all content must exist in static HTML before any JavaScript runs. AI crawlers. GPTBot, Claude-Web, PerplexityBot. Do not execute JavaScript. If your content is injected by JS, it is invisible to them. Your site exists for humans but is invisible to AI.
Claude will sometimes default to JavaScript-based approaches for dynamic elements. Tabs, accordions, lazy-loaded content, schema injected by script. Each of these creates an AI visibility problem. Explicitly instruct Claude at the start of every session:
- All body copy and headings must be in raw HTML
- All schema JSON-LD must be in
<script type="application/ld+json"> tags in the <head>
- FAQ accordions must use native HTML
<details>/<summary> elements, not JavaScript toggles
- No content may be loaded after page render via fetch or AJAX
This is not a limitation. It is a design choice that makes your site simultaneously faster, more accessible, and more AI-readable. Pure HTML/CSS sites load faster, work without JavaScript, and are fully visible to every crawler.
The VCYL Perspective
This site was built using Claude Code. Every page. All 30+ of them in the Phase 1 architecture. Was generated through a conversation. I wrote the brief. I described the design system. I gave Claude the ground rules. Claude wrote the HTML. I reviewed, refined, and redirected. The whole architecture went up in a matter of days, not months.
What struck me most was how much my domain expertise made me a better director. I knew what the site needed to accomplish. I knew what the audience needed to feel. I knew how the navigation should flow and where the CTAs should land. A developer hired from the outside would have needed weeks of briefing to get there. I already knew. I just needed Claude to execute.
This is the core insight behind Vibe Coding and the whole Authority Directory Method: the expert is the strategic asset. The technology is the leverage. When you stop waiting for a developer to find time in their schedule and start directing an AI that is available instantly, something shifts. You stop feeling dependent and start feeling capable. That shift matters more than any individual page Claude builds for you.
The practical advice I give every client who asks where to start: write the brief before you open Claude. Not a long one. One page is enough. Describe your audience, your palette, your structure, your rules. That document becomes the project's source of truth. Every session starts from it. The site that emerges will be coherent because the brief was coherent.
