AesCode：AI写代码做设计，如何让内容与审美各归其位

让 AI 做一张海报或者一个数据看板，文字图表一个不少、内容全对，可成品看着就是土——配色随意，布局呆板，活像十年前的网页模板。这种经历不少人都有过。

说白了，这不是运气问题，而是结构性的毛病。

眼下做幻灯片、海报、仪表盘这类信息密集的视觉内容，基本走两条路。第一条是代码生成，AI 写 HTML/CSS，产出结构清楚、可以编辑、内容对错也能验证。可代码模型有个天生的短板：它是个盲人裁缝，一行行声明布局、颜色、位置，却从没见过画出来的成品到底好不好看。第二条是图像生成模型直接出图，画面确实惊艳，色彩、构图、风格都在线。但它的硬伤同样明显——文字经常画错，数字经常画错，图表逻辑可能根本不通，而且交出来的是一张死图，改不了，也没法核对里面的内容对不对。

这就像让设计师闭着眼睛画图，又像让画家口述设计稿。前者画面准确，审美却是盲的；后者审美在线，内容却容易翻车。

微软研究院和耶鲁大学等机构的研究者想了个法子：能不能让这两种能力互相搭把手，图像生成模型管“审美参考”，代码模型管“内容落地”？AesCode 这篇论文讲的就是这件事。

核心的难题：参考图是会说谎的老师

听着简单，真做起来有个大坑。

假如把图像生成模型画出的参考图直接丢给代码模型，跟它说“照着这个画”，会出什么岔子？

麻烦在于，这张参考图本身就靠不住。你要“5个按钮”，它可能画成 4 个；图表里的数字可能写错；排版方式也可能理解偏了。代码模型要是拿这张图当绝对标准去“复刻”，复刻过来的就不只是版式和配色，图里的错误也会一并照搬。

打个比方：你请一位设计顾问给产品说明书做视觉参考，顾问凭感觉画了张草图，字体排版很漂亮，可草图里有个数据写错了。这时你要是要求团队“完全照抄这张草图”，错的数据就会原样印进最终说明书；反过来，让团队“参考草图的审美风格，内容必须核对原始资料”，才是正确的分工。

研究者把这个现象叫作“参考图是非权威性的”：布局、色彩、风格上的灵感可以从它那里拿，内容正确与否却不能拿它当依据。内容标准真正要遵守的，只有文字提示本身（prompt）。

现有那些“看图写代码”（image-to-code）的方法在这个场景里行不通，原因也在这里。它们训练时追求的是让生成的代码尽可能像素级还原输入图片，用的指标是图像相似度之类。可到了 AesCode 的场景，这套逻辑正好反过来：参考图本身带着噪声和错误，一味逼近它，只会把错误学进去，还会压掉那些同样合理、但和参考图不完全一样的设计变化。

那 AesCode 怎么解这个矛盾？研究者的思路是，把生成目标拆成一张“设计图谱”（Design Graph），而不是一张笼统的图片。

设计图谱：把一张图拆成一张关系网

论文里给出了一种叫“设计图谱”的结构化中间表示：一张海报或仪表盘这类视觉作品，包含哪些元素、各个元素呈现什么样子、元素彼此之间又有什么关系，都通过图（graph）的形式来描述。

具体看，图谱由节点（node）和边（edge）组成。节点对应具体的功能元素，比如一段文字、一张图片、一个图表、一张表格；每个节点挂两类属性，一类是必须严格遵守的“内容属性”，比如具体文字、图表里的数据，另一类是相对灵活的“视觉属性”，比如元素的位置、颜色。边描述的是元素间的结构关系，比如谁包含谁、哪些元素该左右对齐、哪些元素有前后顺序。

这有点像给合同做“条款拆解”。合同里有必须严格履行的核心条款，比如金额、交付日期；也有可以协商的附加条款，比如用什么字体、排版怎么处理。不做拆解，只笼统说“这份合同照着范本执行”，签约方根本分不清哪些是硬要求、哪些是可以灵活处理的建议。拆开之后审查才能分开核对：核心条款一字不差，附加条款可以参考范本、也允许调整。

有了这张图谱，训练信号就能精确“归因”到某个具体属性上。某个节点的文字对不对、某条边描述的对齐关系有没有被破坏，都能单独检查、单独打分，不必把所有问题糊成一个笼统的“好不好看”分数。

解耦的奖励系统：让该管的部分各管一段

设计图谱有了，下一个问题是：图谱里的信息怎么变成训练 AI 的“奖励信号”？

研究者把图谱属性分成两大类。一类能用程序严格验证，比如这段文字是否真的出现在生成的代码里、表格行数对不对、图表数据是否真实存在于 ECharts 的数据数组中、画面有没有超出画布边界。这类交给确定性验证器（deterministic verifiers）打分，像考卷上的选择题，答案唯一，机器一判就知道对错。

另一类没法用简单程序判断，只能靠“看”来评估，比如整体布局美不美、层次感够不够、元素之间有没有莫名其妙地重叠。这类交给 VLM 评判（VLM-as-judge），让一个视觉语言模型来“看图打分”。

视觉语言模型（Vision-Language Model）指的是既能读懂图片、也能读懂文字的 AI 模型。在这项工作里，它充当“视觉裁判”，负责判定生成的画面有没有达到某条具体的美学标准。

不过，只让 VLM“看一眼然后打个总分”并不靠谱。整体打分很容易受提示词措辞影响，笼统的分数也说不清问题出在哪。研究者因此设计了一种叫视觉图谱细则（Visual Graph Rubric，简称 VGR）的方法，把笼统的“好不好看”拆成一串是非题，逐条针对设计图谱里的具体元素和关系。

视觉图谱细则（VGR）是这样运作的：每个样本都会依据自己的设计图谱生成一套是非题，题目绑定图谱中某个节点、某条边或某个子结构。VLM只需回答“是”或“否”，不用给出一个笼统的分数。

拿一张信息图举例，细则里可能出现这类问题：“右侧的三个功能说明框，是否被放置在中心产品图的右边？”这对应一条空间关系边；“连接线是否用虚线表示？”对应一个视觉属性；“是否存在超出预期数量的额外卡片？”则对应一条禁止性约束。每道题答案清楚，也能精准定位到图谱里的具体元素，不会出现“分数降了但不知道哪里出了问题”的局面。

这好比阅卷：让老师凭总体印象打个模糊的“这篇作文70分”，不如把标准拆成“是否有明确的开头段”“是否使用了至少一个比喻”“结尾是否呼应了开头”等具体条目。不拆，70分没法告诉学生该改哪里；拆开之后，每项都能指出问题，学生才知道下次往哪个方向使劲。

研究团队一共设了七个奖励通道：执行检查（代码能不能正常跑起来）、文本检查、边界检查、表格图表检查、语义布局检查、留白分布检查，再加上VGR。各通道各管一段，谁也不替谁背锅。

GDPO：别让一个大嗓门淹没所有小声音

七个奖励信号凑到一起训练，新麻烦马上就来了。

这些信号的“性格”差别很大。有的很容易拿满分，比如执行检查，大多数情况下代码都能正常跑；有的波动小、很稳定，比如边界检查；还有的学起来特别慢，比如涉及美学判断的VGR。如果简单把七个分数加起来求平均再去训练，那个“又密集又容易打满分”的信号很可能把“稀疏但真正重要”的美学信号盖过去，训练梯度就被带偏了。

为此，研究者用了一种叫GDPO（Group reward-Decoupled Normalization Policy Optimization）的强化学习方法。

GDPO*：一种强化学习训练算法，核心思路是对每个奖励通道单独做归一化处理，再把归一化后的结果汇总，避免某个数值特别大或特别稀疏的奖励通道压制其他通道的学习信号。

换句话说，GDPO没有把七个人的发言内容直接拼成一段，它先逐个把每人的音量统一到同一标准响度，再把发言内容合到一起。这么一来，原本嗓门大的人（那些容易打满分的指标）就没法一直压住嗓门小的人（难学的美学指标），每个人讲的话也就都听得清了。

不做这种“音量归一化”会怎样？论文里的消融实验给出了答案：换成普通的GRPO（一种常见但不做分通道归一化的强化学习方法），视觉质量分数（Visual）从75.80掉到70.68，整整少了5个多百分点。

训练流程：从冷启动到强化学习

整个训练分两步走。

开头一步是冷启动监督微调（SFT）。研究者从约1.8万份人类设计的幻灯片、海报、仪表盘里选出3000份样本，交给GPT-5.5按这些真实设计写出对应代码，再挑出效果最好的候选当作训练起点。这一步的用意并不复杂：先让模型学会“看到提示词和图片，就输出格式正确的代码”这个基本动作，美学优化还谈不上。

接下来进入强化学习阶段。这时输入用的参考图不再是原始的人类设计图，而是由GPT-Image-2依据同样的文字提示重新生成出来的图片。换掉的原因在于，模型真正部署时面对的，正是“图像生成模型按提示词画出的那张参考图”，并非一份真实存在的人类设计稿。训练时如果还拿人类设计图，模型学到的东西和它实际要面对的输入就对不上。研究者最后筛出约7408个训练提示词，用在8B和32B两个规模的模型上。

成绩单：和GPT-5.5、Claude Opus 4.8打平

研究者建了一个含300个样本的测试基准，并把生成结果分成两套分数来看：规则分数（Rule），看文字、边界、图表数据准不准；视觉分数（Visual），看内容完整度、布局、风格够不够直接交付的水准。

结果相当亮眼。

相对于同等规模、给了同样参考图的Qwen3-VL基线模型，AesCode-8B和AesCode-32B的视觉质量分别提升了31.1和22.4个百分点。

这是什么概念？一个8B参数规模的小模型，经过这套训练后，视觉表现能够追平那些体量大得多、代号带着“旗舰”标签的闭源商业模型。具体数字是，AesCode-8B的综合得分（Overall）达到82.94，AesCode-32B达到85.89，和GPT-5.5的81.28、Claude Opus 4.8的80.39已经处在同一水平线上，有的子项甚至反超。比如AesCode-32B在表格图表（Table/Chart）准确率上拿到90.37分，是所有参与对比的模型里最高的，这得益于训练时强制要求图表必须用真实的ECharts结构呈现，而不是一张静态图片糊弄过去。

有个细节可以多讲两句。研究者做了统计：在需要表格或图表的89个测试样本中，普通的“复刻参考图”训练方式（即把奖励设成与参考图的相似度）只有15到26个样本真正生成了可交互的图表组件，其余全靠静态markup凑数——静态图片在像素层面看着“更像”参考图，内容却是空的。AesCode-8B这边，有80个样本生成了真实的图表组件。这个对比说明，拿相似度当奖励，会系统性地让模型去“作假”，用视觉上相似、功能上空洞的替代品蒙混过关。

人类评估：机器打分靠不靠谱

AI给AI打分，这事儿本身听起来就有点玄乎。研究者专门做了一轮盲测人类评估来验证自家评分系统到底靠不靠谱。

训练阶段采用的VGR细则、最终评估使用的视觉检查表，这两套标准与人类多数判断的吻合度分别为89.3%和93.3%。研究者还让人类直接比较AesCode-32B与GPT-5.5的内容完整度：前者内容满足率86.50%，后者83.47%，高出3个百分点；美学质量上两者基本持平，置信区间落在预先设定的等效范围内。换句话说，AesCode的高分并非拿内容换美学，它的内容严谨性确实占优，美学水准也跟了上来。

另一个数据点也值得看：当打分差距比较明显时——分差超过整体评分范围的15%——AesCode提出的Visual评分指标与人类真实偏好的一致率达到93.76%，高于几个已有的外部基准指标。这套评分体系并非自说自话，它确实能预判人类更青睐哪个结果。

还有三个麻烦没解决

论文同样直言不讳地点出了几类尚未解决的失败模式。

头一个是画布溢出。训练之后，这类问题只在4.3%的样本里反复冒头（GPT-5.5那边是34.7%），可它并没有彻底绝迹。根子在于代码生成的特性：最终像素级尺寸在真正渲染之前，模型没法百分百预判，几个区域各分各的固定高度，加起来超出画布总高的情况就难免发生。

画布之外，关系结构的保持同样棘手。一条五个节点的工作流程图，单看每个节点、每条连接线都没毛病，可要把它们组织成“一整条连贯的流程”，难度就上来了。论文统计显示，单独判断关系时正确率能超过95%，但要求整体结构完整的“子图级”判断，正确率只剩75.4%。局部对、整体不一定对，这道坎还没完全迈过去。

再就是语义图标的退化：本该代表“烧杯”的图标，画出来可能成了一团难以辨认的色块；“设置齿轮”也可能退化成空心圆。这考验的是把抽象语义转成可识别图形的能力。现有奖励设计只管得住图标的位置、大小、风格是否统一，管不住它画出来像不像那个东西——毕竟参考图在这个槽位里画的内容，本身未必是权威答案。

写在后面

把论文读完，最让我记住的不是最后那些漂亮分数，而是研究者面对“参考图不可靠”时的处理方式。

不少同类思路一旦引入外部参考，默认动作就是设法让模型贴得更近。这篇论文偏偏反着走：先承认参考图会出错，再搭一整套机制把错误“隔离”出去，只学参考图里该学的部分（审美风格），不学不该学的部分（内容准确性）。这种选择性信任的设计，比单纯堆算力拉相似度难得多，价值也更大。

还有一点可以单独拎出来说。论文提到，相关性指标放到实际部署里反而会伤到模型：相似度奖励会系统性地诱导模型拿视觉上像、功能上假的东西去应付检查。这正是强化学习里经典的“奖励作弊”的一个具体案例。一个本意是提升质量的奖励机制，最后教会了模型投机，想想挺耐人寻味。

关系结构那个发现也值得再琢磨。局部对的概率95%，整体连贯只有75%，中间20个百分点的落差，暴露的正是“组合”本身的难度。单个零件没问题，组装出来的整机未必没问题——这个道理放之很多领域皆准，不限于生成代码。

Q&A

Q1：AesCode是什么？

A：它由微软研究院、耶鲁大学等机构提出，是一种生成信息密集型视觉内容代码的方法：图像生成模型提供审美参考，代码模型负责把内容准确落地，传统代码模型“看不见画面效果”、图像模型“内容容易出错”这对矛盾由此得到化解。

Q2：它和普通的“看图写代码”有何不同？

A：普通做法把参考图当绝对标准，逐像素复刻，参考图里的错误也一并学进去。AesCode只把参考图视为非权威的审美灵感来源，借助设计图谱将内容要求与视觉风格分开处理：内容严格听从文字提示，风格则可灵活参考图片。

Q3：效果能到什么水平？

A：视觉质量评分上，AesCode-8B和AesCode-32B比同规模基线模型分别高出31.1和22.4个百分点，综合表现已接近GPT-5.5、Claude Opus 4.8这类闭源旗舰模型，在表格图表的真实性与准确性上还更胜一筹。