# How to build a website with Claude Code, step by step > Build a small website with Claude Code: write the spec, plan it, check each page, make the Arabic pages right-to-left, deploy, and see the cost on a key. Updated: 2026-11-02 To build a website with Claude Code, describe the site in plain words, let Claude turn that into a plan, approve the plan, then build one page at a time and check each page before moving on. When it works, you deploy it with your host's own tools, and Claude can run those for you too. ## What do you need before you start? Three things: Claude Code on your machine, an empty folder, and the content only you know. Claude can't guess your prices, opening hours, phone number or tone, so write them down and put your logo, photos and colours in the folder before the first prompt. Start a git repository too. Claude Code's checkpoints cover only the files Claude edits with its own tools and don't replace git, so commit after each working page: ```bash mkdir my-site && cd my-site git init claude ``` ## How do you describe the site to Claude? Not sure what you want yet? Let Claude interview you and write the answers to a spec, as Anthropic's best-practices page suggests: ```text I want a small website for my bakery: home, menu, about and contact pages, in Arabic and English. Interview me until you could write the spec, then write it to SPEC.md. ``` Claude asks multiple-choice questions until the answers add up to a spec. Then run `/clear` and build from `SPEC.md` in a fresh session, with a clean context and a written definition of done. If you have a design you like, paste a screenshot with `Ctrl+V` (`Alt+V` on Windows and WSL), drag the image into the window, or give Claude its path, and ask it to match the layout. If you want more than the bare minimum, say `be ambitious` and list what you mean, such as the mobile layout, empty states and keyboard navigation; otherwise Claude tends to build the smallest thing that satisfies the request. ## How do you plan the build in plan mode? Plan mode lets Claude read, explore and propose a plan without editing your files. Press `Shift+Tab` until the status bar shows `⏸ plan mode on`, start with `claude --permission-mode plan`, or put `/plan` in front of a single prompt: ```text /plan Read SPEC.md and plan the build: the stack, the folder layout, one header and footer for every page, and how you will check each page. No new libraries unless the spec needs them. ``` When the plan is ready, **Yes, and use auto mode** approves it and lets a classifier check risky actions instead of asking you (where auto mode isn't available, it reads **Yes, auto-accept edits**). **Yes, manually approve edits** shows you each change, and `Ctrl+G` opens the plan in your text editor. Read the plan before you approve it: it is the cheapest moment to change your mind, which is why Anthropic's cost guide recommends plan mode for complex tasks. ## How do you build and check each page? Give each page its own prompt, name the files involved, and say what done looks like: ```text Build the menu page from SPEC.md, using the same header and footer as index.html. Mobile first, no new libraries. Tell me the command you ran to check it and its output. ``` Claude stops when the work looks done, so give it a check that passes or fails, such as a build's exit code, a linter or a screenshot next to the mockup, and ask for the command and its output rather than "it works". When Claude says a page is done, `/verify` has it build and run the site and look at the result, and `/run` launches the site so you see the change. Both work without setup. With the Claude in Chrome extension and `claude --chrome`, Claude can open your local site, read console errors and compare a page with the mockup. That needs a direct Anthropic plan signed in with `/login`; on an API key it stays off even with `--chrome`, so paste the screenshot in yourself. If Claude drifts, press `Esc`, and `/rewind` rolls the code, the conversation or both back to an earlier prompt. [Claude Code commands](https://5abeer.ai/en/guides/claude-code-commands) covers the rest. Once the stack is settled, run `/init` for a starting `CLAUDE.md` and cut it down to the build and check commands and the rules Claude can't see in the code ([CLAUDE.md guide](https://5abeer.ai/en/guides/claude-md-guide)). ## How do you make the Arabic pages right-to-left? Ask for this once, early in the build: ```text Set lang="ar" or lang="en" on every page's tag, and dir="rtl" on the Arabic ones. Don't set direction in CSS; use logical properties such as margin-inline-start instead of left and right. Give every page hreflang links to itself and to its twin in the other language. ``` The W3C recommends setting direction with `dir` on the `html` tag rather than in CSS, and declaring `lang` too, since one doesn't imply the other. Google ignores `hreflang` tags unless the two pages point to each other. Put both rules in `CLAUDE.md` so new pages follow them, and check each Arabic page at phone width before you commit. ## How do you deploy the site? A site made of HTML, CSS and JavaScript is a folder of static files any static host can serve; a framework adds a build step that writes them to an output folder. Settle the host in the plan and put its deploy command in `CLAUDE.md`. Claude Code runs your host's command-line tool once it is installed and signed in, and for a tool it hasn't seen, pointing it at `--help` is enough. Keep the deploy in your hands. Auto mode's classifier blocks production deploys by default, and Manual mode asks before most edits and shell commands. To make the deploy a step only you start, save it as a skill with `disable-model-invocation: true`, which runs only when you type `/deploy`, as the [skills guide](https://5abeer.ai/en/guides/claude-code-skills) explains: ```text --- name: deploy description: Deploy the site to production. disable-model-invocation: true --- 1. Check that the working tree is clean and on main. If not, stop and ask. 2. Run the build and stop if it fails. 3. Run the deploy command from CLAUDE.md, then open the live URL and report what you see. ``` Keep keys and passwords out of the front-end code: everything a browser downloads is public. ## How much does it cost to build a site with Claude Code? On an API key, you pay for the tokens each request sends and receives. Every request carries the whole conversation, and the repeated part is cached at a lower rate, but on a key the cache lasts about five minutes, so the first prompt after a longer break pays full price again. As an example, not a measurement, a month of evening sessions on a small site that sends ten million tokens and gets six hundred thousand back, on [`claude-sonnet-5.5`](https://5abeer.ai/en/models/claude-sonnet-5.5): Example: 10,000,000 input tokens and 600,000 output tokens on Claude Sonnet 5.5 (`claude-sonnet-5.5`) cost $7.80 at our price against $26.00 at the official price (70% lower). Official price checked October 19, 2026. Your numbers depend on the site and how long your sessions run. `/usage` estimates the session's cost at Anthropic's list price, so on a 5abeer key check what was deducted on [Track your usage](https://5abeer.ai/en/docs/start/pricing.md#usage). To keep the bill down: `/clear` between unrelated tasks, plan mode before big changes, Sonnet for routine pages with a switch to [`claude-opus-5.5`](https://5abeer.ai/en/models/claude-opus-5.5) through `/model` only for hard problems, and a lower `/effort` for quick back-and-forth changes. ## Build your site with Claude Code through 5abeer 5abeer is an independent service, not affiliated with Anthropic. Its API follows the Anthropic Messages format, so Claude Code works with it as it ships, and both routes cost less than the official price. Plan mode, `/verify`, skills and `CLAUDE.md` all run inside Claude Code on your machine, so they work the same on a 5abeer key; only the base URL and key change. **With an API key:** create a key for Claude models, then set the base URL and key in Claude Code's settings: | Format | Base URL | Key header | | --- | --- | --- | | OpenAI | `https://api.5abeer.ai/v1` | `Authorization: Bearer ` | | Anthropic | `https://api.5abeer.ai` | `x-api-key: ` | | Gemini | `https://api.5abeer.ai/v1beta` | `x-goog-api-key: ` | `~/.claude/settings.json` ```json { "env": { "ANTHROPIC_BASE_URL": "https://api.5abeer.ai", "ANTHROPIC_AUTH_TOKEN": "YOUR_5ABEER_API_KEY", "ANTHROPIC_MODEL": "claude-sonnet-5.5" } } ``` Every request is deducted from your balance by model and token count, and you control each key with a spend limit, an expiry date and an IP allow-list. The full setup is in [Claude Code setup](https://5abeer.ai/en/docs/apps/claude-code.md), and prices are on [Claude API](https://5abeer.ai/en/api/claude). If the site itself calls a model, for example a chat box on the contact page, send that request from your server, never from the browser, with a separate key and its own spend limit. [Add an AI chatbot to your website](https://5abeer.ai/en/guides/website-chatbot-api) walks through the server code. **With a plan:** the 5abeer AI app turns Claude Code on for your plan in one click, with no key and no files to edit. The plan runs with a 5-hour limit and a weekly limit, as in [Subscription limits](https://5abeer.ai/en/docs/subscriptions/limits.md). Plans are for the supported apps, and to use the models from your own code you need an API key. See [What each plan runs](https://5abeer.ai/en/docs/subscriptions/plan-apps.md#claude-code) and the [pricing page](https://5abeer.ai/en/pricing). ## FAQ ### Can Claude Code build a whole website on its own? It can write every file, run the site and fix what breaks, but it can't know your content, your brand or what you count as done. Give it a spec and a check it can run, and it does most of the rest. ### Can I build a site this way without knowing how to code? Yes, for a small site. You supply the content, read the plan and look at each page in the browser. Before you approve the deploy, ask Claude to explain any file you don't understand. ### Which framework should I use? For a small site with no preference, ask for plain HTML, CSS and JavaScript: no build step, and any static host can serve it. If you want a particular framework, say so in the first prompt. ### Can I give Claude a design to copy? Yes. Paste, drag in or give the path of as many screenshots as you need, and ask Claude to match the layout and colours. ### Does the site keep working if I stop using Claude Code? Yes. The site is ordinary files in your folder and git history, served by your host. You need Claude Code, on a plan or a key, only to keep changing it, unless the site calls a model itself: that code needs an API key with balance. ## Sources Checked on 2 November 2026. - [Claude Code docs: Best practices for Claude Code](https://code.claude.com/docs/en/best-practices) - [Claude Code docs: Common workflows](https://code.claude.com/docs/en/common-workflows) - [Claude Code docs: Choose a permission mode](https://code.claude.com/docs/en/permission-modes) - [Claude Code docs: Use Claude Code with Chrome](https://code.claude.com/docs/en/chrome) - [Claude Code docs: Manage costs effectively](https://code.claude.com/docs/en/costs) - [Claude Code docs: Extend Claude with skills](https://code.claude.com/docs/en/skills) - [W3C: Structural markup and right-to-left text in HTML](https://www.w3.org/International/questions/qa-html-dir) - [Google Search Central: Tell Google about localized versions of your page](https://developers.google.com/search/docs/specialty/international/localized-versions) ## Get started To compare what Claude Code costs on a plan and on an API key, read [The cheapest way to use Claude Code](https://5abeer.ai/en/guides/claude-code-cheapest-way), or set up Claude Code now.