mcpField
C
custom-icons

custom-icons

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

关于 custom-icons

custom-icons 是用于生成和交付图标素材的工作流技能，面向需要图标设计与项目落地的用户。它按素材需求选择矢量或栅格流程，并要求验证输出后再交付。

主要功能

  1. 01确定素材需求与输出格式
  2. 02选择矢量或栅格处理流程
  3. 03管理来源文件与工作区
  4. 04验证图标并检查视觉效果
  5. 05交付已验证的最终素材

适用场景

  1. 01按参考样式制作一组图标
  2. 02将栅格图像转换为 SVG
  3. 03为目标项目生成并验证图标素材

安装

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

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

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

包含的文件

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

agents/
openai.yaml
references/
native-vector-workflow.md
raster-workflow.md
vector-workflow.md
scripts/
crop_and_trace.py
normalize_raster_icon.py
normalize_svg_icon.py
remove_chroma_key.py
validate_icon.py

详细介绍

自定义图标

通过可检查的源文件到资源的流水线构建每个图标。将用户声明的主题、风格、调色板、格式、尺寸和目标位置视为资源契约。

工作流

1. 确定资源契约

在提问前，检查请求、提供的参考资料和目标项目。使用以下默认值推断常规细节：

  • 优先匹配提供的参考资料或现有图标集，再引入新风格。
  • 单色剪影、线稿和简单的 UI 图稿使用 SVG。
  • 3D、多色、带阴影或纹理的图稿使用透明 PNG 或无损 WebP。
  • 未指定 UI SVG 尺寸时，使用正方形 24×24 坐标系；未指定详细插画 SVG 尺寸时，使用 1024×1024。
  • 未指定矢量颜色时使用黑色；未指定光栅图尺寸时保留生成文件或源文件的尺寸。
  • 未指定目标位置时，将最终资源保存到请求工作区。

仅当主题缺失、需求冲突，或格式选择会显著改变所需外观时，才提出一个简洁的问题。除非用户要求实现或特定框架的打包，否则目标框架为可选项。

对于每项资源，确定主题、分支、风格基准、调色板、格式和最终位置。所有字段均已明确说明或安全推断，且不存在重大冲突时，此步骤即告完成。

2. 为每项资源选择一个分支
  • 描摹矢量： 当需要将光栅源文件转换为 SVG，或新图标需要有机、手绘或生成式剪影时使用。生成或处理资源前，请阅读 references/vector-workflow.md。
  • 透明光栅图： 用于详细、3D、多色、带阴影或纹理的图稿。生成或处理资源前，请阅读 references/raster-workflow.md。
  • 原生矢量： 用于现有矢量源文件、可确定性生成的几何图形或 UI 图稿，或可通过矢量填充、渐变和效果忠实呈现的详细 SVG。创建或编辑资源前，请阅读 references/native-vector-workflow.md。

逐项对混合图标集进行分类；同一图标集可以同时包含 SVG 和光栅输出。在可行的情况下，保留用户要求的格式。如果请求的格式会丢失重要视觉细节，请解释其中的取舍，并在生成前确定解决方案。

当每项资源都恰好对应一个流水线，且该流水线能够生成其契约指定的格式时，此步骤即告完成。

3. 准备源文件和工作区

将 <skill-dir> 解析为包含此 SKILL.md 的目录；调用捆绑脚本时使用 <skill-dir>/scripts/...，不要假定用户项目中存在相应路径。

在目标项目中创建 tmp/custom-icons/<request-slug>/。请求和资源的 slug 使用文件系统安全的小写名称，并以连字符分隔。将提示词、生成的源文件、处理后的预览图、描摹草稿和验证产物保存在该目录中。保留这些中间文件，直到用户要求清理；除非请求明确授权替换，否则避免覆盖现有最终资源。

提供参考资料时，为每项资料指定用途，例如 编辑目标、风格参考 或 调色板参考。除非请求明确要求修改，否则保留编辑目标的身份特征、剪影、比例和构图。

对于包含三个或更多图标的图标集，先制作一个代表性试作图。确认其剪影、风格、调色板、留白和小尺寸下的辨识度后，再制作其余图标，并让每项资源都沿用该视觉契约。

工作区已创建、输入资料的用途已明确，且包含多个图标的图标集已验证试作图时，此步骤即告完成。

4. 生成和处理

使用所选分支引用作为提示词和命令的唯一事实来源。每张源图像生成一个独立素材。如果图像生成或编辑工具不可用，请基于用户提供的源文件继续；如果没有源文件，请说明生成是阻碍步骤。

在工作区中保留所有分支尝试。如果首次结果不符合要求，请调整源文件或处理参数；不要通过切换格式来掩盖失败的尝试。

当每个约定的最终文件都已存在于工作区，且由所选流程生成时，此步骤即告完成。

5. 验证每个素材

对每个输出运行随附的验证器：

python3 "<skill-dir>/scripts/validate_icon.py" "<final-asset>"

对于图标集，还要一并验证每个分支的所有输出：

python3 "<skill-dir>/scripts/validate_icon.py" \
  "<asset-1>" "<asset-2>" "<asset-n>" \
  --require-matching-canvas

然后以预期的显示尺寸目视检查每个图标，并将其与请求和任何参考图进行比较。检查以下各项：

  • 主题清晰易辨，轮廓干净；
  • 集合内画布、视觉尺寸、留白、配色、透视以及描边／细节粗细保持一致；
  • 矢量几何图形清晰锐利，没有多余路径或细节丢失；
  • 光栅图像透明度干净，没有键色溢出、边缘裁切或意外阴影；
  • 在预期的最小尺寸下清晰可辨。

除非用户要求使用可变画板，否则光栅图像成员必须具有相同的像素尺寸，SVG 成员必须使用相同的 viewBox、宽度和高度坐标系。

对于任何未通过检查的素材，进行迭代并重新运行两项检查。只有验证器通过且每个素材都符合目视检查清单时，此步骤才算完成；只要有任何成员未通过，整个集合就不完整。

6. 交付并报告

仅将通过验证的最终素材复制到约定的目标位置。

报告所用分支、最终路径、工作区路径、验证结果，以及任何有意偏离请求的情况。仅在用户提出要求或目标环境需要非显而易见的用法时，才提供集成代码。

当每个承诺交付的素材都已存在于所报告的路径，且每项验证结果均已说明时，交付才算完成。

评论

支持 Markdown