AesCode Infographics Rule: Die deterministische Metrik und ihre Rolle bei der Bewertung ästhetischen Codes
Bild erstellt vom Redaktionsteam von Inferama
01

Definition der Rule-Metrik und ihre Funktion innerhalb der AesCode Infographics-Suite

Die Rule-Metrik im AesCode Infographics-Benchmark wird als Durchschnitt von drei deterministischen Prüfungen definiert: Text, Bound und Chart. Diese Verifikationen bewerten strukturelle und semantische Aspekte des generierten Codes, die programmatisch aus dem Quellcode, dem DOM oder der Browser-Renderisierung extrahiert werden können.

Im Gegensatz zu visuellen Metriken, die einen VLM-Judge (Vision-Language Model) zur Bewertung nicht parsebarer Eigenschaften wie Hierarchie oder Stil benötigen, konzentriert sich Rule auf die überprüfbare Korrektheit. Ihre Funktion besteht darin sicherzustellen, dass der Code den exakten Inhaltsanforderungen, der Canvas-Einschränkung und der Datenstruktur entspricht und so eine objektive Grundlage vor der Bewertung der ästhetischen Qualität schafft.

Die drei Teilprüfungen decken unterschiedliche, klar abgrenzbare Anforderungen ab. Text bezieht sich auf das Vorhandensein der verlangten Zeichenfolgen in der Browserdarstellung; Bound betrifft die Lage des Inhalts innerhalb der vorgesehenen Fläche und das passende Seitenverhältnis; Chart prüft die Struktur sowie die Daten von Tabellen und Diagrammen. Der gemeinsame Score fasst diese getrennten Prüfergebnisse zusammen, statt sie als Bewertung eines einzigen visuellen Merkmals zu behandeln.

Die Bezeichnung „deterministisch“ beschreibt hier die Art der programmatischen Prüfungen, nicht eine Garantie, dass jedes regelkonforme Ergebnis inhaltlich vollständig oder gestalterisch gelungen ist. Die einzelnen Verifikatoren prüfen nur die Anforderungen, für die sie vorgesehen sind. Ein bestandener Texttest sagt beispielsweise nichts darüber aus, ob die Typografie angenehm wirkt; ein passender Bound-Wert bewertet für sich genommen weder Farbwahl noch visuelle Hierarchie. Rule liefert damit eine begrenzte, überprüfbare Perspektive auf den generierten Code.

Die Quellen der Teilwerte unterscheiden sich ebenfalls: Text stützt sich auf OCR und Textanalyse der Renderisierung, Bound auf Pixelgeometrie und berechnete Stile, Chart auf das HTML und strukturierte Daten. Diese Aufteilung macht sichtbar, welche Art von Merkmal jeweils geprüft wird. Sie bedeutet jedoch nicht, dass alle Anforderungen unmittelbar aus dem Quellcode ablesbar wären oder dass eine einzelne Quelle sämtliche Eigenschaften der Infografik erfasst.

Der Durchschnitt der drei Scores ist ein zusammenfassender Wert. Bei der Interpretation sollten deshalb auch die Komponenten berücksichtigt werden: Derselbe Gesamtwert kann unterschiedliche Muster bei Text, Begrenzung und Diagrammstruktur verbergen. Rule bleibt eine Kennzahl für die im Benchmark festgelegten Prüfungen und ersetzt keine separate Betrachtung der jeweiligen Anforderungen.

Komponenten der Rule-Metrik

Aufschlüsselung der drei Submetriken, die den Rule-Score bilden.

KomponenteBeschreibungVerifikationsquelle
TextPrüft das exakte Vorhandensein erforderlicher Textzeichenketten.OCR und Textanalyse in der Renderisierung.
BoundMisst die Canvas-Einschränkung und die Übereinstimmung des Seitenverhältnisses.Pixelgeometrie und berechnete Stile.
ChartPrüft Struktur, Untertyp und Daten von Tabellen und Diagrammen (ECharts).HTML-Parsing und strukturierte Daten.
02

Ausführungsmethodik: Anwendung der Verifikationsregeln

Der Evaluations-Harness von AesCode erfordert eine Browser-Renderisierung (Chromium über Playwright) und die Verwendung von PaddleOCR zur Textextraktion. Jede Punktzahl wird auf Basis dieser Renderisierung berechnet, nicht nur aus dem Quellcode, was sicherstellt, dass die Metrik das endgültige visuelle Ergebnis widerspiegelt.

Der Prozess umfasst den Vergleich des Ziellayout-Graphen (abgeleitet aus Prompt und Referenzbild) mit dem vom Modell generierten Kandidaten-Graphen. Eigenschaften mit strukturierten Beweisen im Code oder messbaren Beweisen in der Renderisierung werden den deterministischen Verifikatoren zugewiesen. Wenn ein Kanal wie PaddleOCR fehlschlägt oder nicht vorhanden ist, gibt der Kanal null zurück, anstatt abzubrechen, was die Belohnung korrupt machen kann, wenn dies nicht richtig verwaltet wird.

Die Browser-Renderisierung ist ein zentraler Bestandteil des beschriebenen Harness, weil die Textprüfung auf der Darstellung und die Bound-Prüfung auf messbarer Geometrie beruht. Chromium wird über Playwright verwendet; PaddleOCR dient der Textextraktion. Damit bewertet der Ablauf nicht ausschließlich, ob bestimmte Strukturen im HTML oder CSS vorkommen, sondern bezieht das gerenderte Ergebnis in die Berechnung ein. Daraus folgt keine umfassende Prüfung aller visuellen Eigenschaften.

Der Vergleich zwischen Ziel- und Kandidatengraph ordnet Anforderungen dem jeweiligen Prüfweg zu. Der Zielgraph wird aus Prompt und Referenzbild abgeleitet; der Kandidatengraph entsteht aus der Modellausgabe. Merkmale, die sich strukturiert im Code nachweisen oder in der Renderisierung messen lassen, können deterministischen Verifikatoren zugeordnet werden. Nicht parsebare Gestaltungsmerkmale gehören dagegen nicht automatisch zu Rule und werden im beschriebenen System über den visuellen Kanal beurteilt.

Ein Nullwert bei einem ausgefallenen oder fehlenden Kanal ist ein wesentlicher Interpretationspunkt: Er kann den resultierenden Reward beeinflussen, obwohl der Ausfall nicht zwingend bedeutet, dass der generierte Inhalt die geprüfte Anforderung verletzt. Der Harness bricht in diesem Fall laut Beschreibung nicht ab, sondern gibt für den Kanal null zurück. Deshalb müssen Score und Funktionsfähigkeit der Prüfkanäle auseinandergehalten werden; der Nullwert allein belegt weder einen gelungenen Test noch einen Modellfehler.

Die Reihenfolge im Ablauf verbindet Renderisierung, Merkmalsextraktion und Teilprüfungen. Erst wird der HTML/CSS-Kandidat im Headless-Browser dargestellt, anschließend werden Text und Pixelgeometrie extrahiert und die Prüfungen für Text, Bound sowie Chart beziehungsweise Table ausgeführt. Der abschließende Mittelwert verdichtet diese drei Resultate zu Rule. Diese Verarbeitungskette beschreibt, wie der Wert zustande kommt, nicht eine Garantie für identische Scores bei jeder abweichenden Harness-Konfiguration.

Fluss der deterministischen Verifikation

Technische Schritte zur Berechnung der Rule-Metrik im Harness.

  1. 01Generierten HTML/CSS-Code in einem Headless-Browser (Chromium) rendern.
  2. 02Text und Pixelgeometrie aus der Renderisierung extrahieren.
  3. 03Text-Verifikator ausführen, um exakte Zeichenketten zu überprüfen.
  4. 04Bound-Verifikator ausführen, um Canvas-Grenzen zu validieren.
  5. 05Chart/Table-Verifikator ausführen, um strukturierte Daten zu validieren.
  6. 06Durchschnitt der drei Punktzahlen berechnen, um Rule zu erhalten.
03

Vergleich mit visuellen Metriken: Stabilität und Reproduzierbarkeit

Im Benchmark mit 300 Infografik-Instanzen sind regelbasierte Scores (Rule) für die bewerteten Closed-Source-Code-Modelle konsistent höher und stabiler als visuelle Scores. Diese Stabilität resultiert aus der deterministischen Natur der Prüfungen: Sie hängen nicht von der Subjektivität eines visuellen Sprachmodells ab.

Diese Stabilität impliziert jedoch keine absolute Überlegenheit bei der Qualitätsbewertung. Während Rule die strukturelle Korrektheit misst, erfassen visuelle Metriken (Content, Layout, Style) die menschliche Wahrnehmung des Designs. Schwächere Modelle zeigen einen steileren Rückgang in den visuellen Metriken als in der Regelkonformität, was darauf hindeutet, dass Rule weniger empfindlich auf subtile ästhetische Fehler reagieren kann.

Die beobachtete Stabilität bezieht sich auf den genannten Benchmark mit 300 Infografik-Instanzen und auf die dort bewerteten Closed-Source-Code-Modelle. Sie sollte nicht ohne Weiteres auf andere Datensätze, Modelle oder Ausführungsbedingungen übertragen werden. Innerhalb dieses Vergleichs fallen die regelbasierten Werte höher und stabiler aus als die visuellen Werte; der Befund beschreibt die Resultate dieses Benchmarks, keine allgemeine Rangordnung aller Bewertungsverfahren.

Ein Grund für den Unterschied liegt im Prüfgegenstand: Rule verarbeitet festgelegte, programmatisch überprüfbare Bedingungen, während Visual die Wahrnehmung von Content, Layout und Style mit einer visuellen Bewertungsmethode abbildet. Ein regelbasierter Test kann bei wiederholter Anwendung auf dieselben messbaren Bedingungen stabil sein und dennoch eine gestalterische Schwäche unberücksichtigt lassen. Stabilität der Messung und Vollständigkeit der Qualitätsbewertung sind daher verschiedene Eigenschaften.

Die stärkeren Rückgänge schwächerer Modelle bei den visuellen Metriken deuten im beschriebenen Benchmark darauf hin, dass Rule für subtile ästhetische Fehler weniger empfindlich sein kann. Diese Aussage betrifft die unterschiedliche Reaktion der Metriken auf die bewerteten Ergebnisse; sie besagt nicht, dass jede visuelle Abweichung unbemerkt bleibt oder dass jede hohe Rule-Punktzahl mit geringer visueller Qualität verbunden ist.

Eine Divergenz zwischen Rule und Visual ist deshalb sachlich plausibel: Ein Kandidat kann die verlangten Texte und Grenzen erfüllen und zugleich eine schwache Hierarchie oder unpassende Farben aufweisen. Der hohe Rule-Wert würde dann die geprüften strukturellen Bedingungen widerspiegeln, während der niedrigere Visual-Wert die gestalterische Bewertung ausdrückt. Beide Resultate können gleichzeitig zutreffen, weil sie unterschiedliche Eigenschaften erfassen.

04

Grenzen der Rule-Metrik für die Bewertung der tatsächlichen ästhetischen Qualität

Die Rule-Metrik hat inhärente Grenzen bei der Bewertung der tatsächlichen ästhetischen Qualität. Sie erfasst Eigenschaften wie Typografie, Farbnutzung, visuelle Hierarchie oder Designkohäsion nicht, die für die Wahrnehmung von 'gutem Design' wesentlich sind. Diese Aspekte werden über den Visual-Kanal bewertet, der eine muster-spezifische Rubrik (VGR) und einen VLM-Judge verwendet.

Darüber hinaus kann die Vergleichbarkeit zwischen Modellen beeinträchtigt werden, wenn die Rule-Metrik die menschliche Designwahrnehmung nicht erfasst. Ein Modell kann eine hohe Rule, aber eine niedrige Visual aufweisen, was darauf hinweist, dass der Code strukturell korrekt, aber ästhetisch mangelhaft ist. Daher sollte Rule als Metrik für Korrektheit, nicht für ästhetische Qualität, interpretiert werden.

Die Grenzen von Rule ergeben sich aus der Auswahl der messbaren Merkmale. Typografie, Farbwirkung, visuelle Hierarchie und Kohäsion des Designs lassen sich mit den drei genannten Prüfungen nicht als ästhetische Gesamtqualität abbilden. Dass solche Merkmale außerhalb von Rule liegen, macht den regelbasierten Wert nicht bedeutungslos; es begrenzt vielmehr die Frage, auf die er eine Antwort geben kann: ob die festgelegten Text-, Bound- und Chart-Anforderungen überprüfbar erfüllt sind.

Der Visual-Kanal übernimmt im beschriebenen Bewertungsaufbau die Beurteilung der nicht parsebaren Gestaltungsaspekte. Dafür verwendet er eine musterspezifische Rubrik (VGR) und einen VLM-Judge. Auch dieser andere Bewertungsweg sollte nicht mit Rule gleichgesetzt werden: Er adressiert menschlich wahrnehmbare Gestaltungsmerkmale, während Rule auf programmatische Prüfungen ausgerichtet ist. Die beiden Kanäle ergänzen sich, statt denselben Qualitätsbegriff doppelt zu messen.

Eine hohe Rule-Punktzahl ist daher kein Nachweis für ein visuell attraktives Ergebnis. Sie kann anzeigen, dass die geprüften Anforderungen eingehalten wurden, während eine niedrige Visual-Punktzahl auf Defizite bei der Gestaltung hinweist. Umgekehrt erklärt eine schwache Rule allein nicht, wie ein Design wahrgenommen wird. Für eine Aussage über ästhetische Qualität muss die Visual-Dimension gesondert betrachtet werden.

Die Trennung verhindert, dass strukturelle Korrektheit und Designqualität zu einem einzigen Urteil verschmelzen. Sie beseitigt jedoch nicht alle Vergleichsfragen: Wenn Modelle bei den regelbasierten Anforderungen ähnlich abschneiden, können Unterschiede in der menschlich wahrnehmbaren Gestaltung weiterhin erheblich sein. Rule eignet sich deshalb als Teil einer mehrdimensionalen Auswertung, nicht als alleiniger Ersatz für die Bewertung des visuellen Ergebnisses.

05

Auswirkungen auf die Vergleichbarkeit zwischen Modellen und Schlussfolgerungen

Die Verwendung von Rule als separate Metrik ermöglicht eine granularere Bewertung von Code-Generierungsmodellen. Durch die Trennung von Korrektheit und visueller Qualität können Teams feststellen, ob ein Modell aufgrund struktureller Fehler oder ästhetischer Einschränkungen fehlschlägt. Dies ist entscheidend für die Integration in Produktions-Pipelines, in denen Korrektheit eine Voraussetzung für Qualität ist.

Die Ergebnisse von AesCode zeigen, dass Closed-Source-Code-Modelle tendenziell höhere Scores in Rule als in Visual erzielen, wobei Style die schwächste Dimension ist. Dies deutet darauf hin, dass strukturelle Korrektheit leichter zu erreichen ist als ästhetische Qualität und dass deterministische Metriken wie Rule nützlich, aber für eine vollständige Designqualitätsbewertung unzureichend sind.

Als getrennte Kennzahl hilft Rule dabei, Fehlerarten auseinanderzuhalten. Ein niedrigerer Wert kann auf Probleme bei den festgelegten Struktur- oder Inhaltsprüfungen hinweisen; ein Unterschied zwischen Rule und Visual macht sichtbar, dass überprüfbare Korrektheit und wahrgenommene Gestaltung nicht dasselbe sind. Die Kennzahl kann so eine granularere Analyse der Modellergebnisse unterstützen, ohne selbst die Ursache jedes einzelnen Fehlers zu bestimmen.

Die Einordnung in Produktions-Pipelines betrifft die Rolle der Korrektheit als Voraussetzung für Qualität, nicht eine Garantie, dass ein hoher Rule-Wert für den Einsatz genügt. Ein Ergebnis kann die strukturellen Prüfungen bestehen und gestalterisch dennoch unzureichend sein. Entsprechend liefern Rule und Visual unterschiedliche Anhaltspunkte: Der erste Kanal betrifft definierte, deterministisch geprüfte Bedingungen; der zweite bewertet Content, Layout und Style.

Die Tabelle stellt Rule und Visual getrennt dar, damit die Ergebnisse nicht zu einer einzigen Aussage über gutes Design zusammengezogen werden. Ein hoher Rule-Wert beantwortet die Frage nach den erfassten Anforderungen, während der Visual-Wert eine andere Bewertungsebene betrifft. Für die Auswahl eines Modells sollten daher die beiden Spalten gemeinsam mit der verwendeten Benchmark-Konfiguration betrachtet werden. Die aufgeführten Resultate mit Referenzbild beschreiben die ausgewählten Versuche; sie erlauben keine Aussage über nicht aufgeführte Modelle oder andere Aufgaben und machen eine eigene Bewertung des gewünschten Designs nicht überflüssig.

Dass Style in den berichteten Ergebnissen die schwächste Dimension ist, stützt die begrenzte Aussage, dass ästhetische Qualität in diesem Vergleich schwieriger zu erreichen scheint als die geprüfte strukturelle Korrektheit. Es beweist nicht, dass strukturelle Anforderungen grundsätzlich einfacher sind als jede Form guter Gestaltung. Die Schlussfolgerung bleibt an die verwendeten Instanzen, Metriken und Modelle gebunden; Rule bleibt nützlich, aber für eine vollständige Bewertung der Designqualität unzureichend.

Vergleich der Rule- und Visual-Scores in ausgewählten Modellen

Durchschnittliche Scores im Benchmark mit 300 Instanzen (mit Referenzbild).

ModellRuleVisualOverall
GPT-5.585.8076.7681.28
Claude Opus 4.883.5577.2380.39
AesCode-8B90.0775.8082.94
AesCode-32B94.3377.4485.89
06

Weiter entdecken

Verwendete Quellen

03

Korrekturen und Transparenz

Wenn du falsche oder veraltete Angaben findest, sende uns die Seite und die zu prüfende Quelle.

Korrektur vorschlagen