零依赖图标生成器(手写 PNG / 无 Pillow)

SKILL前端设计
前端设计 未标注权限 许可证不明确
安装这个技能

在完全不装任何三方库(无 Pillow / cairosvg / ImageMagick)的前提下,用标准库 zlib+struct 手写 PNG 编码器生成应用图标:圆角方形渐变底 + 白色实心剪影符号。当用户要"给工具/技能/应用生成图标""换个 icon""没有 Pillow 怎么画图""批量生成 favicon / 应用图标""icon 生成器"时使用。内置 10 个矢量符号(浏览器/云/盾牌/文件夹/对勾/下载/箭头/齿轮/放大镜/锁)+ 5x7 点阵文字,支持任意尺寸与超采样抗锯齿。

一句话选型结论

按资料字段整理

零依赖图标生成器(手写 PNG / 无 Pillow)是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_bd60432e/zero-dep-icon-gen
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_bd60432e仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791621832
正文体量7.1 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
零依赖图标生成器(手写 PNG / 无 Pillow)当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

7.1 KB
模型实际读到的说明书原文,来自技能仓库

零依赖图标生成器

这个技能解决什么

需要给一个工具、技能或应用配图标,但:
- 装不上 Pillow(pip install 超时 / SIGTERM / 无网络 / 代理问题)
- 目标是「打开即用」的交付物,不该引入二进制依赖
- 只想画个几何符号图标,不需要照片级图形

→ 用标准库手写 PNG。一个 256×256 RGBA 图标只要约 4KB,生成耗时 < 1 秒。

快速开始

PY=&quot;C:/Users/DELL/.workbuddy/binaries/python/versions/3.13.12/python.exe&quot;
S=&quot;$HOME/.workbuddy/skills/zero-dep-icon-gen/scripts/gen_icons.py&quot;

# 看有哪些符号
$PY &quot;$S&quot; --list-symbols

# 生成单个
$PY &quot;$S&quot; --spec &quot;my-tool:#4F46E5,#818CF8,browser&quot; -o out/

# 批量(推荐:写 specs 文件,可版本控制)
$PY &quot;$S&quot; --specs-file specs.txt -o out/

# 512 尺寸 + 圆角 96
$PY &quot;$S&quot; --spec &quot;my-tool:#059669,#34D399,check&quot; --size 512 --radius 96 -o out/

# 点阵文字图标
$PY &quot;$S&quot; --spec &quot;wb:#1E293B,#64748B,text|text=WB&quot; -o out/

spec 格式:slug:#主色,#次色,符号[|key=value,key=value]

选项 说明
text= symbol=text 时渲染的文字(大写字母/数字,1~4 个)
rotate= 符号旋转角度(度),如 rotate=15
shadow= 1 时底色压暗 12%,做弱化/次要变体

specs 文件每行一条,# 开头为注释。

可用符号

符号 语义 视觉
browser 网页 / 浏览器 / 控制台 实心窗口 + 挖空屏幕 + 三圆点 + 内容线
cloud 上传 / 部署 / 云端 三圆并集云 + 向上箭头
shield 证书 / 安全 / 续期 实心盾牌 + 挖空对勾
folder 归档 / 整理 / 文件 文件夹剪影 + 三条镂空横线
check 完成 / 签到 / 通过 圆环 + 实心对勾
download 下载 / 导出 下箭头 + 底部托线
arrow-up 发布 / 升级 上箭头
gear 配置 / 自动化 8 齿齿轮 + 中心镂空
search 搜索 / 检索 放大镜
lock 授权 / 密钥 锁体 + 锁梁
text 缩写文字 5×7 点阵(配 --text)

三条设计铁律(踩过坑,别推翻)

1. 符号用实心剪影,不要空心描边

第一版想做「空心描边框 + 内挖空」,结果内挖空把符号本身吃掉了:浏览器成了光板方块、
盾牌里对勾消失、文件夹横线被吞、云朵箭头畸形。

实心剪影两个好处:32px 缩略图下辨识度更高;实现上只需一层 if 在形状内: return True,
不用处理「边框+内洞」的布尔运算。

2. 判定顺序:先外框 → 再挖空 → 最后挖细节

以 sym_browser 为例,顺序错了细节会被覆盖:

1. 不在窗口外框内      -&gt; False
2. 在屏幕区(挖空)    -&gt; 屏幕内容线 True,其余 False   ← 提前 return
3. 在标题栏且碰到圆点  -&gt; False                        ← 最后挖
4. 其余                -&gt; True

第 2 步必须提前 return,否则第 3、4 步的 True 会把屏幕重新填实。

3. 边缘抗锯齿用「超采样 + shape_a 归一」

sym_a = (cov_sym / total) / max(shape_a, 1e-6)

必须除以 shape_a。否则在圆角边缘,像素的符号覆盖本身就是被形状裁剪过的,
再乘一次形状 alpha 会二次衰减,符号边缘出现一圈深色描边。

技术实现要点

PNG 编码(write_png)

只需 3 个 chunk,全部标准库:

png  = b&quot;\x89PNG\r\n\x1a\n&quot;
png += chunk(b&quot;IHDR&quot;, struct.pack(&quot;&gt;IIBBBBB&quot;, w, h, 8, 6, 0, 0, 0))  # 6 = RGBA
png += chunk(b&quot;IDAT&quot;, zlib.compress(raw, 9))   # raw = 每行前加一个 \x00 (filter None)
png += chunk(b&quot;IEND&quot;, b&quot;&quot;)

def chunk(tag, data):
    return (struct.pack(&quot;&gt;I&quot;, len(data)) + tag + data
            + struct.pack(&quot;&gt;I&quot;, zlib.crc32(tag + data) &amp; 0xFFFFFFFF))

坑:zlib.crc32 在旧版本返回有符号 int,&amp; 0xFFFFFFFF 保证一致;
IHDR 的 CRC 必须覆盖 b&quot;IHDR&quot; + data,漏掉 tag 会导致图片打不开。

几何工具函数

  • seg_dist(px,py,ax,ay,bx,by) — 点到线段距离,用于对勾 / 箭头杆 / 任意角度笔画
  • bar_dist(px,py,x0,x1,y0,y1) — 轴对齐矩形距离,&lt;=0 在内部,用于窗口 / 文件夹 / 横线
  • rounded_square_alpha(...) — 圆角方形覆盖度

尺寸与体积参考

尺寸 典型体积
128 1.5~2 KB
256 3.5~6 KB
512 10~18 KB

超采样倍数 SS = 2(2×2)。改 4×4 渲染时间 ×4,肉眼几乎无差别,不建议。

常见错误排查

现象 原因 处置
spec 格式应为 slug:main,accent,symbol spec 只给了一段 必须 slug:#a,#b,sym 三段,冒号分隔
WARN: 未知符号 符号名拼错 --list-symbols 核对
图标中心一片空白 挖空区域过大,把符号吃掉了 见「铁律 1」,改实心剪影
圆角边缘有深色描边 忘了除以 shape_a 见「铁律 3」
符号被截断贴边 坐标超出 0.2~0.8 符号坐标应留在 0.22~0.78,四周留白
文件生成但打不开 CRC 或 IHDR 写错 确认 CRC 覆盖 tag + data,color type = 6

与图标上传链路的衔接

生成完图标只是第一半。若目标是发布到技能市场,图标还需上传:

  • SkillHub:图标没有独立更新端点,iconUrl 只能随 publish 的 payload 提交。
    换图标 = 发一个新版本。先 POST /api/v1/community/skill-icons/upload
    (multipart 字段名 file)拿到 iconUrl,再放进 payload.iconUrl。
    判据:响应里 iconAuditStatus: &quot;pending&quot; 表示收到;null 表示没生效。
    完整流程见 skillhub-publish-skill 技能的 references/icon-upload.md。

  • 若平台方是「上传 zip 包」,把生成的 &lt;slug&gt;.png 放在技能目录根部
    (文件名 = slug),发布脚本的 find_icon() 会自动兜底找到。

资源

  • scripts/gen_icons.py — 生成器主体,含 10 个符号 + 点阵字体 + PNG 编码器。
    加新符号只需写一个 sym_xxx(x, y) 函数并注册进 SYMBOLS 字典。
  • references/design-notes.md — 配色方案与从真实截图反推主色的方法。

常见问题

5 问
答案由本站依据条目字段整理
零依赖图标生成器(手写 PNG / 无 Pillow)怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_bd60432e/zero-dep-icon-gen。安装方式为未标注。装完刷新技能列表或重开客户端。

零依赖图标生成器(手写 PNG / 无 Pillow)支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

零依赖图标生成器(手写 PNG / 无 Pillow)权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

零依赖图标生成器(手写 PNG / 无 Pillow)收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

零依赖图标生成器(手写 PNG / 无 Pillow)用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。