OPEN MODELS · VISUAL CODE GENERATION

Good design.
Written in code.

AesCode is a code generation model that learns visual design from references produced by image generators.

With this aesthetic guidance, it creates information-rich posters, slides, dashboards, and webpages as editable HTML & CSS.

Explore the work Watch the film 3:04

Code 8B model 32B model

AESTHETICS, MEET STRUCTURE.

AesCode generated visual artifacts — GENERATED WITH AESCODE

Editable visual design from AesCode — HTML + CSS

the output is code

<div>
  structured
  editable
  verifiable
</div>

HTML + CSS · ILLUSTRATIVE SNIPPET

FIG. 01 / FROM VISUAL GUIDANCE TO CODE

THE SHORT FILM

See it all come together.

The examples, the idea, and what we learned.

01 / THE WORK

Made of code.
Full of possibilities.

Slides, dashboards, websites & posters.
A gallery of editable visual artifacts.

Why the gray boxes? AesCode generates editable HTML and CSS, so photos and complex illustrations are represented by semantic placeholders rather than requiring the code model to synthesize them. Their intended role and layout stay in place; you can add the images and refine the design in later edits.

02 / INSIDE AESCODE

Learn the design.
Keep the facts.

The prompt defines what to say.
The reference suggests how it could look.

AesCode training pipeline with generated image guidance, design graph, decoupled rewards, and policy update

Follow the signals.

SELECT A STAGE TO EXPLORE ↓

Training dynamics across reward channels: solid curves show pass@1, dashed curves show pass@8 — Solid: **pass@1** Dashed: **pass@8**Blue: training prompts · Red: held-out prompts

03 / THE EVIDENCE

Small models.
Considered design.

Competitive visual quality, with strong programmatic correctness. Measured on 300 infographic prompts, averaged over three generations per prompt, without selection.

AESCODE-32B · OVERALL

85.89/100

77.44Visual94.33Rule

Same reference-image setting. Full evaluations below.

Same setting. Different models.

AesCode Baselines All shown with reference images

04 / UP CLOSE

The details
make the difference.

Content. Boundaries. Visual hierarchy.
Compare the details side by side.

Red outlines mark the source-documented issue regions.

A NOTE ON LIMITS

Still room to grow.

01 / FINE DETAIL

Small details. Complex relationships.

Limited model capacity can affect fine icon detail and complex spatial relationships.

Conceptual illustration contrasting prompt content requirements with a reference image that is visual guidance, not ground truth

02 / REFERENCE ERRORS

Guidance is not ground truth.

Reference images can contain hallucinated content. The model must learn their visual cues without copying their mistakes.

Reported Style scores with references: GPT-5.5 57.91, Opus 4.8 55.51, AesCode-8B 53.21, AesCode-32B 55.99, all below 60

03 / STYLE

A shared design bottleneck.

Style remains a challenge across models: every evaluated model scores below 60% on the Style dimension.

MADE TO BE EXPLORED. BUILT TO BE EDITED.

Your next canvas
can start with code.

IMPLEMENTATIONExplore the code MODEL WEIGHTSAesCode-8B MODEL WEIGHTSAesCode-32B