给 AI 一张布局草图，文章配图先留出标题的位置
文章配图要放两行标题，可以先把标题区画出来，再交给 AI 画底图。否则主体、装饰和文字都往画面中间挤，最后很难排。
下面这张草图只表达位置：左边留给标题，右边放书本和台灯。框线和英文标签是给生成工具看的，不放进成图。
这是 1536×1024、3:2 的参考图。左边蓝框约从 (96,180) 到 (816,620)；这些坐标表达设计目标，不会把模型的输出锁在像素位置。
上传草图，再给完整要求
需要图像工具支持参考图输入。把上图作为参考图上传，再贴这段文字；也可以直接下载提示词文件：
使用附图作为布局参考，
重新绘制为一张温暖、简洁的编辑插画底图。
保持横向3:2构图，
目标1536×1024。
附图只规定大致位置：左侧约55%留白，
右侧约35%放主体；
不要复制附图中的边框、色块、英文标签和占位图形。
左侧从约(96,180)到(816,620)是以后添加两行中文标题的区域，
保持连续的浅米白背景、低纹理、无物体，
不生成任何标题或文字。
右侧画一本打开的浅色书和一盏青绿色小台灯，
放在简洁桌面上，
书页不要可辨识文字；
灯光柔和，
阴影与小装饰都限制在右侧，
不能伸进左侧标题区。
整体干净、留白充足、细腻的纸感与柔和立体插画结合，
没有品牌，
没有人物，
没有界面，
没有文字、字母、数字、网址、域名、二维码或水印。
输出应是完成的无字插画，
不是线框图、操作截图或效果对比图。
关键是说明“参考哪一部分”：这里参考布局，框线、标签和占位图形都要去掉。书本、台灯、材质和光线则重新绘制。
把实际标题放上去看看
本例用图像生成工具得到了 1536×1024 的无字底图。查看后，书本、台灯和植物在右侧，标题区没有占位框或多余文字；书本比草图里的占位更宽，下方也略向左延伸，并没有精确复刻矩形边界。
接着在本地 HTML 里叠上标题，实际预览如下：
图中的“把资料变成 / 能用的知识库”是浏览器排出的文字，底图本身没有标题。这一步让你能直接改字、改换行，不用为了改一个字再生成整张底图。
ZIP 里有参考图、这次的无字底图、完整提示词、排版页、上面的成品示例 PNG 和 README。已经实际解压并打开排版页核验，不需要你从帖子里重新保存一堆文件。
用自己的标题
解压后，让 preview.html 和 background.png 保持在同一目录，用浏览器打开排版页。用文本编辑器找到这两处，替换成你的标题和副标题，再刷新浏览器：
<h1>把资料变成<br>能用的知识库</h1>
<p class="subtitle">先理清来源，再整理答案</p><br> 是指定换行。本例在 1600 像素和 390 像素宽的浏览器视口检查过：底图加载成功，标题在画面内，没有横向溢出，并查看了实际截图。换成长标题、其他比例或另一张底图后，仍要重看，不能把这一份预览当成通用排版保证。
先检查这几处，再决定要不要用图：
- 标题区是否真的空出来，主体或阴影有没有压进来；有侵入就指出具体位置，再改生成要求或换结果。
- 参考图上的框线、英文标签有没有残留；出现就先处理底图。
- 标题是否盖住主体、手机上是否挤在一起；需要时缩短标题、调整字号或换行。
- 打开页面只见字或破图时，先检查图片文件名和相对位置。本地还验证了背景返回 404 的情况：HTML 能打开，并不代表图片已加载。
OpenAI 当前图像文档也提醒，精确文字位置和布局敏感的构图仍可能出错。这份样例把底图与标题分开，参考图负责交代版面，生成后再看实际结果。
来源：OpenAI《Image prompting》《Image generation》，2026-10-22 核对当前文档。