PIL 脚本批量生成小程序图标实战：零美工做出全套 tabBar

做小程序最卡我的不是代码，是图标。tabBar 要 4 个 tab × 灰/橙两态 = 8 张，加上各功能入口、证件类型，零零总总二十几张。我不会设计，约美工又贵又慢。

解法：让 AI 写个 Python 脚本，用 PIL 把图标「画」出来。脚本可复现、可批量、改个参数就能换色换形。这篇讲两个工具：图标生成脚本 + canvas 手绘数据图。

一、为什么是「脚本生成」而不是「找图标库」

图标库（iconfont 等）的问题是风格不统一、找不到刚好贴合语义的。而手写 SVG 再转 PNG，AI 生成的路径又常常变形。

用 PIL 直接用代码画几何图形，反而最可控：圆、线、圆角矩形都是确定性的，AI 写得准，改起来就是改参数。

二、图标脚本的核心技巧：4 倍超采样抗锯齿

直接画 81×81 的小图，边缘全是锯齿。技巧是先画 4 倍大图（324×324），再缩回 81×81，用 LANCZOS 重采样，边缘立刻顺滑。

复制代码

from PIL import Image, ImageDraw
import math, os

S = 4                  # 超采样倍数
SIZE = 81 * S          # 先在 324x324 上画
GRAY   = (153, 153, 153, 255)    # #999 未选中
ORANGE = (255, 140, 105, 255)    # #FF8C69 选中

def save(img, name):
    img = img.resize((81, 81), Image.LANCZOS)  # 缩回目标尺寸
    img.save(os.path.join('icons', name))

def draw_today(color, name):
    """今日 tab：太阳（圆 + 8 道光芒）"""
    img = Image.new('RGBA', (SIZE, SIZE), (0, 0, 0, 0))
    d = ImageDraw.Draw(img)
    cx, cy, r = 40.5*S, 42*S, 16*S
    for i in range(8):                        # 8 道光芒，每 45° 一道
        a = math.radians(i * 45)
        d.line([cx + 23*S*math.cos(a), cy + 23*S*math.sin(a),
                cx + 30*S*math.cos(a), cy + 30*S*math.sin(a)],
               fill=color, width=round(4.5*S))
    d.ellipse([cx-r, cy-r, cx+r, cy+r], fill=color)
    save(img, name)

每个图标一个函数，用「颜色 + 文件名」参数化。同一个 draw_today，传 GRAY 生成未选中态，传 ORANGE 生成选中态------一个函数出两张图 ，8 张 tabBar 图标就是 4 个函数各跑两遍。改主题色？改一行 ORANGE 全部重跑。

三、canvas 手绘数据图：24h 喂养分布

图标之外，数据可视化也没敢用第三方图表库（小程序里引入图表库体积大、定制难）。直接用 canvas 手绘。

拿「24 小时喂养分布」举例：横轴是一天 24 小时，每个喂奶时刻画一个点，母乳橙色、奶粉蓝色，点的大小随奶量变化。

复制代码

// 24h 时间轴：当日每个喂奶时刻一个点
function drawFeedChart24(ctx, W, H, feeds) {
  const padL = 24, padR = 24, axisY = H - 22
  const x = h => padL + (h / 24) * (W - padL - padR)

  for (const h of [0, 6, 12, 18, 24]) {   // 画刻度 0/6/12/18/24
    ctx.fillStyle = '#BBB'
    ctx.fillText(h + ':00', x(h) - 12, axisY + 15)
  }
  for (const f of feeds) {
    const isFormula = f.kind === 'formula'
    ctx.fillStyle = isFormula ? '#7B9EF0' : '#FF8C69'  // 奶粉蓝/母乳橙
    const rad = baseR + f.amount * k                    // 半径随奶量
    ctx.beginPath()
    ctx.arc(x(f.hour), axisY - 16, rad, 0, Math.PI * 2)
    ctx.fill()
  }
}

还有一个「近 7 天」视图，用 fillRect 画堆叠柱------每天一根柱子，母乳段和奶粉段上下堆起来，一眼看出哪天喂得多、母乳占比多少。

好处：零依赖、体积小、样式完全自己说了算。母乳橙 #FF8C69、奶粉蓝 #7B9EF0 跟整个小程序的暖色调保持一致。

四、给不会设计的开发者三条建议

图标用代码画，别找库也别手写 SVG。PIL 的几何图形确定性最强，AI 写得准、你改得快。
小图抗锯齿靠超采样 。画 4 倍大再缩回来，一行 resize 的事。
简单图表用 canvas 手绘，别引库。柱状、散点、时间轴这类基础图，几十行 canvas 就够，还零依赖。

不会美工不是借口。把「视觉」翻译成「几何参数」，AI 就能帮你把美工活也干了。

如果这篇对你有用，欢迎关注看「AI 工具人 PM 实战」系列更新；你用什么方法解决「不会设计」这个问题，评论聊聊；觉得有用就收藏备用。

下一篇预告：《我做了个小宝宝成长记录小程序：功能全览与开发复盘》------整个系列的收官，带你看成品。