Appearance
用 AI 快速生成全套网站 Favicon 图标并自动配置
解决前端开发中繁琐的图标适配问题：AI 将自动处理单张原图，生成符合各平台标准的多种尺寸图标，并根据项目框架（如 Next.js, Rails, Vite 等）自动将资源放置在正确目录并写入 HTML 代码。
为什么需要这个技能
为一个网站配置完整的 Favicon 是一件极其琐碎的事情。你不仅需要 favicon.ico，还需要针对 iOS 的 apple-touch-icon.png、Android 的 web-app-manifest 以及现代浏览器的 SVG 版本。
手动裁剪、重命名并逐一在 HTML 中编写 <link> 标签不仅耗时，而且极易出错（例如路径写错或遗漏尺寸）。本技能通过 AI 驱动的 ImageMagick 工作流，将这一过程从 30 分钟缩短到 30 秒，并确保生成的资源完全符合现代 Web 标准。
适用场景
- 新项目初始化：当你只有一张 Logo 原图，需要快速建立完整的图标体系时。
- 品牌升级：需要统一更换全平台（桌面、移动端、PWA）的站点图标时。
- 多框架迁移：在不同前端框架（如从 Rails 迁移到 Next.js）之间快速迁移静态资源配置。
核心工作流
- 环境校验：AI 首先检查系统是否安装了
ImageMagick v7+（核心处理引擎）。 - 框架检测：通过扫描项目特征文件（如
next.config.js或package.json）自动判定静态资源目录（如public/或static/）。 - 自动化裁剪：利用
magick命令生成 16x16/32x32/48x48 的.ico复合文件，以及 96x96、180x180、192x192、512x512 等多种 PNG 尺寸。 - 元数据同步：自动提取项目名称，创建或更新
site.webmanifest配置文件。 - 代码注入：根据检测到的框架，在
layout.tsx或index.html的<head>部分注入精准的图标引用标签。
下载和安装
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。
你可能还需要
暂无推荐