记一次 AI 生成可编辑彩页的操作

Posted on Mon, 12 Oct 2026 09:14:23 +0800 by LiangMingJian

背景 #

当前有一宣传彩页的生成需求。

一开始，我直接使用 AI 生成，但是发现 AI 会使用 HTML 进行编写。结果就是 HTML 编写的宣传彩页不够显眼，不够引人注目，中规中矩。

帮我生成一张正反两面的手机宣传彩页，要合理展示功能特点，要图标文字并行，要有产品特色，要引人注目。

这时，同事说只使用 AI 生图能力生成彩页效果很好，于是我就尝试了一下，发现确实是显眼了。

仅使用AI生图能力，帮我生成一张正反两面的手机宣传彩页，要合理展示功能特点，要图标文字并行，要有产品特色，要引人注目。

对比上述两种实现，不难看出，使用 AI 生图生成的彩页远远比使用 HTML 生成的彩页更显眼，更像一个彩页。

但是问题来了，AI 生图的文字总是不清晰，还容易出错。

这个问题在彩页只有些许文字的时候没有问题，但是彩页只要出现大量文字，就会成一个严重问题（毕竟你不可能逐个文字去 PS 修复）。

探索 #

我们知道，AI 生图版本彩页的背景色调好看，但是文字不行。而 HTML 版本彩页的文字清晰，但是背景色调又不行，那么有办法解决这个问题吗？

应当想到在 HTML 开发时，我们如果要让 HTML 好看，有些元素其实是让 UI 画图后，HTML 直接嵌入的。那彩页生成是不是也可以用这个逻辑呢？

我们让 AI 把 AI 生图版本彩页的文字全部抠掉，只留下背景。然后我们让 AI 参照 AI 生图版本的文字结构，用 HTML 一比一复刻。

实验 #

我们先将 AI 生图版本彩页的文字全部抠掉。

<图片文件><图片文件>，帮我扣掉这两张图片中的所有文字，只保留背景。

可以看到，AI 清除的挺干净的（虽然封面多清除了些东西）。

下面，我们开始使用 HTML 复刻。

<设计原稿图片文件><设计原稿图片文件>，参照这两张设计原稿，使用<背景图片文件><背景图片文件>作为背景，使用HTML，为我1比1的复刻设计原稿。

不难看出，使用 HTML 复刻的文字明显比 AI 生成的更为清晰准确。

虽然 HTML 复刻的文字有点溢出，但是 HTML 的好处就在于能改。通过修改代码，彩页中的任意文字都能修改，这点远比 AI 生图来得高效。

结论 #

我们在生成彩页时，可以先使用 AI 生图，让 AI 发挥想象，自由的绘制美观的彩页原稿。然后再让 AI 抠掉原稿中的文字，获得彩页的背景和图标这些素材。最后，我们提供原稿和素材，便可以让 AI 1 比 1 的复刻彩页。

复刻完成后，我们还可以通过编辑 HTML 代码对彩页的文字大小，间距，元素位置进行调整。