DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation

Het artikel introduceert DesignAsCode, een nieuw raamwerk dat grafisch ontwerp als programmeertaak (HTML/CSS) benadert via een Plan-Implement-Reflect-pijplijn om de balans tussen visuele kwaliteit en structurele bewerkbaarheid te verbeteren.

De kern

Stel je voor dat je een ontwerper bent die een prachtige affiche maakt. Tot nu toe hadden we twee problemen:

1. De "Foto"-methode: Je kunt een AI vragen om een plaatje te maken. Het resultaat ziet er prachtig uit, maar het is alsof je op een foto van een affiche kijkt. Als je de tekst wilt veranderen of de kleuren wilt aanpassen, moet je de hele foto opnieuw maken. Het is een vast, onbewerkbaar blok.
2. De "Schets"-methode: Je kunt een AI vragen om alleen de indeling te bedenken (waar de tekst staat, waar de foto komt). Dit is wel makkelijk te bewerken, maar het resultaat is een saaie, grijze schets zonder echte foto's of mooie kleuren. De gebruiker moet alles zelf nog invullen.

DesignAsCode is de oplossing die deze twee werelden samenvoegt. Het is alsof we stoppen met het maken van "foto's" van ontwerpen en beginnen met het schrijven van de bouwplaat (de code) waar het ontwerp uit bestaat.

Hier is hoe het werkt, vertaald naar alledaagse taal:

1. De Bouwplaat in plaats van de Foto

In plaats van dat de AI een plaatje "tekent", schrijft de AI HTML en CSS. Dat zijn de talen die websites maken.

• Vergelijking: Stel je voor dat je een huis bouwt. De oude methoden maakten een foto van een huis. Als je de muurverf wilt veranderen, moet je de hele foto opnieuw maken. DesignAsCode schrijft daarentegen de instructies: "Deze muur is rood, deze raam is hier, en deze deur is daar." Omdat het een instructie is, kun je later gewoon zeggen: "Verander de muur in blauw," en poef, is het gedaan zonder de rest van het huis te beschadigen.

2. Het Drie-Stappen-Plan (De Bouwmeester, De Aannemer en de Kwaliteitscontroleur)

De AI werkt niet in één keer, maar volgt een slim proces dat ze het "Plan-Implement-Reflect"-proces noemen.

• Stap 1: De Architect (De Planner)
  De AI luistert naar jouw idee (bijvoorbeeld: "Maak een poster voor een mountainbike-wedstrijd"). In plaats van direct te tekenen, denkt de architect na: "Oké, we hebben een dynamische achtergrond nodig, een fietser in het midden, en grote, vette letters rechts." Hij maakt een gedetailleerde bouwplaat.
• Stap 2: De Aannemer (De Implementatie)
  Nu wordt de bouwplaat omgezet in de daadwerkelijke code. De AI haalt de juiste foto's op (of maakt ze) en plaatst ze precies waar de architect het had bedacht. Het resultaat is een eerste versie van de poster.
• Stap 3: De Kwaliteitscontroleur (De Reflectie)
  Dit is het slimste deel. Soms ziet de eerste versie er raar uit. Misschien staat de witte tekst op een lichte achtergrond, waardoor je het niet kunt lezen.
  • Oude methoden: De AI ziet dit niet en levert een slecht ontwerp op.
  • DesignAsCode: De AI "kijkt" naar het resultaat (alsof hij er een foto van maakt), ziet het probleem, en denkt: "Oh, de tekst is onleesbaar." Hij past dan de code aan (bijvoorbeeld: "Maak de tekst zwart" of "Voeg een schaduw toe") en kijkt opnieuw. Dit herhaalt hij totdat het perfect is.

Waarom is dit zo geweldig?

• Onbeperkt aanpasbaar: Omdat het ontwerp uit code bestaat, kun je later alles veranderen. Wil je de poster in het Chinees? Gewoon de tekst in de code aanpassen. Wil je dat de sneeuw in de poster valt? Voeg een klein stukje code toe voor animatie.
• Geen rommel: De AI zorgt ervoor dat de tekst altijd leesbaar blijft en dat de foto's niet overlappen op een rare manier.
• Professioneel: Het ziet eruit als een echte, door een mens gemaakte affiche, maar het is gegenereerd door een computer die de regels van goed design kent.

Kortom: DesignAsCode is als een super-intelligente assistent die niet alleen een plaatje voor je maakt, maar je de volledige, aanpasbare bouwplaat geeft. Je kunt er later nog jaren aan sleutelen zonder dat het hele ontwerp in elkaar stort. Het maakt professioneel grafisch ontwerp toegankelijk voor iedereen, zonder dat je zelf een expert hoeft te zijn.

Technische samenvatting

Probleemstelling

Huidige benaderingen voor het genereren van grafisch ontwerp kampen met een fundamenteel compromis tussen visuele fideliteit (hoe realistisch en mooi het beeld eruit ziet) en structurele bewerkbaarheid (hoe makkelijk elementen zoals tekst, lay-out en kleuren kunnen worden aangepast).

1. Text-to-Image (T2I) modellen: Deze genereren fotorealistische rasterafbeeldingen met hoge visuele kwaliteit, maar de output is een "plat" bestand. Tekst en achtergrond zijn onlosmakelijk verbonden, waardoor er geen structuur is om te bewerken.
2. Layout-generatie modellen: Deze voorspellen abstracte posities (bounding boxes) voor elementen. Hoewel ze structureel bewerkbaar zijn, missen ze visuele inhoud en pixel-niveau details, waardoor de gebruiker alle assets handmatig moet verzamelen en samenstellen.
3. Huidige hybride benaderingen: Pogingen om T2I en layout-modellen te combineren, leiden vaak tot rigide composities (vastgestelde sjablonen) en onoplosbare visuele dissonanties (bijv. witte tekst op een lichte achtergrond). Ze gebruiken vaak primitieve representaties (zoals JSON-lijsten) die geen complexe stijlen (zoals gradiënten of mengmodi) ondersteunen en werken in een "open-loop" systeem zonder visuele feedback.

Methodologie: DesignAsCode

De auteurs stellen DesignAsCode voor, een raamwerk dat grafisch ontwerp herdefinieert als een programmatische synthetische taak op basis van uitvoerbare HTML/CSS-code. In plaats van pixels te genereren, genereert het systeem code die door een browser wordt gerenderd.

Het systeem volgt een Plan-Implement-Reflect pijplijn:

1. Semantische Planner (Plan):

   • Deze module neemt een natuurlijke taal prompt en genereert een gedetailleerd ontwerpplan.
   • In plaats van een vast schema te gebruiken, bouwt de planner dynamische, variabele hiërarchieën van elementen op basis van semantiek.
   • Het outputt vier componenten: een redeneringsreeks (Chain-of-Thought), elementgroeperingen, prompts voor afbeeldingslagen en tekstspecificaties (lettertype, grootte, kleur).
   • De planner is getraind via kennisdistillatie van professionele ontwerpcorpora (Crello-dataset) met behulp van grote taalmodellen (GPT-4o/o3) om een light LLM (Qwen3-8B) te fine-tunen.

2. HTML Implementatie (Implement):

   • Deze module zet het abstracte plan om in een eerste versie van HTML/CSS-code.
   • Het haalt visuele assets op (via zoekopdrachten in een repository of generatie via T2I-modellen) en koppelt deze aan de structuur.
   • Een multimodaal LLM fungeert als "Composer" en schrijft de code, waarbij het gebruikmaakt van de volledige expressieve kracht van webstandaarden (zoals backdrop-filter, mix-blend-mode, complexe gradiënten en responsive layouts).

3. Visueel Bewuste Reflectie (Reflect):

   • Dit is een iteratief optimalisatiestap om visuele fouten op te lossen die in de code zelf niet zichtbaar zijn.
   • Proces: De gegenereerde HTML wordt gerenderd naar een rasterafbeelding. Een beeldbewerkingsmodel verbetert deze afbeelding visueel. Een "Refiner"-model vergelijkt vervolgens de originele HTML, de gerenderde afbeelding en de geoptimaliseerde afbeelding om de HTML-code aan te passen.
   • Dit creëert een gesloten lus die visuele dissonanties (zoals slechte leesbaarheid of overlappende elementen) automatisch corrigeert, fungerend als een digitale "Art Director".

Belangrijkste Bijdragen

• Paradigmaverschuiving naar Code: DesignAsCode is de eerste methode die grafisch ontwerp volledig representeert via HTML/CSS. Dit biedt native bewerkbaarheid, directe browser-executie en ondersteuning voor professionele visuele effecten die in rasterbestanden of JSON niet mogelijk zijn.
• Plan-Implement-Reflect Pijplijn: Een nieuw framework dat semantische planning combineert met visuele reflectie. Dit stelt het systeem in staat om complexe hiërarchieën te redeneren en visuele conflicten autonoom op te lossen.
• Unieke Capabiliteiten: Door de code-native representatie worden geavanceerde functies mogelijk gemaakt, zoals automatische lay-out retargeting (responsive design), generatie van complexe documenten (CV's, menu's) en het toevoegen van CSS-animaties zonder externe videomodellen.

Resultaten

De auteurs evalueren DesignAsCode op twee benchmarks: de standaard Crello-dataset en een bredere Broad-dataset (met diverse documenttypes zoals menu's en CV's).

• Kwantitatieve Prestaties: DesignAsCode presteert significant beter dan state-of-the-art baselines (zoals DeepSeek-R1, Qwen3, GPT-5, OpenCOLE) op objectieve metrics zoals Validiteit (structuurintegriteit), Leesbaarheid en CLIP-score (visuele en semantische trouw).
• Kwalitatieve Evaluatie: Visuele vergelijkingen tonen aan dat de gegenereerde ontwerpen professioneler zijn, met betere kleurharmonie en typografie.
• User Study: Menselijke beoordelaars rangschikten DesignAsCode consistent als het beste in zowel structurele rationaliteit als visuele esthetiek.
• Ablatie Studies: Experimenten bevestigen dat elk onderdeel essentieel is:
  • Het vervangen van HTML door JSON leidt tot een sterke daling in esthetische kwaliteit.
  • Het verwijderen van de Semantische Planner resulteert in minder professionele plannen.
  • Het verwijderen van de Visuele Reflectie zorgt voor een significante daling in leesbaarheid en visuele coherentie.

Significantie en Impact

DesignAsCode overbrugt de kloof tussen creatieve visuele synthese en technische bewerkbaarheid.

• Toegankelijkheid: Het verlaagt de drempel voor professioneel grafisch ontwerp, waardoor kleine ondernemers en content creators hoogwaardige materialen kunnen maken zonder uitgebreide ontwerpsoftware.
• Toekomstbestendigheid: Omdat de output code is, is het ontwerp machineleesbaar, toegankelijk voor hulpmiddelen voor mensen met een handicap, en eenvoudig aan te passen (bijv. globale themawisseling via CSS-variabelen).
• Nieuwe Richtingen: Het opent de deur voor interactieve AI-ontwerppartners en dynamische, geanimeerde grafische content die volledig gegenereerd en bewerkbaar is.

Samenvattend transformeert DesignAsCode grafisch ontwerp van een statisch beeldproces naar een dynamisch, code-gedreven proces dat zowel esthetische perfectie als volledige controle biedt.