手把手教你 3 分钟零成本打造专属在线原型工坊（基础篇）

作者 ：野生宝藏箱 项目地址 ：https://github.com/zaneven/HTMLhub 核心标签 ：AI 编程 / 原型管理 / 静态托管 / 零服务器成本 一句话简介 ：为散落各处的 AI 原型打造一个优雅、极简、即开即用的高颜值全屏工作台！

---

00. 序幕：AI 原型过载时代的“甜蜜负担”

你最近是不是也经常遇到这种场景：

让 Claude 生成了一个酷炫的单页数据大屏，随手保存到了 Downloads； 让 Cursor 搓出了一个 SaaS 控制台交互原型，解压到了桌面的“新建文件夹(3)”； 豆包 帮你手搓了一个单文件 HTML 计算小工具，塞在某个临时项目的子目录下； 甚至 ChatGPT 帮你写好的交互式行业分析报告，还躺在聊天记录或微信“文件传输助手”里……

随着大语言模型代码生成能力的井喷， “用自然语言一句话生成完整前端网页 / HTML 原型” 已经成为产品经理、独立开发者、设计师乃至全栈工程师的家常便饭。

但随之而来的痛点也无比真实：

“原型产出越来越快，但它们散落在各个角落——想给同事展示时找不到，找到了直接双击打开又因为屏幕分辨率过大或相对路径问题导致排版失真，更尴尬的是只能发一个几十兆的压缩包让对方自行解压……”

我们缺的早已不是生成原型的 AI，而是一个 能够优雅集中收纳、按项目分类、沉浸式大屏预览，且零运维成本的专属原型工作台 。

今天给大家分享一个刚刚开源的现代化解决方案—— HTMLhub ，手把手带大家在 3 分钟内搭建一个完全属于你自己的 零服务器成本在线原型库 （基础篇）。

---

01. 认识 HTMLhub：专为现代 HTML 站点与原型而生

开源地址：👉 https://github.com/zaneven/HTMLhub

HTMLhub 是一个现代化、高辨识度且即开即用的静态 HTML 站点与多应用聚合管理平台。它专门针对 “AI 生成 HTML 网页原型” 的痛点进行了深度重构与打磨：

核心亮点速览：

1. 双通道架构自由选 ：

• 纯静态模式 （新手推荐 · 零门槛 · 零服务器费用）：无需任何数据库、后端或云主机，直接把 HTML 丢进文件夹，1 秒自动生成目录和索引，纯前端本地或静态托管运行。
• 云端全功能模式 （进阶）：基于 Cloudflare 免费全家桶（Workers + R2 + KV），支持网页端拖拽上传、密码保护与跨端实时同步（本文末尾预告，下篇详解）。

2. 全屏沉浸式 Studio 预览工作台 ：

• 内置 标准桌面 （1440 × 900 · 16:10） / 全高清大屏 （1920 × 1080 · 16:9） / 移动端 （375 × 812 · 手机）与流式铺满等真实屏幕视口；
• 支持 20% ~ 150% 智能等比缩放 ，再也不用手动去拉扯浏览器窗口；
• 左侧文件树 + 右侧固定主入口稳态预览 ，彻底告别传统小弹窗的狭窄压抑。

3. 支持单文件与完整站点 ：
   • 既支持单文件 HTML（如独立交互报告、单页小游戏、可视化大屏）；
   • 也支持包含 css/、js/、assets/ 的完整多文件站点目录，自动识别 index.html 入口。
4. 极简专业交互 ：
   • 纯矢量图标设计（@vicons/ionicons5），无杂质视觉干扰；
   • 全局支持 ⌘ K / Ctrl K 快速命令搜索、分类聚合导航与智能排序；
   • 深度优化的深色/浅色双主题无缝切换。

今天这篇，我们就从 “零成本、零后端、上手即用” 的纯静态模式开始！

---

02. 手把手实操：3 分钟打造本地专属原型工坊

在纯静态模式下，你不需要购买服务器，不需要配置云数据库，只要电脑里有 Node.js 环境即可。

第一步：克隆项目并安装依赖

打开终端，执行以下命令：

git clone https://github.com/zaneven/HTMLhub.git
cd HTMLhub
npm install

第二步：建立分类，丢入你的 AI 原型文件

进入项目根目录下的 public/html-files/ 文件夹。

在这里， 文件夹名称直接对应系统里的分类名称 。你可以根据自己的日常业务场景新建分类，例如：

public/html-files/
├── 数据大屏/
│   └── 智慧能源监控看板.html        <-- 单文件原型
├── 移动端原型/
│   └── 租户端App/                  <-- 完整多文件项目文件夹
│       ├── index.html
│       ├── css/
│       └── js/
└── 报告总结/
    └── 2026年Q1产品迭代规划.html

贴心设计 ：

• 如果是单文件 HTML，直接扔进对应分类文件夹；
• 如果是包含 CSS、JS、图片的完整多文件站点，把整个文件夹丢进去即可，HTMLhub 会自动识别项目目录并智能定位 index.html。

第三步：一键运行扫描生成索引

文件丢好之后，只需要在终端运行一行命令：

npm run scan

这条内置的扫描脚本会以毫秒级速度递归扫描 public/html-files/：

• 自动提取分类和所有项目元数据；
• 统计各项目的文件总数、体积大小、最后修改时间；
• 智能标记主入口页面；
• 自动生成结构清晰的 public/data/file-index.json。

第四步：启动本地工作台预览

在终端执行：

npm run dev

在浏览器打开终端提示的地址（如 http://localhost:5173），你就能立刻看到一个简约的现代原型工作台！

• 按 ⌘ K（Windows 下按 Ctrl K），输入关键词秒级模糊检索任意原型；
• 点击左侧侧边栏即可按分类筛选项目；
• 任意点击一个卡片，即可一键直达 全屏沉浸式 Studio 工作台 。

---

03. 沉浸式工作台：为什么比传统方式好用 10 倍？

过去我们查看或演示原型，通常是直接双击 HTML 文件用浏览器标签页打开。

这种方式有一些硬伤：

1. web尺寸不真实 ：你的电脑屏幕如果是 2K/4K，打开一个按 1440x900 设计的原型，页面两侧会大面积留白，版心严重失真；
2. 移动端拉伸严重 移动端原型在电脑上更是直接被拉伸成诡异的宽屏，这种情况下你可能还得启用开发者工具调整，或者缩放页面宽度。

而在 HTMLhub 的全屏工作台中：

• 真实比例一键切 ：顶部视口栏一键在 桌面 16:10、大屏 16:9、手机 375x812 和 铺满 之间切换，并带平滑缩放百分比微调；
• 文件树直观可溯 ：左侧清晰展开整个项目的目录树，文件大小、后缀图标一目了然，点击子文件即可即时查看对应内容；
• 本地只读安全保护 ：本地静态项目默认开启安全只读标记，既能在线查看全量明细，又杜绝了误删本地重要文件的风险。

---

04. 进阶一步：免费一键上线，随时生成链接发给同事

既然是纯静态模式，我们当然可以把生成的静态文件免费托管到全球任何地方！

只需运行构建命令：

npm run build

构建完成后，项目根目录会生成一个 dist/ 文件夹。

你可以把这个文件夹直接免费部署到：

• Vercel / Netlify ：直接把 dist 拖拽上传，几十秒拿到一个全球 CDN 加速的访问域名；
• GitHub Pages / Cloudflare Pages ：直接推送代码，免费开启静态页面托管。

把链接往飞书群、微信群里一发，老板和同事点开就能在浏览器里流畅把玩你做好的所有原型，高级感直接拉满！

---

05. 文末预告：想要更极致的“懒人在线协同”？

看到这里，你可能会问：

“纯静态模式确实很爽，但如果我经常在不同电脑上工作，或者人在外头只有手机，或者不想每次有新原型都本地 clone、scan 再部署，怎么办？” “能不能让我直接打开一个网页，输入管理密码，直接把 AI 刚写好的 HTML 甚至整个站点文件夹拖拽上传，云端秒级同步？” “而且能不能依然不需要买云服务器、不掏一分钱月租？”

完全可以 ！

HTMLhub 原生就具备 双通道云端架构 。我们基于 Cloudflare 免费全家桶 （Workers + R2 对象存储 + KV 缓存），打造了不需要服务器、零出口流量费、永久免费额度的云端管理模式：

• 支持随时随地浏览器拖拽上传（单文件、多文件、整站目录）；
• 单密码极简鉴权，保护你的未公开原型不被外部闲杂人等随意查看；
• 手机、平板、电脑多端实时同步。

在下一篇进阶篇 《服务器月租直接打到 0 元！手把手教你用 Cloudflare 免费全家桶搭建支持拖拽上传的云端原型中枢》 中，我们将手把手带大家白嫖 Cloudflare 顶级基建，不到 10 分钟搭出属于你的多人在线协同原型云平台！

敬请期待下一期更新！如果觉得本文对你有启发，欢迎在 GitHub 为项目点个 ⭐️ Star 支持一下： 👉 https://github.com/zaneven/HTMLhub