All posts

The Best AI Prompts for Building a Single-File Website

The single most useful instruction you can add to any website prompt is "as one self-contained HTML file, with inline CSS and JavaScript, no external dependencies." That one line is the difference between code you can paste and publish immediately, and code split across files that needs a build step.

Why the wording matters

ChatGPT, Claude, and Gemini can all produce a website from a plain description — but by default they sometimes assume a real project: separate HTML, CSS, and JavaScript files, or a framework-style structure. None of that is wrong, but it is unnecessary friction if your goal is a page you can paste straight into a host and share. Telling the model exactly what shape of output you want removes that friction before it happens.

The prompt formula

Structure any website prompt in three parts:

1. What the page is — be specific about purpose and content, not just topic.
2. The format constraint — "as a single HTML file with inline CSS and JavaScript, no external dependencies."
3. Style direction — colors, mood, or a comparison ("clean and minimal", "dark theme", "like a modern SaaS landing page").

Ready-to-use prompts

Copy any of these into ChatGPT, Claude, or Gemini and adjust the details:

Portfolio: "Create a single HTML file (inline CSS and JS, no external dependencies) for a freelance designer's portfolio. Include a hero with name and title, a grid of 4 project cards, and a contact section. Dark theme, clean sans-serif typography."

Landing page: "Write a single-file HTML landing page for a productivity app called Focus. Include a headline, three feature cards, a pricing section with two tiers, and an email signup form. Inline all CSS and JS, no external dependencies, mobile-responsive."

Waitlist page: "Build a single HTML file for a waitlist page for an early-stage startup. Headline, one-sentence description, an email input with a submit button, and a small counter showing '500+ people already joined'. Inline CSS and JS only."

Event page: "Create a single-file HTML event page for a one-day workshop. Include date, location, a short agenda list, and a registration button. Warm color palette, no external dependencies."

Simple game: "Build a small browser game in one self-contained HTML file — a simple version of [game]. Use only vanilla JavaScript and inline CSS, controllable with arrow keys, no external libraries."

Three habits that keep the output clean

Always add "mobile-responsive" if the page needs to work on phones — it is not assumed by default. Ask for changes in follow-up messages rather than rewriting the whole prompt; models handle "make the button blue and add a footer" better than a second giant prompt. And if a model returns split files anyway, one line fixes it: "combine this into a single HTML file with everything inlined."

Frequently asked questions

What is the most important instruction to add to a website prompt?
Ask explicitly for the output as a single, self-contained HTML file with inline CSS and JavaScript and no external dependencies. This one instruction determines whether the result can be pasted directly into a host.

Does this work the same way in ChatGPT, Claude, and Gemini?
Yes. All three general-purpose AI assistants can write complete single-file HTML on request; the prompt structure in this guide works across all of them.

What if the AI splits the code into multiple files anyway?
Ask it directly to combine everything into one HTML file with the CSS and JavaScript inlined. This works reliably even after the fact.

Can I use these prompts to build something interactive, not just a static page?
Yes. Single-file HTML can include full JavaScript logic, so games, calculators, and interactive tools work with the same approach as a static landing page.