Back to Details

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:
  1. Style: What style of icon? (e.g., 3D-effect, Flat, Monoline, Luxury Engraved, Minimalist).
  2. Subjects: What icons or desire should be represented?
  3. Target environment: Where will the icons be used? (e.g., Astro, React, Mobile App).
仅当请求内容不明确时进行需求探索。若用户未提供足够细节，询问必要的缺失信息：
  1. 风格：需要什么风格的图标？（例如：3D效果、扁平化、单线、奢华雕刻风、极简风）。
  2. 主题：需要呈现哪些图标或概念？
  3. 目标环境：图标将用于何处？（例如：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:
  1. Asset type: icon asset for the user's target environment.
  2. Primary request: exact subject or concept.
  3. Style/medium: requested style plus the selected strategy.
  4. Composition/framing: centered, clear silhouette, generous padding.
  5. Color palette: user-specified colors or category color.
  6. 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.
使用简洁的带标签提示词规范进行生成，而非松散的段落。优先保留用户需求，仅添加能提升图标输出质量的实用细节。
推荐顺序：
  1. 资产类型：图标资产，适配用户的目标环境。
  2. 核心请求：确切的主题或概念。
  3. 风格/载体：请求的风格加上选定的策略。
  4. 构图/布局：居中布局，清晰轮廓，充足内边距。
  5. 配色方案：用户指定的颜色或分类色系。
  6. 约束条件：除非要求，否则不添加文字；无商标/标志；无水印；无额外元素。
对于基于现有图像/参考素材的工作流，按角色为每张图片标注：
Image 1: edit target
、
Image 2: style reference
等。若需保留现有图标或绘图，在每次迭代中维持不变要素：保留布局、比例、轮廓和预期主题；仅修改用户要求的方面。

Strategy A: Vector (Monochrome/Simple)

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

Use for: Logos, UI icons, line art.
  1. 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
  2. Process: Binarize the generated image, trace it with 
    potrace
    , and optimize it with 
    svgo
    .
  3. 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.
  4. 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图标、线稿。
  1. 生成：
    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
  2. 处理：对生成的图像进行二值化处理，使用
    potrace
    追踪路径，再用
    svgo
    优化。
  3. 规则：除非用户明确要求手动/确定性SVG代码，否则不要手动编写策略A图标的最终SVG路径数据。默认输出必须遵循“生成图像 -> 
    scripts/crop_and_trace.py
    -> 
    potrace
    -> 
    svgo
    ”的流程。
  4. 颜色：若用户指定颜色，在追踪完成后应用该颜色。若更新参考图库且未指定颜色，使用分类色系。

Strategy B: Raster (Complex/Multi-color)

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

Use for: Detailed illustrations, 3D icons, colorful assets.
  1. 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.
  2. Logic: Background removed via chroma-keying to create a transparent PNG.
  3. Rule: Keep Strategy B outputs as transparent PNG/WebP unless the user explicitly asks for another format.
适用场景：精细插画、3D图标、彩色资产。
  1. 生成：
    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
    。
  2. 原理：通过抠图（chroma-keying）去除背景，生成透明PNG。
  3. 规则：除非用户明确要求其他格式，否则策略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（矢量图标）处理步骤：

  1. Binarize: 
    python3 scripts/crop_and_trace.py <source> tmp/custom-icons/<request-or-icon-name> <name>
  2. Trace: 
    potrace "tmp/custom-icons/<request-or-icon-name>/<name>.pbm" --svg --flat -o "tmp/custom-icons/<request-or-icon-name>/<name>.svg"
  3. Optimize: 
    bunx svgo "tmp/custom-icons/<request-or-icon-name>/<name>.svg"
  4. Color: After tracing, apply the target category fill/stroke color to the optimized SVG only as a mechanical tinting step.
  5. Deliver: Copy the optimized SVG from 
    tmp/custom-icons/<request-or-icon-name>/
    to the user's requested destination when provided.
  6. Validate: Confirm the SVG parses, contains traced path data, and visually matches the requested subject/style.
  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可正常解析、包含追踪路径数据，且视觉上符合请求的主题/风格。

For Strategy B (Complex):

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

  1. 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.
  2. 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.
  3. Deliver: Copy the transparent PNG/WebP from 
    tmp/custom-icons/<request-or-icon-name>/
    to the user's requested destination when provided.
  4. 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
    .
  1. 使用高级抠图工具去除绿幕：
    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。
  2. 备选裁剪工作流：
    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。当裁剪比柔化蒙版清理更重要时使用此流程。
  3. 交付：若用户提供了目标位置，将透明PNG/WebP从
    tmp/custom-icons/<request-or-icon-name>/
    复制到该位置。
  4. 透明通道验证：检查输出文件的边角是否透明、是否有绿色边缘残留，以及主题轮廓是否清晰。若使用高级工具后仍有边缘残留，添加
    --edge-contract 1
    参数重试一次；若边缘过于生硬，使用更小的羽化值，例如
    --edge-feather 0.25
    。

Phase 4: Optimization & Delivery

阶段4：优化与交付

  1. Optimize: For SVGs, use 
    svgo
    . For PNGs, ensure they are trimmed and compressed.
  2. Implement: Show the user how to use the asset.
  3. 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
    .
  4. 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.
  1. 优化：对于SVG文件，使用
    svgo
    优化；对于PNG文件，确保已裁剪并压缩。
  2. 使用指导：向用户展示如何使用该资产。
  3. 图库一致性：更新图库时，每个参考分类保留5个图标。策略A分类应使用其主题填充/描边颜色：科技类
    #00C8FF
    、生活方式类
    #00E676
    、精细类
    #FF3D00
    。
  4. 如实反馈：说明使用了哪个流程、最终文件保存位置、
    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 ModifierCategoryVisual Characteristics
Luxury monolinePremiumElegant, thin strokes
Geometric boldTech2px strokes, rounded caps
Organic InkLifestyleTextured edges, fluid
3D RenderedComplexDepth, 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