Agent Skill 设计与创意

SEO图片优化

利用AI技术分析并优化图片,提升其在搜索引擎中的可见性和排名,吸引更多流量。

查看 GitHub 仓库 ↗ ⭐ 40 Stars

📌 Skill基础信息

Skill名称:seo-images(SEO图像优化分析)

来源:社区第三方(mits-pl/wove仓库)

运行宿主:专为Claude Agent设计(通过Claude-Code CLI工具运行)

核心定位:自动化检测网页图像SEO问题并提供优化建议,适用于网站性能优化和搜索引擎优化场景。

🧩 内部核心组成

核心检测能力

  • Alt文本检测:检查所有img元素的替代文本质量
  • 文件大小分析:按图像类别分级阈值检测
  • 格式优化建议:推荐现代图像格式(WebP/AVIF)
  • 响应式图像检查:srcset和sizes属性验证
  • 懒加载配置:正确应用loading="lazy"属性
  • CLS预防:检查width/height属性设置
  • 文件命名规范:检测描述性文件名

可用工具集

工具名称功能简述
web_open打开目标网页
web_read_text读取网页文本内容
web_read_html解析HTML结构
web_seo_audit执行SEO审计
web_exec_js执行JavaScript代码
web_click模拟点击操作
web_type_input模拟键盘输入
web_press_key模拟按键操作
term_run_command运行终端命令

🛠 安装与启用方式

安装命令

skills install --user mits-pl/wove

前置要求

  • Claude-Code CLI运行环境
  • 网络连接(用于访问目标网站)
  • 有效的URL参数(需要分析的目标网页)

启用方式:在Claude对话中使用相关触发词启动技能

📋 标准工作流

  1. 用户触发:用户输入"image optimization"、"alt text"、"image SEO"等关键词
  2. URL获取:技能提示用户提供目标网页URL或自动检测当前页面
  3. 页面分析:通过web_open和web_read_html工具加载并解析页面
  4. 图像检测:系统遍历所有img元素,进行多维度分析
  5. 问题分类:按严重程度分类发现问题(缺失alt文本、尺寸过大、格式不当等)
  6. 报告生成:输出结构化审计报告,包含统计数据和优化建议
  7. 优化建议:提供具体的修复方案和预估节省空间

⚠️ 关键限制、缺陷、注意事项

平台限制

  • 仅支持Claude Agent环境运行
  • 无法分析需要登录认证的页面
  • JavaScript动态加载的图像可能检测不全

性能消耗

  • 需要完整加载目标网页,可能消耗较多token
  • 大型图像密集型网站分析时间较长

技术限制

  • 无法直接访问CDN或受保护的图像文件
  • 依赖浏览器环境执行检测脚本
  • 部分现代图像格式(如JPEG XL)支持度检测有限

生产环境适用性:适合开发测试环境使用,生产环境需结合人工验证

✅ 适用场景 & ❌ 不适合场景

✅ 适用场景

  • 网站开发者:快速检测图像SEO问题
  • 内容创作者:优化博客和文章中的图像
  • SEO专家:进行全面的图像优化审计
  • 性能优化:识别图像导致的性能瓶颈
  • 教育培训:学习现代图像优化最佳实践

❌ 不适合场景

  • 高度动态网站:大量JavaScript渲染的图像
  • 私有认证内容:需要登录才能访问的页面
  • 实时生产监控:需要24/7自动化监控的场景
  • 极端性能要求:毫秒级响应的关键业务系统
  • 非网页内容:本地文件或非HTTP资源的图像分析

如何安装

skills install --user mits-pl/wove

通用安装教程:在哪里输入上面的命令

上面的命令本质是在「终端 / 命令行」中调用技能管理器,把该 Skill 下载并注册到你的 AI 工具。各主流工具打开终端的位置不同,按下面操作即可:

  1. 打开工具自带的终端面板,或系统终端(macOS「终端」、Windows「PowerShell」、Linux「Terminal」)。
  2. 把上面的安装命令复制进去,回车运行,等待下载与注册完成。
  3. 重启或重新加载 AI 工具,让新安装的 Skill 被识别。
  4. 新建对话并触发:直接描述用途,或通过该工具的技能 / 斜杠菜单选中此 Skill。
Claude 桌面版(macOS / Windows)

桌面版没有内置命令行,Skill 需通过 Claude Code CLI 安装。打开系统终端,先执行 npm install -g @anthropic-ai/claude-code,再运行上面的安装命令;完成后完全退出并重新打开 Claude。

Claude Code(终端 CLI)

直接在项目目录的终端里运行上面的命令即可。也可先输入 claude 启动交互界面,再在对话中引用该 Skill(/ 斜杠菜单或直接描述用途)。

VS Code(含 GitHub Copilot)

打开终端面板:菜单「终端 → 新建终端」,或快捷键 Ctrl+`(macOS 为 ⌃+`)。在终端里运行上面的命令;装完后执行「重新加载窗口」(Ctrl+Shift+P → Reload Window),让 Copilot 等扩展识别新技能。

Cursor

底部「终端」面板(Ctrl+`)即是内置终端。粘贴运行上面的命令,完成后在命令面板执行「Reload Window」刷新,再开始对话。

Windsurf

底部「终端」面板运行命令;也可直接使用其内置 Agent 终端,在对话侧执行安装。

其他工具(ChatGPT、本地脚本等)

不支持本地终端的产品,可先在本机终端完成安装,再在对话中描述该 Skill 的能力让其调用;不同工具的命令格式请以其官方文档为准。

风险提示

✅ 低风险

自动扫描未发现高危命令、隐私抓取或数据外传行为。仍建议安装前快速浏览仓库代码。

相似 Skill 推荐

A/B测试
sickn33/agentic-awesome-skills
低风险

当用户需要规划、设计或实施A/B测试/实验,或构建增长实验项目时使用。适用于用户提及“A/B测试”、“拆分测试”、“实验”、“测试此变更”、“变体文案”、“多变量测试”、“假设”、“是否应测试此内容”等场景。

花叔设计
alchaincyf/huashu-design
中风险

花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选(指定风格/品牌也不豁免),选定后才执行。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个H

cdxgen
cdxgen/cdxgen
中风险

从源代码和容器镜像为您的项目创建CycloneDX物料清单(BOM)。支持多种语言和包管理器。可集成到CI/CD流程中,自动提交至Dependency Track服务器。

FSE实验设计
brycewang-stanford/Awesome-Journal-Skills
低风险

用于设计或评审ESEC/FSE实证评估,涵盖真实主体系统、公平基准、SE标准统计与效应量、定性与混合方法严谨性、污染感知的LLM消融实验、挖掘研究的可追溯性,以及证据与软件工程主张形态的匹配。