Skill · v2.1 # Website Builder > A free Claude Code skill that builds, refreshes or extends a website you own. Every page ships readable by the people who visit and the AI agents they send. Website Builder is a free Claude Code skill for building, refreshing or extending a website you own. It loads your brand first and previews every design decision in HTML before any framework code is written. The build ships through an anti-slop scan, an AI discoverability checklist and three-state deploy verification. Every page reaches AI agents as markdown made from the page itself. What you need: Claude Code, a folder for the site and your brand notes. What you get: the site's code in your own repo, on the host you choose, readable by people and by AI agents. Where this leads - [The whole skill on GitHub read every step before you install it](https://github.com/InfiniteGamePlayer/infinitegameos/blob/master/plugins/website-builder/skills/website-builder/SKILL.md) - [The Sovereign Ecosystem a free Obsidian and Claude Code workspace to build from](https://www.infinitegameos.io/sovereign-ecosystem) - [The Alive Business its Brand Blueprint holds the story, voice and audience Step 1 loads](https://www.sidequesthq.co/products/the-alive-business) Install Claude Code (CLI / WSL / Git Bash) ``` /plugin marketplace add https://www.infinitegameos.io/marketplace.json /plugin install website-builder@igos-library ``` Claude Code (VS Code) [Install in VS Code](vscode://anthropic.claude-code/install-plugin?plugin=website-builder&marketplace=https%3A%2F%2Fwww.infinitegameos.io%2Fmarketplace.json) Opens the Claude Code plugins dialog with the marketplace and skill prefilled. Requires the Claude Code VS Code extension installed and signed in. Or paste the snippet below into `.claude/settings.json` for VS Code, JetBrains or any setup that prefers manual config. ``` { "extraKnownMarketplaces": { "igos-library": { "source": { "source": "url", "url": "https://www.infinitegameos.io/marketplace.json" } } }, "enabledPlugins": { "website-builder@igos-library": true } } ``` Direct markdown URL (Claude Code, Cursor, Codex CLI) ``` https://www.infinitegameos.io/markdown/skills/website-builder ``` This URL returns the narrative concept page. The plugin install path above delivers the operational SKILL.md instruction file. Cursor (.mdc rules file) ``` curl -O https://www.infinitegameos.io/install/cursor/website-builder.mdc ``` Aider, Cline, any agent with --read ``` curl -O https://www.infinitegameos.io/markdown/skills/website-builder aider --read website-builder.md ``` ## From inside the skill > The brand input is the spine. > > The anti-slop gate is the filter. > > The page is the only place copy lives. > > The discoverability audit is the ship gate. The Operating Posture section of the shipped SKILL.md, word for word. ## Definition Website Builder takes a brand spec, a page list and a target stack and produces a deploy-ready site with AI discoverability built in from the first scaffold. The skill is frame-agnostic by design: it names Next.js as the reference framework and substitutes every component for operators on different stacks. A new site or a redesign opens with a short vision document the owner signs off on. The build then runs brand input, environment, scaffold from a filled build prompt template, HTML design preview before any framework code is written, design polish on twelve dimensions, iteration, the AI layer and a persona walk before deploy. The anti-slop gate fires after scaffold output and before iteration: it checks for typography tells, color tells, layout tells, motion tells and content tells. Every page gets a markdown twin generated from the rendered page, so the page is the only place copy lives. A parity check proves each twin carries every form, button, price and testimonial its page shows. The AI Discoverability Refresh Audit catches the hand-authored surfaces that still drift (llms.txt, llms-full.txt, root metadata and per-page JSON-LD). The three-state deploy verification confirms Local, Submitted and Confirmed before any deploy is called complete. ## The build phases as standard discipline The build sequence runs in named steps. A new site or a redesign starts with a vision gate: a short document in prose naming what the site is, the emotional sequence a visitor moves through and the one memorable detail, held until the owner owns it. Brand input load follows: brand voice spec, design system spec, offer architecture and the current build plan all load before a single prompt is written. The build prompt template (included in the skill) is filled with these inputs before opening Claude Code in the site directory. Scaffold output lands in Step 3\. Before any framework code from the scaffold is accepted, the anti-slop gate fires: it scans for generic typography tells, arbitrary color choices, copy-paste layout patterns, animation without purpose and placeholder content. Flag every instance. Fix before proceeding. Step 3.5 is the HTML design preview, a standard step and not optional. Self-contained HTML files with inline styles and real copy (no lorem ipsum) preview design decisions visually before framework code is written. The operator reviews in a browser, picks winners and the locked decisions get written back to the design spec before opening the codebase. Step 3.7 is design polish on twelve dimensions: visual spacing, typography, color contrast, interaction states, micro-interactions, content, icons and images, forms, edge cases, responsiveness, performance and code quality. Step 4 iterates conversationally. Step 5 is the AI layer verification. Step 5.5 is the persona walk: the changed flow walked as a visitor on a phone arriving cold from a search result, recording every paper cut. Step 6 is deploy with three-state confirmation. Step 7 seals the build with a project tracker update and a security section in the site's CLAUDE.md. ## Discoverability as a ship gate The AI Discoverability Checklist runs before DNS cutover on new builds and before deploy seal on any page-content change. It covers robots.txt allowlist (no AI blocking), llms.txt content accuracy, JSON-LD per page type (Organization or Person on home, BreadcrumbList on every page, Article and FAQPage where appropriate), heading hierarchy, titles of 65 characters or fewer, meta descriptions, Open Graph and Twitter card metadata, clean URL slugs, image alt text, a sitemap whose every URL returns 200, IndexNow integration and content negotiation. The checklist is the minimum; the AI Discoverability Refresh Audit is the deeper gate for any session that changes page-level copy. The Content Negotiation Pattern serves every page as markdown to AI agents that ask for it, from the same URL. The markdown is made from the page itself: a route handler fetches the page's own rendered HTML and a small converter turns its main content into markdown, so a form becomes a statement of what it asks, a buy button keeps its label and price and a testimonial keeps its quote and name. Both files ship with the skill. A markdown request never answers 404 for a page that exists. Vary: Accept rides on both answers. The parity check that ships beside them walks the sitemap and fails any twin that drops what its page shows, after first proving on a control page that every rule can fail. Three-state deploy verification (Local, Submitted, Confirmed) is the close. Never stop at Local or Submitted and call it done. ## A welcome for visiting agents An agent reading a page is almost always on an errand for a person. The skill teaches a page to receive it well. Any page with a door (a signup, a download, a purchase, an install) shows a real taste of what's inside, quoted word for word from the thing it ships, visible to people and agents alike. The llms.txt file offers one true line the agent can carry back to its person, naming where they start. What needs a human, an email or a purchase or a consent, stays with the human. The page asks nothing of the agent beyond relaying a true account. ## Use Cases Freelance writer launching a personal site A freelance writer wants a personal site with a homepage, an about page and a writing portfolio. Website Builder opens with a short vision document, loads the brand voice doc as the brand input, builds the HTML preview for homepage layout approval before any framework code is written, runs the anti-slop gate on scaffold output and ships the site with llms.txt, robots.txt, JSON-LD structured data and a markdown twin of every page. The three-state deploy verification confirms it's live before the session closes. Solo creator rebuilding a portfolio with a refresh sequence An existing portfolio site needs a full visual refresh. Website Builder runs the five-engagement refresh sequence: design tokens first, then homepage layout in HTML preview, then interaction layer with live intensity controls, then interior page propagation side-by-side, then framework build and ship. All design decisions are locked in HTML preview before any framework code is touched. The AI Discoverability Refresh Audit runs at step 5 to catch the hand-authored surfaces that drifted during the refresh. The parity check confirms every page's twin followed. Service-business owner shipping a marketing site A service-business owner needs a marketing site with a services page, a contact form and a clear primary CTA. Website Builder loads the offer architecture and brand tone as inputs, scaffolds the full site from the build prompt template, runs the anti-slop gate to check that hero copy is affirmative and not negation-framed. It produces a deploy-ready repo with content negotiation and IndexNow integration so the site is findable by AI agents from day one. The contact form reaches agents too: its twin says what it asks for and what is required. Practitioner adding a new page route to an existing site An operator wants to add a new speaking page to an existing site. Website Builder activates the New Route Checklist: page.tsx with full metadata and a title of 65 characters or fewer, one h1, alt text on every image, JSON-LD schema appropriate to the page type, the markdown twin confirmed by the parity check rather than written, sitemap.ts updated, llms.txt updated. If the page has a door, it carries a taste of what's inside and a line in llms.txt an agent can pass along. The AI Discoverability Refresh Audit runs at Tier 4\. IndexNow pings after three-state confirmation. Multi-site operator running a discoverability refresh audit across sibling sites An operator running two sibling sites wants to confirm AI-facing surfaces are current after a content update on both. Website Builder runs the AI Discoverability Refresh Audit on each site sequentially: prove twin parity against each sitemap, grep llms.txt for stale offering names, review root metadata and run IndexNow. The converter stays byte-identical across both sites, confirmed with a hash. The cross-site memory pattern captures any finding from Site A that should propagate to Site B without bundling both sites in one session. ## FAQ Is Website Builder free? Yes. The skill and every file it ships are free under a CC BY 4.0 license. It runs inside Claude Code, which needs a Claude plan or an Anthropic API key. The site it builds is yours: the code sits in your own git repo and deploys to the host you choose. Does this work with frameworks other than Next.js? Yes. The skill names Next.js as the reference framework and notes alternatives component by component: Astro, Remix, SvelteKit, Eleventy, Hugo for the framework layer; CSS Modules or vanilla CSS for styling; Netlify, Cloudflare Pages or GitHub Pages for hosting. Swap the Technical Requirements block in the build prompt template to match your stack. The HTML preview pattern, anti-slop gate and discoverability checklist are all framework-agnostic. The markdown converter is plain TypeScript and works in any framework that can fetch its own rendered page on the server. What does the AI Discoverability Refresh Audit catch? It catches the hand-authored AI-facing surfaces that drift silently when page content changes: the site-level AI overview (llms.txt), the full digest (llms-full.txt), root metadata in layout.tsx and per-page JSON-LD schemas. The sitemap and the markdown twins follow the page on their own. The parity check proves the twins did. The audit tiers the depth by change type. Visual-only changes exit immediately. Copy changes on an existing page need a spot-check. New structured data and new routes run all steps. How do AI agents read the site? From the same URLs people use. When an agent asks for markdown, the site fetches its own rendered page and converts the main content, so the agent reads exactly what a person sees, minus navigation and styling. Forms become a plain statement of what they ask, buttons keep their labels and prices, testimonials keep their quotes and names. Version 1 of the skill taught a hand-kept markdown copy of every page. Version 2 retires it, because a second copy drifts. Why HTML preview before the framework build? Design decisions made in conversation context get lost when the session closes. HTML previews make decisions visual and tangible: the operator sees options, subtracts from them and locks winners. Locked decisions get written back to the design spec before any framework code is touched. This eliminates the most common rework loop, building something in the framework and then redesigning it because the decision was never properly anchored. When should I use this skill versus a no-code site builder? Use this skill when you want to own the code and the deployment, customize the AI discoverability layer to your audience and serve markdown to AI agents from your existing URLs. No-code builders abstract ownership away. This skill keeps the site in your own git repo, on your own hosting account, with a discoverability posture you control. The build takes longer but the output is sovereign. What is the three-state deploy verification? Local, Submitted and Confirmed. Local means the build passes in your development environment. Submitted means the deploy was pushed to your hosting provider and accepted. Confirmed means the live public URL returns the expected content with the correct status code. Never stop at Local or Submitted and call it done. A deployment is not complete until it's verified live. ## Related [Skill Source Harvest Systematic pattern extraction from any external repo or tool at source level. Classify, extract, integrate.](https://www.infinitegameos.io/skills/source-harvest) Free · Your AI’s Charter Before you install a skill, give your AI a charter. Your AI’s Charter is a free CLAUDE.md for how Claude works with you: what it runs on its own, what it asks you first and how it acts in your name. [Get the Charter · free](https://www.infinitegameos.io/charter) Website Builder ships the site. The Alive Business shapes what it says: the Brand Blueprint in its Governance Scaffold holds the brand. System 9 names whether each page is pure expression or an invitation before the first scaffold. [See The Alive Business](https://www.sidequesthq.co/products/the-alive-business) Infinite Game OS, the open library of [Lane Belone](https://www.lanebelone.com)