An AI model to write website code: from mockup to a working page

A business-card site, a landing page or a page with a calculator are tasks that are convenient to hand to a model, provided you do not ask it to "make it nice" and walk away. An AI model that writes website code works as an executor: you phrase the task, it creates the files, you open the result in a browser and send back remarks. Below is a workflow for HTML, CSS and JavaScript, an example brief and an API cost estimate.

What to use: a chat or an agent

There are two ways, and the choice depends on the size of the task.

• A chat. You ask for code, copy it into files and run it. For one page and one script this is enough, but copying is manual and the model does not see the other files.
• An agent in the editor or terminal. Claude Code↗ or Cursor↗ create and edit files in the project folder themselves, run commands and read errors. For a multi-file site this is more convenient.

If you are unsure which to pick, start with the environment you already use: if you live in the terminal, take Claude Code; if in an editor, Cursor. Both only need the gateway address and a key, as described in the documentation.

Step 1. Prepare the project

Create an empty folder and describe the context in it. A minimal structure for a static site:

my-site/
  index.html
  styles.css
  script.js
  assets/

A static site needs no bundlers or frameworks: HTML, CSS and a bit of JS open with a double click. If you later need Next.js or Astro, ask the agent to migrate the page once the structure is clear.

Put a short rules file in the root (for Claude Code it is CLAUDE.md, more in how to write CLAUDE.md↗):

Project: a one-page site for a yoga studio.
Stack: plain HTML, CSS, JavaScript, no libraries.
Rules: semantic markup, responsive from 360px, system fonts,
palette in :root variables, no external scripts.
Do not add new files unless necessary.

Step 2. Set a task that can be verified

A bad brief: "Make a site for a yoga studio." A good one lists sections, content and criteria:

Build the home page of the yoga studio "Lotus".
Sections: a header with anchor menu, a first screen with a heading and a sign-up button,
a "Classes" block (3 cards), a schedule table, a request form (name, phone, consent).
Write realistic texts, but no invented addresses, prices or phone numbers: use placeholders in square brackets.
For now the form only validates fields in script.js and shows a message, it sends nothing.
Criteria: no horizontal scroll at 360px width, all buttons reachable from the keyboard,
images have alt text.

Three tricks that save iterations:

• Placeholders instead of inventions. A model will easily make up a price or an address that ends up on the site.
• Acceptance criteria. You can verify the result against them in a minute.
• One section at a time for large pages. After the first screen, ask for the next block: the context stays short.

Step 3. Check in the browser

A static site can be opened as a file, but a local server is handier:

cd my-site
python3 -m http.server 8000

Open http://localhost:8000. Check three things by hand:

1. Window width 360 px and 1280 px: is there horizontal scroll or overlapping blocks.
2. The Tab key: focus moves through links and buttons in a sensible order.
3. The browser console: no red errors or files not found.

Return remarks to the agent concretely: "At 360 px the cards in the 'Classes' block overflow the screen, fix the grid in styles.css". You can attach a screenshot of the problem area if the model accepts images: per the table as of 18 October 2026 that includes claude-sonnet-5-5 and gpt-6.1-sol, while deepseek-v4.1-flash and glm-5.3-flash do not take images as input.

Step 4. Lock in the result

• Commit the working version to git before the next edits: rolling back a good variant is easier than explaining to the model what to restore.
• Ask the agent to run checks: valid HTML, no unused classes, headings in order (h1, then h2).
• Replace texts, prices and contacts with real ones yourself. Legal texts (a data processing policy, an offer) cannot be replaced by an AI model: show them to a lawyer.

What it costs through the API

The calculation depends on session length. Assumptions for the example: the agent made 15 requests; in total 45,000 tokens of fresh input, 45,000 tokens of cache writes, 375,000 tokens of cache reads and 22,500 tokens of output. Prices as of 18 October 2026, claude-sonnet-5-5: input $0.4, output $2, cache read $0.05, write $0.5 per 1M. For Claude the gateway sees the cache in the Anthropic format, i.e. in Claude Code.

• Fresh input: 45,000 × 0.4 / 1,000,000 = $0.018.
• Cache write: 45,000 × 0.5 / 1,000,000 = $0.0225.
• Cache read: 375,000 × 0.05 / 1,000,000 = $0.01875.
• Output: 22,500 × 2 / 1,000,000 = $0.045.
• Total: about $0.10 per session.

For comparison, the same session on deepseek-v4.1-flash (input $0.013, cache read $0.013, output $0.038): (45,000 + 45,000 + 375,000) × 0.013 / 1,000,000 + 22,500 × 0.038 / 1,000,000 = $0.006045 + $0.000855, about $0.0069. Cache writes for DeepSeek are not billed separately: those 45,000 tokens are charged at the regular input price. Whether the result will be stronger or weaker cannot be said in advance: by the strength index in the table it is 48 for Sonnet 5.5 and 39 for V4.1 Flash, but on your page the difference may be different. Run the same task on two models and compare.

See real numbers on the "Usage" page in the dashboard. How to estimate spending on longer sessions: how much an hour of agent work costs↗.

FAQ

Do I need to know how to program?

For a simple static page it is enough to open a file, start a local server and describe what is wrong. But you should still read the code you publish, at least to make sure there are no unwanted external scripts.

Which model is best for a site?

We cannot say in advance. Compare price and strength index in the model table and try two models on one task. List and prices: GET https://api.zukko.pro/v1/models.

Can a whole site be generated in a chat?

For a small page, yes: ask for three separate code blocks for index.html, styles.css and script.js. For a bigger project an agent that works with files itself is more convenient.

How do I start?

Create a key in the Zukko dashboard↗, connect Claude Code or Cursor and start with a small page following the plan above.