截图转 HTML

简短回答：你可以在 Google AI Studio 里附上截图或设计稿，让 Gemini 4 Hydrogen 写 HTML 和 CSS，再反复改。社区有一个把 LCARS 风格图片做成 HTML 的在线演示。本站没有测量这些标记和原图像素有多接近。

在 AI Studio 免费试 Hydrogen ↗

非官方指南，与 Google 无关。下文的耗时、花费和效果，除另行说明外都是作者本人的说法。本站没有独立复现这些演示。

“截图转 HTML”指什么

把一页的图片——设计稿、视频截帧，或你有权使用的截图——交给模型，请它写出能用的 HTML、CSS，有时还有 JavaScript。DeepMind 模型卡写明 Hydrogen 接受图片。如果是多页面的完整网站，Antigravity 可能比单次对话更合适。

社区例子

jjcm on Hacker News · Hacker News

LCARS image-to-HTML demo

在 Hacker News 的评论里，jjcm 放出了一个把 LCARS 风格图片转成 HTML 的在线演示，并写明使用了 Gemini 4 Hydrogen。

打开 LCARS 在线演示 ↗

脇村隆 | ムジログ · YouTube

A fictional real-estate site, from a prompt — not a screenshot

脇村隆只用一句话让 Hydrogen 做一个虚构的房产中介网站。据作者介绍约 5 分钟完成，并带有筛选搜索、收藏和预约看房表单。这是提示词做网站，不是截图还原；放在这里是因为搜 “screenshot to website” 的人常常想要的是能用的网站，而不只是标记语言。

Karthick (@designwkarthick) · X

9,000 particles, 36 UI components, one page

作者分享了用 Hydrogen 做的单页视频：9,000 个粒子会变形成你选中的 36 种 UI 组件之一，而且控件都能用。

需要说清的限制

截图只是一个视口。响应式断点、字体和悬停状态，往往要在提示词里写明，或自己改。
是否像素级还原，本站和上面的公开帖子都没有测量过。
只能转换你拥有或有权实现的作品。
我们收录的作者里，没有人公开过可复用的“截图转 HTML”提示词，本页也不编造一条。

用 Hydrogen 怎么做

Google 公开了三条常用入口。本站没有为下面这些任务自行计时。

免费 · 限速

Google AI Studio

用 Google 账号登录，选 gemini-4-hydrogen，粘贴提示词（任务需要时再附上图片或视频）。Google 定价页把免费档的输入、输出标为 “Free of charge”。付费档为每百万输入/输出 token 1.50 / 7.50 美元。

在 AI Studio 打开 Hydrogen ↗

免费 · 系统分配

Gemini 应用

Google 的说法是：免费用户 “will get access to Gemini 4 Hydrogen via auto model selection when it’s the appropriate model for the prompt”，也就是系统觉得合适时自动选用，不能自己点选。

文档列出了免费计划

Google Antigravity

适合要多文件工程的任务（游戏、Remotion 项目、Three.js 应用）。Antigravity 模型页在 2026年11月14日核对时，把 Hydrogen 列在 Free & Plus 计划；0 美元的个人计划是 “basic weekly rate limits”。11月12日发布博文仍写的是付费 Pro 和 Ultra 订阅者——两种官方表述都写在免费指南里。

出处: Google AI Studio / Gemini API docs, checked 14 November 2026 · 出处: Google Blog, checked 14 November 2026 · 出处: Google Antigravity Docs, checked 14 November 2026 · 出处: Google Antigravity, checked 14 November 2026 · 出处: Google DeepMind, 12 November 2026

更便宜的官方模型，以及其他工具

下表价格来自本站已引用的各厂商官方页面（2026年11月13日或14日查阅）。第三方应用的价格我们没有核对，因此不写。

官方付费 API 标价，每百万 token，另有说明的除外。
选项	官方价格	可能适用的情况
Gemini 4 Hydrogen 免费档	输入、输出为 “Free of charge”，有限速；免费档提示词可能被用于改进 Google 产品	在 AI Studio 里试做一个单文件游戏、场景或页面
Gemini 4 Hydrogen 付费档	输入 1.50 / 输出 7.50 美元	超出免费档，或不希望走免费档的数据使用条款
Gemini 3.8 Flash	2026年12月31日前 0.75 / 3.75 美元，2027年1月1日起 1.50 / 7.50 美元；也有免费档	2026年底前更便宜；不过有社区帖认为在视觉/代码任务上 Hydrogen 效果更好
Claude Sonnet 5.5	2 / 10 美元	社区有一次 Three.js 机器人对比认为 Sonnet 更好、也更贵（作者数字见 3D 场景页）
Claude Opus 5.5	4 / 20 美元	官方标价更高；Google 没有公布与 Hydrogen 的正面对比
GPT-6.1 Sol	2 / 10 美元（≤272K）或 4 / 15 美元	另一个付费选项，见对比总览

出处: Google AI Studio / Gemini API docs, checked 14 November 2026 · 出处: Google AI Studio / Gemini API docs, Retrieved 13 November 2026 · 出处: Google AI Studio / Gemini API docs, Retrieved 13 November 2026 · 出处: Anthropic, Retrieved 13 November 2026 · 出处: OpenAI, Retrieved 13 November 2026

专门做游戏、户型图、截图转代码、宣传片的产品，常常排在这些搜索的前面。我们把它们当作替代选择给出链接，但不转述价格，因为本篇没有重新核对那些定价页。

常见问题

AI 能把截图转成 HTML 吗？

可以，当作草稿。公开的 Hydrogen 例子里，有一张 LCARS 风格图被做成了可打开的 HTML 页面。结果不能保证像素级还原，而且你只能转换自己有权复制的设计。

大家会搜 “AI make website from screenshot” 吗？

这个完整说法在 2026年11月14日没有出现自动补全。会补全的是 “Screenshot to HTML”、“screenshot to website AI” 和 “image to website AI”，所以标题和开头用这些词。

可以用这个办法去克隆别人的网站吗？

不可以。请只用你自己的设计稿，或你有权实现的设计。复刻竞争对手的界面或素材，可能侵犯版权和商标。

我们自己跑的同类实测

同一提示词在 Hydrogen、3.8 Flash 和 Gemma 4 上各跑一次，模型返回了 HTML 的可以在页面里试玩。 Cedar & Salt 截图转 HTML · 全部原创实测