当AI画的海报，文字全是乱码的时候

来源：市场资讯

（来源：科技行者）

你有没有遇到过这种情况：让AI画一张中文海报，图是真好看，可是上面的字全乱了套，缺胳膊少腿，甚至根本不是汉字。

这不是个例。

现在最先进的图像生成模型，比如GPT-Image-2，画一张水墨风格的滕王阁序海报，山水意境拉满，可是那几个大字"滕王阁序"歪七扭八，仿佛喝多了酒写的。更麻烦的是，这张图是一整块锁死的位图，你想把标题挪个位置，或者把某句话改一改，办不到。整张图就是一个不可拆分的整体，动一发就要重画全身。

那换个思路，让AI直接写代码生成海报呢？毕竟代码这东西，天生就是一层一层的，改起来方便。

这条路也走不通。让AI用HTML、CSS写一张海报，代码是干净的，但画面往往稀烂：大片留白、排版混乱、毫无美感可言。翻开腾讯混元联合中山大学、清华大学、港中文、上海交大团队最近发布的一份研究报告，里面展示的对比图很直观：同样是"设计一张深绿色新中式茶饮海报"的需求，AI写的代码版本里，产品图和文字挤在一个角落，大半个画面空空荡荡。

一边是好看但锁死的图片，一边是能改但难看的代码。这个矛盾困扰了这个领域很久。

这份研究提出的方案，简单说就是让两种AI分工合作，一个负责审美判断和统筹规划，另一个专门负责画画，最后把画好的素材拼成可以随意编辑的网页。这套方法被称为Editable Visual Design（可编辑视觉设计）。

为什么会有这个矛盾

先说清楚，为什么这两条路各自都走不通，问题出在哪。

**扩散模型：擅长审美，不擅长精确**

扩散模型*：一种通过学习海量图像数据、逐步"去噪"生成新图像的AI技术，是目前主流文生图模型（如GPT-Image、Midjourney）的底层原理。

扩散模型经过海量图片训练，构图、光影、色彩这些审美层面的东西它学得极好，因为这些是人类几百年艺术积累下来的视觉直觉，恰好也是像素数据里最容易被模型吸收的部分。但它的软肋也很致命：生成的图片里，文字经常是错的、变形的，而且所有元素——背景、人物、文字——全部糅合成一张不可分割的位图。你想单独改一个字，等于要重新生成整张图，赌它这次能不能画对。

这就好比你去照相馆拍了一张全家福，照片洗出来发现有个亲戚闭眼了，你没法只把那一只眼睛"抠出来"重拍，只能全家人再站一次。如果不是照片而是一层层的分层图层文件，你只需要把那个人的那一层换掉就行。位图之所以难改，根源就在这里：它压根没有"层"这个概念，所有信息被压扁成了一张平面。

**代码生成：结构工整，审美缺失**

代码生成的问题恰恰相反。像GPT-5.6 Sol、Claude Fable 5这类顶尖代码模型，写HTML、CSS结构清晰，逻辑严密，天然支持分层、支持后期修改。但它们没有二维空间的直觉。

这句话什么意思？

代码本质上是一行一行的文字，是一维的符号序列。让模型直接写布局代码，它写出来的东西，翻来覆去就是"大标题+卡片+圆角阴影"这三板斧，模型知道怎么写出结构正确的代码，但不知道怎么写出好看的代码。更麻烦的是，遇到需要复杂视觉表现的场景，比如电影感的背景、3D主视觉、自然纹理、精致插画，纯代码画这些东西成本极高，画出来的效果也很生硬，往往只能退而求其次，用简单的色块、渐变或者表情符号糊弄过去，成品看着就像没完工的草稿。

想象一个建筑师，图纸画得极其精准，每根梁的承重都算得分毫不差，但他从没见过一栋真正漂亮的房子长什么样。他能保证房子不塌，但保证不了房子好看。这就是纯代码生成模型的处境：结构能力过硬，审美直觉却是空白的。

左脑负责逻辑，右脑负责想象

研究团队打了个比方，特别精准：现在的Coding Agent（代码智能体）就像一个只有左脑的系统，逻辑推理和结构搭建很在行，但严重缺乏二维空间感和审美直觉；而扩散模型则像右脑，擅长呈现空间美感、色彩氛围、构图参考，却没有严谨的工程逻辑。

Coding Agent*：能够自主编写、执行、调试代码来完成复杂任务的AI智能体系统，本文中特指负责整体设计决策的AI程序。

这个团队的解法是，别让一个AI包打天下，而是让"创意大脑"和"视觉世界模拟器"分工协作。VLM（多模态大模型）负责理解需求、规划任务、判断美感，是那个统筹全局的"创意大脑"；图像生成模型则被当成一个随叫随到的"视觉世界模拟器"，专门负责按需产出独立的视觉素材。

VLM*：Vision-Language Model，视觉语言模型，能同时理解图像和文字信息并进行推理的AI模型。

整个流程遵循一个叫做"先想象、后动手"的闭环工作方式。具体来说，AI在真正写代码之前，先调用图像模型生成一张"想象图"，这张图不是什么结构草图，而是一张这个设计做成之后大概会长什么样的效果图，用来给后续所有工作提供审美参照。

这个设计思路的巧妙之处在于，它避开了两条路各自的死穴。想象图不需要一比一还原到最终成品里，它只是拿来给Coding Agent"看"，从中提炼色调、构图分布、整体风格特征，作为接下来写代码时的参考基准。研究团队把这个过程类比成"渲染"：AI可以在浏览器里跑自己刚写的代码，看看页面长什么样；同样地，AI也可以调用图像模型，看看一个还没被写出来的设计版本长什么样。两者本质上做的是同一件事，把某种设计意图变成像素，让AI用"看"的方式去判断好坏。

这就好比一个装修队接了活，不是拿到图纸就直接开工砌墙，而是先找设计师画一张效果图贴在工地上，大家干活的时候时不时抬头看一眼，保证做出来的东西和想象中的方向一致。如果没有这张效果图，工人们各干各的，最后拼出来的房子风格可能七拼八凑，谁都说不清哪里出了问题。如果没有"先想象"这一步，Coding Agent很可能会退回到那个"大标题+卡片+圆角阴影"的老套路，因为它压根不知道这次设计应该往哪个方向发力。

素材要单独画，不能从整图里抠

想象图解决了审美方向的问题，但真正要往页面里塞的素材，比如背景图、主视觉、图标，并不是直接从想象图里裁剪出来的。

这一点研究团队讲得很清楚：如果直接从想象图里抠图，那些像素依然带着扩散模型的"原罪"，可能文字扭曲、边缘不干净，一旦混进最终交付物里，又会把好不容易理清楚的图层结构弄脏。所以他们让图像模型单独、逐层地重新生成每一个素材，比如一张干净的无文字背景，或者一个从背景里独立出来的主体，这样素材的像素完全不会污染最终成品。

获取这些干净素材的方式有两条路。如果图像模型本身支持透明通道，就直接生成带Alpha通道的图；如果不支持，就用一个笨办法但很管用，让模型把主体画在纯绿色背景上，再用抠图脚本把绿色抠掉，前提是主体本身不能带绿色，不然连自己都被抠没了。

Alpha通道*：图像文件中用来记录透明度信息的通道，有了它，图片的背景可以变成完全透明，方便和其他图层叠加。

这个绿幕抠图的思路，其实电影特效行业用了几十年了。演员站在一块绿布前面表演，后期把绿色全部替换成场景，人物就"悬浮"在了任何背景之上。这里的做法本质上一样，只是把演员换成了一只茶杯或者一栋建筑。如果不用绿幕这种取巧的办法，而是硬让模型直接生成带透明背景的复杂素材，很多模型根本做不到，那素材要么带着一圈脏乎乎的背景色边，要么干脆连不上。

素材准备好之后，Coding Agent才真正开始写原生HTML和CSS，把页面声明成一个固定像素尺寸的画布，并且给用户可能想要拖动的每一个元素都单独打上标签，做成独立图层。这里有个细节值得说一下：页面的布局不允许依赖浏览器窗口大小变化，也就是说不管在哪个设备上打开，这张海报的尺寸和布局都完全一致。这么做的原因很实际，只有坐标固定不变，用户后期拖拽调整位置的操作才有意义，不然你这边拖完保存，别人打开又变形了。

写完不算完，还得自己检查

代码第一遍写出来，难免有各种小毛病，元素溢出边界、图片和文字重叠、外部资源加载失败。为了解决这些问题，系统设计了一套双重校验加自我修复的机制。

第一层是确定性检查，系统把代码丢进一个无头浏览器（headless browser）环境里跑一遍，专门检测有没有硬性错误，比如元素尺寸超出边界、DOM结构（网页的文档对象模型，简单理解就是网页元素的层级结构）是不是乱了、外部资源是否加载成功。

无头浏览器*：一种没有图形界面、但能像正常浏览器一样加载和渲染网页的程序，常用于自动化测试。

第二层是视觉层面的检查，系统把渲染出来的页面截图喂给VLM，让它像人类审稿人一样，把截图和最初的设计意图做对比，评估视觉平衡感、对齐精度、文字是否清晰易读。一旦发现问题，AI就针对性地生成一个局部补丁，微调代码，经过一到两轮这样的反思和修复，最终的呈现效果基本能达到预期标准。

这套流程有点像一个学生写完作文之后的两遍检查。第一遍是查语法错别字，机械但必要；第二遍是把作文读给老师听，让老师从整体上判断这篇文章读起来通不通顺、逻辑是否连贯。只做第一遍检查，语法完全正确的作文依然可能是一篇逻辑混乱、读起来别扭的文章；只做第二遍，很多低级错误又容易被忽略过去。两遍都做，才能兜住不同层面的问题。

论文里给了一个真实案例，一份信息密度很高的红熊猫科普长图，最终拆解出120个可编辑图层，分成13组，视觉审查环节确实抓出并修复了几个真实的排版缺陷。而另一份视觉主导型的旅行海报案例，只有6个图层、1个组，审查环节顺利通过，没有做任何修改。这说明图层结构的复杂程度，跟着设计需求本身的信息密度走，密度越高的场景越需要精细拆分。

设计过程被完整记录下来了

这套系统还有一个特别值得说的地方，叫Agent Design Replay（智能体设计回放）。

Agent Design Replay*：把AI在整个设计过程中的每一步决策——从理解需求、生成想象图，到规划布局、生成素材、写代码、审查修复——完整记录下来，形成一条可以回看、可以追溯的设计轨迹。

以往很多AI生成系统是黑箱操作，你输入需求，它直接吐出一个结果，中间发生了什么，用户完全不知道。这份研究把整个创作轨迹保留了下来，每一步都带时间戳，你可以清楚看到AI是怎么理解你的需求的，它想象出来的初版长什么样，中间生成了哪些素材，代码写成什么样，审查阶段发现了哪些问题、怎么改的。

这就好比你请了一个设计师帮你做海报，以往的方式是设计师关起门来干活，几天后甩给你一张成品，你满意就拿走，不满意也不知道该从哪里提修改意见，因为你根本不知道他中间经历了什么决策。有了这份完整记录，你就像坐在设计师身边看他画草图、试配色、调整版式的全过程，哪一步你觉得方向不对，随时可以喊停、插话。如果没有这个回放机制，用户面对AI生成的结果，只能笼统地说"不满意"，却说不清究竟是哪一步出了问题，沟通效率会大打折扣。

研究团队还提到，这种过程可视化不仅仅是为了方便调试，更长远来看，它给"人机协作"这件事打下了信任基础，也为未来更自然的设计交互方式提供了参考，比如让AI真的像人一样操作鼠标，直接在画布上拖拽绘制。

这套方法也有边界

任何方法都不是万能药，这份研究也很坦诚地列出了几个限制。

这套系统本身不会创造出底层模型不具备的能力，它做的事情是把每一部分工作分配给更擅长的模型去做，所以最终效果的上限，被两个模型各自的能力共同锁死。如果Coding Agent写的布局代码本身就比较弱，那么再好的参考图也救不回来；更常见的瓶颈其实出在图像模型的审美判断力上，它给出的东西可能技术上很干净，但构图平淡，没有明确的视觉焦点，也没有值得延续的色彩想法，这种参考图给Coding Agent的启发有限。素材生成这条路径也有自己的门槛，需要模型能够把主体从背景里干净利落地分离出来，做不到这一点，图层就没法做到真正独立。

另外，篇幅较长的设计场景，比如一份多页幻灯片或者一整个网站，比单页海报难得多。因为你需要在很多页之间保持一致的字号体系、配色方案，以及一条贯穿始终的视觉线索，而这种一致性要在远比一张海报长得多的生成过程里始终保持住。这份报告里展示的案例都是单页设计，这个方法能在多长的篇幅上依然稳定，很大程度上取决于底层模型本身的能力天花板。

还有一点很诚实，审美质量这件事本来就很难量化评判。一张海报"好不好看"没有标准答案，构图是否讲究、色彩是否有氛围感、字号体系是否显得用心，这些恰恰是人们经常意见不合的地方。所以这份研究选择呈现具体案例，而不是打分数，视觉层面的质量把关也是靠VLM的判断代替设计师的眼光，而不是拿一把尺子去量。可编辑性同样如此，图层数量、DOM结构这些指标可以罗列出来，但真正重要的是打开这个文件的设计师，能不能顺手把它改成自己想要的样子，这件事没法简单地折算成一个分数。

写在后面

读完这份研究，一个细节让我反复琢磨：为什么"先想象、后动手"这个顺序如此重要？

答案其实藏在一个更普遍的现象里。语言模型在数学证明、逻辑推理这类任务上，用生成式的方法去尝试提升效果，往往收效有限。研究团队打了个比方：人很难在梦里解一道严谨的数学题，但梦境常常是视觉灵感、意象和创意的来源。这句话点破了一个容易被忽略的分工：符号推理和视觉想象，可能天生就不是同一套认知机制在负责的。逼着一个模型同时干两件事，效果往往两头都不讨好。

这也解释了为什么单纯让AI"想清楚了再画图"，或者单纯让AI"画完图再总结逻辑"，这两条路径过去效果都一般。真正管用的，是让每种模型只做它天生擅长的那部分，图像模型负责把说不清道不明的审美感觉具象成像素，代码模型负责把这些像素背后的结构关系严谨地固化下来。这种分工思路其实早就出现在别的领域，只是这次被系统性地用在了"做一张能改的海报"这件小事上。

还有一处让我印象很深，是那个关于绿幕抠图的细节。一个听起来很"土"的老办法，被直接拿来解决最前沿的AI生成模型的透明背景问题。这提醒我一件事：新技术遇到瓶颈时，答案未必总在更新的技术里，有时候翻一翻电影特效行业几十年前的老工具箱，反而更管用。

如果有一天，AI真的能像人类设计师一样，一边构思一边拿起鼠标在画布上调整，那时候人和AI之间的边界，还会像今天这样清晰吗？

Q&A

Q1：Editable Visual Design是什么？

A：这是腾讯混元联合多所高校提出的一套AI设计生成方法，通过让多模态大模型负责创意规划、图像生成模型负责素材制作，最终生成图层完全分离、文字可编辑的海报和信息图，解决了传统AI生成图片不可编辑、代码生成又不好看的矛盾。

Q2：为什么AI直接生成的海报文字经常是乱码？

A：因为扩散模型生成的是一整张压扁的位图，所有像素信息糅合在一起，没有独立的文字图层概念，模型对文字笔画的精确控制能力也有限，所以经常出现文字扭曲变形、笔画残缺的问题。

Q3：Agent Design Replay有什么用？

A：它会把AI从理解需求、生成想象图、规划布局、生成素材到代码审查修复的整个过程完整记录下来，让原本黑箱式的AI生成过程变得透明可追溯，用户可以清楚看到每一步决策，方便随时介入调整。