custom-icons

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

🎨 Custom Icons Skill

🎨 Custom Icons 定制图标技能

A master workflow for crafting professional-grade iconography. This skill handles the entire pipeline: from conceptual "desire" and visual "design" to technical "path" refinement, transparent 3D PNG cleanup, and production-ready SVG optimization.

一套制作专业级图标集的优质工作流。该技能覆盖完整流程：从概念层面的“构想”、视觉层面的“设计”到技术层面的“路径”优化、透明3D PNG清理，直至生成可用于生产环境的SVG优化文件。

🤖 Agent Instructions (Strict Workflow)

🤖 Agent 操作指南（严格工作流）

When this skill is activated, you MUST follow this step-by-step interaction protocol:

激活该技能后，你必须遵循以下分步交互规则：

Phase 0: User Intent Comes First

阶段0：用户意图优先

Follow the user's explicit request over defaults in this skill.

If the user gives subjects, style, output type, destination, colors, or framework, use those exact requirements.
Do not substitute a different pipeline, format, style, subject, palette, or destination because it seems easier.
Do not hand-author final Strategy A SVGs unless the user explicitly asks for manual/deterministic SVG code.
Do not convert a Strategy B/3D request into SVG unless the user explicitly asks for SVG.
Do not ask setup questions when the user has already provided enough information to proceed.
Ask a concise clarifying question only when a missing detail would change the output format, subject list, destination, or strategy.
If the user asks to update this skill or its gallery, preserve existing conventions unless the user asks to change them.
Use a visible project-local temporary workspace for generated sources, masks, traces, and intermediate outputs:
```
tmp/custom-icons/<request-or-icon-name>/
```
.
Do not delete the temporary workspace or intermediate files unless the user explicitly asks for cleanup. Report the temp path so the user can inspect the work later.

优先遵循用户的明确请求，而非技能默认设置。

若用户指定了主题、风格、输出类型、目标位置、颜色或框架，严格使用这些要求。
不要因看似更简单而替换不同的流程、格式、风格、主题、配色或目标位置。
除非用户明确要求手动/确定性SVG代码，否则不要手动编写策略A图标的最终SVG路径数据。
除非用户明确要求转换为SVG，否则不要将策略B/3D请求转换为SVG格式。
若用户已提供足够信息，不要询问设置类问题。
仅当缺失的细节会改变输出格式、主题列表、目标位置或策略时，才提出简洁的澄清问题。
若用户要求更新该技能或其图库，保留现有约定，除非用户明确要求修改。
为生成的源文件、蒙版、追踪文件和中间输出使用项目本地可见的临时工作区：
```
tmp/custom-icons/<request-or-icon-name>/
```
。
除非用户明确要求清理，否则不要删除临时工作区或中间文件。告知用户临时路径，以便后续查看工作内容。

Phase 1: Discovery & Style Definition

阶段1：需求探索与风格定义

Use discovery only when the request is underspecified. If the user has not provided enough detail, ask for the minimum missing information:

Style: What style of icon? (e.g., 3D-effect, Flat, Monoline, Luxury Engraved, Minimalist).
Subjects: What icons or desire should be represented?
Target environment: Where will the icons be used? (e.g., Astro, React, Mobile App).

仅当请求内容不明确时进行需求探索。若用户未提供足够细节，询问必要的缺失信息：

风格：需要什么风格的图标？（例如：3D效果、扁平化、单线、奢华雕刻风、极简风）。
主题：需要呈现哪些图标或概念？
目标环境：图标将用于何处？（例如：Astro、React、移动应用）。

Phase 2: Generation & Strategy Selection

阶段2：生成与策略选择

For each icon, decide on the technical strategy based on complexity:

针对每个图标，根据复杂度选择对应的技术策略：

Prompt Construction Rules

提示词构建规则

Use a concise, labeled prompt spec for generation rather than a loose paragraph. Preserve the user's requirements first, and add only practical detail that improves icon output.

Recommended order:

Asset type: icon asset for the user's target environment.
Primary request: exact subject or concept.
Style/medium: requested style plus the selected strategy.
Composition/framing: centered, clear silhouette, generous padding.
Color palette: user-specified colors or category color.
Constraints: no text unless requested, no logos/trademarks, no watermark, no extra elements.

For existing image/reference workflows, label each image by role:

Image 1: edit target

Image 2: style reference

, etc. If preserving an existing icon or drawing, repeat the invariants in every iteration: preserve layout, proportions, silhouette, and intended subject; change only the requested aspect.

使用简洁的带标签提示词规范进行生成，而非松散的段落。优先保留用户需求，仅添加能提升图标输出质量的实用细节。

推荐顺序：

资产类型：图标资产，适配用户的目标环境。
核心请求：确切的主题或概念。
风格/载体：请求的风格加上选定的策略。
构图/布局：居中布局，清晰轮廓，充足内边距。
配色方案：用户指定的颜色或分类色系。
约束条件：除非要求，否则不添加文字；无商标/标志；无水印；无额外元素。

对于基于现有图像/参考素材的工作流，按角色为每张图片标注：

Image 1: edit target

、

Image 2: style reference

等。若需保留现有图标或绘图，在每次迭代中维持不变要素：保留布局、比例、轮廓和预期主题；仅修改用户要求的方面。

Strategy A: Vector (Monochrome/Simple)

策略A：矢量图标（单色/简约）

Use for: Logos, UI icons, line art.

Generate:

text

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

Process: Binarize the generated image, trace it with
```
potrace
```
, and optimize it with
```
svgo
```
.
Rule: Do not hand-author final SVG path data for new Strategy A icons unless the user explicitly asks for a deterministic/manual SVG. The default output must come from the generated image ->
```
scripts/crop_and_trace.py
```
->
```
potrace
```
->
```
svgo
```
pipeline.
Color: If the user specifies a color, apply that color after tracing. If updating the reference gallery and no color is specified, use the category color.

适用场景：标志、UI图标、线稿。

生成：

text

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

处理：对生成的图像进行二值化处理，使用
```
potrace
```
追踪路径，再用
```
svgo
```
优化。
规则：除非用户明确要求手动/确定性SVG代码，否则不要手动编写策略A图标的最终SVG路径数据。默认输出必须遵循“生成图像 ->
```
scripts/crop_and_trace.py
```
->
```
potrace
```
->
```
svgo
```
”的流程。
颜色：若用户指定颜色，在追踪完成后应用该颜色。若更新参考图库且未指定颜色，使用分类色系。

Strategy B: Raster (Complex/Multi-color)

策略B：光栅图标（复杂/多色）

Use for: Detailed illustrations, 3D icons, colorful assets.

Generate:

text

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

Use

#ff00ff

instead of

#00ff00

when the subject is green or likely to contain green.

Logic: Background removed via chroma-keying to create a transparent PNG.
Rule: Keep Strategy B outputs as transparent PNG/WebP unless the user explicitly asks for another format.

适用场景：精细插画、3D图标、彩色资产。

生成：

text

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

。

原理：通过抠图（chroma-keying）去除背景，生成透明PNG。
规则：除非用户明确要求其他格式，否则策略B的输出需为透明PNG/WebP格式。

Phase 3: Processing & Tracing

阶段3：处理与路径追踪

Temporary Workspace

临时工作区

Before processing, create a project-local workspace for the request:

bash

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

Save generated source images, cropped PNGs, PBM files, traced SVG drafts, validation snapshots, and alternate attempts in that folder. Use the user's requested destination only for final delivered assets; if no final destination is provided, leave the final assets in the same

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

workspace.

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

bash

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

将生成的源图像、裁剪后的PNG、PBM文件、追踪得到的SVG草稿、验证快照以及备选尝试版本保存至该文件夹。仅将最终交付的资产保存至用户指定的目标位置；若未指定最终目标位置，将最终资产留在

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

工作区中。

For Strategy A (Vector):

策略A（矢量图标）处理步骤：

Binarize:

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

Trace:

potrace "tmp/custom-icons/<request-or-icon-name>/<name>.pbm" --svg --flat -o "tmp/custom-icons/<request-or-icon-name>/<name>.svg"

Optimize:

bunx svgo "tmp/custom-icons/<request-or-icon-name>/<name>.svg"

Color: After tracing, apply the target category fill/stroke color to the optimized SVG only as a mechanical tinting step.
Deliver: Copy the optimized SVG from
```
tmp/custom-icons/<request-or-icon-name>/
```
to the user's requested destination when provided.
Validate: Confirm the SVG parses, contains traced path data, and visually matches the requested subject/style.

二值化：

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

路径追踪：

potrace "tmp/custom-icons/<request-or-icon-name>/<name>.pbm" --svg --flat -o "tmp/custom-icons/<request-or-icon-name>/<name>.svg"

优化：

bunx svgo "tmp/custom-icons/<request-or-icon-name>/<name>.svg"

上色：追踪完成后，仅通过机械着色步骤为优化后的SVG应用目标分类的填充/描边颜色。
交付：若用户提供了目标位置，将优化后的SVG从
```
tmp/custom-icons/<request-or-icon-name>/
```
复制到该位置。
验证：确认SVG可正常解析、包含追踪路径数据，且视觉上符合请求的主题/风格。

For Strategy B (Complex):

策略B（复杂图标）处理步骤：

Remove Green Screen with the advanced chroma-key utility:

bash

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

Result: Creates a transparent PNG with spill cleanup and antialiased edges.

Alternative Trim Workflow:

bash

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

Result: Creates a transparent, trimmed PNG at
tmp/custom-icons/<request-or-icon-name>/<name>.png
. Use this when trimming is more important than soft matte cleanup.

Deliver: Copy the transparent PNG/WebP from
```
tmp/custom-icons/<request-or-icon-name>/
```
to the user's requested destination when provided.
Validate Alpha: Check that the output has transparent corners, no green fringe, and a clear subject silhouette. If a fringe remains after the advanced utility, retry once with
```
--edge-contract 1
```
; if edges look too hard, use a smaller feather such as
```
--edge-feather 0.25
```
.

使用高级抠图工具去除绿幕：

bash

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。

备选裁剪工作流：

bash

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。当裁剪比柔化蒙版清理更重要时使用此流程。

交付：若用户提供了目标位置，将透明PNG/WebP从
```
tmp/custom-icons/<request-or-icon-name>/
```
复制到该位置。
透明通道验证：检查输出文件的边角是否透明、是否有绿色边缘残留，以及主题轮廓是否清晰。若使用高级工具后仍有边缘残留，添加
```
--edge-contract 1
```
参数重试一次；若边缘过于生硬，使用更小的羽化值，例如
```
--edge-feather 0.25
```
。

Phase 4: Optimization & Delivery

阶段4：优化与交付

Optimize: For SVGs, use
```
svgo
```
. For PNGs, ensure they are trimmed and compressed.
Implement: Show the user how to use the asset.
Gallery Consistency: Keep each reference category at five icons when updating the gallery. Strategy A categories should use their thematic fill/stroke color: Tech
```
#00C8FF
```
, Lifestyle
```
#00E676
```
, Detailed
```
#FF3D00
```
.
Report Honestly: Say which pipeline was used, where final files were saved, where the
```
tmp/custom-icons/...
```
workspace is, and whether validation passed. If a requested step could not be completed, say exactly what failed.

优化：对于SVG文件，使用
```
svgo
```
优化；对于PNG文件，确保已裁剪并压缩。
使用指导：向用户展示如何使用该资产。
图库一致性：更新图库时，每个参考分类保留5个图标。策略A分类应使用其主题填充/描边颜色：科技类
```
#00C8FF
```
、生活方式类
```
#00E676
```
、精细类
```
#FF3D00
```
。
如实反馈：说明使用了哪个流程、最终文件保存位置、
```
tmp/custom-icons/...
```
工作区的位置，以及验证是否通过。若某个请求步骤无法完成，明确说明失败原因。

🎯 When to Use This Skill

🎯 何时使用该技能

Brand Identity: Creating a cohesive set of unique icons for a new brand.
AI-to-Vector: Converting illustrations into clean, colorable SVGs.
High-Fidelity Assets: Creating transparent PNGs for complex 3D or multi-color icons.

品牌标识：为新品牌创建一套风格统一的独特图标。
AI转矢量：将插画转换为可上色的整洁SVG文件。
高保真资产：为复杂3D或多色图标创建透明PNG文件。

🛠 Icon Creation Modes

🛠 图标创建模式

1. 🏗 Design Mode (Visual Structure)

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

Minimalist [SUBJECT] icon, black on white, monoline style.

极简风格[SUBJECT]图标，白底黑图，单线样式。

2. 🛣 Path Mode (Vector-Driven)

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

Refine existing image into a clean SVG.

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

3. ✨ Desire Mode (Conceptual)

3. ✨ 构想模式（概念表达）

Abstract representation of "[DESIRE]".

"[DESIRE]"的抽象表达。

🎨 Style Library

🎨 风格库

Style Modifier	Category	Visual Characteristics
Luxury monoline	Premium	Elegant, thin strokes
Geometric bold	Tech	2px strokes, rounded caps
Organic Ink	Lifestyle	Textured edges, fluid
3D Rendered	Complex	Depth, lighting, multi-color, transparent PNG/WebP (Use Strategy B)

风格修饰词	分类	视觉特征
Luxury monoline	高端	优雅纤细的线条
Geometric bold	科技	2px粗线条，圆角端点
Organic Ink	生活方式	纹理边缘，流畅自然
3D Rendered	复杂	有深度、带光影、多色，输出透明PNG/WebP（使用策略B）

📚 Resources & Utilities

📚 资源与工具

Vector/Trim Script:
```
./scripts/crop_and_trace.py
```
Advanced Chroma-Key Script:
```
./scripts/remove_chroma_key.py
```

矢量/裁剪脚本：
```
./scripts/crop_and_trace.py
```
高级抠图脚本：
```
./scripts/remove_chroma_key.py
```