AesCode：基于解耦跨模态奖励的美学代码生成 AesCode: Aesthetic Code Generation with Decoupled Cross-Modal Rewards
用图像生成器作美学先验，以设计图解耦奖励训练代码模型生成美观可验证的页面
前置知识
GRPO（Group Relative Policy Optimization，组相对策略优化）
一种无需价值网络（critic）的强化学习算法：对同一输入采样一组输出（如 8 个 rollout），用组内奖励的均值和标准差把每个输出的奖励归一化为相对优势 $A_i = (s_i - \mu)/(\sigma + \epsilon)$，再用 PPO 式裁剪目标更新策略。因 DeepSeek-R1 采用而成为大模型后训练的主流配方，适合奖励可程序化计算的场景。
AesCode 的 RL 阶段直接建立在 GRPO 框架上，其 GDPO 就是对 GRPO 奖励归一化方式的修改，不理解 GRPO 就读不懂核心算法。
VLM-as-Judge 与 Rubric 评分
用视觉语言模型替代人类为生成结果打分。整体打一个绝对分的问题在于分数对提示措辞敏感、信号稀疏且不稳定；Rubric 方法把一次整体判断拆成大量固定的二元问题（是/否），取通过率作为分数，更稳定且能把扣分定位到具体属性。该思路先用于文生图评测，后发展为 RL 中的 rubric 奖励。
本文的 VGR 训练奖励和 Visual 评测协议都基于这一思想，是理解奖励设计与方法创新的前提。
Image-to-Code（Design2Code 范式）
给定一张设计图（网页截图、海报图），让模型生成能还原该图的 HTML/CSS 代码，用 CLIP 相似度等图像级指标衡量还原程度，代表工作有 Design2Code、ChartMimic。这类方法把输入图当作像素级真值，要求代码尽量复刻图片的每个细节。
本文刻意与该范式划清界限——参考图只是嘈杂的美学先验而非真值，理解这个区别才能抓住论文问题设定的创新点。
多目标奖励的冲突与归一化
当 RL 同时优化多个奖励（代码正确性、布局、美观等）时，若直接加权求和，稠密且接近饱和的验证类奖励会在数值上淹没稀疏的美学奖励，导致梯度被强信号主导、弱目标学不动。已有解法包括按方差重加权的 MO-GRPO，以及本文采用的各通道独立归一化后再合并的 GDPO。
解耦奖励通道并分别归一化正是标题里的 Decoupled Cross-Modal Rewards，是本文方法层的核心贡献。
常用图像质量指标（NIMA/FID/CLIP 分数）
NIMA 用神经网络预测人类美学评分（约 1-10 分）；FID 衡量生成图像与真实图像分布的距离，越低越好；CLIP 分数衡量图文语义一致性；色彩和谐度（Harm.）评估配色质量。这些指标常用于文生图和视觉设计系统的外部评测。
Table 2 的外部迁移实验用这些指标验证 AesCode 的设计能力是否泛化，不认识它们就读不懂迁移结果。
研究动机
幻灯片、海报、仪表盘等信息密集的视觉产物，用代码生成非常诱人——输出结构化、可编辑、可验证；但代码模型有一个根本缺陷：它看不见画布，空间布局、层级和颜色都是逐行声明出来的，结果常常满足了内容约束、视觉上却平淡过时。反观图像生成器（如 PosterMaker、BizGen）视觉出彩，却经常错渲染文字、数字和逻辑关系，而且输出是无法编辑验证的光栅图。已有的 image-to-code 方法（Design2Code、ChartMimic）虽然也以图为输入，但把图当作像素级真值去复刻；可如果这张图本身是图像生成器幻想出来的——文字写错、内容幻觉——复刻它只会把错误抄进代码，还会惩罚合理的设计变化。直接把参考图喂给现成的 VLM 也不行：现成模型把视觉特征与文本语义纠缠在一起，面对嘈杂参考图时要么复现其幻觉内容、要么完全忽略其布局。
本文的目标是本文要建立一个新的生成范式：代码模型以文本提示为内容的硬约束，以同一提示生成的图像为美学的软引导，生成既严格满足内容、视觉上又接近生产级的 HTML/CSS 代码。量化目标非常明确：在 300 条提示的信息图基准上，让 8B/32B 开源骨干（Qwen3-VL）在拿到同样参考图的条件下，Visual 视觉质量分别提升 31.1 和 22.4 个百分点，Overall 追平 GPT-5.5（81.28）和 Claude Opus 4.8（80.39）等闭源前沿模型，同时在可验证正确性（Rule）上反超它们；并把正确性与视觉质量拆成两组独立指标分别评测，要求视觉分与人类判断高度一致（一致率超过 90%）。
与已有工作不同的是，已有工作要么让代码模型完全不看图（LIDA、PPTAgent 只凭文本写代码，页面平淡），要么把图当真值复刻（Design2Code）；最接近的 DesignAsCode 和 Editable Visual Design 虽让智能体参考生成的图，但只在推理时使用，从未训练代码模型去利用它。本文抓住两个被忽视的点：其一，参考图应作为可学习的嘈杂先验——必须显式训练模型执行内容听提示、布局听图的分工；其二，训练需要奖励，奖励本身也应解耦——能从代码、DOM 和渲染中程序化验证的属性交给确定性验证器，无法解析的外观与关系属性转成与设计图元素绑定的样本级 Rubric 让 VLM 判官回答，再用 GDPO 防止稠密验证信号淹没稀疏美学信号。
核心方法
直觉是让看不见画布的代码模型拜一位很会设计但偶尔说谎的画师为师：画师（图像生成器）先按提示画一张参考图，学生（代码模型）学它的排版配色，但内容必须以提示为准，画师写错的字不能抄。技术路线分四步。第一步，把提示 $p$ 和参考图 $I_{\text{ref}}$ 组织成设计图 $G_{\text{tgt}} = \Phi(p, I_{\text{ref}}) = (V, E, X_V, r)$：节点是文本、图表、表格、徽章等原子元素和卡片、面板、列表等容器（三个以上可互换兄弟折叠成带计数的组节点），属性 $X_V$ 把必需内容与视觉属性（包围盒、颜色）解耦存储，边 $(u, \tau, v)$ 记录包含、对齐、顺序、邻接、语义关联等关系。第二步，从代码 $c$ 及其渲染 $\hat{I}$ 解析出候选图 $\hat{G} = \Psi(c, \hat{I})$，与目标图逐属性对比导出七个奖励通道。第三步，先用约 3000 条 GPT-5.5 教师演示做冷启动 SFT，再用 GDPO 做 RL。第四步，用独立的 Rule/Visual 双轨协议评测。
核心创新是让设计图充当归因结构，从而把监督信号解耦。以往方法把整页结果混成一个分数——代码可能文字全对但布局混乱，混进单一标量后训练梯度是错位的。AesCode 让每个属性在图上有明确的归属节点或边，于是奖励拆成七个通道：六个确定性验证器（$s_{\text{exec}}$ 可执行性、$s_{\text{text}}$ 必需字符串、$s_{\text{bdry}}$ 画布包含与宽高比、$s_{\text{tc}}$ HTML 表格与 ECharts 图表的结构和数据、$s_{\text{layout}}$ OCR 文本块位置比对、$s_{\text{ws}}$ 留白分布）负责可程序化验证的部分；剩下的外观与关系属性转成 Visual Graph Rubric（VGR）——从 $G_{\text{tgt}}$ 自动生成绑定到具体节点、属性、关系或子图的二元问题列表 $Q_{\text{train}}$，VLM 只回答固定问题，$s_{\text{vgr}}$ 取通过率。注意图只用来搭脚手架出题、不作为策略输入，这与文本直出的 rubric（查不了参考图提出的设计）和整体 VLM 打分（信号稀疏不稳定）有本质区别。
方法步骤详情
数据构建：从约 18000 张人工设计的幻灯片、海报、仪表盘、网页出发，按 CLIP 图像特征聚类，对每张采样图用 GPT-5.4-mini 反推只规定必需内容、不规定布局的生成提示。SFT：用 GPT-5.5 配对原始人设图构造 3000 条演示——每对采样 3 个 rollout，最高分者奖励超过 0.85 才保留，否则从同簇重采样。RL：筛出 pass@1 与 pass@8 间留有学习信号的提示，跨簇再平衡，用 GPT-Image-2 合成参考图，得到约 8000 条提示。每步采样 128 条提示、每条 8 个 rollout，渲染后解析出 $\hat{G}_i$，对比得七维奖励 $s_i \in [0,1]^7$ 及掩码 $m_i^{(v)}$；GDPO 各通道独立归一化 $A_i^{(v)} = \frac{s_i^{(v)} - \mu_v}{\sigma_v + \epsilon}$，按掩码加权平均得 $A_i = \frac{\sum_v m_i^{(v)} A_i^{(v)}}{\sum_v m_i^{(v)}}$，套 PPO 裁剪目标更新。骨干 Qwen3-VL-8B/32B：SFT 学习率 $10^{-5}$，GDPO 用 AdamW $5 \times 10^{-6}$，分别训练 400/520 步。
技术新颖性
与三条已有线的具体区别如下。相对 image-to-code（Design2Code 等）：不把输入图当像素真值，而是把内容约束归提示、设计灵感归参考图的分工写进表示与奖励——复刻参考图幻觉内容会在 Text 奖励和 VGR 内容问题上同时被扣分。相对规则奖励（如 AeSlides 只查元素重叠）和整体 MLLM 判官（分数随措辞漂移）：本文把两类证据路由到各自合适的通道，且 VGR 的问题由设计图元素锚定，把开放式视觉判断变成可定位的显式标准；消融显示同输入同训练配置下绕过图直接写问题只有 72.61 Visual，证明图构造本身有贡献。相对多目标 RL（MO-GRPO 按方差重加权）：GDPO 各通道独立归一化后再按掩码合并，比标量 GRPO 高 5.12 Visual 分。设定层面，训练代码模型学会使用参考图（而非仅在推理时参考）也是此前没有的。
实验结果
在 300 条提示的信息图基准上（每条生成 3 次取均值）有六项发现。(1) 主结果（Table 1）：参考图普遍提升所有模型的视觉表现，但 Style 是共同瓶颈（均低于 60%）；AesCode-32B 达到 Rule 94.33、Visual 77.44、Overall 85.89（Text 95.34、Boundary 97.27、Table/Chart 90.37），AesCode-8B Overall 82.94，均超过同参考条件下的 GPT-5.5（81.28）和 Claude Opus 4.8（80.39）。(2) 相对拿到同样参考图的 Qwen3-VL 骨干，8B/32B 的 Visual 分别提升 31.1 和 22.4 个百分点（25.17 升至 75.80；34.67 升至 77.44）。(3) 消融（Table 4）：去掉 SFT 只用 RL，Overall 从 82.94 降到 77.97，只用 SFT 仅 72.57；GDPO 换成标量 GRPO 掉 5.12 Visual；只用代码正确性奖励 Visual 仅 66.59，CLIP 奖励 70.49，整体 VLM 打分 68.91，VGR 达 75.80。(4) 参考图角色（Table 3）：推理时去掉参考图，AesCode-8B 仅降 1.00（74.80），骨干降 19.55、GPT-5.5 降 10.04，说明视觉规划已内化；训练推理都不给参考图 Visual 仍有 69.71（骨干 prompt-only 仅 25.17）。(5) 外部迁移（Table 2）：在 GDB/lica、SlidesBench、Design2Code 全部 14 项指标上超过骨干，NIMA 3.122 升至 4.932、FID 0.522 降至 0.394、SlidesBench Color 3.02 升至 3.92。(6) 人类评测（Figure 4）：VGR 与 Visual 清单和人类判断一致率 89.3% 和 93.3%；AesCode-32B 内容满足率 86.50% 高于 GPT-5.5 的 83.47%，美学等效（差 -0.15，CI [-0.34, 0.03]）；Visual 分与人类成对偏好一致率 80.66%。
查看结构化数据
| 任务 | 指标 | 本文 | 基线 | 提升 |
|---|---|---|---|---|
| 信息图代码生成（300 实例，含参考图输入） | Overall（Rule 与 Visual 的均值） | AesCode-32B 85.89 / AesCode-8B 82.94 | GPT-5.5 81.28、Claude Opus 4.8 80.39（同参考图）；Qwen3-VL-32B 骨干 61.10 | 比 32B 骨干提升 24.79，超过最强闭源模型约 4.6 |
| 视觉质量评测 | Visual（Content/Layout/Style 样本级清单，平均 35.8 题） | AesCode-32B 77.44 / AesCode-8B 75.80 | 同参考条件下 Qwen3-VL-32B 55.02 / Qwen3-VL-8B 44.72 | 分别提升 22.4 与 31.1 个百分点 |
| 可验证正确性评测 | Rule（Text/Boundary/Chart 程序化检查均值） | AesCode-32B 94.33（Text 95.34、Bound 97.27、Chart 90.37） | 同参考条件下 Claude Opus 4.8 83.55、GPT-5.5 85.80 | 比最强闭源基线高约 8.5-10.8 |
| 外部迁移：GDB/lica 文生图设计评测 | NIMA 美学评分 / FID（越低越好） | AesCode-32B 4.932 / 0.394 | Qwen3-VL-32B 3.122 / 0.522；GPT-5.5 4.362 / 0.439 | NIMA 提升 1.81，FID 降低 0.128，NIMA 超过 GPT-5.5 |
| 外部迁移：SlidesBench 幻灯片生成 | Color / Layout（0-5 分） | Color 3.92 / Layout 2.49 | Qwen3-VL-32B 3.02 / 2.12 | Color 提升 0.90，Layout 提升 0.37 |
| 自动评分与人类偏好一致性 | 与人类成对偏好选择的一致率 | Visual 指标 80.66% | Design2Code、SlidesBench、GDB/lica 等外部指标在可比分差区间均更低 | 跨分差区间全面领先外部指标 |
局限与改进
作者承认三类残余失败（Figure 5）：画布溢出仍偶发，因为代码生成无法可靠预知最终像素几何；关系结构比单体元素更难，模型要理解内容关系并渲染成空间连线，而关系级奖励稀疏且不能定位失败的边；语义元素退化，电话、视频等图标常变成圆形等通用图形，因为这需要基于语义的细粒度 SVG 绘制。此外即使 AesCode 的 Style 也只有 53.21-55.99%，离无需修改即可交付还有距离。我的独立观察有四点：其一，训练与评测绑定特定技术栈——表格必须用 HTML table、图表必须用 ECharts，Table/Chart 90.37 的高分部分来自解空间被约束成可直接验证的实现，换到 React 或 SVG 生态存疑；其二，整套流水线依赖 GPT-5.5 当教师、GPT-Image-2 出参考图、VLM 当判官，成本高且存在用闭源模型评自家模型的闭环偏差；其三，基准提示同样由图像反推生成，与训练数据同源，可能带来乐观的分布重叠；其四，只在 8B/32B 两个规模验证，对更大模型或多页幻灯片场景未检验。
独立分析的弱点
第一，奖励通道强绑定实现栈：$s_{\text{tc}}$ 要求图表必须是 ECharts、表格必须是 HTML table，这在自家基准上给了清晰信号，但迁移到 React、Vue 或 Canvas 生态需要重写全部验证器。改进方向是把验证器抽象成结构化数据与渲染 DOM 之间的通用比对接口，按框架注册解析器。第二，关系级失败无法定位：连线丢失只体现为 VGR 通过率下降，梯度不知道错在哪条边上。改进方向是为每条关键边生成独立的 VGR 问题，或引入图编辑距离作为辅助奖励。第三，缺少视觉闭环：溢出等像素级错误说明单向的生成-打分流程没有修复回路，可引入渲染反馈驱动的多轮代码修订，把修复成功率计入奖励。第四，判官与出题同源：VGR 由 VLM 出题和判卷，存在自我偏好与过拟合判官的风险，且基准提示与训练分布同源；建议用不同家族的判官交叉验证，并构建纯人工撰写提示的留出集。第五，Style 上限明显（约 56%），说明审美天花板受教师图像与判官标准限制，可探索多参考图融合或直接对齐人类偏好数据。
未来方向
作者明确指出三个方向：针对画布溢出做视觉接地的迭代修正，让模型在渲染反馈中微调像素级几何；针对关系边稀疏奖励设计更精确的结构反馈，能定位到具体失败的边；以及攻克语义视觉元素，让模型能按含义绘制细粒度 SVG 图标。基于论文成果还可延伸：把设计图表示推广到多页幻灯片叙事和带状态的交互式仪表盘，边的语义连接类型天然可扩展到交互流；图像生成器作为视觉设计教师的范式可平移到 UI 主题生成、科学图表排版等领域，Rule/Visual 双轨评测协议也可独立成为通用前端代码生成基准；还可以做在线自我提升，用渲染-判官闭环做持续 RL，让模型从自身失败案例中继续学习；最后可研究参考图自由度控制，让模型学会何时偏离参考图并输出多个候选设计方案。
复现评估
复现门槛中等偏高。论文有项目主页，但正文未明确承诺开源代码、模型权重或 18000 张人设图数据集；训练依赖 GPT-5.5（SFT 教师）、GPT-5.4-mini（提示反推）、GPT-Image-2（参考图生成）以及 VLM 判官，这些闭源 API 调用量不小。算力方面，8B/32B 分别做 400/520 步 RL，每步采样 128 条提示 × 8 个 rollout 并渲染解析，估计需要多卡 A100/H100 集群运行数天。复现难点排序：判官与验证器的工程实现（DOM/OCR 解析、VGR 出题与过滤管线在附录 D/E）最难，其次是数据构建管线，RL 训练本身反而是最成熟的部分。若只想验证核心思想，可以大幅缩小规模：用开源 VLM 当判官、几百条提示、开源文生图模型出参考图，在 Qwen3-VL-8B 上跑通 GDPO 流程；普通开发者短期可直接借鉴的是双轨评测协议与 VGR 的图锚定出题思路。
论文图表
展示两个端到端示例：横版医院分析仪表盘和竖版 1024x1536 活动海报。输入是内容提示（规定图表标题、场馆等必需信息）加图像生成器参考图，输出为渲染自生成 HTML/CSS 代码的页面，并附代码片段摘录。
一图看懂任务设定：提示定内容、参考图提供设计指导、代码是输出载体，是理解全新范式的入口。
三类残余失败的参考图与输出放大对比：(a) 较低的图表行延伸出画布；(b) 一个共享模式删除了全部五条关系连线；(c) 电话、视频、设置图标退化为圆形等通用图形。
直观呈现作者承认的三类失败边界，帮助读者判断该方法目前在哪类设计任务上还不可靠。