HTML 在线预览
AI 生成的 HTML 即贴即看，沙箱隔离安全运行，支持手机/桌面视口。
使用说明
这个工具解决什么问题
让 AI 写页面的时代,每个人手里都攒了一堆「生成的 HTML」:鹈鹕骑车测试、活动页草稿、可视化 demo。想看效果,要么新建文件用浏览器打开,要么每次都去找在线编辑器。这个工具把「贴进去 → 看见」压缩到零步:左栏粘贴,右栏立即渲染,视口一键切换即可验收移动端表现。
核心能力
沙箱渲染:iframe 隔离源运行,与站点完全隔离,代码不上传。视口模拟:自适应、375、768、1280 四档,响应式验收一键切换。脚本开关:默认允许脚本,可禁用后查看纯静态结构。自动补全:片段自动包文档骨架,缺 viewport 自动注入。下载:一键存为 .html 文件,可继续交给浏览器或部署。
使用建议
让 AI 生成页面后第一时间贴进来验收,迭代提示词省去来回存文件;做「鹈鹕骑车」类测试时切手机视口更有说服力;不信任来源的代码先开着「禁用脚本」看结构,确认内容再放开运行。
常见问题
贴进来的 HTML 会盗取我浏览器里的账号信息吗?
不会。代码在沙箱 iframe 里以「隔离源」运行——不带 allow-same-origin 标记,它读不到本站的 cookie、localStorage、DOM,也无法以你的身份操作页面。这与 CodePen 等主流平台的隔离口径一致。
为什么有的 AI 生成页面预览后功能不完整?
常见原因有两个:一是开启了「禁用脚本」,交互功能自然不工作,关掉开关重新运行即可;二是页面需要调用外部接口或登录态,沙箱环境拿不到这些上下文,属于预期行为。纯展示类页面(图形、动画、排版)都能完整呈现。
没有 DOCTYPE 的零散 HTML 片段能预览吗?
能。工具会自动补全文档骨架、字符集与 viewport 声明,工具条上会提示补了什么;完整文档则尽量少动,只补缺失项,绝不改写你的内容。
手机视口预览有什么用?
AI 生成的页面通常是响应式的,桌面全宽下看不出移动端效果。切到 375 宽度即可模拟手机屏幕,检查排版是否塌陷、按钮是否可点。这是「让 AI 写页面」后的标准验收动作。