HTML模板画廊:skill里的版式长什么样,终于全都能看见了

今年 HTML 在 AI 圈很热。

张咋拉开源的 beautiful-html-templates 和 frontend-slides 都是很好的版式skill，归藏的 guizang-ppt-skill——三个项目加起来几万 star。用 AI 生成网页幻灯片，不用 PowerPoint，不用 Keynote，浏览器打开就能播。越来越多人开始玩了。

我也在玩。而且玩得很上头——杂志风、霓虹赛博、水墨卷轴、WebGL 流体背景，攒着攒着就攒了 61 套。

然后我碰到了一个很具体的问题。

看不到版式的效果，不知道怎么挑。

61 套模板，要看效果？要么让 AI 挨个渲染，要么打开 GitHub 对着文件名猜。这个杂志风和那个杂志风到底差在哪？哪个适合产品发布、哪个适合技术分享？没有办法一眼对比。

让AI推荐，总不信它推荐给我的是最好的。

要是有可以全部都展示出来直接挑就好了。

版式好多，但我眼睛看不见。

于是我闷头又写又调了一个周末。

HTML 版式画廊

一个本地网页。跑起来之后自动扫描你装过的模板库，把每个模板渲染成卡片——缩略图、配色、字体、风格标签，全在一屏上。

左边按来源筛选，点开看详情，新窗口打开完整模板。装了新模板点一下「更新」，不用重启。

不绑定 AI 工具。Claude Code、Cursor、Windsurf、手动管模板文件夹——都能用。

怎么跑

把它丢给你的 AI，让它装好启动，浏览器打开就完事了：https://github.com/wampeeHuang/skill-html-showcase

还没装模板？

这三套装上就有得看：

模板库	作者	风格
beautiful-html-templates^[1]	张咋拉	32 套，杂志到赛博
frontend-slides^[2]	张咋拉	12 套动画幻灯片
guizang-ppt-skill^[3]	归藏	杂志风，WebGL 流体

这个东西不复杂。就是想把本地有的文件版式变成眼睛能看见，在让 AI 帮你写幻灯片之前，先看看自己手里有什么牌。

如果你也装过模板库但从没仔细翻过——跑一下试试。打开画廊的那一刻，你就懂了。

HTML 版式画廊 · 你的本地模板，终于能看见了

GitHub 传送门：https://github.com/wampeeHuang/skill-html-showcase

引用链接

[1] beautiful-html-templates: https://github.com/zarazhangrui/beautiful-html-templates[2] frontend-slides: https://github.com/zarazhangrui/frontend-slides[3] guizang-ppt-skill: https://github.com/op7418/guizang-ppt-skill[4] GitHub 仓库: https://github.com/wampeeHuang/skill-html-showcase