Back to Details

extension-assets

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Extension Assets (Icon & Image Generator)

扩展资产（图标与图片生成工具）

Generate all required icons and assets for a Chrome extension and CWS listing. Do NOT just explain — execute the workflow.
生成Chrome扩展和CWS列表所需的所有图标与资产。请勿仅作解释——执行以下工作流。

Assets Checklist

资产清单

Extension Icons (required)

扩展图标（必填）

FileSizeUsage
icon16.png
16x16Favicon, context menus
icon32.png
32x32Windows taskbar
icon48.png
48x48Extensions management page
icon128.png
128x128Installation dialog, CWS store icon
文件尺寸用途
icon16.png
16x16网站图标、上下文菜单
icon32.png
32x32Windows任务栏
icon48.png
48x48扩展管理页面
icon128.png
128x128安装对话框、CWS商店图标

Action Icons (toolbar)

操作图标（工具栏）

FileSize
action16.png
16x16
action24.png
24x24
action32.png
32x32
文件尺寸
action16.png
16x16
action24.png
24x24
action32.png
32x32

CWS Listing Assets

CWS列表资产

AssetSizeRequired?
Screenshots1280x800 or 640x400Yes (1–5)
Small promo tile440x280For featured placement
Large promo tile920x680Optional
Marquee promo tile1400x560Optional
资产尺寸是否必填？
截图1280x800 或 640x400是（1–5张）
小型推广卡片440x280用于推荐位展示
大型推广卡片920x680可选
横幅推广卡片1400x560可选

Workflow (Execute This)

工作流（执行此流程）

Step 1: Generate or locate source icon

步骤1：生成或定位源图标

Ask user: "Do you have a source logo? (SVG or PNG, min 512x512)"
If no source — generate SVG directly: Create a clean, professional SVG icon. Design should be:
  • Simple geometric shapes (recognizable at 16x16)
  • Flat design, no gradients (clean at all sizes)
  • Natural, hand-crafted look (NOT AI-generated style)
  • 2-3 colors max, bold contrast
Save as 
icon.svg
in project root.
询问用户："你是否已有源Logo？（SVG或PNG格式，最小尺寸512x512）"
如果没有源文件——直接生成SVG： 创建简洁、专业的SVG图标。设计需满足：
  • 简单几何形状（在16x16尺寸下仍可识别）
  • 扁平化设计，无渐变（所有尺寸下都清晰）
  • 自然、手工制作的风格（非AI生成风格）
  • 最多2-3种颜色，对比鲜明
保存为项目根目录下的
icon.svg
。

Step 2: Convert SVG → PNG (Node.js script)

步骤2：将SVG转换为PNG（Node.js脚本）

bash
npm install -D sharp
node scripts/generate-icons.js
See 
references/icon-converter-script.md
for the full Node.js script using sharp.
Fallback (ImageMagick):
bash
for size in 16 32 48 128; do
  convert -background none -resize ${size}x${size} icon.svg "public/icons/icon${size}.png"
done
bash
npm install -D sharp
node scripts/generate-icons.js
完整的Node.js脚本请参考
references/icon-converter-script.md
，该脚本使用sharp库。
备选方案（ImageMagick）：
bash
for size in 16 32 48 128; do
  convert -background none -resize ${size}x${size} icon.svg "public/icons/icon${size}.png"
done

Step 3: Generate placeholder CWS assets

步骤3：生成CWS资产占位符

bash
undefined
bash
undefined

Screenshot placeholder (1280x800)

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
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)

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
undefined
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
undefined

Step 4: Gemini API generation (optional)

步骤4：Gemini API生成（可选）

Check for API key:
bash
echo $GEMINI_API_KEY
If set, use 
ai-multimodal
skill or call Gemini API directly. See 
references/image-generation-prompts.md
for prompt templates.
If not set, output prompts from 
references/image-generation-prompts.md
for user to generate manually.
检查API密钥：
bash
echo $GEMINI_API_KEY
如果已设置，使用
ai-multimodal
技能或直接调用Gemini API。提示词模板请参考
references/image-generation-prompts.md
。
如果未设置，输出
references/image-generation-prompts.md
中的提示词，供用户手动生成。

Step 5: Set up public/ folder

步骤5：配置public/文件夹

Follow structure in 
references/public-folder-setup.md
. Verify manifest.json icon paths match.
遵循
references/public-folder-setup.md
中的结构。验证manifest.json中的图标路径是否匹配。

Step 6: Validate assets

步骤6：验证资产

bash
undefined
bash
undefined

Check all required icons exist and are correct size

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
undefined
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
undefined

Output Format

输出格式

undefined
undefined

Assets Generation Report: <extension-name>

Assets Generation Report: <extension-name>

Generated Icons

Generated Icons

  • icon16.png ✓ | icon32.png ✓ | icon48.png ✓ | icon128.png ✓
  • action16.png ✓ | action24.png ✓ | action32.png ✓
  • icon16.png ✓ | icon32.png ✓ | icon48.png ✓ | icon128.png ✓
  • action16.png ✓ | action24.png ✓ | action32.png ✓

CWS Listing Assets

CWS Listing Assets

  • screenshot1.png (1280x800) ✓
  • promo-small.png (440x280) ✓
  • screenshot1.png (1280x800) ✓
  • promo-small.png (440x280) ✓

Pending (manual generation needed)

Pending (manual generation needed)

  • Large promo tile (920x680) — prompt provided below
  • Screenshots with real extension UI
  • Large promo tile (920x680) — prompt provided below
  • Screenshots with real extension UI

Prompts for Manual Generation

Prompts for Manual Generation

<see references/image-generation-prompts.md>
undefined
<see references/image-generation-prompts.md>
undefined

References

参考资料

  • references/icon-requirements.md
    — Icon specs, manifest config, design guidelines
  • references/icon-converter-script.md
    — Node.js script (sharp) to convert SVG → multi-size PNG
  • references/store-listing-assets.md
    — CWS listing requirements and best practices
  • references/image-generation-prompts.md
    — AI prompt templates, Gemini API setup
  • references/public-folder-setup.md
    — public/ folder structure and manifest paths
  • Chrome Extension Icons
  • CWS Best Listing
  • 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优质列表指南

Related Skills

相关技能

  • extension-create
    — Scaffold new extension with public/ folder
  • extension-manifest
    — Generate/validate manifest.json icon paths
  • extension-publish
    — Store submission checklist
  • extension-create
    — 搭建带public/文件夹的新扩展
  • extension-manifest
    — 生成/验证manifest.json图标路径
  • extension-publish
    — 商店提交检查清单