我平时看到好文章，会习惯性地收藏到本地，用于稍后读或者永久保存。

AI 时代，我认为文字信息存储最好的载体就是 markdown，因此把笔记软件换成了 Obsidian。此时就需要合适的网页剪裁工具，一键保存到我的 Obsidian 笔记库，连图片一起下载到本地。

尝试了很多工具，有简悦、Obsidian Web Clipper、MarkDownload 等工具，要么太复杂，要么效果不是很满意。

（话说简悦的配置真的是太复杂了，为此我买了会员，前前后后折腾了好几次，但是还是没有折腾明白）

看到数字生命卡兹克的一篇将 GitHub 内化成 skills 的文章，我灵光一闪，为什么不尝试做一个网页剪裁的 skills 呢？

借助 Codex（Claude Code 也可以），只花了半个小时，就完全搞定了。

（Codex 需要 ChatGPT 会员，不知道怎么开通的，看文末）

先看效果

先给大家看一下折腾之后的效果，下图是剪裁公众号文章到本地的效果：

是不是还可以？触发很简单，只需要在 Codex 中说网页剪裁，后面附上文章地址就行：

剪裁文章：https://mp.weixin.qq.com/s/we8NY54kHMmPZ2uhZluiuw

其实这个 skill 不止有剪裁的功能，还能将文章放到指定位置，并对图片等附件名称进行改写，具体流程如下：

1. 给 webpage-clipper skill 发送待剪裁的链接地址
2. webpage-clipper skill 读取网址，提取内容和图片等，转成 markdown
3. 将 markdown 保存到本地笔记库指定路径 00_Inbox
4. 将图片等资源保存在本地笔记库指定路径 assets
5. 将图片名称重命名，格式为 `${date}-${md5}`

网页剪裁 skill 制作过程

从 0 开始创建一个网页剪裁 skill 还是比较麻烦的，需要迭代很多次才能达到想要的效果，因此最好的方式是站在巨人的肩膀上。

我之前用思源笔记，就特别喜欢它的网页剪裁插件（GitHub 项目地址：https://github.com/siyuan-note/siyuan-chrome），所以我就把这个项目地址扔给 Codex，让它参考这个项目创建一个网页剪裁 skill，具体如下：

[Skill Creator] 参考 GitHub 项目：https://github.com/siyuan-note/siyuan-chrome，创建一个网页剪裁 skill，效果是给一个网址，将网页剪裁成本地 markdown（含图片）

找不到 init_skill.py 和package_skill.py ，这是我的问题吗？这是它的问题，让它自己想办法。

图片目录默认为 Obsidian 根目录下的 assets，markdown 文件目录默认为 Obsidian 根目录下的 00_Inbox。 init_skill.py 和 package_skill.py 你自己想办法

截止第二轮，其实这个技能已经基本可用了。但是我测试了下，无序列表剪裁效果不行，图片没抓到，丢了。所以继续 PUA Codex：

到这里其实剪裁效果已经很好了，后面我又优化了几轮，主要是对表格抓取失败、图片命名、文档属性的一些优化和微调。

结尾

看完这个过程，我相信很多朋友都会有一个想法，那就是 GitHub 上面的优秀的开源项目是不是都可以内化成 skills？

答案是 Yes！

GitHub 上面优秀的开源项目浩如烟海。

曾经，很多人受限于办公设备、计算机知识，很多 GitHub 项目只可远观而不可亵玩；现在，AI 时代，这些项目都可以内化成本地技能，应用到工作生活中，飞入寻常百姓家。

这一切，只需要几轮对话。