Duck
Tutorials5 min read

Make a Website with AI: A No-Fluff Build Guide for 2026

Samet Turan— Editor··5 min read

Learn to make a website with AI using real prompts, tool combos, and debugging tips—then decide if you want to build it yourself or grab a ready blueprint.

Most solopreneurs waste hours tweaking AI-generated site copy because the prompts are too vague. After reading this, you’ll know how to craft prompts that give you usable HTML and text in one pass, and you’ll have a repeatable workflow to spin up a landing page in under an hour. If you’d rather skip the build, we’ve packaged the whole thing as a blueprint at deepusecase.com/vault.

How do you get AI to write usable copy without endless rewrites?

Start with a tight brief that forces the model to output only the bits you need. Instead of asking “write a homepage,” give it a structure: headline, sub‑headline, three benefit bullets, a call‑to‑action, and a footer note. Tell the model to wrap each piece in a specific HTML tag so you can copy‑paste straight into your editor.

Example prompt for Claude 3.5 (first use bold):

Write a landing page for a freelance graphic designer. Use exactly these elements:

  1. tag for the headline

  2. tag for a short sub‑headline

Return only raw HTML, no extra explanation.

When you run this through the API, you get a clean block that fits into any static site generator. The key is the “return only raw HTML” line—without it the model likes to chatter about its process.

One‑sentence paragraph: Honestly, it’s faster than you think.

What most guides get wrong about prompting for design

Many tutorials tell you to ask the AI to “make it look modern” or “use a clean layout.” Those adjectives are useless because the model has no visual sense. Instead, give it concrete constraints: column count, max width, font‑size ratios, and a color hex code you like.

If you say “use a two‑column layout with a 800px max width, base font size 18px, heading size 2.2em, and accent color #ff6f00,” the model can translate that into inline styles or CSS classes you can later move to a stylesheet.

I think the biggest mistake is treating the AI like a designer who can read your mind. It can’t, so you have to be the designer and give it the specs.

Concrete named example: using Claude 3.5 to generate a landing page

Here’s a real workflow I used last month for a micro‑SAAS landing page.

  • Tool: Claude 3.5 via API (first use bold)
  • Prompt: the structured brief from the previous section, plus a line that says “include a meta viewport tag and link to a Google Font”.
  • Cost: $0.008 per 1k tokens; the whole call used about 850 tokens, so roughly $0.007.
  • Output: a complete HTML file with header, hero, features, pricing table, and footer.

I dropped the output into a file called index.html, opened it in a browser, and saw everything rendered correctly. The only thing I had to tweak was the button’s href to point to my sign‑up form.

Concrete gripe: the API sometimes returns a stray

at the very end when I forget to tell it to close tags properly. It’s annoying because it breaks validation and I have to run a quick tidy‑up step.

Concrete love: the model respects the “return only raw HTML” instruction 95 % of the time, which means I can go from prompt to live preview in under two minutes.

How to debug when the AI spits out broken HTML

When the page looks off, follow these three steps.

  1. Copy the output into an online validator like validator.w3.org. Note the exact line and column where it complains.
  2. Look at the surrounding AI‑generated text. Often the issue is a missing closing tag or a stray character like a smart quote that the model inserted.
  3. Add a clarification to your prompt: “do not use curly quotes, always straight quotes, and always close every tag you open.” Re‑run and the error usually disappears.

If the validator points to a CSS problem, remember that the AI may have injected a