TLDR: A single self-contained HTML file is the most portable thing AI can build you, because everything the page needs lives inside one file with no external dependencies to break. Claude and ChatGPT will not always give you that by default, so you have to ask for it directly. Use a prompt that says “one HTML file, all CSS and JavaScript inlined, no external files or CDN links, icons as inline SVG,” verify it works offline, then publish that file as a live link.
There is a specific, boring reason AI-generated pages so often look great for you and broken for everyone else: dependencies. The page you see relies on a separate stylesheet, a script file, or a library loaded from the internet, and when the page leaves your screen, those pieces do not always come with it. The cure is to get self-contained HTML from AI in the first place: a single file that carries everything it needs.
This guide covers what self-contained means, the exact prompts that produce it from Claude and ChatGPT, how to check the file actually stands alone, and how to turn that one file into a link anyone can open.
What “self-contained” really means
A normal website is a bundle of parts: an HTML document that points to CSS files, JavaScript files, image files, and fonts, all loaded from various places. That is fine when a web server is stitching them together. It is fragile the moment you try to move the page around as a thing.
A self-contained HTML file collapses that bundle into one document. The styles live in a style block inside the file. The scripts live in a script block inside the file. Icons are drawn as inline SVG, and small images are embedded directly. There are no outside links to resolve, so there is nothing to go missing.
A self-contained file has no “somewhere else.” Everything the page needs is right here, in this one file. That is why it travels without breaking.
The tradeoff is honest: a single file is not how you would build a large production app, and cramming several big photos inline makes it heavy. But for a landing page, a proposal, a resume, a calculator, a chart, or almost anything an AI builds in one shot, one file is the sweet spot of simple and durable.
The prompts that actually work
The reason people do not get self-contained files is simple: they do not ask for them. Left to its own defaults, an AI may reach for a CSS framework off a CDN, split scripts into modules, or link a Google font. Each of those is a dependency that can break in transit. Spell out what you want instead.
Here is a reliable base prompt you can paste into Claude or ChatGPT:
“Build this as a single self-contained HTML file. Put all CSS in one
styletag in the head and all JavaScript in onescripttag. Do not link to any external files, CDNs, or web fonts. Use only system fonts. Draw all icons as inline SVG. The finished page must work fully offline from this one file. Output the complete file.”
If you already have a multi-file result and want it collapsed, use this:
“Take everything you just built and combine it into one self-contained HTML file. Inline every stylesheet and script, replace any CDN library with equivalent vanilla code or an inlined copy, and embed images as base64 data URIs or inline SVG. Return the single complete file.”
And to sanity-check the result:
“List every external resource this file still loads, if any. Then rewrite it so there are zero external requests.”
That last one is quietly powerful, because it makes the model audit its own output instead of you hunting through the code.
Claude vs ChatGPT: same idea, small differences
Both tools do this well. The differences are mostly about where the result lands. In Claude, a page like this shows up as an artifact you can preview and copy out. In ChatGPT, it usually lands in Canvas or a code block you copy. Pick whichever tab fits your situation:
The offline test (do not skip it)
The fastest way to know a file is self-contained is to cut off the internet and open it. Turn off Wi-Fi, double-click the saved .html file, and look hard:
- Do the fonts still look right, or did they fall back?
- Do icons and images appear, or are there broken-image boxes?
- Do buttons, tabs, and charts still respond?
If everything survives with no network, you have a truly portable file. If anything breaks, there is still an external request in there, and the audit prompt above will find it.
Here is how the common output shapes compare for sharing:
| Output shape | Travels intact? | Multi-file safe? | Easiest to publish? |
|---|---|---|---|
| Single self-contained file | Yes, nothing external | N/A, it is one file | Yes, paste and go |
| HTML linking separate CSS/JS | Often breaks | Only if all files move together | No |
| Page pulling from a CDN | Breaks if the link is stripped | No | No |
| Multi-file project as a ZIP | Yes, when hosted | Yes, paths resolve | Yes, drop the ZIP |
The two green rows are the ones worth aiming for: a single self-contained file for one page, or a ZIP for a genuine multi-file project.
From one file to one live link
A self-contained file is perfectly portable, but a raw file still asks the recipient to download and open it, which many people never do, and email clients often strip HTML attachments. The clean finish is to host the file at a URL and send the link instead.
That is what VisiblePage is for. Paste your single self-contained file and you get a live URL immediately, with no build step and no server. Because it is properly hosted, the page loads fast on any device and stays fully interactive. If your project is genuinely multi-file, drop a ZIP instead and every relative path resolves. When you revise the page later, re-publish to the same link so nothing you already shared goes stale.
Try it now: Publish your self-contained HTML as a live link with no setup.
This is the last step of nearly every AI build, so it is worth doing well. The broader picture lives in our pillar on building with Claude and ChatGPT, and once the file is ready, sharing your AI work and sharing ChatGPT HTML as a link cover the handoff. If you want to understand what “inline” really means under the hood, the MDN web docs are the reference.
Frequently asked questions
What does self-contained HTML mean?
A self-contained HTML file holds everything the page needs (the markup, the CSS, the JavaScript, and often the images) inside one file, with no links to separate assets. That makes it the most portable thing an AI can build, because there is nothing external to break. Once you have that single file, you can publish it as a live link with VisiblePage in seconds.
How do I ask Claude or ChatGPT for a single-file page?
Tell it explicitly: output one HTML file, inline all CSS and JavaScript, use no CDN links or external files, and embed icons as inline SVG. Being specific matters, because by default an AI may split styles and scripts into separate files or pull in outside libraries.
Why does my AI-generated page break when I send it to someone?
Usually because it depends on files or libraries that did not travel with it, like a separate stylesheet, a script file, or a CDN link that a mail client stripped. A self-contained single file avoids this because everything lives inside it, and hosting that file at a URL removes the problem entirely.
Can images be inside a self-contained HTML file?
Yes. Small images and icons can be embedded directly as inline SVG or as base64 data URIs, so they live inside the file. For a few large photos, hosting the project so relative paths resolve is cleaner, which a proper host handles for you.
Is a single file better than a ZIP of multiple files?
For most one-page projects, a single file is simpler and safer. For larger multi-file projects with many assets, a ZIP that a host unpacks and serves is the better fit. Both publish to a live link the same way.
Ready? Turn your single-file page into a live link — your first page is free.