这期分享针对独立站站长、全栈开发者和新媒体运营的高频图文处理需求，教你用提示词让 AI 快速生成图片批量优化、长图切片、SVG 雪碧图合并以及 SEO 关键词密度分析工具。完全纯本地浏览器运行，彻底告别付费软件的次数限制，打造属于你自己的私有化运营增长工作台！
图片批量 WebP 无损压缩与 SEO 智能重命名工作台
网站加载速度和图片 Alt 命名直接影响 Google 和百度的 SEO 排名。这个工具不仅能把沉重的图片转成 WebP，还能根据你设定的规则批量重命名文件，站长狂喜。
复制下方提示词发给 AI (如 Claude/Cursor)：
请用纯 HTML+JS+CSS 编写一个“图片批量 WebP 压缩与 SEO 重命名工具”。
核心要求：
1. 批量处理：支持拖拽上传数十张 JPG/PNG 图片，利用浏览器的 HTMLCanvasElement.toBlob() 进行本地并行压缩转换为 WebP 格式。
2. SEO 重命名引擎：提供一个输入框允许用户设置“主关键词”（如：电脑散热风扇），导出时自动将图片批量重命名为“主关键词-序列号.webp”的格式。
3. 性能与导出：压缩完成后，计算并显示总共节省的体积百分比。通过 JSZip 纯前端打包成 ZIP 压缩包提供一键下载。
4. UI 风格：现代极简风格，提供一个清晰的数据大屏面板展示压缩进度和体积对比，整体界面采用深色模式。
5. 交付：输出单文件 index.html 源码。
社交媒体长图无缝切片与网格生成器
在小红书或 Instagram 发布无缝长图或者九宫格拼图是极好的涨粉视觉策略。利用纯前端 Canvas API，精准裁剪，保证画质不流失。
复制下方提示词发给 AI：
请开发一个“纯前端长图无缝切片与网格切割工具”。
核心要求：
1. 切割模式：支持两种主流切割模式。模式一：横向或纵向等分切割（如将长图切成 3 段）；模式二：网格切割（如 3x3 九宫格、2x2 四宫格）。
2. 交互视图：用户上传图片后，在图片上方渲染出半透明的切割辅助线，用户可以实时预览切割后的图块数量和比例。
3. 导出质量：必须使用 Canvas API 按原图的原始分辨率进行裁剪，坚决不压缩画质。裁剪后通过 JSZip 批量打包下载。
4. 视觉规范：界面采用类似 Apple 液态玻璃的半透明悬浮面板操作区，底图可缩放拖拽。
5. 交付：包含完整代码逻辑的 HTML 单文件。
文案 SEO 关键词密度可视化分析与排版器
写商品描述或网站文章时，关键词堆砌会被搜索引擎惩罚，太少又没排名。这个工具能实时高亮你的关键词，计算密度，并直接排版清理格式。
复制下方提示词发给 AI：
请编写一个“纯本地文案 SEO 关键词密度分析与排版工具”。
核心要求：
1. 界面布局：左侧为文章编辑区，右侧为数据分析面板。
2. 核心分析：允许用户在右侧输入 1-3 个目标 SEO 关键词。系统实时统计左侧文章的总字数，并精准计算目标关键词出现的次数与“关键词密度百分比”。
3. 视觉高亮：左侧编辑器内必须将命中的目标关键词用明显的底色高亮标出，方便用户评估关键词在段落中的分布是否均匀自然。
4. 排版清洗：提供“一键清除多余空行”、“一键繁简转换”和“首行缩进”的文本格式化按钮。
5. 交付：HTML 单文件交付。
前端 SVG 图标可视化合并与 Sprite 雪碧图生成器
全栈开发者和独立站优化的性能利器！页面加载一堆散乱的 SVG 图标会严重拖慢速度，将它们合并成一个 Sprite 文件，可以通过单个请求解决所有图标加载问题。
复制下方提示词发给 AI：
请开发一个“纯前端 SVG Sprite 雪碧图可视化合并器”。
核心要求：
1. 解析与预览：支持拖拽批量上传多个 SVG 文件。解析每个文件的路径代码，并在界面上以网格卡片的形式展示图标预览，下方显示该图标即将生成的 Symbol ID（默认为文件名，允许双击修改）。
2. 合并逻辑：点击“生成”按钮后，将所有上传的 SVG 路径封装到统一的 <svg><defs> 中，每个图标独立为一个 <symbol> 标签。
3. 导出方式：右侧提供一个代码查看面板，实时生成最终的 SVG Sprite 源代码和对应的 HTML 引用示例代码（如 <use href="#id"></use>），提供一键复制或导出为 sprite.svg 文件。
4. UI 风格：极简的开发者工具风格，卡片交互需轻快流畅。
5. 交付：输出单文件 index.html 源码。
核心总结：
对于涉及到运营效率和批量处理的工具，在提示词中强调前端原生 API（如 Canvas 裁剪）和批量打包方案（如 JSZip）是成败的关键。只需一段话，AI 就能帮你搞定这些每天都会用到的生产力外挂，让你的建站和内容分发效率翻倍！
