Building a Real AI Website Builder Workflow: From Prompt to Publish

Most AI website builders promise instant sites but leave you with bloated code, missing accessibility tags, or designs that fall apart on mobile.

After testing a dozen tools, I built a repeatable process that uses a single prompt to generate clean, publishable HTML you can deploy anywhere.

By the end of this article you’ll have a working workflow and know when it’s worth grabbing the blueprint from the vault.

Defining your site’s core pages and data model

Start by listing the pages you actually need. For a freelance service site that might be Home, Services, About, Contact, and a simple blog. Write each page’s purpose in one line.

Next, decide what data lives on each page. The Home page needs a headline, a short intro, and three service cards. The Services page repeats a card block with title, description, and price. About needs a bio paragraph and a photo. Contact needs a form with name, email, message. Blog needs a list of posts with title, excerpt, and date.

Write this as a simple JSON‑like outline. You’ll feed it to the prompt later so the AI knows what to generate.

What most guides get wrong about prompting for design

Most tutorials tell you to ask the AI for “a modern, clean design.” That’s vague and leads to random CSS frameworks, inline styles, or missing meta tags.

Instead, give the AI concrete constraints: use only semantic HTML5 elements, avoid any style attribute, limit yourself to a single external CSS file you’ll provide later, and include ARIA labels where appropriate.

Here’s a prompt template that works:

Generate a complete HTML page for {{page_name}} with the following content:
{{content_description}}

Rules:
- Use only semantic HTML5 (header, nav, main, section, article, footer).
- No inline styles or style attributes.
- Include a link rel="stylesheet" href="styles.css" in the head.
- Add ARIA labels to navigation and form fields.
- Ensure the viewport meta tag is present.
- Output raw HTML only, no markdown fences.

Replace the placeholders with the data from your outline. The AI will spit out a file that already respects your constraints.

How do you handle responsive breakpoints without a visual editor?

You don’t need a drag‑and‑drop editor to get responsive layout. Provide the AI with a simple CSS baseline that uses max-width media queries.

Add this to your styles.css (you can keep it in the same folder as the HTML):

/* Base */
body {font-family: system-ui, sans-serif; line-height: 1.6; margin:0;}
.container {max-width: 960px; margin:auto; padding:1rem;}

/* Mobile first */
.nav {display:flex; flex-wrap:wrap; gap:0.5rem;}
.nav a {padding:0.5rem 1rem;}

@media (min-width: 600px) {
  .nav {justify-content:space-between;}
  .services {display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem;}
}

@media (min-width: 900px) {
  .services {grid-template-columns:repeat(3,1fr);}
}

Tell the AI to wrap the main content in a div class="container" and to add the appropriate classes (like nav, services) to the markup it generates. The CSS does the rest.

Concrete example: building a service site with Carrd + GPT-4

I recently used this workflow for a client who needed a one‑page portfolio. I outlined the sections: Hero, About, Portfolio, Contact.

I fed the prompt (see above) to GPT-4 via the OpenAI API, temperature 0.3, max tokens 1500. The output was a valid HTML file with semantic tags, no inline styles, and a link to styles.css.

I then uploaded the HTML and the CSS file to Carrd (Pro plan, $19/year) using its custom code embed feature. Carrd hosted the site on its subdomain with SSL, and I pointed a custom domain to it.

The whole process took under an hour, and the client got a site that scored 98+ on Lighthouse for performance and accessibility.

I love how the AI can generate valid schema.org markup for a LocalBusiness with just one extra line in the prompt. That saved me from manually editing JSON‑LD.

My gripe? The first run from GPT-4 sometimes adds a stray <meta name="generator" content="..."> tag that Carrd strips anyway, but it clutters the output and forces an extra cleanup step.

(Which, yes, is annoying.)

How to debug when the AI generates broken HTML or missing alt tags

When the output fails, start with a quick validation. Paste the HTML into the W3C validator (). It will tell you if you have unclosed tags, stray attributes, or missing required elements like alt on images.

If the validator reports missing alt text, adjust your prompt: explicitly say “every img tag must include an alt attribute describing the image.” Add a sentence like “If the image is decorative, use alt=””.”

If you see inline styles despite the rule, check that you didn’t accidentally include the word “style” in your content description (e.g., “style the header”). The AI may interpret that as a cue to add a style attribute. Re‑phrase to avoid that word.

For broken layout, open the generated HTML in a browser, toggle the CSS file on/off in dev tools, and verify that the classes you asked the AI to add are present. If they’re missing, add a clearer instruction: “wrap the main navigation in a nav element with class “nav”.”

Keep a log of the prompts that caused each issue and the tweak that fixed it. Over time you’ll build a small prompt library that reliably produces clean output.

Pricing opinion and when to buy the blueprint

Carrd Pro at $19/year is fair for a solo operator who needs custom code hosting and a custom domain. The free tier is enough for testing but lacks the embed feature you need for this workflow.

I think the $99/mo agency plan from some AI website builders is ridiculous for what you get—mostly a visual editor you’ll never use if you’re comfortable with HTML.

If you’d rather skip the build and deploy a working version in an afternoon, we’ve packaged this workflow as a blueprint at deepusecase.com/vault.