Agent Skills
返回列表
微信小程序底部导航图标生成

微信小程序底部导航图标生成

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @user_7ffc2311/wechat-tabbar-icons。

技能介绍

问题

微信小程序底部导航需要一组可在 app.json 的 tabBar.list 中稳定引用的本地双态图标。仅“画出图标”不够:普通态和选中态必须轮廓一致、透明背景、尺寸匹配,且不能写入文字、角标或复杂阴影。如果依赖两次独立生成,很容易出现线宽、留白、圆角和视觉重量不一致,导致底部导航看起来像多套图标拼在一起。

工作方式

该技能围绕 app.json 的本地资源路径组织输出:

  • 解析输入:读取 tabBar.list、tabBar.color 与 selectedColor,根据菜单名称确定文案、文件名和图标隐喻。
  • 选择输出目录:优先沿用项目已有资源目录,否则使用 assets/tabbar/ 或 miniprogram/assets/tabbar/。
  • 生成中性源图:在需要原创视觉时调用 imagegen,每个菜单先生成一张透明源图,不分别生成普通态和选中态。
  • 脚本染色:用 scripts/tint_tabbar_icon.py 将源图缩放并染色,输出普通态和选中态 PNG,保持同一轮廓。
  • 更新配置:把本地 iconPath 与 selectedIconPath 写入每个 tab,菜单文字只放在 text。

边界

  • 如果项目已有 SVG、字体图标或成熟图标库,优先使用确定性矢量导出,除非用户明确要求生成式图标。
  • 如果菜单数量与 tabBar.list 不一致,先指出差异,无法安全匹配时再询问。
  • 图标适合小尺寸显示,避免细碎线条、3D、照片质感、复杂渐变和重阴影;同一组图标保持线宽、圆角、留白与配色统一。

使用场景

  • 为新建微信小程序配置底部导航时,需要按 `tabBar.list` 生成普通态和选中态本地 PNG。
  • 已有 `app.json` 菜单文案,需要保留 `pagePath` 顺序并校准 `text`、文件名与图标隐喻。
  • 项目已有 `app.json` 但缺少双态 PNG,需要按已有资源目录输出并更新 `iconPath`。
  • 原型只有菜单名称,需要推断短英文文件名、图标隐喻,并验收透明背景和尺寸一致。

适合人员

  • 做微信小程序前端配置的工程师,需要输出能在 `app.json` 稳定引用的本地 tab 图标路径。
  • 负责小程序视觉规范的 UI 设计师,需要保证普通态和选中态线宽、圆角、留白一致。
  • 接手旧小程序项目的维护者,需要补齐缺失的双态 PNG 并校验尺寸、透明背景和无文字。
  • 做外包交付的组长,需要按菜单名称快速生成可验收的底部导航图标资源。