用途:在生成、编辑或替换任何图片资产(hero 图、og:image 等)之前,先为项目确立一个统一的视觉观点,再据此生成图片。核心原则是:先锚定,再生成,最后看像素;不要直接按用户原始请求出图。
主要能力与流程:
- 寻找或编写锚点。查找 design/style-anchor.md,存在则直接使用;不存在则从项目已有内容(tailwind.config.*、app/globals.css 或等价样式表、根布局字体导入、落地页文案、public/ 中已有图片)推导。锚点字段包括 Medium(摄影/3D 渲染/扁平矢量/拼贴/孔版/线描,只能选一种)、Palette(3–5 个取自应用的真实 hex 值)、Light、Materials、Mood、Never(要拒绝的默认套路)。仓库无法回答的问题最多问三个,并附推荐答案。
- 选择槽位。每个资产有固定最终尺寸,按渲染尺寸生成后再缩放或裁剪;渲染尺寸为 16px 倍数,低于约 0.65 兆像素会被拒绝。槽位示例:og:image/社交卡 1200×630(渲染 1536×800)、落地 hero 16:9(1920×1088)、方形卡片 1:1(1024×1024)、竖版卡片 3:4(768×1024)、空状态 4:3(1024×768)、头像/图标源 512×512(1024×1024)、favicon 源 512×512(1024×1024)。不要生成 logo/字标、UI 截图与模型图、图表数据、无版权的人物品牌产品。
- 组装提示词,顺序固定:完整锚点原文、具体主体(一个而非三个)、构图(裁剪与留白位置,如“左侧三分之一留空给标题文案”)、来自锚点的光线与材质、Never 列表作为显式负面词。成品存到 public/images/<slot>.<ext>,草稿放 tmp/ 并在完成后删除。图中文字需在提示词中引用确切文案且仅几个词。
- 查看像素。打开生成的图片与简报对比,按顺序检查留白、文字拼写、调色板、Never 项、与其他资产是否协调;结果分为通过、定向修复(编辑而非重生成)、重生成(仅当构图本身错误)。两次重生成失败后停止,说明简报有误,应带着观察结果回到用户。
- 保持整套一致。后续图片使用同一锚点文件;需匹配已有图时把已有图作为参考进行编辑。视觉方向变化时先更新 design/style-anchor.md,再成套重生成受影响槽位。
使用方式:在 Codex 中图片生成内置($imagegen,由 GPT Image 支持,无需 API key 和设置),且可查看生成后的图片。其他 agent 中需先询问用户可用的生成途径。
限制:渲染尺寸须为 16px 倍数且不低于约 0.65 兆像素;长段落文字在任何分辨率下都可能拼错;不生成 logo、UI 截图、图表及无版权内容。该技能的简报优先结构与通过/定向修复/重生成门控改编自 AgriciDaniel/banana-claude(MIT),风格锚点与逐槽位渲染清单改编自 nexu-io/open-design 的图片模板(Apache-2.0)。