Web 资产生成器
从 Logo、文字或 Emoji 一键生成网站 favicon、PWA 应用图标和社交媒体分享图，并自动输出对应的 HTML 标签。
脚本均为本地图像处理，无网络外发、无凭据访问，权限面小；代码集成前强制用户确认并展示diff，数据流透明。扣分项：发布者身份未经验证、无回滚说明、依赖（Pillow/pilmoji/emoji<2.0）安全面未声明。
脚本内部逻辑自洽，含依赖检查脚本、导入回退、明确的错误消息与退出码，异常输入有提示而非静默失败。扣分项：无测试套件、无执行证据（静态上限10），LinkedIn最小尺寸定义（min 1200x628 vs 推荐627）自相矛盾，字符级截断风险未覆盖边缘情况。
触发描述清晰（favicon/PWA图标/OG图），明确列出平台尺寸、输入类型与非适用范围，语义触发精确度高。扣分项：无中文支持说明；pilmoji渲染emoji通常需从CDN获取图像，核心emoji功能可能在中国大陆网络不可达；字体路径硬编码Linux路径，跨环境适配弱。
文档分层良好：SKILL.md主流程+references/specifications.md细节+CLAUDE.md开发说明，含示例、验证输出样例、依赖说明与MIT许可。扣分项：SKILL.md正文明显截断、无版本号/changelog、无维护责任与更新路径声明、发布者身份未知。
覆盖常见真实需求（favicon全套、OG图、HTML标签、框架集成），验证功能增加价值，命令行接口完整可复核。扣分项：静态审阅无法证实生成图像质量与直接可用性，无代表产出的执行证据，部分场景（命名颜色对比度校验）明确跳过。
提供了可审计的完整源码，声明与代码实现大体对应，事实（平台规格）与推断分离尚可。扣分项：无CI、无提交的测试、无第三方执行证据，平台规格数字未标注来源出处，静态上限5。
- emoji生成功能依赖pilmoji，其通常从境外CDN获取emoji图像，中国大陆网络环境下可能不可用或失败。
- 发布者未经FollowSkills企业注册库验证，身份未知；无版本号与更新路径，长期维护状态不明。
- 未经执行验证：生成的favicon.ico与OG图质量、Twitter验证器等外部链接的可用性均未证实；部分测试链接（cards-dev.twitter.com）可能已失效。
- 框架自动集成会修改用户代码文件，虽然流程要求确认与diff预览，使用者仍应在修改前备份目标文件。
- emoji库需锁定在<2.0.0版本，与pilmoji存在兼容性约束，安装时须注意。
这个 Skill 能做什么，适合哪些场景？
这是一个面向 Claude Code 的技能，用于生成站点上线所需的图像资产：favicon（16/32/96px 和 favicon.ico）、PWA 应用图标（180/192/512px）以及 Open Graph 分享图（Facebook/WhatsApp/LinkedIn 的 1200×630、Twitter 的 1200×675）。输入可以是 Logo 图片、文字标语或 Emoji，Emoji 模式还能根据项目描述智能推荐候选符号。生成后它会自动产出可直接粘贴的 HTML meta 标签，检测 Next.js、Astro、SvelteKit 等框架并主动提出把标签插入代码库，还提供 --validate 标志校验文件尺寸、格式和 WCAG 对比度。采用 MIT 许可，依赖 Pillow（Emoji 功能另需 pilmoji 和 emoji 库）。
读取用户上传的 Logo 图片、文字标语或 Emoji 字符，通过 Python 脚本（generate_favicons.py 和 generate_og_images.py，基于 Pillow）批量生成各种尺寸的 favicon、应用图标和 Open Graph 分享图。Emoji 模式使用 --suggest 参数根据项目描述推荐候选 Emoji，再用 --emoji 参数渲染图标（需 pilmoji）。生成后自动输出 favicon link 标签和 og:/twitter: meta 标签；可搜索 next.config.js、astro.config.mjs 等配置文件识别框架，定位 layout.tsx、index.html 等目标文件并插入标签（先展示 diff 供确认）。--validate 标志会检查文件大小限制（Facebook 8MB、Twitter 5MB）、尺寸比例、格式支持，并对文字图计算 WCAG 2.0 对比度。
- 独立开发者上线新站点，还没有任何图标，想从一个 Emoji 或 Logo 快速生成全套 favicon 和 PWA 图标
- 博客作者想让文章链接在 Twitter 和微信/WhatsApp 上显示漂亮的分享卡片，需要标准尺寸的 Open Graph 图和对应 meta 标签
- 使用 Next.js 或 Astro 的团队想省去手动往 layout 文件里粘贴图标标签的步骤，让技能自动检测框架并插入代码
- 非设计师的创业者只有一句标语，想生成带品牌色的社交媒体宣传图，并获得 WCAG 对比度合规检查
- 前端工程师想在部署前批量验证已有图标文件的大小、尺寸和格式是否符合各平台要求
这个 Skill 有哪些优点和局限？
- 一次生成全部标准尺寸和格式（favicon.ico、apple-touch-icon、Android Chrome 图标、多平台 OG 图），无需查各平台规范
- 自动输出正确的 HTML/meta 标签，并能检测 Next.js、Astro、SvelteKit、Nuxt、Gatsby 等框架后直接插入代码
- 内置 --validate 校验：文件大小、尺寸比例、格式、WCAG 对比度，适合部署前把关
- Emoji 建议功能对没有 Logo 的项目很实用，支持 60 多个精选 Emoji
- MIT 许可，脚本也可脱离 Claude 独立使用
- Emoji 渲染依赖 pilmoji 且要求 emoji<2.0.0，版本约束可能与其他项目冲突
- 代码插入会修改项目文件，虽有 diff 确认步骤，但仍需谨慎审查
- 文档提到 OG 图片必须是可通过 HTTPS 访问的绝对 URL，本地预览无法验证实际分享效果
- 目前不支持 Pinterest、Instagram 平台和 WebP/AVIF 格式（在路线图中）；仓库未见单元测试
- 仓库未标注 topics，社区规模和活跃度需自行到 GitHub 页面确认
如何安装这个 Skill？
前提：Claude Code 2.0.13+ 和 Python 3.6+。推荐用插件市场安装：/plugins marketplace add alonw0/web-asset-generator，然后 /plugin install web-asset-generator@web-asset-generator-marketplace。手动安装则克隆仓库后把 skills/web-asset-generator/ 文件夹复制到 ~/.claude/skills/。然后安装依赖：pip install Pillow（Emoji 功能另需 pip install pilmoji 'emoji<2.0.0'），重启 Claude Code 即可。
如何使用这个 Skill？
安装后用自然语言触发即可，例如："用火箭 emoji 给我的网站创建一个 favicon"、"为我的博客生成 Open Graph 图片"、"从我的 logo.png 生成应用图标"。技能会通过交互式选择题确认资产类型、素材来源、目标平台和配色，然后调用脚本生成文件并展示 HTML 标签。也可以绕过 Claude 直接运行脚本，例如：python scripts/generate_favicons.py --emoji "🚀" output/ all，或 python scripts/generate_og_images.py output/ --text "欢迎" --validate。生成后的文件需自行复制到站点的 public/static 目录，meta 标签中的 og:title、og:url 等动态值需手动替换。
这个 Skill 与同类方案有什么区别？
与手动使用 Realfavicongenerator 等在线 favicon 生成器或各平台官方卡片验证器相比，该技能把生成、meta 标签产出、框架内代码插入和验证整合进了一次对话流程；但它依赖 Python/Pillow 环境，且平台覆盖不如成熟的在线服务全面。