1、Skill 简介
icon-design 是一个专业级 AI 图标设计与生成型 Skill。它解决了设计师和开发者在项目中反复遇到的图标风格不统一、设计耗时、跨平台适配复杂等痛点。
核心能力包括：
- 智能风格扫描：通过网站 URL 或截图自动提取设计风格，生成风格统一的图标
- 多样化生成模式：支持单个图标、整套图标集、App 启动图标三种生成模式
- 全平台输出：自动生成 SVG（矢量）+ PNG（透明背景）双格式，可选 React/Vue 前端组件代码
- 专业设计规范：内置 8 套风格模板、6 套色系模板、7 大场景图标库，覆盖主流设计需求
无论你是需要为新产品设计一套完整的图标系统，还是需要快速生成与现有网站风格匹配的功能图标，icon-design 都能提供专业级的设计输出。
2、使用场景
场景一：新产品图标系统设计
-
痛点：新产品启动，需要设计整套图标系统。从零开始设计耗时耗力，风格难以统一，不同平台（iOS/Android/Web）尺寸要求各异。
-
解法：使用
+iconset命令，选择场景模板（如电商、社交、SaaS），确定统一风格后批量生成。自动输出多平台尺寸（iOS: 180/120/167/152/76px；Android: 512/192/144/96/72/48px），附带 React/Vue 组件代码，直接集成到项目中。
场景二：现有产品风格统一
-
痛点：产品已有界面，但图标风格杂乱（有的线性、有的面性、有的带渐变），视觉不统一。重新设计整套图标工作量大，且难以把握现有风格。
-
解法：使用
+iconscan命令，输入产品网站 URL 或上传截图。Skill 会自动分析网站的色彩、线条、形状、质感、调性 5 个维度，生成风格报告。确认风格后，按此风格生成新图标，确保与现有设计 100% 统一。
场景三：快速原型与 MVP 开发
-
痛点：做原型或 MVP 时，需要快速获得专业级图标，但设计师资源紧张，网上找的图标风格不匹配。
-
解法：使用
+icon快速生成单个图标，或使用+iconstyle浏览 8 套预置风格模板，选择最符合产品气质的风格。5 分钟即可获得可用图标，支持透明背景，直接放入原型。
场景四：App 启动图标设计
-
痛点：App 启动图标需要适配 iOS、Android 多个尺寸，每个平台还有不同的圆角、安全区域规范，手动导出繁琐易错。
-
解法：使用
+appicon命令，输入 App 名称和品牌色，自动生成 1024x1024 主图标及所有平台所需尺寸。附带各尺寸 SVG 源文件，方便后续调整。
3、创作过程
这个 Skill 的设计核心围绕**“专业设计工作流 + AI 自动化”**理念。核心理念是：
AI 负责快速生成和风格分析，专业设计规范确保输出质量，让设计师从重复劳动中解放，专注于创意决策。
基于这个理念，我完成了以下设计：
第一步：建立完整的图标设计知识体系（解决"不专业"问题）
很多 AI 生成图标的工具缺乏设计规范意识，输出的图标在小尺寸下模糊、风格不一致、语义不清。我系统梳理了图标设计的完整知识体系：
- 8 套风格模板：现代极简、活力渐变、毛玻璃新拟态、3D 立体、手绘插画、线性描边、双色双调、像素复古，覆盖主流设计趋势
- 6 套色系模板：科技蓝、自然绿、活力橙、高端紫、暗夜模式、功能色系，附带完整色值和语义说明
- 7 大场景图标库：电商、社交、SaaS、金融、健康、教育、游戏，预置 200+ 常用图标推荐
- 5 维度风格分析：色彩、线条、形状、质感、调性，系统化分析网站风格
这些知识库确保 AI 生成的图标符合专业设计标准，而非"AI 味"的随机输出。
第二步：设计风格扫描引擎（解决"风格统一"难题）
这是 Skill 最核心的创新。传统方式下，要让新图标与现有设计统一，需要设计师手动分析、反复调整。我设计了一套自动化的风格扫描引擎：
- 输入层：支持网站 URL（自动截图分析）或图片上传
- 分析层：5 维度分析（色彩提取、线条分析、形状分析、质感分析、调性分析）
- 输出层：生成结构化风格报告，包含主色调、线宽、圆角、质感类型等具体参数
- 确认层：用户确认风格报告后，按此参数生成图标
这套引擎让"风格统一"从人工经验判断变为可量化的自动化流程。
第三步：构建 Prompt 工程体系（解决"生成质量不稳定"）
AI 生成图标的质量很大程度上取决于 Prompt。我建立了一套标准化的 Prompt 工程体系：
- 结构模板：
[风格前缀] icon of [图标名称], [尺寸]px, [色彩], transparent background, [负面提示] - 风格前缀库：每套风格模板对应标准化的 Prompt 前缀，确保描述一致性
- 一致性规则：整套图标生成时，强制使用相同的风格前缀、色彩方案、视角、细节密度
- 负面提示库：自动排除文字、水印、背景、写实细节等干扰元素
这套体系让图标生成从"抽卡"变为可控的设计流程。
第四步：实现多平台输出（解决"适配繁琐"）
图标需要在不同平台、不同场景使用，格式和尺寸要求各异。我设计了多平台输出体系：
- 格式层：SVG（矢量，可无限缩放）+ PNG（透明背景，多尺寸）
- 尺寸层：支持 1x/2x/3x 倍数导出，内置 iOS/Android 标准尺寸集
- 代码层：可选生成 React/Vue 组件代码，直接使用
currentColor支持 CSS 控制 - 工具层：提供
svg_to_png.py脚本，批量转换 SVG 到多尺寸 PNG
一套设计，全平台可用。
第五步：设计渐进式交互流程（解决"使用门槛"）
不同用户有不同需求，我设计了渐进式的交互流程：
- 快速模式：
+icon 购物车→ 交互式选择风格色系 → 立即生成 - 专业模式：
+iconscan https://example.com→ 查看风格报告 → 确认后生成 - 批量模式：
+iconset home,search,profile,cart→ 统一风格 → 整套生成 - 浏览模式：
+iconstyle→ 查看 8 套风格模板 → 选择使用
无论新手还是专业设计师，都能找到适合的使用方式。
4、使用步骤
方式一：单个图标快速生成
- 触发命令：输入
+icon 购物车（或任意图标名称） - 选择风格：Skill 会询问风格偏好，从 8 套模板中选择
- 选择色系：选择 6 套色系模板之一，或提供自定义色值
- 确认尺寸：默认 24px，可按需调整
- 获取输出：自动生成 PNG（透明背景）+ SVG + 可选前端组件代码
方式二：网站风格扫描生成
- 触发命令：输入
+iconscan https://your-website.com（或上传截图） - 等待分析：Skill 自动访问网站，分析色彩、线条、形状、质感、调性
- 查看报告：获取结构化风格报告，包含具体的设计参数
- 确认或调整：确认风格无误，或提出调整意见
- 生成图标：基于确认的风格参数生成新图标，确保与网站 100% 统一
方式三：整套图标集生成
- 触发命令：输入
+iconset home,search,cart,profile（图标名称列表） - 或使用场景模板：输入
+iconset --scene ecommerce-tab（使用预置场景） - 确定统一风格：选择整套图标的统一风格，所有图标将严格遵循
- 批量生成：逐个生成每个图标，自动进行一致性检查
- 获取整套输出：所有 PNG + SVG 文件，附带设计规范摘要文档和前端组件代码
方式四：App 启动图标生成
- 触发命令：输入
+appicon MyApp - 提供品牌信息：输入品牌色、选择风格偏好
- 生成多尺寸：自动输出 1024x1024 主图标 + iOS 全尺寸集 + Android 全尺寸集
- 获取源文件：附带各尺寸 SVG 源文件，方便后续调整
5、核心文件一览
| 文件 | 作用 | 何时加载 |
|---|---|---|
SKILL.md |
核心入口，命令路由，工作流定义 | 始终加载 |
references/style-templates.md |
8 套风格模板详情，含 Prompt 样例 | 用户询问风格选项时 |
references/color-templates.md |
6 套色系模板，含完整色值 | 用户选择色系时 |
references/scene-templates.md |
7 大场景图标推荐列表（200+ 图标） | 整套图标生成时 |
references/style-analysis.md |
风格扫描 5 维度分析体系 | 执行 +iconscan 时 |
references/prompt-guide.md |
Prompt 工程指南，一致性规则 | 生成图标时参考 |
references/svg-examples.md |
SVG 代码规范和 12+ 示例 | 生成 SVG 代码时 |
assets/Icon.tsx |
React + TypeScript 组件模板 | 用户需要 React 代码时 |
assets/Icon.vue |
Vue 3 + TypeScript 组件模板 | 用户需要 Vue 代码时 |
6、脚本生态
| 功能 | 脚本 | 说明 |
|---|---|---|
| Prompt 生成 | scripts/generate_icon_prompt.py |
根据风格/色系参数生成标准化 AI Prompt |
| 图标集配置 | scripts/create_icon_set.py |
批量生成整套图标配置文件，支持场景预设 |
| SVG 转 PNG | scripts/svg_to_png.py |
批量转换 SVG 到多尺寸 PNG，支持 iOS/Android 标准尺寸 |
脚本使用示例
# 生成单个图标的 Prompt
python generate_icon_prompt.py --name "shopping cart" --style S1 --color C1 --size 24
# 创建整套图标配置
python create_icon_set.py --names home,search,profile --style S6 --color C1 --output ./icons
# 或使用场景预设
python create_icon_set.py --scene ecommerce-tab --style S6 --color C1
# SVG 批量转 PNG
python svg_to_png.py --input ./svgs/ --sizes 24,48,96 --output ./pngs
# 使用 iOS 标准尺寸
python svg_to_png.py --input icon.svg --ios --output ./ios-icons
7、总结与思考
通过打造 icon-design，我最大的感悟是：AI 不是来替代设计师的，而是来替代重复劳动的，让设计师更专注于创意决策。
这个 Skill 的核心价值在于：
-
专业设计知识的系统化：将图标设计的专业知识（风格、色系、规范）结构化，让 AI 能基于专业标准生成，而非随机输出
-
风格统一的可量化：通过 5 维度分析体系，将"风格统一"这个主观概念转化为可提取、可复用的设计参数
-
工作流的完整性：从风格扫描 → 设计生成 → 多平台输出 → 前端集成，覆盖图标设计的完整工作流
-
渐进式的易用性：既有快速模式满足 MVP 需求，也有专业模式满足精细设计需求
如果你正在为新项目设计图标系统，或者需要为现有产品补充风格统一的图标，不妨试试这个 Skill。非常期待看到你们用它创造的设计作品！
8、Skill 链接
GitHub 仓库：GitHub - Damond-Fung/icon-design-skill: icon-design-skill · GitHub
附录：8 套风格模板速览
| 编号 | 风格名 | 适用场景 | Prompt 关键词 |
|---|---|---|---|
| S1 | 现代极简 | SaaS、B端、专业工具 | minimalist line icon, thin stroke, geometric, flat |
| S2 | 活力渐变 | 社交、娱乐、教育 | vibrant gradient icon, colorful, rounded shapes |
| S3 | 毛玻璃新拟态 | iOS风格、现代UI | glassmorphism icon, frosted glass, soft shadows |
| S4 | 3D立体 | 创意产品、游戏、营销 | 3D isometric icon, clay render, volumetric |
| S5 | 手绘插画风 | 儿童、生活方式、创意品牌 | hand-drawn icon, sketch style, organic lines |
| S6 | 线性描边 | 通用UI、图标系统、技术文档 | outline icon, consistent 2px stroke, geometric |
| S7 | 双色双调 | 现代Web、仪表板 | duotone icon, two-color scheme, high contrast |
| S8 | 像素复古 | 游戏、复古主题 | pixel art icon, 8-bit retro style, blocky |
附录：6 套色系模板速览
| 编号 | 色系名 | 主色 | 适用场景 |
|---|---|---|---|
| C1 | 科技蓝 | #2563EB | 科技公司、SaaS、开发者工具 |
| C2 | 自然绿 | #16A34A | 健康医疗、环保产品、教育 |
| C3 | 活力橙 | #EA580C | 电商购物、外卖配送、运动健身 |
| C4 | 高端紫 | #7C3AED | 创意设计、时尚美妆、高端品牌 |
| C5 | 暗夜模式 | #F8FAFC (light on dark) | 暗色主题App、开发者工具、游戏 |
| C6 | 功能色系 | 红/绿/蓝/黄 | 所有需要状态反馈的UI场景 |
真好，真羡慕我的评论区有你们！！我都羡慕我了！