mcpField
E
extension-assets

extension-assets

github.com/quangpl设计与 UI64182 次安装7 周前更新
代码仓库

关于 extension-assets

extension-assets 是一项为 Chrome 扩展生成并验证图标及 Chrome 网上应用店素材的技能。它涵盖 SVG 转 PNG、占位素材、可选 Gemini API 图像生成，以及素材路径检查。

主要功能

  1. 01规划扩展所需图标尺寸
  2. 02将 SVG 图标转换为 PNG
  3. 03创建应用商店占位图片
  4. 04支持可选 Gemini API 生成
  5. 05验证素材尺寸和清单路径

适用场景

  1. 01为新扩展准备图标文件
  2. 02制作占位截图和宣传图块
  3. 03检查素材是否符合清单中的路径

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/quangpl/browser-extension-skills --skill extension-assets

安装后在 Claude Code 中输入/extension-assets确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
icon-converter-script.md
icon-requirements.md
image-generation-prompts.md
public-folder-setup.md
store-listing-assets.md

详细介绍

扩展素材（图标和图片生成）

🚀 升级到 Premium 在 https://app.extensionbooster.net/dashboard/services/extension-ai-kit 获取 Premium 版本

为 Chrome 扩展和 CWS 商品信息页生成所有必需的图标和素材。不要只作说明——请执行整个工作流。

素材清单

扩展图标（必需）
文件尺寸用途
icon16.png16x16网站图标、上下文菜单
icon32.png32x32Windows 任务栏
icon48.png48x48扩展程序管理页面
icon128.png128x128安装对话框、CWS 商店图标
操作图标（工具栏）
文件尺寸
action16.png16x16
action24.png24x24
action32.png32x32
CWS 商品信息页素材
素材尺寸是否必需
截图1280x800 或 640x400是（1–5 张）
小型宣传图块440x280用于精选展示
大型宣传图块920x680可选
横幅宣传图块1400x560可选

工作流（请执行）

步骤 1：生成或查找源图标

询问用户：“您有源 Logo 吗？（SVG 或 PNG，至少 512x512）”

如果没有源图标——直接生成 SVG： 创建一个简洁、专业的 SVG 图标。设计应满足以下要求：

  • 简单的几何形状（在 16x16 下也能辨认）
  • 扁平设计，不使用渐变（在所有尺寸下都清晰）
  • 自然、手工制作的质感（而非 AI 生成的风格）
  • 最多使用 2–3 种颜色，对比鲜明

保存为项目根目录下的 icon.svg。

步骤 2：将 SVG 转换为 PNG（Node.js 脚本）
npm install -D sharp
node scripts/generate-icons.js

完整的 Node.js 脚本（使用 sharp）请参阅 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 占位素材
# Screenshot placeholder (1280x800)
convert -size 1280x800 xc:"#f8f9fa" \
  -font DejaVu-Sans -pointsize 48 -fill "#6c757d" \
  -gravity center -annotate 0 "Screenshot Placeholder\n1280x800" \
  public/store/screenshot1.png

# Small promo tile (440x280)
convert -size 440x280 xc:"#4285f4" \
  -font DejaVu-Sans -pointsize 32 -fill white \
  -gravity center -annotate 0 "Extension Name\nChrome Web Store" \
  public/store/promo-small.png
步骤 4：Gemini API 生成（可选）

检查是否设置了 API 密钥：

if [ -n "${GEMINI_API_KEY:-}" ]; then
  echo "GEMINI_API_KEY is set"
else
  echo "GEMINI_API_KEY is not set"
fi

如果已设置，请使用 ai-multimodal 技能或直接调用 Gemini API。提示词模板请参阅 references/image-generation-prompts.md。

如果未设置，请输出 references/image-generation-prompts.md 中的提示词，供用户手动生成。

步骤 5：设置 public/ 文件夹

按照 references/public-folder-setup.md 中的结构操作。确认 manifest.json 中的图标路径正确。

步骤 6：验证素材
# Check all required icons exist and are correct size
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>

### Generated Icons
- icon16.png ✓ | icon32.png ✓ | icon48.png ✓ | icon128.png ✓
- action16.png ✓ | action24.png ✓ | action32.png ✓

### CWS Listing Assets
- screenshot1.png (1280x800) ✓
- promo-small.png (440x280) ✓

### Pending (manual generation needed)
- Large promo tile (920x680) — prompt provided below
- Screenshots with real extension UI

### Prompts for Manual Generation
<see references/image-generation-prompts.md>

参考资料

  • references/icon-requirements.md — 图标规格、manifest 配置和设计指南
  • references/icon-converter-script.md — 用于将 SVG 转换为多种尺寸 PNG 的 Node.js 脚本（sharp）
  • references/store-listing-assets.md — CWS 商品信息页要求和最佳实践
  • references/image-generation-prompts.md — AI 提示词模板、Gemini API 设置
  • references/public-folder-setup.md — public/ 文件夹结构和 manifest 路径
  • Chrome 扩展图标
  • CWS 商品信息页最佳实践

相关技能

  • extension-create — 使用 public/ 文件夹搭建新扩展
  • extension-manifest — 生成或验证 manifest.json 中的图标路径
  • extension-publish — 商店提交清单

评论

支持 Markdown