通宵 Vibe Coding 了一个单文件 html 的在线分享工具

HTML 网页分享

:artist_palette: 一句话介绍

把你的网页创意变成真实的在线页面,一键分享给他人!


:sparkles: 核心功能

智能 AI 助手

  • 描述你想要的页面,AI 几秒钟帮你生成
  • 支持中文提示词,例如:帮我生成一个科技感登录页
  • 可以在现有页面基础上继续调整优化

实时预览

  • 左边写代码,右边即时看到效果
  • 支持电脑端和手机端预览切换
  • 全屏预览模式,查看完整页面效果

一键分享

  • 生成专属链接和二维码
  • 分享给朋友、客户、同事
  • 发布到网页分享站,让更多人看到你的作品

可视化编辑

  • 不懂代码也能用!点击页面元素直接修改
  • 像使用设计软件一样直观
  • 拖拽组件快速搭建页面

会话管理

  • 多个项目同时进行
  • 随时切换,工作更有条理
  • 自动保存,不怕丢失

:rocket: 适用场景

场景 示例
:briefcase: 工作汇报 快速制作产品介绍页、数据看板
:graduation_cap: 学习分享 展示代码示例、学习笔记
:artist_palette: 创意展示 个人作品集、设计原型
:tada: 特殊场合 生日祝福页、邀请函、简历
:test_tube: 测试调试 前端代码测试、效果预览

:open_book: 使用方式

方式一:AI 生成(推荐新手)

  1. 在 AI 提示词框输入你想要的页面描述
  2. 点击「开始生成」
  3. AI 自动生成完整页面
  4. 点击「分享网页」生成链接

方式二:手动编写(适合有基础的用户)

  1. 在左侧编辑器编写 HTML 代码
  2. 右侧实时预览效果
  3. 点击「分享网页」生成链接

方式三:上传文件

  1. 点击「上传 HTML 文件」按钮
  2. 选择本地的 HTML 文件
  3. 自动加载到编辑器
  4. 点击「分享网页」生成链接

:glowing_star: 立即体验

访问 HTML 网页分享站,开始创建你的第一个网页吧。

无需注册即可使用基础功能,登录后可以管理你发布的页面。

看起来挺酷的,不过我有个细节想问问,AI生成的部分,如果我对效果不满意,可以再给AI下指令让它改吗?还是说只能自己手动去调代码?

mark一下,回头试试

这东西就那样

没用过,是不是我写好的本地html上传之后,直接就能生成一个公开链接?那链接有效期是多久啊,不会过几天就失效了吧?还有,如果上传的html里引用了本地的图片或者css文件,是不是就不行了?必须得是纯单文件的?

小白问一下哈,这个“可视化编辑”具体是怎么操作的呀?是不是像一些建站工具那样,右边点一下文字就能直接改内容?我有点担心这种功能对复杂一点的布局支持不好。

哈哈哈,通宵Vibe Coding,楼主这状态我熟啊。之前我也干过类似的事儿,为了一个在线简历生成器肝到天亮,结果第二天上线发现有个致命bug,又得重头改。这种单文件工具想法是好的,部署简单,但功能做多了就得考虑架构了,不然后期维护头疼。楼主加油!

我之前用过一个国外的类似工具叫HTML预览分享,功能差不多但没AI。你这个加上了中文AI提示词确实对国内用户友好了不少。我试了一下生成一个“简约产品介绍页”,效果还行,但布局有点死板。后来我手动调了CSS,实时预览挺跟手的。分享出去的链接打开速度也不错。

最近天气不错,适合出去走走,老对着电脑不好。

又来这种帖子了,每个都说自己“零代码”、“AI生成”,最后还不是得懂点前端才能调出想要的样子。一键分享听起来美好,但实际用起来限制一堆。

操作挺简单的:打开网站,在左边文本框粘贴你的HTML代码,右边马上就能看到效果。确认没问题点分享按钮,复制链接就行了。我试过,从写到分享出去总共不到两分钟。

感觉很适合我们老师上课用!有时候想现场演示一段代码效果,还得先部署到服务器,麻烦死了。这个工具是不是可以直接把写好的案例页链接扔到班级群里,让学生自己点开看?回头让课代表研究一下。

这种工具适合快速演示,复杂页面还是得自己上手调

单文件html分享挺实用,就是引用本地图片那块容易翻车

单文件html在线分享这思路挺实用,省得自己开服务器

上传的本地图片得换成图床链接,不然分享出去图全裂

本地图片得转base64塞进html,不然分享出去全是裂图

通宵肝完上线踩雷这剧本太熟了,第二天又得重头来一遍