AesCode: Aesthetic Code Generation with Decoupled Cross-Modal Rewards

Generating information-rich visual artifacts such as slides, posters, and dashboards as code is appealing because the outputs are structured, editable, and verifiable. Yet code models cannot see how their choices of layout and color come together on the canvas, often limiting spatial planning and aesthetic quality. Image generators excel at visual design but can misrender requested content, making their outputs unreliable targets for direct reproduction. We therefore introduce AesCode, which generates code grounded in the content prompt while using an image generated from the same prompt as aesthetic guidance. To do so, AesCode represents the target as a design graph that describes the whole canvas and makes each property attributable. From this graph, we derive complementary cross-modal rewards: deterministic verifiers score properties parsable from code and rendering, while a VLM judge assesses the non-parsable ones with a sample-specific Visual Graph Rubric (VGR) tied to graph elements and relations. We optimize these decoupled rewards through reinforcement learning with per-channel normalization to jointly improve spatial planning, aesthetic quality, and verifiable correctness. To evaluate this setting, we build a benchmark that scores verifiable correctness and visual quality separately, with visual scores highly consistent with human judgments. We find that reference images substantially improve the visual quality of code generated by existing models, and ablations show that AesCode benefits from references both as model input and as a source of visual rewards. Relative to same-scale Qwen3-VL baselines given the same references, AesCode-8B and AesCode-32B improve visual quality by 31.1 and 22.4 percentage points, reaching scores comparable to those of closed-source frontier models such as GPT-5.5 and Claude Opus 4.8.

Why Code-Generated Visuals Need Aesthetic Supervision

The appeal of code-generated visual artifacts lies in their structure: outputs are deterministic, editable, and can be version-controlled. However, models that produce code for slides, posters, or dashboards lack visual awareness. They cannot observe how a particular margin, color palette, or widget arrangement translates onto the rendered canvas. This blind spot leads to layouts that are functionally correct yet aesthetically flat or even incoherent. Conversely, image generators produce striking visuals but frequently misplace or misidentify the requested content, rendering them poor stand-ins for exact reproduction. The paper identifies this gap and positions AesCode as a method that reconciles code-level control with image-level aesthetic quality.

Design Graphs: Attributable Canvas Description

AesCode represents the target visual artifact as a design graph. This graph describes the entire canvas and makes every property—such as element position, size, color, and hierarchy—attributable to individual graph nodes and edges. Where a traditional code generation model would emit a flat sequence of instructions, AesCode builds a structured representation that captures spatial relationships and component dependencies. The graph serves two purposes: it becomes the scaffold for reward computation and it provides a point of contact between the discrete code world and the continuous visual world. Because each attribute is traceable to a graph element, the system can score whether a given code property fulfills its intended visual role.

Deterministic Verifiers for Parsable Properties

From the design graph, the paper derives deterministic verifiers that score properties that are parsable from code and rendering. Examples include whether a button occupies the declared bounding box, whether text runs off its allocated line, or whether the declared color hex code appears in the output. These verifiers operate without learned components; they execute checks such as unit-length validation, coordinate comparison, and type consistency. The reward signal from these verifiers is sparse but precise: a property either satisfies the graph constraint or it does not. This binary signal provides a grounding force that keeps the generated code within the bounds of structural correctness.

Visual Graph Rubric for Non-Parsable Aesthetics

Properties that cannot be decided by syntax or geometry are assessed by a Visual Graph Rubric (VGR), a VLM judge that evaluates a sample-specific rubric tied to graph elements and relations. The VGR does not reason about the image in the abstract; it looks at the generated canvas through the lens of the design graph, asking whether the visual mood, color harmony, or element proportion aligns with the intent captured in the graph. Because the rubric is sample-specific, it adapts to each prompt rather than applying a fixed aesthetic scale. The VLM judge emits a soft reward that reflects degree of alignment rather than a hard pass/fail, allowing gradient-based optimization to nudge the output toward more pleasing arrangements.

Reinforcement Learning with Per-Channel Normalization

The two reward streams—deterministic verifier scores and VLM VGR judgments—are combined and optimized through reinforcement learning. A key technical detail is per-channel normalization, which scales the reward components so that the deterministically verifiable signal does not dominate the aesthetically guided signal, and vice versa. The normalization treats each reward channel as an independent dimension and adjusts its contribution based on observed variance across training steps. This coupling ensures that spatial planning, aesthetic quality, and verifiable correctness are improved jointly rather than one objective drowning out the others. The reinforcement learning loop updates the code generation policy to maximize the combined reward, and the paper reports that this procedure converges in a practical number of epochs.

Benchmark: Separating Correctness from Visual Quality

To evaluate the setting, the authors build a benchmark that scores verifiable correctness and visual quality separately. Correctness metrics check whether the generated code produces the intended structure: element presence, absence of stray elements, and compliance with declarative constraints. Visual quality metrics assess how the rendered output looks to human raters or learned perceptual functions. The paper notes that visual scores in the benchmark are highly consistent with human judgments, establishing the benchmark as a reliable proxy for aesthetic appeal. This separation allows the authors to report how much each objective contributes to the final output, rather than conflating a correct but ugly slide with an incorrect but beautiful one.

Reference Images as Model Input and Reward Source

The paper finds that reference images substantially improve the visual quality of code generated by existing models. When a reference image is provided alongside the content prompt, the model can anchor its aesthetic decisions to a concrete visual reference. Ablation experiments show that AesCode benefits from references both as model input—the prompt-and-reference pair guides the generator—and as a source of visual rewards: the VGR is computed by comparing the generated canvas to the reference through the VLM judge. This dual role means that the reference image contributes at every stage, from initialization to shaping the learning signal.

Ablations and Comparisons to Frontier Models

Relative to same-scale Qwen3-VL baselines given the same references, AesCode-8B and AesCode-32B improve visual quality by 31.1 and 22.4 percentage points, respectively. These gains bring the generated outputs to scores comparable to closed-source frontier models such as GPT-5.5 and Claude Opus 4.8. The paper attributes the improvement to the decoupled reward structure: without it, the same models produce visually inferior code even when exposed to reference images. The ablative study also confirms that removing either the deterministic verifier or the VLM VGR degrades both correctness and aesthetics, underscoring the necessity of both reward channels.

Constraints and Trade-offs Acknowledged by the Authors

The authors acknowledge that the design graph approach depends on the expressiveness of the graph schema; if the schema omits a relevant property—say, rounded corners or nested grouping—the corresponding reward cannot enforce it, and the model may ignore that feature. Additionally, the VLM VGR introduces latency per training step, as the judge must be invoked for every generated sample. The paper reports that this overhead is acceptable given the improvement in output quality, but developers working under strict real-time constraints may need to approximate the VGR or reduce its frequency. The benchmark, while consistent with human judgments, covers a finite set of visual scenarios; extending coverage to other artifact types, such as interactive dashboards or animated sequences, would require graph schema extensions and new VGR samples. Finally, the reinforcement learning pipeline requires careful tuning of the normalization constants; off-default values can cause one reward channel to collapse, canceling the benefits of the decoupled approach.

Practical Takeaways for Developers

Developers who wish to generate aesthetic visual artifacts as code can begin by defining a design graph schema that covers the properties most important to their use case: element positions, dimensions, color tokens, and hierarchy markers. The schema need not be exhaustive; even a partial description that captures the critical visual constraints is sufficient to anchor the rewards. Next, they should set up a deterministic verifier for parsable properties and acquire or train a VLM capable of emitting a sample-specific Visual Graph Rubric. The VLM does not need to be state-of-the-art; a model fine-tuned on aesthetic judgment tasks can produce usable VGR signals. With these components in place, the reinforcement learning loop can be initialized, and reference images can be introduced as both prompt companions and reward anchors. The paper expects that the most significant gains will appear in long-horizon generation tasks, where the span of code lines makes visual drift more likely. Developers can anticipate that the combination of structural correctness and aesthetic guidance will produce outputs that are not only parseable but also legible and appealing to human viewers.