mcpField
C
custom-icons-skill

custom-icons-skill

github.com/jkc66设计与 UI4153 次安装15 周前更新
代码仓库

关于 custom-icons-skill

custom-icons-skill 指导 Agent 完成图标制作流程，从选择视觉策略到处理和验证素材。它涵盖适用于简单设计的矢量 SVG，以及适用于复杂或多色图案的透明栅格文件。

主要功能

  1. 01矢量图标描摹与 SVG 优化流程
  2. 02使用色键移除背景的栅格流程
  3. 03按图标复杂度选择风格与策略
  4. 04保存源文件和中间文件的临时工作区
  5. 05输出验证与交付指引

适用场景

  1. 01制作单色 UI 图标或 SVG 标志
  2. 02准备含 3D 或多色细节的透明 PNG、WebP 图标
  3. 03将参考图像转换为精修图标
  4. 04为品牌制作风格一致的图标集

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jkc66/custom-icons-skill --skill custom-icons-skill

安装后在 Claude Code 中输入/custom-icons-skill确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
scripts/
crop_and_trace.py
remove_chroma_key.py

详细介绍

🎨 自定义图标技能

一套用于打造专业级图标的完整工作流。此技能涵盖整个流程：从概念上的“诉求”和视觉“设计”，到技术层面的“路径”优化、透明 3D PNG 清理，以及适用于生产环境的 SVG 优化。

🤖 Agent 指令（严格工作流）

激活此技能后，你必须遵循以下分步交互流程：

阶段 0：优先考虑用户意图

用户的明确请求优先于此技能的默认设置。

  • 如果用户提供了具体的主题、风格、输出类型、目标位置、颜色或框架，请按原样使用这些信息。如果缺少任何信息，请请求澄清。
  • 如果用户的输入包含相互冲突或无效的信息，请先说明冲突并请求更正。此规则优先于严格遵循输入。
  • 如果用户请求不受支持的格式或风格，请告知其限制并提供替代方案。
  • 不要因为其他流程、格式、风格、主题、配色方案或目标位置似乎更简单，就擅自替换用户提出的有效要求。
  • 除非用户明确要求手动编写确定性的 SVG 代码，否则不要手动编写最终的策略 A SVG。
  • 除非用户明确要求 SVG，否则不要将策略 B/3D 请求转换为 SVG。
  • 如果用户已提供足够信息以便继续操作，则不要询问设置相关问题。
  • 只有当缺失的信息会妨碍准确确定输出格式、主题列表、目标位置或策略选择时，才提出简洁的澄清问题。
  • 如果用户要求更新此技能或其图库，请保留现有约定，除非用户要求修改。
  • 将可见的项目本地临时工作区用于存放生成的源文件、蒙版、描摹文件和中间产物：tmp/custom-icons/<request-or-icon-name>/。
  • 除非用户明确要求清理，否则不要删除临时工作区或中间文件。最终素材应复制到目标位置；中间文件应保留在 tmp/ 工作区中作为参考，直至收到明确的清理请求。
阶段 1：需求发现与风格定义

仅在请求缺少必要信息时进行需求发现。如果用户输入不完整，请询问最少的缺失信息：

  1. 风格：图标采用什么风格？（例如：3D 效果、扁平、单线、奢华雕刻、极简主义）。
  2. 主题：需要表现哪些图标或诉求？
  3. 目标环境：图标将用于何处？（例如：Astro、React、移动应用）。
阶段 2：生成与策略选择

针对每个图标，根据视觉复杂度选择策略：

策略选择流程图
  1. 分析请求：检查主题复杂度和颜色要求。
    • 如果请求混合了策略 A 和策略 B 的特征，请澄清优先采用哪种策略，或建议拆分任务。
  2. 选择策略：
    • 策略 A（矢量）：用于单色徽标、UI 图标或简洁线稿。
    • 策略 B（栅格）：用于 3D 图标、多色素材或细节丰富的插画。
  3. 确认流程：
    • 策略 A -> 二值化 -> Potrace -> SVGO。
    • 策略 B -> 色度键抠图 -> 透明 PNG/WebP。
策略推荐使用场景技术流程
策略 A（矢量）徽标、UI 图标、线稿、单色图像图像 -> 二值化 -> Potrace -> SVGO
策略 B（栅格）3D 图标、多色图像、细节丰富的插画图像 -> 色度键抠图 -> 透明 PNG/WebP
提示词构建规则

使用简洁、带标签的提示词规范进行生成。

内容约束
  1. 资源类型：适用于用户目标环境的图标资源。
  2. 主要请求：确切的主题或概念。
  3. 风格／媒介：指定的风格及选定的策略。
  4. 构图／取景：居中、轮廓清晰、留白充足。
  5. 调色板：用户指定的颜色或类别颜色。
视觉约束
  • 无文字：除非用户明确要求。
  • 整洁：无徽标、商标或水印。
  • 独立呈现：无多余元素或复杂背景。
示例
  • 矢量：“单线条咖啡杯图标，黑底白色，简约风格。”
  • 栅格：“3D 等距视角的电脑图标，色彩鲜艳，背景为 #00ff00。”

对于现有图像／参考图工作流，请按角色标记每张图像：Image 1: edit target、Image 2: style reference 等。

策略 A：矢量（单色／简单）

适用于：徽标、UI 图标、线稿。

  1. 生成： 
    Asset type: scalable UI icon
Primary request: [SUBJECT]
Style/medium: [STYLE], high-contrast black vector-like line art
Composition/framing: centered icon, clear silhouette, generous padding
Color palette: black on pure white background
Constraints: no fills unless requested; no gradients; no text; no logos or trademarks; no watermark; no extra elements
  2. 处理：将生成的图像二值化，使用 potrace 描摹，并使用 svgo 优化。
  3. 规则：除非用户明确要求使用确定性／手动方式创建 SVG，否则不要手动编写新的策略 A 图标的最终 SVG 路径数据。默认输出必须遵循“生成的图像 -> scripts/crop_and_trace.py -> potrace -> svgo”流程。
  4. 颜色：如果用户指定了颜色，则在描摹后应用该颜色。如果要更新参考图库且未指定颜色，则使用类别颜色。
策略 B：栅格（复杂／多色）

适用于：精细插画、3D 图标、彩色资源。

  1. 生成： 
    Asset type: transparent raster icon
Primary request: [SUBJECT]
Style/medium: [STYLE], vibrant detailed icon
Composition/framing: centered isolated subject, clear silhouette, generous padding
Scene/backdrop: perfectly flat solid chroma-key background, usually #00ff00
Constraints: background must be one uniform color with no shadows, gradients, texture, reflections, floor plane, or lighting variation; crisp edges; no halos; no text unless requested; no logos or trademarks; no watermark; no extra elements; do not use the chroma-key color anywhere in the subject
    如果主题包含明显的绿色元素或整体以绿色为主，请使用 #ff00ff 替代 #00ff00。
  2. 原理：通过色键抠图移除背景，生成透明 PNG。
  3. 规则：策略 B 的输出应保留为透明 PNG/WebP，除非用户明确要求其他格式。
第 3 阶段：处理与描摹
临时工作区

处理前，为此请求创建项目本地工作区：

mkdir -p tmp/custom-icons/<request-or-icon-name>

将生成的源图像、裁剪后的 PNG、PBM 文件、描摹后的 SVG 草稿、验证快照和其他尝试保存到该文件夹。仅将用户指定的目标路径用于最终交付的资源；如果未提供最终目标路径，则将最终资源留在同一 tmp/custom-icons/<request-or-icon-name>/ 工作区中。

  • 输入验证：如果提供的最终目标路径无效，或用户提供了不受支持的输入文件格式，请通知用户，并在继续操作前请求有效的路径／格式。
错误处理

如果任何处理步骤失败（二值化、描摹、色键抠图），请向用户报告具体错误，并建议修正措施（例如，使用调整后的参数重试，检查文件格式）。

对于策略 A（矢量）：
  1. 二值化：python3 scripts/crop_and_trace.py <source> tmp/custom-icons/<request-or-icon-name> <name>
  2. 描摹：potrace "tmp/custom-icons/<request-or-icon-name>/<name>.pbm" --svg --flat -o "tmp/custom-icons/<request-or-icon-name>/<name>.svg"
  3. 优化：bunx svgo "tmp/custom-icons/<request-or-icon-name>/<name>.svg"
  4. 着色：描摹完成后，仅将目标类别的填充色/描边色应用到优化后的 SVG，作为机械着色步骤。
  5. 交付：如果用户提供了目标路径，将优化后的 SVG 从 tmp/custom-icons/<request-or-icon-name>/ 复制到该路径。
  6. 验证：确认 SVG 能正常解析，包含描摹得到的路径数据，且视觉效果符合请求的主题/风格。
对于策略 B（复杂）：

  1. 去除绿幕，使用高级色度键工具：

    python3 scripts/remove_chroma_key.py \
  --input <source> \
  --out tmp/custom-icons/<request-or-icon-name>/<name>.png \
  --auto-key border \
  --soft-matte \
  --spill-cleanup \
  --edge-feather 1.0 \
  --force

    结果：创建带溢色清理和抗锯齿边缘的透明 PNG。

  2. 替代裁切工作流：

    python3 scripts/crop_and_trace.py <source> tmp/custom-icons/<request-or-icon-name> <name> \
  --chroma \
  --padding 12

    结果：在 tmp/custom-icons/<request-or-icon-name>/<name>.png 创建透明且经过裁切的 PNG。当裁切比柔化蒙版清理更重要时使用此方法。

  3. 交付：如果用户提供了目标路径，将透明 PNG/WebP 从 tmp/custom-icons/<request-or-icon-name>/ 复制到该路径。

  4. 验证 Alpha 通道：检查输出是否有透明角落、没有绿色边缘，且主体轮廓清晰。如果使用高级工具后仍有边缘残色，使用 --edge-contract 1 重试一次；如果边缘看起来过硬，则使用较小的羽化值，例如 --edge-feather 0.25。

第 4 阶段：优化与交付
  1. 优化：对于 SVG，使用 svgo。对于 PNG，确保图像经过裁切和压缩。
  2. 实现：向用户展示如何使用该素材。
  3. 图库一致性：更新图库时，每个参考类别保持五个图标。策略 A 类别应使用其主题填充色/描边色：科技 #00C8FF、生活方式 #00E676、精细细节 #FF3D00。
  4. 如实报告：说明使用了哪条处理流程、最终文件保存在哪里、tmp/custom-icons/... 工作区位于何处，以及验证是否通过。如果无法完成请求中的某个步骤，请准确说明失败原因。

🎯 何时使用此技能

  • 品牌形象：为新品牌打造一组风格统一的独特图标。
  • AI 转矢量：将插画转换为整洁且可着色的 SVG。
  • 高保真素材：为复杂的 3D 或多色图标创建透明 PNG。

🛠 图标创建模式

1. 🏗 设计模式（视觉结构）

极简风格的 [SUBJECT] 图标，黑色图案置于白色背景，采用单线条风格。

2. 🛣 路径模式（矢量驱动）

将现有图像优化为整洁的 SVG。

3. ✨ 愿景模式（概念化）

对“[DESIRE]”进行抽象表现。

🎨 风格库

风格修饰词类别视觉特征
奢华单线条高端优雅的细线条
几何粗体科技2px 描边，圆角端点
自然墨迹生活方式有纹理的边缘，流畅
3D 渲染复杂景深、光照、多色、透明 PNG/WebP（使用策略 B）
脚本

评论

支持 Markdown