别人生成的favicon像塑料，这个Skill让AI做出Linear级别的图标质感

你有没有注意过一个现象？同样是 AI 生成的 favicon，有的看起来像 PPT 里随手拖进去的图标，有的却像 Linear、Figma 这些大厂出品的——有层次、有光感、有质感。

差距不在于”有没有图标”，而在于有没有对图标进行”深度加工”。

今天挖到一个专门解决这个问题的 Skill——favicon-generator，作者是 chongdashu。GitHub Stars 28，SkillsMP 上有 15+ 安装量。

它解决什么问题？

大多数 AI 生成 favicon 的方式是：给个提示词 → 出来一张 32×32 的图 → 直接用。

结果就是：颜色寡淡、边缘毛糙、没有深度感——放在浏览器 tab 上还行，一旦做成 app icon 就露馅了。

favicon-generator 的思路完全不同。它会先分析你的代码库，找到你项目里实际用的 Lucide 图标，然后把这个图标当成底稿，加上专业级多层效果引擎：

• 外阴影 + 内发光，制造立体感
• 渐变填充，颜色有层次
• 细微噪点纹理，告别塑料感
• 光学居中 + 精确留白，边缘干净利落

核心工作流：先发现，再匹配，最后生成

这个 Skill 最聪明的设计在于它的第一步：

Step 1 — 发现现有图标。它会扫描你的代码库，找到 Lucide 或其他图标库里的实际使用情况。比如你的 Header 里用的是 PackagePlus，它就提取这个图标的 SVG 路径，而不是另外生成一个随机的。

Step 2 — 匹配品牌色。从 Tailwind 配置或 CSS 变量里提取你项目的实际配色。

Step 3 — 生成 + 加特效。用 cairosvg 渲染 SVG，叠加多层效果，导出 ICO / SVG / PNG 完整套装。

适合谁用？

• 独立开发者：快速给 SaaS 产品做一套完整图标，而不用打开 Figma
• AI 应用开发者：想让 AI 生成的结果看起来更专业
• 设计师：想快速生成多套 icon 方案做对比

怎么安装？

一条命令搞定：

npx skills add https://github.com/chongdashu/cc-skills --skill favicon-generator

支持 Claude Code、Codex、Cursor 等主流 AI 编程工具。

一句话总结

favicon-generator 把”从代码库提取图标 + 多层效果引擎 + 全格式导出”串成一条完整流水线——让 AI 生成 favicon 这件事，从”凑合能用”升级到”可以上线”。

如果你最近在开发产品、搭 AI 应用，这个 Skill 值得装。

GitHub：https://github.com/chongdashu/cc-skills

GitHub: https://github.com/chongdashu/cc-skills