Skip to main content

Build your site with AI

Build your site with AI

By now you can publish a page and share styles across pages. The next natural question: can an AI do some of this work for me — write the HTML, design a layout, generate the images?

The answer is yes, in several ways. And unlike most site builders, Flexweg lets you choose how you pay for AI — or whether you pay at all.

Flexweg's stance on AI​

Most site builders wrap AI behind their own credit or subscription system: you pay them, they hide the model they use, and you never know how much of your money actually funds the generation.

We don't do that. We believe AI should be transparent, and that you should stay in control of which model runs, how much it costs, and where your money goes. Flexweg gives you three paths — pick the one that fits you:

  1. Bring your own AI API key and let Flexweg use your provider account directly (zero markup).
  2. Buy prepaid tokens on Flexweg for a preselected model — simple, pay-as-you-go.
  3. Don't pay anything at all — use a free web AI tool and paste the result into Flexweg.

Option 1 — Use your own AI API keys (recommended if you already have an account)​

If you already pay for Claude, Gemini, or ChatGPT, you can plug your API key into Flexweg and use your own provider account for every generation.

Go to Account → AI credentials and paste your key for any of the supported providers:

  • Anthropic — Claude
  • Google — Gemini
  • OpenAI — ChatGPT
Your keys are encrypted

Flexweg encrypts stored API keys at rest. They are only decrypted server-side when a generation request is made — never exposed to the browser or to other users.

Once configured, AI-assisted editing is available in two places:

  • From the Flexweg dashboard — open the Smart Piloting modal (the button in the bottom-right corner of the main interface) and describe what you want in plain language.
  • From your favorite IDE or AI client — Flexweg exposes an MCP server compatible with Claude Code, Claude Desktop, Cursor, and other MCP-aware tools. A dedicated section of the documentation will cover the MCP setup.

Every call is billed by your AI provider, at their rates, on your own dashboard. Flexweg adds nothing on top.

Option 2 — Buy tokens on Flexweg (pay-as-you-go)​

If you don't have an AI subscription and don't want to open one, Flexweg sells prepaid tokens for a model we've preselected for the best quality-per-token ratio.

  • No subscription — buy a token bundle once, use it whenever you like.
  • Occasional use — ideal if you only need a handful of generations a month.
  • Fair margin — we take a small markup to cover infrastructure and support; the vast majority of what you pay goes to the model provider.

The preselected model is Anthropic's Claude Sonnet 4.5 — our tests showed it produces the best balance of layout quality, written content and token cost for site-building tasks.

What's a token, and why does it matter?​

AI models don't charge by "requests" or "pages" — they charge by tokens. A token is roughly a fragment of a word:

  • hello → 1 token
  • transparently → 2 tokens
  • A typical English sentence of 10 words → about 13 tokens
  • 1,000 tokens → roughly 750 words

Every AI interaction consumes tokens in both directions:

  • Input tokens — everything you send: your prompt, plus any existing HTML/CSS you ask the model to modify.
  • Output tokens — everything the model writes back: generated HTML, CSS, JS, explanations.

Why a full site can burn 50,000 tokens​

Let's walk through a realistic example with Claude Sonnet 4.5.

Generating a single landing page from scratch:

  • Your prompt describing the page, tone, sections: ~500 tokens
  • The model's output (HTML + inline CSS for a rich page with 5 sections): ~4,000 to 6,000 tokens
  • Total: ~5,000 tokens

Generating a 5-page site with a shared stylesheet:

  • Prompt describing the site, pages, shared design: ~1,500 tokens
  • Generated main.css with a full design system: ~3,000 tokens
  • Five HTML pages at ~4,000 tokens each: ~20,000 tokens
  • Two rounds of iteration where the model re-reads the pages to refine them: ~20,000 tokens
  • Total: ~45,000 – 55,000 tokens

That's why a "build me a small site" session easily reaches 50,000 tokens. Most of the cost isn't the first draft — it's the back-and-forth that makes the result actually match your taste.

Keep iterations cheap
  • Be specific in the first prompt. Every round of "a bit more blue, less padding" costs both input and output tokens.
  • Edit the smallest piece possible. If you only want to change the hero section, tell the AI to modify just that, not the whole page.
  • Split CSS and HTML early. Once your design lives in main.css, new pages only need the HTML body — a much smaller generation.

Option 3 — Use AI for free, paste the result into Flexweg​

Here's the part that often surprises people: you don't need to pay anyone, not even Flexweg, to use AI to build your site.

Every major AI provider offers a free web interface you can use without any subscription. Just ask the AI to generate HTML and CSS, copy the result, and paste it into a Flexweg file.

Flexweg is pure HTML/CSS/JS hosting — anything an AI generates, you can host here.

The best free AI tools for building pages​

After testing every major provider on site-building tasks, here's how they rank for generating beautiful, production-ready HTML pages on their free tiers:

1. Gemini — best overall UI/UX​

Google's Gemini consistently produces the most visually refined layouts: modern typography, balanced spacing, tasteful color palettes. And with Nano Banana (Google's image generation model, available inside Gemini) you can generate hero images, icons and illustrations in the same conversation — no need to jump to a separate tool.

  • Free plan: generous daily quota for conversations and a fair number of image generations per day.
  • Best for: landing pages, marketing sites, anything where visual polish matters.
  • Tip: ask explicitly for "a single self-contained HTML file with all CSS in a style tag" to get clean, ready-to-paste output.

2. Google Stitch — highest raw quality​

A newer Google experiment focused specifically on UI generation. The interface is less forgiving than Gemini's — you'll need to spend a few minutes reading the docs — but the output quality is exceptional, especially for app-like interfaces and dashboards.

  • Free plan: limited daily generations, but enough to build a full site over a few sessions.
  • Best for: dashboards, SaaS landing pages, highly structured layouts.
  • Tip: use Stitch to lock in the visual structure, then paste the output into Flexweg and refine the text content with another AI.

3. Claude — best written content​

Claude produces very good page designs and, above all, the best copywriting: the text inside headings, paragraphs and CTAs reads like it was written by a human editor. Layouts are slightly more conservative than Gemini's, but the overall result is cohesive and professional.

  • Free plan: daily message quota that resets every few hours; older conversations count toward the quota when reopened.
  • Best for: content-heavy sites, blogs, about pages, anywhere words matter.
  • Tip: combine Claude (for text) with Gemini (for layout) — paste Claude's copy as placeholder text into a Gemini layout prompt.

4. ChatGPT — solid fallback​

ChatGPT still builds pages, but in our tests it produced more generic layouts and needed more iteration rounds to reach professional quality. It remains a capable option if you already use it daily.

  • Free plan: daily message quota on the flagship model, with automatic fallback to a smaller model after the cap.
  • Best for: quick drafts, simple pages, logic-heavy scripts.

Step-by-step — build a page for free with Gemini​

Let's walk through creating a real page using Gemini's free tier. Open Gemini in another tab and follow along.

Step 1 — Describe the page you want​

In Gemini's prompt box, paste something like:

Prompt to Gemini
I need a one-page landing site for my freelance photography business.

The page should include:
- A hero section with my name, a tagline, and a call-to-action button
- A short "About me" section with a portrait placeholder
- A portfolio grid with 6 placeholder images
- A "Services" section with 3 offers
- A contact section with email and social links
- A footer

Design guidelines:
- Modern, elegant, minimalist aesthetic
- Dark mode by default with a subtle gradient background
- Serif headings, sans-serif body text
- Smooth scroll between sections
- Fully responsive (mobile and desktop)

Deliverable:
- A single self-contained HTML file
- All CSS inline in a <style> tag at the top
- Only vanilla JS if needed — no external libraries
- Use realistic placeholder text and image URLs (e.g. https://picsum.photos)

The more precise your brief, the fewer iterations you'll need.

Keep a reusable "site brief"

Save your design guidelines — palette, typography, tone, section list — in a plain-text note. Paste it at the top of every new AI conversation. It saves dozens of refinement prompts.

Step 2 — Review the output​

Gemini returns a complete HTML file. Before copying, scan it quickly:

  • Does every section you asked for exist?
  • Does the design match what you had in mind?
  • Are images and links pointing to reasonable placeholders?

If anything's off, reply in the same conversation:

Refinement prompt
Make the hero background darker and add a soft purple glow behind the headline.
Replace the portfolio grid with a 3×2 layout instead of 2×3.
Add a testimonials section between "Services" and "Contact".

Gemini remembers the full page and only regenerates what you asked for.

Step 3 — Generate the images (optional)​

In the same Gemini conversation, ask for real hero and portfolio images:

Image prompt
Generate a minimalist hero image for a freelance photographer — a dark abstract scene with soft purple and gold lighting, no people, no text, 16:9 aspect ratio.

Gemini produces the image inline via Nano Banana. Right-click → Save image as… into a folder on your computer. Repeat for each image you need (portrait, portfolio shots, icons).

Step 4 — Paste the page into Flexweg​

Back in Flexweg:

  1. Click New file, name it index.html, leave the location at the root (/).
  2. Paste Gemini's full HTML into the Content editor.
  3. Click Save and publish.

Open your site URL. The AI-generated page is already live.

Step 5 — Upload the images​

  1. In the file tree, create a new folder assets/, then inside it create img/. (This matches the convention from the previous tutorial.)
  2. Inside assets/img/, click New file and switch to the drag-and-drop area.
  3. Drop all the images Gemini generated, straight from your file explorer.
  4. Edit index.html and replace the placeholder image URLs (for example https://picsum.photos/...) with your own paths: /assets/img/hero.jpg, /assets/img/portfolio-1.jpg, etc.
  5. Save and publish.

Refresh the page — your real AI-generated images are now live, and the whole thing cost you zero tokens.

Step 6 — Split the CSS (optional but recommended)​

Everything Gemini generated lives inside one HTML file. Apply the pattern from Share styles across pages:

  • Move the content of the <style> block into assets/css/main.css.
  • Replace it in index.html with <link rel="stylesheet" href="/assets/css/main.css">.

From now on, when you want a second page, you only ask the AI for the HTML body and reuse the existing stylesheet — a much shorter prompt and a much smaller output.

Tips and extra free tools​

A few more tricks and free helpers we've found useful:

  • Generate with one AI, polish with another. Gemini for layout → Claude for rewriting the text → Nano Banana for final images. Each AI has a strength; play them to it.
  • Ask for a CSS-variables design system. Prompt the AI to "put colors, fonts, and spacing in :root variables". You can then restyle the whole site by editing a handful of values.
  • v0.dev (by Vercel) — free tier, excellent for component-level generation (one card, one form, one section). Copy the HTML+CSS into your page.
  • Uiverse — a community library of free, copy-paste HTML/CSS components (buttons, cards, inputs, loaders). Perfect for garnishing an AI-built layout with extra polish.
  • Unsplash and Pexels — free high-resolution photography if you prefer real photos over AI-generated ones.
  • SVGL — a free library of brand and UI SVG icons, ready to drop straight into your HTML.
  • Coolors — generate a color palette in two clicks, then paste the hex values into your AI brief.
  • Google Fonts — thousands of free web fonts; pick a pair, copy the <link> tag, and add it to your AI-generated HTML.

Recap​

  • Flexweg refuses the "black-box credit" model. You can use your own AI API keys at Account → AI credentials with zero Flexweg markup, buy pay-as-you-go tokens, or use free web AI tools and paste the output here.
  • A token is a fraction of a word. A full multi-page site with a couple of iteration rounds easily reaches 50,000 tokens — most of the cost sits in the back-and-forth, not in the first draft.
  • For free generation, our ranking for page-building quality is Gemini → Google Stitch → Claude → ChatGPT. Gemini combined with Nano Banana covers both layout and images in a single conversation.
  • Whatever AI path you pick, the final step is always the same: paste the HTML into Flexweg, split the CSS out (as shown in the previous tutorial), and publish.

You now know how to bootstrap a full site without writing a single HTML tag yourself — using exactly the budget you choose, from zero to your own API rate.