extension-assets

用途

Extension Assets（图标与图片生成器）用于为 Chrome 扩展及其 Chrome Web Store（CWS）列表生成所需的全部图标和素材。该技能强调“不要只是解释——执行工作流”，即按照既定步骤实际生成文件。

主要能力

该技能围绕一份素材清单展开，涵盖三类资源：

扩展图标（必需）：icon16.png（16x16，用于 favicon、右键菜单）、icon32.png（32x32，用于 Windows 任务栏）、icon48.png（48x48，用于扩展管理页面）、icon128.png（128x128，用于安装对话框和 CWS 商店图标）。
工具栏 action 图标：action16.png（16x16）、action24.png（24x24）、action32.png（32x32）。
CWS 列表素材：截图（1280x800 或 640x400，必需 1–5 张）、小型促销图块（440x280，用于精选展示）、大型促销图块（920x680，可选）、横幅促销图块（1400x560，可选）。

使用方式

工作流按以下步骤执行：

第 1 步：生成或定位源图标。询问用户是否已有源 logo（SVG 或 PNG，最小 512x512）。若没有，则直接生成 SVG：要求使用简单几何形状（在 16x16 下仍可辨识）、扁平设计无渐变、自然手工感（非 AI 生成风格）、最多 2–3 种颜色且对比强烈，保存为项目根目录的 icon.svg。
第 2 步：将 SVG 转换为 PNG。使用 Node.js 脚本：npm install -D sharp 后运行 node scripts/generate-icons.js，完整脚本见 references/icon-converter-script.md。备选方案为 ImageMagick，命令为：

for size in 16 32 48 128; do
  convert -background none -resize ${size}x${size} icon.svg "public/icons/icon${size}.png"
done

第 3 步：生成占位 CWS 素材。例如截图占位（1280x800）和小型促销图块（440x280）的 ImageMagick 命令，使用纯色背景加居中文字标注。
第 4 步：可选的 Gemini API 生成。先检查环境变量 GEMINI_API_KEY 是否设置；若已设置，使用 ai-multimodal 技能或直接调用 Gemini API，提示词模板见 references/image-generation-prompts.md；若未设置，则输出该文件中的提示词供用户手动生成。
第 5 步：搭建 public/ 文件夹，遵循 references/public-folder-setup.md 中的结构，并核对 manifest.json 中的图标路径是否匹配。
第 6 步：校验素材。使用循环检查各必需图标是否存在且尺寸正确：

for size in 16 32 48 128; do
  identify public/icons/icon${size}.png | grep "${size}x${size}" \
    && echo "icon${size}.png OK" || echo "icon${size}.png MISSING/WRONG SIZE"
done

输出格式

完成后输出“Assets Generation Report: <extension-name>”，包含：已生成图标清单（带勾选标记）、CWS 列表素材清单、待手动生成项（如大型促销图块、含真实扩展 UI 的截图）以及供手动生成使用的提示词。

适用场景

适用于需要为 Chrome 扩展准备上架素材的开发者，尤其是希望一次性生成全部尺寸图标、商店列表图片并搭建 public/ 目录结构的场景。

限制与说明

部分素材（如大型促销图块、含真实 UI 的截图）仍需手动生成。
Gemini API 图片生成需要用户自行提供 API key，否则只能输出提示词。
该技能提供 Premium 版本升级入口（https://app.extensionbooster.net/dashboard/services/extension-ai-kit），但资料未说明其具体功能与收费细节。
相关技能包括 extension-create（搭建含 public/ 的新扩展）、extension-manifest（生成/校验 manifest.json 图标路径）、extension-publish（商店提交清单）。

参考资料

references/icon-requirements.md — 图标规格、manifest 配置、设计指南
references/icon-converter-script.md — 使用 sharp 将 SVG 转换为多尺寸 PNG 的 Node.js 脚本
references/store-listing-assets.md — CWS 列表要求与最佳实践
references/image-generation-prompts.md — AI 提示词模板、Gemini API 设置
references/public-folder-setup.md — public/ 文件夹结构与 manifest 路径