art-direction

艺术指导

能渲染任何内容的模型，如果你不告诉它这个产品是什么样子，就会渲染出千篇一律的内容。设计简报是事实依据，提示词只是将简报传达给模型的方式。

切勿根据用户的原始请求直接生成。先确定基准，再生成，最后查看像素效果。

1. 查找或编写基准文件

查找 design/style-anchor.md。如果文件存在，就使用它并跳到第 2 步。

如果不存在，就根据项目现有内容提炼一份。阅读以下文件中实际存在的内容：tailwind.config.*、app/globals.css 或相应的样式表、根布局中的字体导入、首页文案，以及 public/ 中已有的图片。

根据证据填写所有字段。仅询问仓库无法提供的信息，最多问三个问题，并为每个问题给出你的建议答案，以便用户可以回复“是”：

❓ <question>

➡️ my suggestion: <recommended answer, one line on why>

然后编写 design/style-anchor.md：

# Style anchor

Medium: <photography | 3D render | flat vector | collage | risograph | line illustration — pick one, never mix>
Palette: <3–5 actual hex values lifted from the app, named: background, ink, accent>
Light: <direction, hardness, time of day>
Materials: <surfaces and textures that recur: matte paper, brushed metal, soft fabric>
Mood: <three adjectives, earned from the product, not from a mood board>
Never: <the defaults to refuse: floating particles, glossy pedestals, lens flare,
        gradient mesh backgrounds, neon-on-black, handshake stock photos,
        anything the app's own UI does not do>

整个项目只能采用一种媒介。英雄区旁边放一张英雄照片，空状态却用扁平矢量图，会让人觉得这是两个产品。

2. 选择图片位置

每项素材都有固定的最终尺寸。按下表所列尺寸渲染，然后缩放或裁剪到最终尺寸——由于图像模型有要求，渲染尺寸必须是 16px 的倍数；低于约 0.65 百万像素的图像则会被直接拒绝。

位置	最终尺寸	渲染尺寸
og:image / 社交卡片	1200×630	1536×800
首页英雄图	16:9	1920×1088
功能或卡片插图（正方形）	1:1	1024×1024
卡片插图（纵向）	3:4	768×1024
空状态 / 插图	4:3	1024×768
头像 / 图标源图	512×512	1024×1024
网站图标源图	512×512	1024×1024

以下内容不要生成——生成它们会让项目看起来廉价：

• Logo 和文字标志。 改用字体排版。模型在小尺寸下会扭曲字形，而且无法复现的标志就无法注册商标。
• UI 截图和模型图。 截取真实应用的屏幕。
• 图表和数据。 使用真实数据和真实图表。
• 项目无权使用的知名人物、品牌或产品。

3. 组织提示词

每次都按以下顺序组合：

1. 完整的基准文件，原文照录。
2. 主体——画面中实际出现的具体内容。只放一个主体，不要放三个。
3. 构图——裁剪方式，以及留白的位置。明确指出：“左侧三分之一保持空白，留给标题文案”。人们常常跳过这一步，这就是生成的英雄图中间会带有文字的原因。
4. 光线和材质，取自基准文件。
5. 将 Never 列表作为明确的负面提示词。

将最终图片保存到 public/images/<slot>.<ext>。将草稿和中间文件留在 tmp/，完成后删除。

对于图片中的文字，请在提示词中引用确切文案，并将其控制在几个词以内。长段落无论分辨率多高，生成后都可能拼写错误。

4. 查看像素效果

文件保存下来，不代表素材就完成了。打开刚生成的图片，并对照设计简报进行检查。

按严重程度列出问题，并为每个问题指定修复方法，然后选择一项：

• 通过——交付。
• 针对性修复——编辑现有图片，而不是重新生成，以保留正确的部分。
• 重新生成——仅在构图本身有误时采用。

按以下顺序检查：留白是否仍适合放置相应文案；可见文字是否拼写正确；配色是否与应用的调色板一致；画面中是否出现 Never 列表中的内容；与其他素材放在一起时是否显得格格不入。

重新生成失败两次后就停止。问题出在设计简报，而不是提示词——带上你观察到的情况，交还给用户处理。

5. 保持整套素材风格一致

之后生成的每张图片都使用同一个基准文件。新素材需要与现有素材匹配时，将现有图片作为参考传入并进行编辑，而不是用文字描述并寄希望于模型理解。

如果应用的视觉方向发生变化，先更新 design/style-anchor.md，然后重新生成所有受影响的位置，作为一套素材统一处理。切勿让一半素材沿用旧基准。

生成图像

在 Codex 中，图像生成是内置功能——由 GPT Image 提供支持的 $imagegen，无需 API 密钥，也无需设置。之后还可以查看生成的图像，这正是第 4 步得以实现的原因。

在其他 Agent 中，承诺生成图像之前，请先询问用户选择哪种方式。本技能的其余部分仍然适用。

---

需求简报优先于提示词的结构，以及“通过／针对性修复／重新生成”的判断流程，改编自 AgriciDaniel/banana-claude，采用 MIT License。风格锚点和按槽位划分的渲染清单，改编自 nexu-io/open-design 中的图像模板，采用 Apache-2.0 License。