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

Die Arbeit stellt DesignAsCode vor, ein neuartiges Framework, das die Lücke zwischen visueller Qualität und struktureller Bearbeitbarkeit in der Grafikgenerierung schließt, indem es Designs als HTML/CSS-Code durch eine Plan-Implement-Reflect-Pipeline synthetisiert und so überlegene Ergebnisse sowie erweiterte Funktionen wie Layoutanpassung und Animationen ermöglicht.

Ziyuan Liu, Shizhao Sun, Danqing Huang, Yingdong Shi, Meisheng Zhang, Ji Li, Jingsong Yu, Jiang Bian

Veröffentlicht 2026-02-24
📖 4 Min. Lesezeit☕ Kaffeepausen-Lektüre

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

Stell dir vor, du möchtest ein wunderschönes Plakat entwerfen. Bisher gab es bei KI-Tools ein großes Problem: Entweder die KI malte ein fotorealistisches Bild, das aber wie ein gemalter Stein war – man konnte nichts daran ändern, ohne alles neu zu malen. Oder die KI baute nur ein schemenhaftes Gerüst (wie eine Skizze mit leeren Kästchen), das man dann mühsam mit eigenen Bildern und Texten füllen musste.

Das neue Papier „DesignAsCode" schlägt eine dritte, geniale Lösung vor: Es entwirft das Plakat nicht als Bild, sondern als Computercode (HTML/CSS).

Hier ist die Erklärung mit einfachen Analogien:

1. Das Problem: Der unflexible Stein vs. das leere Gerüst

  • Der unflexible Stein (Bisherige Bild-KIs): Stell dir vor, die KI malt ein Plakat auf einen massiven Betonblock. Es sieht toll aus, aber wenn du den Text „Feier" in „Party" ändern willst, musst du den ganzen Betonblock wegmeißeln und neu gießen. Das ist für Designer Albtraum.
  • Das leere Gerüst (Bisherige Layout-KIs): Die andere KI gibt dir nur ein Gerüst aus Holzstäben. Sie sagt: „Hier ist Platz für ein Bild, hier für Text." Aber das Holz ist grau und leer. Du musst selbst die Bilder suchen, die Farben mischen und den Text schreiben. Oft passt das nicht zusammen, und das Endergebnis sieht chaotisch aus.

2. Die Lösung: DesignAsCode als „Baukasten aus Legosteinen"

DesignAsCode denkt anders. Es sagt: „Warum bauen wir das Plakat nicht wie eine Webseite?"

Stell dir vor, ein Plakat ist wie eine Webseite, die nur aus einem einzigen Bild besteht.

  • Der Text ist ein Textfeld, das man einfach anklicken und umschreiben kann.
  • Das Bild ist ein Bild-Element, das man austauschen kann.
  • Die Farben sind wie Schalter, die man umlegen kann.

Da alles in Code (HTML/CSS) geschrieben ist, ist das Plakat von Anfang an vollständig bearbeitbar. Du kannst die Schriftart ändern, den Hintergrund tauschen oder die Größe anpassen, ohne die Qualität zu verlieren. Es ist wie ein digitaler Legobaukasten, bei dem jedes Teil perfekt passt.

3. Der Bauprozess: Planen, Bauen und Nachbessern

Das System arbeitet in drei Schritten, ähnlich wie ein Architekt, ein Bauarbeiter und ein Qualitätskontrolleur:

  1. Der Architekt (Der Planer):
    Zuerst denkt die KI nach: „Was soll das Plakat zeigen? Wo kommt das Bild hin? Wie soll der Text aussehen?" Sie erstellt einen detaillierten Bauplan, der nicht starr ist, sondern flexibel auf den Inhalt reagiert. Sie entscheidet: „Hier brauchen wir drei Bilder übereinander, dort einen Textblock."

  2. Der Bauarbeiter (Der Umsetzer):
    Basierend auf dem Plan schreibt die KI den eigentlichen Code. Sie holt sich die Bilder (entweder aus einer Datenbank oder generiert sie neu) und fügt sie in das Gerüst ein. Jetzt hast du ein funktionierendes, aber vielleicht noch etwas rohes Design.

  3. Der Qualitätskontrolleur (Der Reflexions-Mechanismus):
    Das ist der magische Teil. Oft sieht der Code im Computer gut aus, aber wenn man ihn „auf den Bildschirm" (rendern) legt, sieht man Fehler: Vielleicht steht der weiße Text auf einem hellen Hintergrund und ist kaum lesbar, oder ein Bild schneidet den Text ab.

    Hier kommt der „Kontrolleur" ins Spiel: Er schaut sich das fertige Bild an, erkennt diese Fehler und sagt dem Bauarbeiter: „Hey, der Text ist zu dunkel, mach ihn heller!" oder „Das Bild ist zu weit links, schieb es nach rechts." Dieser Prozess wiederholt sich so lange, bis das Plakat perfekt aussieht.

4. Warum ist das so cool? (Die Vorteile)

  • Unendliche Anpassung: Du kannst das Design in Sekunden ändern. Willst du das Plakat für eine andere Größe (z. B. von einem Poster zu einer Visitenkarte)? Der Code passt sich automatisch an, wie ein flüssiger Wasserstrom, der sich jeder Form anpasst.
  • Animation: Da es Code ist, kannst du dem Plakat Bewegung geben. Stell dir ein Plakat vor, bei dem die Schneeflocken tatsächlich fallen oder der Text leuchtet – alles durch einfache Code-Befehle, ohne Video-Software.
  • Sprachen: Du kannst den Text einfach im Code austauschen, und das Design bleibt perfekt erhalten. Kein verrutschter Text mehr, egal ob auf Deutsch, Chinesisch oder Japanisch.

Zusammenfassung

DesignAsCode ist wie ein intelligenter Assistent, der nicht nur ein Bild malt, sondern ein vollständiges, bearbeitbares Bauwerk erstellt. Er plant es, baut es und poliert es, bis es perfekt ist. Das Ergebnis ist ein Plakat, das nicht nur schön aussieht, sondern auch so flexibel ist, dass man es leicht ändern kann, ohne von vorne anzufangen. Es verbindet die Schönheit eines Kunstwerks mit der Flexibilität eines Computerprogramms.

Erhalten Sie solche Paper in Ihrem Posteingang

Personalisierte tägliche oder wöchentliche Digests passend zu Ihren Interessen. Gists oder technische Zusammenfassungen, in Ihrer Sprache.

Digest testen →