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