该技能提供三阶段工作流，用于浏览器扩展的品牌视觉与 Chrome 应用商店上架素材制作。脚本自包含，直接使用 OpenRouter 的 gpt-image-2，不依赖 blog-image-generator。
第一阶段“概念探索”：生成 4 至 6 个互不相关的品牌方向，输出 1:1 的 concept-*.jpg 和 preview.html。第二阶段“选定与完善”：用户选定一个概念后，删除其余概念，可选生成品牌指南，输出 app-icon.jpg 与 brand-guide.jpg。第三阶段“商店素材”：生成推广图块、推广幻灯片和上架文案，输出到 store/ 目录。文档明确要求不可跳过第一阶段。
使用前需将 brand.config.example.json 复制为 {outputDir}/brand.config.json，填写产品名称、品牌提示词前缀、颜色、概念提示词和商店幻灯片提示词，并在仓库根目录加载环境变量后运行命令。命令示例包括分别以 --phase=concepts、--phase=brand-guide、--phase=store 运行 generate.ts，以及使用 --screenshots-only 仅生成截图。第一阶段结束后，用户选定概念，将 iconFile 设为对应文件名，删除其他概念，再运行第二、三阶段。
商店素材规则：尺寸见 sizes.md。推广图块按最接近的宽高比生成，再用 fit: cover 裁切到精确尺寸。商店截图尺寸为 1280×800，应为宣传利益点的幻灯片，而不是伪造的浏览器或扩展 UI 截图；按 16:9 生成，再用 fit: cover 全出血裁切到精确尺寸，配置中 paddingPercent 默认设为 0。幻灯片要看起来适合商店，背景颜色或纹理需填满四边，无留白边框；装饰元素应溢出画布边缘；内容采用多栏编辑式布局填满画面，而非小内容居中；使用带示例数据的具体 UI 组件；可使用对比卡片对；底部页脚栏或三图标功能区锚定构图。文案方面，按 product-details-template.md 编写 store/product-details.md，简短描述不超过 132 字符。
提示词模式见 prompts.md：概念图标应呈现不同视觉世界，避免字面化的剪贴板或跑马灯等开发工具陈词滥调，需有趣、美观且在 16px 下可读；品牌指南为 16:9 速查表，包含调色板、字体、UI 组件和图标用法，并以选定图标作为 input_reference；商店幻灯片最多 5 张，顺序为主题价值主张、工作原理、关键收益、功能深度、格式对比，仅用概念插画。
明确禁止：编辑 lib/blog-image-generator/generate.ts；使用 blog _references/ 风格参考；为 Chrome 商店幻灯片生成字面截图；除非显式设置 paddingPercent > 0，否则不得给 1280×800 幻灯片加黑边；不得将小内容居中于大片空白背景；不得生成无示例数据或 UI 组件的纯抽象图标幻灯片；发布前不得跳过视觉审查。
路径方面：生成脚本位于 .cursor/skills/extension-store-assets/scripts/generate.ts；示例配置为 brand.config.example.json；尺寸参考为 sizes.md；文案模板为 product-details-template.md；提示词模式为 prompts.md；完整示例配置为 public/store-assets/brand.config.json。示例展示一个虚构的标签分组扩展，采用深海军蓝加琥珀色、堆叠卡片隐喻，商店幻灯片为 store/screenshot-01-hero 至 screenshot-05-formats。