张拼拼AI实战教练
← 回首页

网页秒变一页纸 PDF — 我把这个 skill 开源了

真人长视频 · EP0035 2026年6月10日 3:01
这一期讲什么

最近非常流行用 AI 生成各种漂亮的网页，作为汇报的交付物。但有一个问题：把网页通过聊天工具发给客户或合作伙伴的时候，有时对方打不开，或者打开之后内容是混乱的——手机上的聊天工具没办法直接渲染网页。

打印成 PDF 也不行：它默认用 A4 的纸渲染，会把漂亮的长网页截成一段一段；网页里的动效和半透明效果，颜色渲染也是错的。

所以我做了这个 skill：先渲染网页测算实际宽高，按准确高度做容器，严丝合缝生成一页纸 PDF，裁掉多余白边，毛玻璃替换成真实颜色。已经开源，丢给 Claude Code 一句话就能用。

配套下载 · 给你的 Claude Code 学
onepage-pdf · Claude Code skill GITHUB
把 HTML 网页变成不分页的一页纸 PDF：渲染测算实际宽高 + 严丝合缝容器 + 裁白边 + 毛玻璃真彩替换。把仓库地址丢给 Claude Code 说「看一下这个 skill 怎么用」，它会自己装好依赖。

给大家分享一个特别实用的 skill。最近非常流行用 AI 生成各种漂亮的网页，作为我们汇报的交付物。但有一个问题，我在工作当中就会遇到：把这个网页通过聊天工具发给我们的客户或者合作伙伴的时候，有时候对方打不开；或者打开之后，看到的内容是混乱的，跟我们生成的网页完全不一样。

为什么网页发出去会乱

这是为什么呢？其实手机上，我们的聊天工具是没有办法直接渲染网页的，它需要用户去调用浏览器来完成这个过程。这个操作在手机上还是有点繁琐，有些人其实不会去做。

那我就在想怎么解决这个问题。一开始我直觉地想到：把网页打印成一个 PDF 文件嘛，之前都会这么做。但其实会遇到蛮多问题——PDF 默认用 A4 的纸去渲染，它会把我们漂亮的一个长网页截成一段一段的内容，不再是连续的；而且网页当中会有很多动效以及一些透明效果，它的颜色渲染其实是不正确的。

这个 skill 怎么做的

所以我就做了这个 skill，可以把我们的网页严丝合缝地变成一个一页纸的 PDF。它是怎么做的呢：

  • 先把网页进行一次渲染，测算这个网页实际的宽度和高度；
  • 按它准确的高度做一个容器，把 PDF 完全严丝合缝地生成出来；
  • 同时裁掉网页多余的空白白边，生成一个非常完整的一页 PDF；
  • 网页里特殊的毛玻璃、半透明渲染效果，会进行真实颜色的替换，不影响显示。

生成的 PDF 在手机或者 Pad 上打开，都会自适应宽度，是一个非常好的呈现。

已开源，一句话就能用

我已经把这个 skill 开源了，大家可以直接下载。下载之后直接跟 Claude Code 说：「给你一个 skill 的仓库地址，你去看一下这个 skill 怎么使用」——它就会帮你安装相应的依赖，把 skill 加载到你的项目文件夹里，之后就可以非常简单地使用了。

比如这期视频里展示的介绍页，我其实就是在 Claude Code 里用一句话生成的：「我们有一个把网页变成一页 PDF 的 skill，请你生成一个 PPVI 浅色的网页，用简单易懂的语言把它介绍给大家；生成完后，把这个网页变成一页 PDF。」它就把 PDF 生成出来了，我们就可以分享给其他人。特别好用、特别实用的一个 skill。

今天我准备了两期内容，第一期比较简短。大家可以去我的主页看第二条视频，讲的是今天 Claude 更新的 Fable 模型，我们要怎样在它的限时免费期间，把它榨到最干、榨到最全。我们下期见。

我就做了这个 skill，可以把我们的网页严丝合缝地变成一个一页纸的 PDF。