DOne: Decoupling Structure and Rendering for High-Fidelity Design-to-Code Generation

Das Paper stellt DOne vor, ein End-to-End-Framework, das durch die Entkopplung von Strukturerkennung und Element-Rendering sowie die Einführung des neuen Benchmarks HiFi2Code die Lücke zwischen Design und Code schließt und dabei sowohl die visuelle Genauigkeit als auch die Produktivität im Vergleich zu bestehenden Methoden signifikant verbessert.

Xinhao Huang, Jinke Yu, Wenhao Xu, Zeyi Wen, Ying Zhou, Junzhuo Liu, Junhao Ji, Zulong Chen

Veröffentlicht 2026-04-03
📖 4 Min. Lesezeit☕ Kaffeepausen-Lektüre

Each language version is independently generated for its own context, not a direct translation.

Stellen Sie sich vor, Sie möchten ein wunderschönes, komplexes Haus aus einem einzigen Foto bauen. Das ist im Grunde das, was Computer versuchen, wenn sie ein Design (wie eine Webseite) in funktionierenden Code (HTML und CSS) umwandeln.

Bisher hatten Computer dabei ein großes Problem: Sie waren wie ein überforderter Architekt, der versucht, das gesamte Haus auf einmal zu verstehen. Wenn das Foto zu viele Details hat, wird der Architekt verwirrt. Er vergisst Fenster, verschiebt Wände oder baut stattdessen nur graue Kisten anstelle von echten Türen. Das nennt die Forscher das „ganzheitliche Flaschenhals-Problem" – der Computer versucht alles gleichzeitig zu machen und scheitert dabei.

Die neue Methode namens DOne (von den Forschern aus China und Hongkong entwickelt) löst dieses Problem, indem sie die Arbeit entschleunigt und spezialisiert. Hier ist die Erklärung mit einfachen Analogien:

1. Das Problem: Der „Alles-oder-Nichts"-Ansatz

Bisherige KI-Modelle (die sogenannten Vision Language Models) schauen sich das Design-Foto an und versuchen, sofort den gesamten Code zu schreiben. Das ist wie wenn Sie versuchen, ein 1000-teiliges Puzzle zu lösen, indem Sie alle Teile auf einmal in die Hand nehmen und hoffen, dass es passt. Oft endet das in einem Chaos, bei dem die Struktur (wo gehört was hin?) und die Details (wie sieht die Blume auf dem Tisch genau aus?) durcheinandergeraten.

2. Die Lösung von DOne: Ein gut organisiertes Bauteam

DOne funktioniert nicht wie ein einzelner Übermensch, sondern wie ein perfekt koordiniertes Bauteam mit drei Spezialisten, die nacheinander arbeiten:

  • Schritt 1: Der Grundriss-Maler (Layout-Segmentierung)
    Statt das ganze Bild auf einmal zu betrachten, schaut sich dieser Spezialist zuerst nur die großen Bereiche an. Er teilt das Bild in logische Blöcke ein: „Hier ist die Kopfleiste", „Hier ist der Hauptinhalt", „Hier ist die Seitenleiste".

    • Analogie: Er malt mit einem Marker grobe Kreise um die verschiedenen Zimmer im Haus, bevor er überhaupt an die Möbel denkt. Er ignoriert dabei vorerst die kleinen Details und konzentriert sich nur auf die Wände und Türen.
  • Schritt 2: Der Schatzsucher (Element-Retrieval)
    Während der Grundriss-Maler die Räume absteckt, sucht ein zweiter Spezialist nach den kleinen, wichtigen Dingen: Logos, Icons, Buttons und Bilder.

    • Analogie: Dieser Mann läuft durch das Bild und sammelt alle kleinen Gegenstände (wie eine Vase, ein Bild an der Wand oder ein Schlüsselbund) in einer Kiste. Er achtet besonders auf Dinge, die sehr klein oder sehr langgestreckt sind (wie eine lange Navigationsleiste), die andere KIs oft übersehen oder durch graue Platzhalter ersetzen.
  • Schritt 3: Der Bauleiter mit dem Bauplan (Schema-Guided Generation)
    Jetzt kommt der eigentliche Code-Generator ins Spiel. Aber er bekommt keine vage Anweisung mehr. Stattdessen erhält er einen genauen Bauplan (JSON-Schema), der von den beiden vorherigen Schritten erstellt wurde.

    • Analogie: Der Bauleiter sagt: „Okay, ich weiß genau, wo das Wohnzimmer ist (Schritt 1) und ich habe die genaue Vase aus Schritt 2. Ich baue jetzt das Wohnzimmer und stelle die Vase genau an die richtige Stelle." Er muss nicht mehr raten, wo was hinkommt. Er fügt nur noch die Farben und den Stil hinzu.

3. Warum ist das so erfolgreich?

Die Forscher haben gezeigt, dass diese Aufteilung der Arbeit Wunder wirkt:

  • Kein Chaos mehr: Da der Computer erst die Struktur festlegt, bevor er Details hinzufügt, stehen die Wände nicht schief.
  • Keine verlorenen Details: Die kleinen Icons und Bilder werden nicht durch langweilige graue Kästen ersetzt, sondern sind exakt dort, wo sie hingehören.
  • Schneller für Menschen: In Tests konnten Entwickler mit dieser Methode Webseiten dreimal so schnell erstellen wie mit herkömmlichen Methoden, und das Ergebnis sah fast perfekt aus wie das Original.

Zusammenfassung

Stellen Sie sich DOne wie den Unterschied zwischen einem Amateur, der versucht, ein Haus aus dem Gedächtnis zu bauen, und einem professionellen Bauunternehmen vor, das erst den Grundriss zeichnet, dann die Materialien besorgt und erst dann baut.

Durch das „Entkoppeln" (das Trennen von Struktur und Details) schafft DOne Webseiten, die nicht nur funktionieren, sondern auch genau so aussehen wie das Design, das der Mensch im Kopf hatte. Die Forscher haben zudem neue, schwierigere Testaufgaben (HiFi2Code) erstellt, um zu beweisen, dass ihre Methode auch bei den komplexesten Designs funktioniert.