前端图像艺术指导
创建开发者能够一目了然的扁平化网站效果图。为每个构图赋予清晰的层级、一致的网格、有目的的留白以及独特的排版或摄影风格。将图像视为实现的参考。当需要实现时，使用真实的 HTML 和 CSS 来处理生产文本、UI 和精确尺寸。
1. 选择工作流
阅读请求和可用的项目指南，例如 AGENTS.md、CLAUDE.md、样式指南、设计 Token 以及相关的视觉素材。首先遵循明确的用户指令，然后遵循在其分配角色内已批准的参考图，最后遵循项目默认值。使用艺术指导来填补空白。
| 请求 | 工作流 |
|---|---|
| 新页面、主图或区块 | 根据需求简报进行设计。选择连贯的视觉方向。 |
| 同一站点的另一区块 | 重用视觉系统，并根据新内容创建合适的构图。 |
| 根据已批准的桌面版生成移动版 | 根据已批准的内容和组件，为新的视口重新组合。 |
| 移除、替换、重新着色或修正某一元素 | 在原地编辑已批准的图像，并定义需要保留的内容。 |
当需求简报提供了足够的方向时，直接生成。如果无法检索到必需的编辑目标或已批准的素材，则请求提供该特定输入。
2. 为每个参考图分配角色
对输入进行编号，并通过文件名或视觉内容进行识别。将这些角色延续到实际的图像提示词中。
- 待编辑的基底 — 接收更改的已批准图像。在使用 API 编辑时，将其放在第一位。
- 已批准的桌面版 — 响应式版本的内容、顺序、组件样式以及图像和标识身份的来源。
- 仅限样式 — 继承命名的特征，例如调色板、排版处理、颗粒感和照片色调。保持新区块的构图和文案独立。
- 仅限比例和间距 — 仅继承命名的度量或关系，例如侧边距、细线、标签尺寸或显示数字刻度。
- 精确素材 — 保持所提供的照片、产品、房间或标识的可识别性。保留可区分的细节，并指定允许的裁剪或色调处理。
对于多段页面，向前传递一个已批准的视觉锚点以及调色板、类型角色、栅栏间距、边距、规则、CTA 处理和图像的紧凑记录。说明每个切片中包含哪些部分以及其起始和结束位置。在整个过程中使用相同的视觉系统。仅在适当的位置引入页眉或页脚。
3. 进行艺术指导并撰写提示词
对于原创概念，选择一种立场（工艺、清晰、温暖、戏剧性或大胆表达）、一种布局（偏移编辑、分割、满出血、严谨的模块化网格或类型主导）以及一种完成度（干净的数字化、微妙的胶片颗粒、半色调或纹理纸）。只选择服务于内容的组件。一份餐饮菜单可以是类型主导，带有规则和充足的呼吸空间。一个主图可以使用一个决定性的裁剪。保持面板边缘为矩形或使用简单的水平分隔线。除非明确要求，否则避免使用菱形、菱形（斜方形）和倾斜的平行四边形面板。
对于复杂的需求简报，使用简短标记的模块。对于简单的请求，仅使用相关行。
- 交付物 — 指明页面或区块的名称、目标视口、取景和画布。除非要求使用设备框架，否则指定一个扁平的、边缘到边缘的站点效果图。
- 参考图 — 将输入映射到各自的角色，并说明每个角色控制哪些细节。
- 布局 — 给出阅读顺序、边缘边距、网格锚点、区块边界、对齐方式和焦点。用可见的术语描述一个标志性的设计手法。
- 文案 — 引用精确的文本，指定位置，并在不要求重复的情况下只渲染每个字符串一次。保留提供的标题、价格、名称、日期和占位符。对于开放式概念，使用简短、有根据的文案，避免为真实组织捏造主张。
- 视觉系统 — 指定类型层级、需要换行的位置、颜色角色、图像和裁剪、完成度以及组件样式。使用命名的工作室参考作为可见特征的速记。
- 约束 — 指明几个重要的排除项。除非需求简报要求，否则避免使用看起来像素材库的图像、无理由的发光、重复的卡片网格和填充性文案。
4. 为移动端重新组合
使用请求的 CSS 视口宽度，或默认大约 390 CSS px。将渲染的像素尺寸视为一个独立的画布设置。在适当的情况下使用单列，以指定的顺序重排已批准的内容，并保留标签、精确素材、CTA 样式、规则和占位符组件。让文本自动换行，增加触摸空间，并仅允许调整图像裁剪。仅在请求时或作为已批准设计的一部分时添加粘性元素。在文本变得难以辨认之前，在逻辑区块边界处拆分长的效果图。
5. 编辑特定区域
将已批准的图像附加为编辑基底。说明操作，通过外观和位置识别元素，然后说明要保留的内容。将百分比坐标转换为从左上角测量的通俗语言定位符，并在提示词中同时使用两者。保留画布、文案、裁剪、几何形状、调色板和附近的内容，除非更改明确影响到它们。
示例：
原地编辑图像 1。在距左上角 x=43.4%，y=29.6% 处，只移除标签后面的局部填充，并将相邻区块的纹理延续到该区域。保留文字、细线、字号比例、周围面板和整个画布。保持区块背景不透明。
区分移除局部填充和创建 Alpha 抠图。仅当请求或目标素材需要时才使用透明背景。如果需要严格的像素保留，则在可用的情况下使用已批准的合成工作流，并将未触及的区域与原始图像进行验证。仅凭提示词指令和生成标记无法保证像素级一致的结果。
6. 使用可用的图像后端
当存在宿主图像生成和编辑工具时，优先使用它。通过其支持的输入机制提供参考图像，并将不支持的控制项作为意图表达在提示词中。仅当知道时才报告实际的后端或设置。如果没有可用的图像后端，则提供一个即用型提示词并标识所需的输入。
当 OpenAI 图像 API 集成可用时，使用以下起点：
| 用途 | 模型 | 质量 | 复杂度 |
|---|---|---|---|
| 快速原创概念 | gpt-image-2.6-flare | medium | medium |
| 详细布局、小号精确文案或高要求参考匹配 | gpt-image-2.6-sunburst | high | medium 或 high |
| 定向编辑 | gpt-image-2.6-sunburst | medium 或 high | low |
根据细节和可读性调整质量。根据规划与构图调整复杂度。使用生成用于新构图，使用编辑用于现有图像基底。在 GPT Image 2.6 编辑中省略 input_fidelity。对于标记引导的编辑，使用匹配第一个输入像素尺寸的透明 PNG 覆盖层。分别提供标记或蒙版（如果支持），切勿在同一个标记引导请求中同时使用两者。将注释保留在最终的作品之外。
选择接近目标比例的支持尺寸。对于 GPT Image 2.6 API 自定义尺寸，使用可被 16 整除的尺寸，并验证当前模型限制。示例画布包括：1536×960 用于 16:10 主图，1536×1024 用于 3:2 区块，1088×1920 用于高页面切片，以及 1088×2352 用于手机效果图。当宿主管理画布大小时，保留所需的宽高比和尺寸作为目标。在声明精确导出之前，检查实际尺寸。
对详细的效果图和 Alpha 素材使用 PNG。如果后端支持，仅当用户需要矢量素材或动态研究时才请求 SVG 或 GIF 生成。在交付前检查矢量输出和循环连续性。
7. 检查与修正
以正常视图检查实际图像，并放大查看小字号文字或编辑区域。将其与需求简报和已批准的输入进行比较：
- 验证所有锁定的文案、日期、价格、标签、标识和可识别的素材细节。
- 验证请求的区块数量和阅读顺序、视觉层级、间距、对齐、排版、细线和组件连续性。检查布局是否符合请求的视口。
- 验证参考角色是否保持独立。标记借用的布局、无关的文案、素材替换或未请求的面板。
- 对于编辑，将更改的区域及其周围与已批准的基底进行比较。对于抠图，在可用时检查 Alpha 通道。
将任何违反锁定要求的行为视为检查失败。每个请求最多进行一次自动修正。对于已批准图像的编辑，如果候选结果发生漂移，则从已批准的基底重试。对于存在局部缺陷的新构图，则编辑候选结果。仅当构图本身需要重建时才重新生成。修正后重新检查，并披露任何仍然存在的重大差异或不可用的验证。在添加上下文时，返回所选视觉效果并附上简短说明。