如何分享 AI 生成的 HTML 页面

更新于 2026-10-24 · 约 5 分钟

AI 助手已经生成了一个页面，在聊天预览或你的电脑上都能运行。现在你想让客户、 同事或朋友打开它。直接发送 .html 附件，对方常常会看到源代码、 丢失图片和样式，或者还得先下载文件。

先说结论

如果页面只包含 HTML、CSS 和在浏览器中运行的 JavaScript，把这些文件发布到一个 URL，再把 URL 发出去即可。你可以直接使用下方上传区，无需配置代码仓库、构建命令 或托管项目。如果页面依赖服务器或数据库，先完成下面的边界检查。

1. 发布前，先花一分钟检查

把 index.html 作为入口

如果 CSS 和 JavaScript 已内联，或来自公开 URL，一个 HTML 文件就够了。如果页面使用 本地图片、样式表或脚本，请上传整个文件夹，并确保 index.html 位于顶层。 保留相对路径，页面发布后才能保持原有的资源引用和外观。

先移除秘密信息

HTML、CSS 和浏览器 JavaScript 中的内容都可能被访客读取。发布前请移除私有 API 密钥、 高权限服务令牌、密码和个人数据。AI 助手写进页面里的密钥，不会因为看起来像代码就自动受到保护。

确认页面是否依赖后端

• 静态页面可以渲染内容、响应控件操作，并在浏览器中完成计算。
• 保存共享数据、登录认证和隐藏高权限操作，仍然需要服务器。
• 发布后的 localhost 指向访客自己的电脑，不是你的电脑。
• 外部 API 必须通过 CORS 允许页面所在来源，并支持 HTTPS。

Plopino 提供静态页面访问，不会把浏览器代码变成后端。API 应部署在合适的服务上， 这里只发布静态前端。

2. 上传自己的页面前，先试一个完整示例

官方的渐变工作室是一个完整的单文件交互页面。你可以调整颜色和角度、查看 HTML， 或下载后修改一份副本。预览和下载都不会发布任何内容。先用它走完 “编辑 → 预览 → 发布”的流程，再上传自己的作品。

3. 发布页面并发送链接

1. 在上方上传区选择 HTML 文件、ZIP，或整个项目文件夹。
2. 等待上传完成，打开返回的链接，并在手机上再测试一次。
3. 把链接复制到邮件、聊天或文档中，接收方用浏览器即可打开页面。

如果图片或样式丢失，回到文件夹与相对路径检查，不要反复上传同一个 HTML 文件。 如果控件依赖本地服务器，先部署好后端，再把页面分享给别人。

页面修改后，继续沿用同一个链接

匿名上传是公开的，保留 30 天。发布后把页面保存到账号，才能持续管理。页面归属到账号后， 打开“我的展板”，在那里上传下一版：内容会更新，URL 保持不变。这适合仍在迭代的 AI 页面、 作品集，或需要修正的提案。

不要把机密工作放进匿名公开上传。无论是否登录，都只上传适合分享的内容，并先移除秘密信息。

常见问题

对方看到的是代码，不是页面

文件被当成了纯文本，而不是以 text/html 提供。把文件发布为网页， 发送生成的 URL，不要继续转发附件。

本地正常，发布后图片却不见了

HTML 很可能引用了没有一起上传的文件。请上传完整文件夹、保留目录结构， 并避免使用只存在于你电脑上的绝对路径。

页面能打开，但无法保存或获取数据

在浏览器控制台检查 localhost、失败的 API 请求、CORS，以及 HTTP/HTTPS 混合内容。发布前端不会同时发布你本地的 API。