用途：创建专业的产品效果图与展示图，分为两条路径。物理产品默认走 Gemini 图像生成；应用/网页截图默认走 HTML/CSS 设备外框，因为 Gemini 重绘 UI 会改动文字、图标与布局，需用代码把真实截图包进设备框再渲染成 PNG；若需要写实设备场景，可先生成空白屏幕场景，再用代码合成截图。
使用方式：先读取 .agents/design-context.md 获取品牌色（hex）、字体与风格原型；缺失时使用默认回退值并告知用户。Gemini 路径通过 image-generation 管线/CLI，使用 --image product.png 传入产品照片，并在提示中要求保持产品形状、颜色、标签文字与 logo 不变；比例按用途选择（电商与社交 1:1 或 4:5，网页主视觉 16:9 或 3:2），用 --resize WxH 裁剪到精确像素。输出后需读取 PNG 与原图比对标签、logo、比例、颜色与部件数量，AI 对产品的“美化”视为缺陷，每次跟进只修一个问题。电商主图通常要求纯白 #FFFFFF 背景、产品约占画面 85%、最长边 >=1000px（放大查看需 1600+），需以平台最新规则为准。
主要能力：提供手机框、笔记本框、浏览器窗口框的 CSS 结构；等距、浮动、堆叠多设备、扇形排布等 3D 透视变换；渐变舞台、桌面场景等生活方式背景；前后对比（滑杆式与并排式）；线连与编号式功能标注；CSS 3D 包装盒；干净窗口框与旋转截图拼贴等截图展示。
适用场景：电商与社交产品图、网页主视觉、应用/网页截图展示、多设备响应式展示、包装可视化、功能点标注、改造前后对比。
限制：资料未提供具体价格与收费方式；未提供除示例外的安装或配置步骤；实际输出质量依赖所用 Gemini 版本与提示词，市场平台规则需自行核实。交付前应完成质量清单检查：设备框比例与阴影自然、3D 透视合理、截图不变形、使用品牌色、多设备比例正确、构图突出产品，并将代码用渲染脚本输出 PNG（node <graphic-design>/scripts/render.mjs mockup.html --size WxH --out mockup.png）后读取确认；代码需为自包含 HTML/CSS。