Screenshot to HTML
Short answer: you can attach a screenshot or mockup in Google AI Studio, ask Gemini 4 Hydrogen for HTML and CSS, and iterate. There is a live community demo of an LCARS-style image turned into HTML. We have not measured how close the markup is to the original pixels.
Unofficial guide. Not affiliated with Google. Times, costs and results below are the authors’ own claims unless we say otherwise. We have not independently replayed these demos.
What “screenshot to HTML” means
You give the model a picture of a page — a mockup, a frame from a video, or a screenshot you have the right to use — and ask for working HTML, CSS, and maybe JavaScript. The DeepMind model card says Hydrogen accepts images. For a full site with several pages, Antigravity may be a better door than a single chat.
Community examples
jjcm on Hacker News · Hacker News
LCARS image-to-HTML demo
In a Hacker News comment, jjcm linked a live demo that turns an LCARS-style image into HTML and attributed the result to Gemini 4 Hydrogen.
脇村 隆 | ムジログ · YouTube
A fictional real-estate site, from a prompt — not a screenshot
Takashi Wakimura asked Hydrogen, in one line, to make a fictional real-estate agency site. Per the author, it took about five minutes and included filtered search, favorites, and a viewing-booking form. This is prompt-to-website, included because people who search “screenshot to website” often want a working site, not only markup.
Karthick (@designwkarthick) · X
9,000 particles, 36 UI components, one page
The author shared a video of a single page built with Hydrogen where 9,000 particles morph into whichever of 36 UI components you pick, with the controls working.
Honest limits
- A screenshot is one viewport. Responsive breakpoints, fonts, and hover states often have to be described in the prompt or fixed by hand.
- Pixel-perfect reconstruction is not something we, or the public posts above, have measured.
- Only convert work you own or have permission to implement.
- No author in our catalog published a reusable screenshot-to-HTML prompt, so this page does not invent one.
How to do it with Hydrogen
Google documents three practical doors. This site has not timed them for these tasks.
Google AI Studio
Sign in with a Google account, choose gemini-4-hydrogen, and paste a prompt (and, where the task needs it, an image or video). Google’s pricing page lists Free Tier input and output as “Free of charge.” Paid use is $1.50 / $7.50 per 1M input/output tokens.
Gemini app
Google says free Gemini app users “will get access to Gemini 4 Hydrogen via auto model selection when it’s the appropriate model for the prompt.” You do not pick the model yourself.
Google Antigravity
Useful when the job is a multi-file project (a game, a Remotion repo, a Three.js app). Antigravity’s models page, checked 14 Nov 2026, lists Hydrogen on the Free & Plus plan; the $0 Individual plan has “basic weekly rate limits.” The 12 Nov launch post still described paid Pro and Ultra subscribers — both official wordings are on the free guide.
Source: Google AI Studio / Gemini API docs, checked 14 November 2026 · Source: Google Blog, checked 14 November 2026 · Source: Google Antigravity Docs, checked 14 November 2026 · Source: Google Antigravity, checked 14 November 2026 · Source: Google DeepMind, 12 November 2026
Cheaper official models, and specialized tools
List prices below are official vendor pages already cited on this site (retrieved 13 or 14 November 2026). We have not priced third-party apps.
| Option | Official price | When it may fit |
|---|---|---|
| Gemini 4 Hydrogen free tier | Input and output “Free of charge,” rate-limited; free-tier prompts may be used to improve Google’s products | Trying a one-file game, scene, or page in AI Studio |
| Gemini 4 Hydrogen paid | $1.50 input / $7.50 output | When you exceed the free tier or do not want free-tier data use |
| Gemini 3.8 Flash | $0.75 / $3.75 until 31 Dec 2026; $1.50 / $7.50 from 1 Jan 2027. Also on a free tier | Cheaper until the end of 2026; several community posts still preferred Hydrogen’s result on visual/code tasks |
| Claude Sonnet 5.5 | $2 / $10 | A community Three.js robot test judged Sonnet better and more expensive (author figures on the 3D scene page) |
| Claude Opus 5.5 | $4 / $20 | A higher official price; Google did not publish a Hydrogen head-to-head |
| GPT-6.1 Sol | $2 / $10 (≤272K) or $4 / $15 | Another paid alternative; see compare |
Source: Google AI Studio / Gemini API docs, checked 14 November 2026 · Source: Google AI Studio / Gemini API docs, Retrieved 13 November 2026 · Source: Google AI Studio / Gemini API docs, Retrieved 13 November 2026 · Source: Anthropic, Retrieved 13 November 2026 · Source: OpenAI, Retrieved 13 November 2026
Specialized products (AI game makers, floor-plan apps, screenshot-to-code sites, promo-video makers) often sit at the top of these searches. We link to them as alternatives and do not restate their prices here, because we did not re-check those pricing pages for this article.
FAQ
Can AI turn a screenshot into HTML?
Yes, as a draft. A public Hydrogen example is an LCARS-style image turned into a live HTML page. Results are not guaranteed to be pixel-perfect, and you should only convert designs you have the right to reproduce.
Is “AI make website from screenshot” the phrase people type?
That exact wording did not autocomplete on 14 November 2026. “Screenshot to HTML,” “screenshot to website AI,” and “image to website AI” did, which is why those phrases are in the title and headings.
Should I clone someone else’s site this way?
No. Use your own mockups or designs you have permission to implement. Recreating a competitor’s UI or assets can infringe copyright and trademarks.
Our original test of this task
Same prompt on Hydrogen, 3.8 Flash, and Gemma 4, with playable output where the model returned HTML. Cedar & Salt screenshot to HTML · All original tests
Related Make a 3D game with AI AI floor plan from video AI 3D scene generator AI promo video from code Use Hydrogen free Same prompt, side by side Compare & pricing