一键生成 Chrome Web Store 商店截图与宣传图（PNG/JPG），并完成严格的视觉 QA One-click Chrome Web Store screenshots & promo images (PNG/JPG) with strict visual QA
关键词 / Keywords: Chrome 扩展 · 商店截图 · 宣传图 · Chrome Web Store · screenshot generator · promo image · CodeBuddy skill · Pillow
中文 | English
一个可复用的 用户级 CodeBuddy Skill，基于 PIL 的 Python 流水线为浏览器扩展 / Web 应用项目生成 Chrome Web Store 截图和宣传图（PNG/JPG），并在交付前强制通过 9 项视觉 QA + 本地化规则。
A reusable user-level CodeBuddy skill that generates Chrome Web Store screenshots and promotional images (PNG/JPG) for browser-extension / web-app projects with a PIL-based Python pipeline, then enforces a strict 9-item visual QA + localization checklist before delivery.
以下图片由本 Skill 根据真实扩展的 UI 风格与功能生成，并已通过视觉 QA。
Generated by this skill from the actual UI style and features of real extensions, and passed visual QA.
-
生成 1280×800 商店截图（按语言分两套）与 440×280 / 1400×560 宣传图（中英双语同图）。
-
可选像素风字体
assets/PressStart2P-Regular.ttf，适合复古 SaaS 视觉；缺失时自动回退到系统字体。 -
内置
popup_mock组件，支持等比缩放，小尺寸自动切换更小字号（scale-aware）。 -
英文/长文案按 词边界 + CJK 字符 换行，避免单词被截断（如
hi story）。 -
导出卡等网格强制 偶数 2×N / 3×N，杜绝「孤儿行」。
-
强制 生成 → 预览 → 修复 → 重生成 工作流，确保每张素材都通过 9 项视觉 QA + 本地化规则。
-
Generates 1280×800 store screenshots (per-language sets) and 440×280 / 1400×560 bilingual promo tiles.
-
Optional pixel-art font
assets/PressStart2P-Regular.ttffor a retro SaaS look; falls back to system fonts when omitted. -
Built-in
popup_mockcomponent with scale-aware font sizing (smaller fonts at small sizes). -
Word-aware wrapping for English / long copy (no broken words like
hi story). -
Even 2×N / 3×N card grids — no orphan rows.
-
Enforces a generate → preview → fix → regenerate loop so every asset passes 9 visual QA rules + localization rules.
chrome-extension-store-asset-generator/
├── SKILL.md # skill 触发 + 工作流（CodeBuddy 必需）
├── scripts/
│ ├── generate-store-screenshots.py # 1280×800 截图生成器（zh / en 各一套）
│ └── generate-store-promo.py # 440×280 + 1400×560 双语宣传图生成器
├── references/
│ └── qa-checklist.md # 9 项视觉 QA + 本地化硬规则
├── examples/ # 真实项目生成效果预览
│ ├── color-picker-screenshot-01.png
│ └── minicalc-shot1-main.png
├── assets/
│ └── PressStart2P-Regular.ttf # 示例像素字体（可选）
├── requirements.txt # 依赖
├── LICENSE # MIT
└── README.md
生成产物默认落点（位于目标项目内）：
<project>/store-assets/
├── screenshots/
│ ├── zh/ # 5 张全中文截图（1280×800）
│ └── en/ # 5 张全英文截图（1280×800）
└── promo/
├── promo-small-440x280.png # 中英双语
└── promo-large-1400x560.png # 中英双语
- Python 3.10+
- Pillow：
pip install -r requirements.txtWindows 用户：脚本会优先使用
<project>/fonts/PressStart2P-Regular.ttf，否则回退到项目内assets/或系统自带的msyh.ttc/simhei.ttf。
将该 Skill 复制到 CodeBuddy 用户级 Skill 目录：
Copy-Item . "$env:USERPROFILE\.codebuddy\skills\chrome-extension-store-asset-generator" -Recurse -Force在目标项目中运行脚本（产物默认输出到 <project>/store-assets/）：
# 截图：按语言分两套，输出到 store-assets/screenshots/{zh,en}/
python scripts/generate-store-screenshots.py
# 宣传图：中英双语同图，输出到 store-assets/promo/{promo-small-440x280,promo-large-1400x560}.png
python scripts/generate-store-promo.py生成后请对照 references/qa-checklist.md 逐项检查，发现问题后修改脚本参数并重新生成，直到全部通过。
所有生成素材必须满足 references/qa-checklist.md 中的检查项（9 项视觉 + 本地化）：
- 字号必须随画布缩放（scale-aware）。
- Banner 标题与副标题必须留 ≥ 8px 间隙，副标题在框内。
- 卡片网格必须偶数、整齐（2×N 或 3×N）。
- 底部边距安全线：元素底边 < 画布高度 − 12px。
- 相邻区块不得重叠。
- 小节标题与内容间距 ≥ 20px。
- 每轮改动后必须重新生成并自行预览（生成 → 预览 → 修复 → 重生成）。
- 按钮内文字必须垂直居中 + 自适应缩小（promo CTA 双语文案，按按钮高度居中，过大则缩小字号）。
- 长文案必须按词换行/精简，避免被截断遮挡（尤其英文更长）。
本地化规则（硬性）：
- 截图按语言分两套：
store-assets/screenshots/{zh,en}/，中文图 全中文、英文图 全英文，绝不混语。 - 宣传图必须中英双语同一张图：
store-assets/promo/（不分zh/en子目录）。 - mockup 动态文案随截图语言切换（用
lang字典驱动，不写死英文占位符）。 - 手绘卡片改行数/文案后必须重算依赖坐标（按钮 Y、卡片高度、内部间距）。
- promo CTA 中英用中点
·分隔（如立即体验 · Try It Now）。
该 Skill 已用于生成以下项目的 Chrome 商店素材：
- Pixel Color Picker：截图 + 440×280 / 1400×560 宣传图。
- MiniCalc：含截图、small tile、marquee 等多种尺寸素材。
# 复制到用户级 skill 目录
Copy-Item . "$env:USERPROFILE\.codebuddy\skills\chrome-extension-store-asset-generator" -Recurse -Force之后，只要你说「生成商店截图 / 宣传图」或提到 generate-store-screenshots.py，该 Skill 就会自动触发。
A reusable CodeBuddy skill for generating Chrome Web Store screenshots and promotional images. It bundles two Python scripts that draw the assets with PIL, plus a strict 9-item visual QA + localization checklist to catch overflow, misalignment, and spacing issues before delivery.
- Generates 1280×800 store screenshots (per-language sets) and 440×280 / 1400×560 bilingual promo tiles.
- Pixel-art font (
assets/PressStart2P-Regular.ttf) for a retro SaaS look; falls back to system fonts. - Scale-aware
popup_mockcomponent switches to smaller fonts at small sizes. - Word-aware wrapping for English / long copy (no broken words).
- Even 2×N / 3×N card grids — no orphan rows.
- Enforces a mandatory generate → preview → fix → regenerate loop.
- Python 3.10+
Pillow(install viapip install -r requirements.txt)
Copy the skill into your CodeBuddy user skills directory:
Copy-Item . "$env:USERPROFILE\.codebuddy\skills\chrome-extension-store-asset-generator" -Recurse -ForceRun the scripts from your project root (assets default to <project>/store-assets/):
python scripts/generate-store-screenshots.py # per-language sets → store-assets/screenshots/{zh,en}/
python scripts/generate-store-promo.py # bilingual tiles → store-assets/promo/After generation, inspect every PNG against references/qa-checklist.md, fix the script parameters, and regenerate until all checks pass.
- Screenshots split per language:
store-assets/screenshots/{zh,en}/— azhshot is fully Chinese, anenshot fully English. - Promo tiles are bilingual (Chinese + English in one image) under
store-assets/promo/(no language subdirs). - Mockup "dynamic" copy follows the screenshot language via a
langdictionary. - Hand-drawn cards must recompute downstream coordinates after edits.
- Promo CTA separates Chinese/English with a middot
·.