微信小程序底部导航图标生成
将以下提示词粘贴到你的 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 并校验尺寸、透明背景和无文字。
- 做外包交付的组长,需要按菜单名称快速生成可验收的底部导航图标资源。