前端开发者福音：让 Claude Code 自动生成 favicon 和社交预览图

前端开发者福音：让 Claude Code 自动生成 favicon 和社交预览图

每次新项目上线，你是不是都要手动做一轮“资产垃圾活”？favicon、apple-touch-icon、Open Graph 图、manifest.json……一套下来，光是命名、裁剪、导出、嵌入 HTML 标签，就能消耗掉半天时间。

web-asset-generator 就是为了干掉这套重复劳动而生的 Claude Code Skill。

它到底是什么？

这是一个“会画图的 Prompt 包装器”。装上之后，你直接用自然语言跟 Claude 说：

• “给我咖啡馆网站生成一套 favicon，用咖啡 emoji”
• “根据 logo.png 生成 App Icon 和 PWA manifest”
• “帮我做一套 Open Graph 分享图，1200×630”

Claude 就会自动调用 web-asset-generator，生成 favicon、app icons、social images、manifest.json，甚至帮你检测当前项目框架并自动注入对应 HTML 标签。

为什么值得推荐？

一是输出规范。 它不是随便丢几张图给你，而是输出完整尺寸矩阵：16×16、32×32、180×180、192×192、512×512，还有社交图的 1200×630，基本覆盖浏览器、PWA、社交媒体所有场景。

二是带验证。 生成后会检查文件大小、分辨率、格式是否符合规范，甚至能做 WCAG 对比度校验，避免你做出来的图标 visually broken。

三是可直接落地。 支持直接检测 Next.js、Astro 等框架，把生成的标签自动插进项目文件里，不用你手动复制粘贴。

适合谁用？

• 前端开发者：快速补齐项目视觉资产
• 独立开发者/副业玩家：给 side project 做一套专业 icon 和 og 图
• 设计资源不足的团队：用 emoji 或简单 logo 生成可用素材

怎么装？

一条命令搞定：

npx openskills install alonw0/web-asset-generator

或者用 Claude Code 插件市场：/plugin marketplace add alonw0/web-asset-generator，再装依赖 pip install Pillow pilmoji 就能用。

最后

如果你受够了每次上线前手动处理图标，这个 Skill 值得放进你的 Claude Code 工具箱。说人话、做对事，剩下的让 AI 自动跑。

GitHub 地址：https://github.com/alonw0/web-asset-generator

GitHub: https://github.com/alonw0/web-asset-generator