最近基于 Vibe Coding 的方式，开发了一些自媒体写作相关的工具，目前差不多成型了有 2 个，分别是「在线图片极速压缩」工具，「飞书转公众号一键排版」工具，现在已经开源，有需要的可以自取，或者 Fork 下来进行二次开发。
至于为啥要开发这 2 个工具，主要有 2 点，一来想通过真实项目体验一下 最新很火的 Vibe Coding 新的开发范式，二来这 2 个工具背后对应的我的痛点目前没有很好的解决。
拿图片压缩来说，本地在 mac 上最简单的方式，是通过电脑自带的预览工具，预览时直接点击左上角菜单【文件】、【导出】即可，单张图片尚可，多张就有点低效了，而且这个工具压缩率也不太高。
在线可以通过 tinypng 这样的工具，但是在线的方案目前都是需要将图片上传到☁️云端，压缩完成再下载下来，图片大了网络带宽不够速度很慢。
而且这种方式也不太安全，例如一些涉及个人隐私的敏感的照片，以前随便压缩，现在商业化了，单张图片超过 5M 需要 Vip 才能使用，就为这样一个小小的功能给你开个 VIP ？？？
公众号排版工具也是样，第一次用官方的排版工具发现真的好鸡肋，格式很难批量调整，虽然官方推出了个一键排版工具，但是通过那个工具出来的样式都是一个风格，没一点个性，容易泯然众矣～
也有一些第三方公司开发了一些工具解决排版的痛点，例如壹伴、135、秀米，但是都是基本得付费，付费就付费，还是订阅制，按月或者年进行订阅，这个成本对公司算毛毛雨，但对个人博主来说有点没有必要，毕竟我们真的需要用到的功能就那么几个。。。
基于上面的痛点，开发这2 个需求的愿望愈发强烈，于是在某个月黑风高的夜晚，我决定自己撸一个。
经过多轮反复的迭代验证，目前 2 个工具对应功能基本满足我目前这两面的需求，反正自从弄好后，天天用，发现问题和新的需求直接迭代，如此反复。
下面给大家展开介绍一下 2 个工具，在介绍之前我先叠个甲，目前这个工具仅供个人开发学习用，部分功能可能存在瑕疵，希望大家不要喷，抱着开放的心态使用，毕竟是免费的～
图片极速压缩工具
在线体验：blog.wangruofeng007.com/img_compres…
工具定位：一个安全、快速、完全在浏览器中运行的图片压缩工具 ｜A secure, fast, browser-based image compression tool
历史文章：隐私优先的基于浏览器端的 Github 开源的图片压缩神器，批量处理+实时对比一键搞定
主要特性
-
🔒 完全客户端处理 - 所有图片处理都在浏览器中完成，不会上传到任何服务器，保护您的隐私
-
🎨 实时预览对比 - 支持拖拽分割线对比原图和压缩后的图片效果
-
🎯 图片质量进度条 - 带高亮选中部分的进度条，根据质量值显示不同颜色（绿色/黄色/红色）
-
🚀 批量处理 - 支持同时压缩多张图片，提高工作效率
-
🎛️ 灵活配置 - 可自定义图片质量、输出格式和最大宽度
-
🌍 多语言支持 - 支持英文、简体中文和繁体中文，默认简体中文
-
💾 格式转换 - 支持 JPG、PNG、WebP 格式之间的转换
-
📱 响应式设计 - 完美适配桌面端和移动端设备
-
⚡ 高性能 - 基于 Canvas API，压缩速度快，资源占用低
-
🌐 在线访问 - 已部署到 GitHub Pages，可直接在线使用
主要功能
-
拖拽上传 - 支持点击或拖拽图片文件
-
实时压缩 - 上传后自动开始压缩处理
-
对比预览 - 点击预览按钮，通过拖拽分割线对比压缩效果
-
批量下载 - 一键下载所有压缩后的图片
预览对比
预览界面支持通过拖拽竖直分割线来对比原图和压缩后的图片：
-
分割线左侧显示压缩后的图片
-
分割线右侧显示原图
-
默认分割线位于中间位置（50%）
-
支持鼠标和触摸拖拽操作
功能演示
压缩预览 WebP，支持 3 种格式互相转换
压缩预览 JPG，支持批量上传和下载
压缩图片前后预览，可以通过拖拽中线对比压缩效果
飞书转公众号一键排版
在线体验：blog.wangruofeng007.com/feishu2wx/
工具定位：一个安全、快速、完全在浏览器中运行的图片压缩工具 ｜A secure, fast, browser-based image compression tool
历史文章：排版自由了！10万创作者都在用的飞书→公众号直达方案
主要特性
-
📋 飞书文档直接粘贴 - 支持从飞书文档复制内容，自动转换为 Markdown 格式
-
✏️ 实时编辑预览 - 左侧编辑 Markdown 源码，右侧实时预览渲染效果
-
🎨 8 种精美主题 - 内置 8 种主题（经典、绿意、紫色、橙色、粉色、蓝色、红色、青色）
-
🎨 品牌色高亮 - 标题中"飞书文档"使用飞书主题色（#00BECA），"微信公众号"使用微信主题色（#07C160），提升视觉识别度
-
🔤 字体选择 - 支持 16 种免费无版权字体，包括系统字体和 Google Fonts
-
📱 设备预览切换 - 支持电脑和手机两种预览模式
-
👁️ 隐藏源码 - 可隐藏左侧编辑器，专注预览效果
-
⛶ 全屏预览 - 支持全屏预览模式，内容居中显示（60%宽度）
-
📝 Markdown 工具栏 - 快速插入标题、列表、链接等常见元素
-
📋 一键复制 - 一键复制格式化后的内容到微信公众号编辑器，保留所有样式
-
👁️ H1 底线切换 - 可隐藏/显示 H1 标题底部横线，满足不同排版需求
-
🖼️ 图片样式切换 - 支持边框模式和阴影模式，灵活调整图片视觉效果
-
💻 代码语法高亮 - 支持代码块语法高亮，使用 Atom One Dark 主题，显示语言标签
-
🎨 精美样式 - 优化的代码块、引用、表格等元素样式，提供更好的阅读体验
-
🎯 响应式设计 - 完美适配桌面和移动设备
-
💻 纯前端实现 - 无需后端服务，可直接部署为静态网站
基本使用
-
粘贴飞书文档内容
-
编辑 Markdown
-
切换主题
-
预览编辑
-
复制到微信公众号
功能演示
首页
拿最新发布的一篇博客来进行排版举例
排版后的效果，你看到历史文章和这里的效果不一样，观察得很细心，因为最近又进行了迭代了。。。
在编辑页面可以进行微调，内容没有问题点击复制，会弹框提醒
然后去微信公众号后台，新建一篇文章粘贴上，配置好封面和标题就可以发布了。
这里其实还有很多步骤可以优化，例如填写标题、手动粘贴、封面图上传等等，我发现需求会源源不断冒出来。
上面的痛点我已经找到方案，后面会迭代掉，敬请期待～
毕竟一键同步 X 都能做到，一键同步到公众号又有何难的。
Skill 这么火，为什么我选择开发 Web App？
现在 Skill 很火，有人问我："这两个工具为什么不做成 Skill？"
这个问题问得好。开发过程中我也想过，但实践下来发现，Skill 和 Web App 适用的场景不太一样，硬要套用反而麻烦。
Skill 和 Web App 的区别
Skill 更适合"自动执行"类任务：规则明确、流程固定、跑完就结束。
Web App 更适合"交互操作"类场景：需要实时预览、反复调整、可视化操作。
这两个工具为什么用 Web App？
1. 图片压缩工具：要能看效果
用 Skill 做图片压缩，基本就是个黑盒：输入图片 → 设置参数 → 输出结果。
但问题在于：
- 质量设为 80 还是 85？看不到效果很难判断
- 压得怎么样？必须下载下来才能看
- 批量处理时某张不满意？只能重新跑一遍
Web App 可以实时预览：拖拽分割线就能对比压缩前后的效果，边调边看，直到满意为止。
2. 飞书转公众号工具：要能反复调
排版不是一次性的事，基本都要编辑、预览、调整、再预览，来回几次：
- 标题字号大一点还是小一点？切换主题看看
- 这段话加粗效果如何？右侧立即渲染看
- 图片用边框还是阴影？切换样式对比一下
用 Skill 的话，每次调整都要重新执行命令，反而慢。Web App 左右分栏实时预览，调整起来顺畅很多。
什么时候用哪个？
Skill 适合：
- 批量重命名文件
- mov 转 mp4
- 抓取网页内容
- 生成代码片段
Web App 适合：
- 需要可视化界面和实时预览
- 需要反复调整参数
- 需要复杂的状态管理（主题切换、历史记录）
- 需要精细的交互控制（拖拽、滑块、对比）
我的选择
开发前我会想三个问题：
- 用户是不是要边调边看？
- 任务是不是要反复执行？
- 是不是要可视化操作？
如果都是，那就用 Web App。都不是，才考虑 Skill。
Skill 火不代表什么都得做成 Skill。这两个工具如果硬做成 Skill，用户体验反而会变差。我选 Web App，不是因为它高级，是因为它更符合实际使用场景。
产品形态应该服务于用户需求，而不是跟着技术热点走。
小彩蛋🥚：mov 转 mp4
这里通过 QuikTime Player 录了 2 个演示视频，默认格式是 mov，需要转换一下才能使用。
这里把我这次用的转换方法分享给大家，虽然不是最佳实践，但是也是最短路径之一。
后面会通过封装 Skill 来实现，至于 Skill 是什么，不知道的同学可以去看我的这篇文章:2026 年 Claude Skills 实战指南：让 AI 懂你的业务。
这里我采用了最直接的方式，问 CC，哈哈，最强打工人，该你出场了，叮～
AI 时代，不知道怎么搞，试试 AI 能不能帮我搞定，需要把这种解决问题的思路变成直觉，这里使用 Claude Code 后面简称 CC，和 GLM 4.7 模型。
看看本地有没有安装什么视频格式转换 Skills，CC 会搜索本地所有 Skills 相关的目录
CC 发现没有直接的 Skill，但是发现我安装过 ffmpeg 这个开源视频 CLI（ Command-Line Interface , 命令行界面）工具处，可以基于这个 CLI 工具进行转换
按照指引输入要转换的文件地址，直接拖拽进去即可自动识别，执行转换，一会儿功夫就转换完成
