{"id":12215,"date":"2026-02-19T08:15:00","date_gmt":"2026-02-19T07:15:00","guid":{"rendered":"https:\/\/code78.de\/blog\/?p=12215"},"modified":"2026-02-19T16:26:09","modified_gmt":"2026-02-19T15:26:09","slug":"vergleich-ki-modelle-html-code","status":"publish","type":"post","link":"https:\/\/code78.de\/blog\/vergleich-ki-modelle-html-code\/","title":{"rendered":"Test und Vergleich der KI-Modelle: Wer baut den besten HTML-Code?"},"content":{"rendered":"\n<p>Ich habe beschlossen, mich wie ein seri\u00f6ser Mensch zu verhalten: Ich lasse KI-Modelle gegeneinander antreten, alle bekommen denselben Prompt, und ich tue \u00fcberrascht, wenn eins davon \u201eaus Versehen\u201c CSS in die Suppe kippt.<\/p>\n\n\n\n<p>Ihr bekommt einen ehrlichen Vergleich: Wie gut bauen die Perplexity-Modelle HTML-Seiten, wie brav folgen sie Regeln \u2013 und wie sehen die Outputs im Screenshot nebeneinander aus, wenn man die Kosmetik mal kurz ignoriert.<\/p>\n\n\n\n<nav>\n<h2>Inhaltsverzeichnis<\/h2>\n<ul>\n<li><a href=\"#modelle\">Welche Modelle ich vergleiche<\/a><\/li>\n<li><a href=\"#testdesign\">Mein Testdesign: Fairness, oder zumindest der Versuch<\/a><\/li>\n<li><a href=\"#prompt\">Ein Prompt, um sie alle zu qu\u00e4len<\/a><\/li>\n<li><a href=\"#bewertung-chatgpt\">Bewertung: ChatGPT<\/a><\/li>\n<li><a href=\"#bewertung-claude-sonnet\">Bewertung: Claude Sonnet<\/a><\/li>\n<li><a href=\"#bewertung-gemini\">Bewertung: Gemini 3 Pro<\/a><\/li>\n<li><a href=\"#bewertung-grok\">Bewertung: Grok 4.1<\/a><\/li>\n<li><a href=\"#bewertung-sonar\">Bewertung: Sonar<\/a><\/li>\n<li><a href=\"#ergebnisse\">Ergebnisse<\/a><\/li>\n<li><a href=\"#faq\">FAQ: M\u00f6gliche Fragen, klare Antworten<\/a><\/li>\n<li><a href=\"#fazit\">Fazit<\/a><\/li>\n<\/ul>\n<\/nav>\n\n\n\n<p>Die Ausgangslage: Perplexity ist nicht \u201edas eine Modell\u201c, sondern eher ein gut sortierter KI-Selbstbedienungsladen, in dem mehrere Modelle stecken \u2013 und ihr d\u00fcrft (je nach Abo und Modus) ausw\u00e4hlen, wer ans Werk darf.<\/p>\n\n\n\n<p>Und weil ich Software Engineer bin, nebenbei Social Media manage und in meinem Leben genug Psychologie-Diplomas und KI-Zertifikate gesammelt habe, um auf Partys gleichzeitig spannend und unerquicklich zu wirken, reizt mich die Frage: Welches Modell macht aus einem Prompt wirklich brauchbares HTML \u2013 und welches macht \u201ekreatives Storytelling\u201c daraus?<\/p>\n\n\n\n<p>Das ist keine Benchmark-Olympiade mit Goldmedaillen und Trompeten, sondern ein praktischer Test f\u00fcr euch: Wenn ihr HTML-Seiten schnell prototypen wollt \u2013 welches Modell liefert euch am wenigsten Reparaturarbeit?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"modelle\">Welche Modelle ich vergleiche<\/h2>\n\n\n\n<p>F\u00fcr diesen Vergleich nehme ich die Modelle, die Perplexity in der eigenen Hilfe als \u201ePro Search Models\u201c auff\u00fchrt \u2013 weil genau diese Auswahl f\u00fcr viele von euch realistisch im Alltag ist.<\/p>\n\n\n\n<p>Konkret im Test: <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>ChatGPT-5.2 *<\/li>\n\n\n\n<li>Claude Sonnet 4.6 *<\/li>\n\n\n\n<li>Gemini 3 Pro <\/li>\n\n\n\n<li>Grok 4.1 *<\/li>\n\n\n\n<li>Sonar <\/li>\n<\/ol>\n\n\n\n<p style=\"line-height:0.9\"><sup>* Optional mit Thinking (Reasoning), von mir aber in diesem Test nicht eingesetzt<\/sup><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"testdesign\">Mein Testdesign: Fairness, oder zumindest der Versuch<\/h2>\n\n\n\n<p>Wenn wir Modelle vergleichen, wollen wir keine \u201ewer hat heute gute Laune\u201c-Studie, sondern reproduzierbare Bedingungen.<\/p>\n\n\n\n<p>Ich mache es deshalb so, dass jedes Modell denselben Prompt in einem frischen Thread bekommt, ohne \u201eVorw\u00e4rm-Kontext\u201c, ohne Nachfragen, ohne Nachbessern.<\/p>\n\n\n\n<p>Ich gebe also \u00fcberall denselben Prompt rein, aber das \u201eGehirn\u201c dahinter ist jeweils ein anderes \u2013 mit anderem Stil, anderer Regelstrenge, anderem Drang zur Improvisation und anderer Bereitschaft, uns mit \u00fcberzeugender Miene Unsinn zu verkaufen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Regeln f\u00fcr den Vergleich<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gleicher Prompt, gleicher Umfang, gleiche Anforderungen<\/li>\n\n\n\n<li>Neuer Chat\/Thread pro Modell, damit kein Kontext mitschleppt<\/li>\n\n\n\n<li>Ein Durchlauf ohne Nachprompting<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Was ich dabei bewusst nicht \u201ewegoptimiere\u201c<\/h3>\n\n\n\n<p>Ich lasse typische Real-Life-Friktionen drin: Modelle d\u00fcrfen sich also ruhig mal verhaspeln, Dinge erfinden oder HTML bauen, das technisch \u201eirgendwie\u201c funktioniert, aber semantisch eher so wirkt, als h\u00e4tte jemand einen Toaster zum Philosophiestudium gezwungen.<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group has-border-color has-accent-5-border-color has-accent-4-background-color has-background is-layout-flow wp-container-core-group-is-layout-77846902 wp-block-group-is-layout-flow\" style=\"margin-top:2em;margin-bottom:2em;padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em;box-shadow:var(--wp--preset--shadow--deep)\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-fe9cc265 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">K\u00fcnstliche Intelligenz<\/h2>\n<\/div>\n\n\n\n<p>Ihr wollt nicht \u201eirgendein\u201c Modell, ihr wollt das richtige Modell f\u00fcr euren Job: HTML-Prototyping, Struktur, Regelgehorsam, saubere Semantik.<\/p>\n\n\n\n<p>Noch tiefer rein in die Materie? Auf der \u00dcbersichtsseite zum Thema findet ihr noch mehr Vergleiche, Best Practices zum Einsatz der KI und umfassende Guides zum Thema Prompt Engineering:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/code78.de\/blog\/category\/kuenstliche-intelligenz-ki\/\">Tiefer eintauchen in KI-Themen<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prompt\">Ein Prompt, um sie alle zu qu\u00e4len<\/h2>\n\n\n\n<p>Wir brauchen einen Prompt, der nicht nur \u201emach mal h\u00fcbsch\u201c sagt, sondern klare, messbare Anforderungen hat \u2013 sonst gewinnt am Ende nur das Modell mit dem besten Marketing-Text.<\/p>\n\n\n\n<p>Hier ist mein Benchmark-Prompt, den ich 1:1 in jedes Modell einf\u00fcge:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># System\u2011Prompt: HTML\u2011Landingpage f\u00fcr die \u201eAxt 2000\u201c\n\nErstelle eine vollst\u00e4ndige, semantische HTML5\u2011Seite (rein HTML, kein Markdown) f\u00fcr eine One\u2011Page\u2011Werbung f\u00fcr die **Axt 2000**.  \n\n### Rolle &amp; Stil\n- Du agierst als **Software\u2011Engineer mit langj\u00e4hriger Erfahrung**, der technische Anforderungen sauber umsetzt und zugleich stilistische Vorgaben konsistent einh\u00e4lt.  \n- Schreibe in einem **ironischen, leicht zynischen Stil** mit Storytelling, Metaphern und Humor.  \n- Der Text soll unterhaltsam sein, aber gleichzeitig klar argumentieren, warum die **Axt 2000** ein bemerkenswertes \u2013 vielleicht sogar \u00fcbertrieben gefeiertes \u2013 Produkt ist.  \n- Erstelle eine fiktive, aber \u00fcberzeugend klingende Produktpr\u00e4senz (Markenname, Nutzen, Kontext).  \n\n### Technische HTML\u2011Vorgaben\n- Die Seite soll eine **One\u2011Page\u2011Landingpage** im semantischen HTML5\u2011Stil sein.  \n- Verwende **nur** folgende HTML\u2011Elemente:  \n  - `p`, `h2`, `h3`, `h4`  \n  - `ul`, `ol`, `li`  \n  - `strong`, `em`, `a`  \n  - `nav`  \n- Achte auf eine **korrekte semantische Hierarchie**:  \n  - `h1` nur einmal (z.B. als Titel der Seite).  \n  - Danach immer `h2` \u2192 `h3` \u2192 `h4`, ohne Ebenen zu \u00fcberspringen.  \n\n### Aufbau der Inhalte\nStrukturiere die Seite grob nach diesem Schema:\n\n1. **Teaser**  \n   - Kurzer, einpr\u00e4gsamer Einstieg, der Lust auf Weiterlesen macht.  \n\n2. **Inhaltsverzeichnis als `nav`**  \n   - Enth\u00e4lt Sprungmarken (Ankerlinks) zu den einzelnen Abschnitten.  \n\n3. **Einleitung**  \n   - Kurz beantworten:  \n     - \u201eWas ist die Axt 2000?\u201c  \n     - \u201eWarum ist sie ein Ph\u00e4nomen?\u201c  \n\n4. **Hauptteil mit 4\u20136 `h2`\u2011Abschnitten**, wobei jede \u00dcberschrift eine id ben\u00f6tigt. Beispiele:  \n   - `h2` \u201eWarum ihr eine Axt 2000 braucht\u201c  \n   - `h2` \u201eWof\u00fcr sie gebaut ist\u201c  \n   - `h2` \u201eWie sie sich von anderen Axt\u2011Modellen unterscheidet\u201c  \n   - `h2` \u201eWof\u00fcr sie in der Praxis sorgt\u201c  \n   - `h2` \u201eKritik, Mythen und die Axt als Symbol\u201c  \n\n### Inhaltliche Anforderungen\n- Formuliere die Inhalte in **kurzen Abs\u00e4tzen**, nutze **Listen** und klar definierte Kategorien wie z.B.:  \n  - \u201eVorteile\u201c  \n  - \u201eNachteile\u201c  \n  - \u201eFallbeispiele\u201c  \n- Beantworte **direkt und transparent** typische Fragen, z.B.:  \n  - \u201eWas ist die Axt 2000?\u201c  \n  - \u201eWof\u00fcr ist sie gut?\u201c  \n  - \u201eWarum ist sie nicht f\u00fcr alles geeignet?\u201c  \n  - \u201eWie misst man Erfolg mit der Axt 2000?\u201c  \n- Achte auf **semantische Klarheit**:  \n  - Vermeide Mehrdeutigkeit.  \n  - Nutze Synonyme, wo sinnvoll.  \n  - Erkl\u00e4re wichtige Begriffe direkt im Text.  \n\n### Ausgabe\n- Gib **ausschlie\u00dflich den fertigen HTML\u2011Code** aus, ohne zus\u00e4tzliche Erkl\u00e4rungen, Kommentare oder Markdown\u2011Kopfzeilen.<\/code><\/pre>\n\n\n\n<p>Warum so streng? Weil HTML-Seiten in der Praxis nicht an \u201ekreativen Ideen\u201c scheitern, sondern an Kleinigkeiten: falsche Hierarchie, fehlende Sprungmarken, kaputtes Link-Verhalten, und dieser eine Moment, wo pl\u00f6tzlich doch irgendwo eine verbotene Struktur auftaucht.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Was ist \u201esemantisches HTML\u201c hier \u00fcberhaupt?<\/h3>\n\n\n\n<p>Semantisches HTML hei\u00dft: Elemente werden nach ihrer Bedeutung genutzt, damit Menschen und Maschinen die Struktur verstehen \u2013 und nicht nur \u201eirgendwas\u201c rendern.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bewertung\">Bewertung: Woran ich \u201egutes HTML\u201c festnagel<\/h2>\n\n\n\n<p>Jetzt wird\u2019s unangenehm: Wir brauchen Kriterien, sonst wird der Vergleich zur reinen Stil-Show. Und glaubt mir: Manche Modelle sind stilistisch so charmant, dass ihr ihnen freiwillig schlechte Semantik durchgehen lassen wollt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mein Bewertungsraster <br>(0 bis 5 Punkte je Kriterium)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Regeltreue: Keine verbotenen Elemente\/Attribute, keine \u201ekreativen Ausnahmen\u201c<\/li>\n\n\n\n<li>Struktur: Sinnvolle H1-H2-H3-H4-Hierarchie, keine Spr\u00fcnge, klare Abs\u00e4tze<\/li>\n\n\n\n<li>Navigation: Inhaltsverzeichnis vorhanden, Sprungmarken funktionieren, IDs sind korrekt<\/li>\n\n\n\n<li>Lesbarkeit: Variierende Satzl\u00e4ngen, klare Aussagen, trotzdem nicht flach<\/li>\n\n\n\n<li>Fehlerverhalten: Wenn das Modell etwas nicht kann, sagt es das \u2013 oder halluziniert es souver\u00e4n?<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"chatgpt-bewertung\">ChatGPT<\/h2>\n\n\n\n<p><strong>Gesamteindruck:<\/strong> Das Ergebnis ist eine erstaunlich runde One\u2011Page\u2011Landingpage: gute Dramaturgie, sauberer Aufbau, witziger Ton \u2013 aber im strengen Benchmark\u2011Sinn nicht vollst\u00e4ndig regelkonform, weil zus\u00e4tzliche HTML\u2011Elemente au\u00dferhalb der erlaubten Whitelist auftauchen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img decoding=\"async\" width=\"1361\" height=\"988\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/ChatGPT-KI-Modelle-HTML-Code.jpg\" alt=\"Vergleich: KI-Modelle HTML-Code - ChatGPT\" class=\"wp-image-12228\" style=\"border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;box-shadow:var(--wp--preset--shadow--natural)\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/ChatGPT-KI-Modelle-HTML-Code.jpg 1361w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/ChatGPT-KI-Modelle-HTML-Code-300x218.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/ChatGPT-KI-Modelle-HTML-Code-1024x743.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/ChatGPT-KI-Modelle-HTML-Code-768x558.jpg 768w\" sizes=\"(max-width: 1361px) 100vw, 1361px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Regeltreue: 2\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Positiv: Kein <code>div<\/code>, keine <code>class<\/code>, kein <code>style<\/code> \u2013 die typischen \u201ekreativen Ausnahmen\u201c bleiben aus.<\/li>\n\n\n\n<li>Negativ: Der Output enth\u00e4lt ein komplettes HTML-Dokumentger\u00fcst  und verletzt damit die strikte Tag-Whitelist aus meinem Prompt. <\/li>\n\n\n\n<li>Gleichzeitig ist genau dieses <code>&lt;!doctype html&gt;<\/code> in echten HTML-Dokumenten der vorgesehene Preamble, damit Browser nicht in den Quirks Mode kippen \u2013 ChatGPT denkt also \u201eproduktionsnah\u201c, mein Prompt war aber \u201elaborstreng\u201c. <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Struktur: 4\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die \u00dcberschriftenhierarchie ist sauber: ein <code>h1<\/code>, dann logisch gegliederte <code>h2<\/code>-Abschnitte, darunter <code>h3<\/code> und  <code>h4<\/code> \u2013 ohne wilde Spr\u00fcnge. <\/li>\n\n\n\n<li>Abzug gibt\u2019s nur daf\u00fcr, dass die Seite zwar \u201eOnepager\u201c ist, aber inhaltlich stellenweise sehr lang wirk.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation: 5\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Das Inhaltsverzeichnis sitzt korrekt in einem <code>nav<\/code> und verlinkt per Anker auf die einzelnen Abschnitte \u2013 exakt das, wof\u00fcr <code>nav<\/code> gedacht ist.<\/li>\n\n\n\n<li>Die Sprungmarken funktionieren, und die IDs sind insgesamt kurz und sprechend. <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Lesbarkeit: 5\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Der Text trifft den gew\u00fcnschten Ton: ironisch, leicht zynisch, mit starken Bildern, klaren Aussagen und angenehm variierenden Satzl\u00e4ngen. Er ist unterhaltsam, ohne in inhaltsleere Comedy zu kippen \u2013 und genau das ist bei \u201eWerbetext mit Haltung\u201c selten genug, um es zu w\u00fcrdigen.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img decoding=\"async\" width=\"1313\" height=\"985\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/ChatGPT-Test-KI-Modell-HTML-Code-Seite.jpg\" alt=\"Test HTML-Code als Seite beim Vergleich der KI-Modell: ChatGPT\" class=\"wp-image-12250\" style=\"border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:var(--wp--preset--shadow--natural)\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/ChatGPT-Test-KI-Modell-HTML-Code-Seite.jpg 1313w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/ChatGPT-Test-KI-Modell-HTML-Code-Seite-300x225.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/ChatGPT-Test-KI-Modell-HTML-Code-Seite-1024x768.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/ChatGPT-Test-KI-Modell-HTML-Code-Seite-768x576.jpg 768w\" sizes=\"(max-width: 1313px) 100vw, 1313px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Fehlerverhalten: 4\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ChatGPT behauptet keine \u00fcberpr\u00fcfbaren Fakten, die man sofort als Halluzination entlarven m\u00fcsste \u2013 es bleibt im fiktiven, metaphorischen Rahmen der Axt 2000 und zieht den konsistent durch. <\/li>\n\n\n\n<li>Das gr\u00f6\u00dfte \u201eFehlverhalten\u201c ist im Kontext dieses Benchmarks nicht inhaltlich, sondern prozedural: Es ignoriert die strikte Tag-Whitelist und liefert lieber eine vollst\u00e4ndige, realistische HTML-Seite.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Gesamt<\/h3>\n\n\n\n<p><strong>19\/25 Punkten<\/strong> \u2013 stark in Struktur, Navigation und Lesbarkeit; deutlicher Abzug bei Regeltreue wegen der zus\u00e4tzlichen Tags.<\/p>\n\n\n\n<p> ChatGPT liefert eine \u00fcberzeugende Landingpage \u2013 aber es h\u00e4lt sich nicht an die \u201enur diese Elemente\u201c-Di\u00e4t, sondern serviert gleich das komplette Men\u00fc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bewertung-claude-sonnet\">Bewertung: Claude Sonnet 4.6<\/h2>\n\n\n\n<p>Claude Sonnet liefert einen handwerklich starken Output \u2013 pr\u00e4zise, ehrlich, mit echtem Witz. Das Modell bricht dieselben Tag-Whitelist-Regeln wie ChatGPT, hat aber inhaltlich deutlich mehr Mut zur Unvollkommenheit. Und das meine ich als Kompliment.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img decoding=\"async\" width=\"1361\" height=\"988\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Claude-KI-Modelle-HTML-Code.jpg\" alt=\"Vergleich: KI-Modelle HTML-Code - Claude Sonnet\" class=\"wp-image-12229\" style=\"border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;box-shadow:var(--wp--preset--shadow--natural)\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Claude-KI-Modelle-HTML-Code.jpg 1361w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Claude-KI-Modelle-HTML-Code-300x218.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Claude-KI-Modelle-HTML-Code-1024x743.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Claude-KI-Modelle-HTML-Code-768x558.jpg 768w\" sizes=\"(max-width: 1361px) 100vw, 1361px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Regeltreue: 2\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wie ChatGPT liefert auch Claude Sonnet ein komplettes HTML-Dokumentger\u00fcst. Kein <code>div<\/code>, keine <code>class<\/code>, kein <code>style<\/code>, das stimmt; aber der Prompt wurde auch hier als Produktionsauftrag interpretiert, nicht als Laboranweisung.<\/li>\n\n\n\n<li>Ein Detail, das auff\u00e4llt: Das Inhaltsverzeichnis wird als <code>&lt;ol&gt;<\/code> statt als <code>&lt;ul&gt;<\/code> gebaut. Das ist semantisch vertretbar \u2013 und das ist dann sinnvoll ist, wenn die Reihenfolge der Eintr\u00e4ge bedeutungstragend ist; bei einem nummerierten Inhaltsverzeichnis kann man das so argumentieren. Trotzdem: In meinem Prompt stand keine Regel dazu. Ich werte das als Grauzone, nicht als Fehler.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Struktur: 5\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tadellos. Ein <code>h1<\/code>, darunter durchgehend <code>h2<\/code> \u2192 <code>h3<\/code> \u2192 <code>h4<\/code>, keine Ebene \u00fcbersprungen, keine Hierarchiebr\u00fcche. Die Fallbeispiele landen sauber als <code>h4<\/code> unter einem <code>h3<\/code>-Block. <\/li>\n\n\n\n<li>Strukturell noch st\u00e4rker als ChatGPT: Die Abschnitte sind klar getrennt, und jeder <code>h2<\/code>-Block hat ein eigenes inhaltliches Gewicht, ohne dass sich Punkte doppeln oder verlieren.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation: 4\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Das <code>&lt;nav&gt;<\/code>-Element sitzt korrekt, die Sprungmarken funktionieren, die IDs sind kurz und sprechend. Abzug an dieser Stelle f\u00fcr den \u2013 meiner Meinung nach \u2013 unlogischen Einsatz der geordneten Liste.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Claude-Test-KI-Modell-HTML-Code-Seite-1024x768.jpg\" alt=\"Test HTML-Code als Seite beim Vergleich der KI-Modell: Claude\" class=\"wp-image-12251\" style=\"border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:var(--wp--preset--shadow--natural)\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Claude-Test-KI-Modell-HTML-Code-Seite-1024x768.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Claude-Test-KI-Modell-HTML-Code-Seite-300x225.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Claude-Test-KI-Modell-HTML-Code-Seite-768x576.jpg 768w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Claude-Test-KI-Modell-HTML-Code-Seite.jpg 1313w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Lesbarkeit: 5\/5<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Claude Sonnet macht etwas, das ich so direkt nicht erwartet hatte: Es traut sich, den Nutzen des Produkts aktiv zu hinterfragen. \u201eVermutlich brauchen Sie sie nicht&#8220; als zweiten Satz im Abschnitt \u201eWarum ihr eine Axt 2000 braucht&#8220; \u2013 das ist entwaffnend ehrlich, witzig und gleichzeitig \u00fcberzeugender als jede Hochglanzprosa.<\/li>\n\n\n\n<li>Die Zimmerin Franziska W., die keine Zeit f\u00fcr \u00dcbertreibungen hat, ist das beste Zitat im gesamten Vergleich.<\/li>\n\n\n\n<li>Der Ton ist pointiert und abwechslungsreich: kurze Punchlines, dann wieder l\u00e4ngere analytische Passagen, rhetorische Einw\u00fcrfe (<em>\u201eDas sagt mehr \u00fcber den Zeitgeist als \u00fcber die Axt&#8220;<\/em>), konkrete Fallbeispiele mit echtem Charakter. Textur vorhanden. Kein Copy-Paste-Feeling.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Fehlerverhalten: 5\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Das ist der eigentliche H\u00f6hepunkt. Claude Sonnet erfindet zwar fiktive Details (Marke <em>Gr\u00fcnwald &amp; S\u00f6hne<\/em>, Gr\u00fcndungsjahr 1987, Forum <em>holz-und-hand.de<\/em>, Rezensions-Zahlen), kennzeichnet diese aber entweder durch den fiktiven Rahmen oder durch absichtliche \u00dcbertreibung, die den Satireton tr\u00e4gt. Wer im Kontext einer \u201efiktiven Produktpr\u00e4senz&#8220; schreibt, dass \u201e4.200 Rezensionen bemerkenswert viele mit \u201aLebensver\u00e4ndernd&#8216; \u00fcberschrieben sind&#8220;, halluziniert nicht \u2013 der \u00fcbertreibt mit System.<\/li>\n\n\n\n<li>Wichtiger: Claude Sonnet schreibt explizit, was das Produkt <em>nicht<\/em> kann. \u201eNicht geeignet f\u00fcr Schrauben, Pr\u00e4sentationen oder zwischenmenschliche Konflikte.&#8220; Das ist transparentes Fehlerverhalten im besten Sinne \u2013 und seltener, als man denkt.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Gesamt-Score<\/h3>\n\n\n\n<p><strong>21\/25 Punkten<\/strong> \u2013 eine starke Gesamtleistung. Abzug nur bei Regeltreue (Dokumentger\u00fcst au\u00dferhalb der Whitelist) und einem kleinen Fragezeichen bei <code>&lt;ol&gt;<\/code> im Inhaltsverzeichnis.<br>Claude Sonnet liefert nicht einfach HTML \u2013 es liefert Haltung. Und die Zimmerin aus Th\u00fcringen hat mir mehr \u00fcber Qualit\u00e4tsbewertung beigebracht als jedes Benchmark-Dokument.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bewertung-gemini\">Bewertung: Gemini 3 Pro <\/h2>\n\n\n\n<p>Gemini 3 Pro liefert den humorvollsten, bissigsten Text im Vergleich \u2013 fast schon zu nah am Essay, um noch als Landingpage durchzugehen. Regelkonform? Nein. Unterhaltsam? Absolut. Aber es gibt einen technischen Fehler, der im Benchmark sofort auff\u00e4llt.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img decoding=\"async\" width=\"1361\" height=\"988\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Gemini-KI-Modelle-HTML-Code.jpg\" alt=\"Vergleich: KI-Modelle HTML-Code - Gemini 3 Pro\" class=\"wp-image-12230\" style=\"border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;box-shadow:var(--wp--preset--shadow--natural)\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Gemini-KI-Modelle-HTML-Code.jpg 1361w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Gemini-KI-Modelle-HTML-Code-300x218.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Gemini-KI-Modelle-HTML-Code-1024x743.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Gemini-KI-Modelle-HTML-Code-768x558.jpg 768w\" sizes=\"(max-width: 1361px) 100vw, 1361px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Regeltreue: 1\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wie ChatGPT und Claude Sonnet nutzt auch Gemini 3 Pro das vollst\u00e4ndige HTML-Dokumentger\u00fcst  \u2013 das ist der erste Regelbruch, den alle drei Modelle gemeinsam haben.<\/li>\n\n\n\n<li>Der zweite, schwerere Regelbruch: Das <code>&lt;nav<\/code>&gt;-Element hat <strong>keine \u00dcberschrift<\/strong>. Mein Prompt verlangte ein Inhaltsverzeichnis als <code>nav<\/code> \u2013 aber die HTML5-Spezifikation und Best Practices empfehlen, dass <code>nav<\/code>-Bereiche eine \u00dcberschrift bekommen sollten, um die Struktur klar zu machen. Zwar ist es kein Konformit\u00e4tsfehler, ein <code>nav<\/code> ohne Heading zu haben, aber es ist eine verpasste Chance f\u00fcr Barrierefreiheit und semantische Klarheit. <\/li>\n\n\n\n<li>Zus\u00e4tzlich: Am Ende des Dokuments tauchen zwei Abs\u00e4tze auf, die Inline-Quellenangaben im Stil und enthalten \u2013 das ist kein HTML-Attribut, sondern Flie\u00dftext, der versucht, Quellen zu simulieren. Das wirkt wie ein Metakommentar, den das Modell nicht aus dem Output entfernt hat.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Struktur: 3\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die \u00dcberschriftenhierarchie ist <em>fast<\/em> sauber: ein <code>h1<\/code>, dann <code>h2<\/code>-Abschnitte, darunter <code>h3<\/code> und vereinzelt <code>h4<\/code> (z.B. im FAQ-Block). Keine Ebenen werden \u00fcbersprungen \u2013 das ist gut. <\/li>\n\n\n\n<li>Abzug gibt es daf\u00fcr, dass der letzte Abschnitt extrem viel auf einmal packt: Kritik, Mythen, Symbol <em>und<\/em> FAQ landen unter einem einzigen <code>h2<\/code>. Das macht die Seite schwerer navigierbar, weil das Inhaltsverzeichnis diesen Block nicht weiter aufschl\u00fcsselt \u2013 und genau das w\u00e4re bei einem so dichten Abschnitt hilfreich gewesen.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation: 3\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Das <code>&lt;nav<\/code>&gt;-Element ist vorhanden, die Sprungmarken funktionieren, und die IDs sind kurz und sprechend.<br>Abzug wegen der fehlenden \u00dcberschrift im <code>nav<\/code>.<\/li>\n\n\n\n<li>Weiterer Abzug: Die letzten beiden Abs\u00e4tze mit den Inline-Quellenangaben (, ) wirken wie ein nicht entfernter Metakommentar \u2013 das ist kein funktionales HTML-Element, sondern ein \u00dcberbleibsel aus dem Denkprozess des Modells.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Gemini-Test-KI-Modell-HTML-Code-Seite-1024x768.jpg\" alt=\"Test HTML-Code als Seite beim Vergleich der KI-Modell: Gemini\" class=\"wp-image-12252\" style=\"border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:var(--wp--preset--shadow--natural)\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Gemini-Test-KI-Modell-HTML-Code-Seite-1024x768.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Gemini-Test-KI-Modell-HTML-Code-Seite-300x225.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Gemini-Test-KI-Modell-HTML-Code-Seite-768x576.jpg 768w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Gemini-Test-KI-Modell-HTML-Code-Seite.jpg 1313w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Lesbarkeit: 5\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Das ist der H\u00f6hepunkt: Gemini 3 Pro trifft den satirisch-zynischen Ton perfekt. \u201eHolz hat mich zuerst angeschaut&#8220;, \u201eMietkaution wird sonst zu einem Mythos&#8220;, \u201eHR notiert: \u201aBitte Sicherheitsbriefing'&#8220; \u2013 das sind Formulierungen, die man freiwillig liest, nicht nur durchscannt. <\/li>\n\n\n\n<li>Die Satzl\u00e4ngen variieren stark, es gibt Punchlines, rhetorische Fragen, Einsch\u00fcbe, und der Text hat echte Textur. Wenn ich als Leserin nur den Inhalt bewerte, ist das der unterhaltsamste Output im Vergleich.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Fehlerverhalten: 3\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gemini 3 Pro erfindet fiktive Details (Marke <em>Klingenwerk Nord<\/em>), kennzeichnet diese aber durch den satirischen Rahmen als bewusste Fiktion. Das ist ok.<\/li>\n\n\n\n<li>Problematisch sind die beiden Abs\u00e4tze am Ende, die wie Quellenangaben aussehen.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Gesamt-Score<\/h3>\n\n\n\n<p><strong>15\/25 Punkten<\/strong> \u2013 stark in Lesbarkeit, aber deutliche Abz\u00fcge bei Regeltreue (fehlendes Heading im <code>nav<\/code>, Dokumentger\u00fcst au\u00dferhalb der Whitelist, Metakommentar-Abs\u00e4tze am Ende).<\/p>\n\n\n\n<p>Gemini 3 Pro schreibt den Text, den man am liebsten liest \u2013 aber es liefert auch den Code, den man am meisten nachbearbeiten muss. Und die Inline-Quellenangaben am Ende sind der Moment, in dem das Modell vergisst, dass es gerade HTML baut, nicht einen Essay mit Fu\u00dfnoten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bewertung-grok\">Bewertung: Grok 4.1<\/h2>\n\n\n\n<p>Grok 4.1 liefert den rebellischsten Output im Vergleich \u2013 voller Energie, mit klaren Regelverst\u00f6\u00dfen und einer Tabelle, die niemand bestellt hat. Das Modell interpretiert \u201eironisch&#8220; als \u201eMarketing-Turbo mit Augenzwinkern&#8220;, und das Ergebnis ist unterhaltsam, aber technisch problematisch.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img decoding=\"async\" width=\"1361\" height=\"988\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Grok-KI-Modelle-HTML-Code.jpg\" alt=\"Vergleich: KI-Modelle HTML-Code - Grok 4.1\" class=\"wp-image-12231\" style=\"border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;box-shadow:var(--wp--preset--shadow--natural)\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Grok-KI-Modelle-HTML-Code.jpg 1361w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Grok-KI-Modelle-HTML-Code-300x218.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Grok-KI-Modelle-HTML-Code-1024x743.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Grok-KI-Modelle-HTML-Code-768x558.jpg 768w\" sizes=\"(max-width: 1361px) 100vw, 1361px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Regeltreue: 0\/5<\/h3>\n\n\n\n<p>Hier wird es schmerzhaft. Grok 4.1 bricht gleich mehrere Kernregeln meines Prompts.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verbotene Elemente: Das Modell nutzt <code>&lt;section&gt;<\/code> mehrfach als Strukturelement \u2013 ein Tag, das in meiner Whitelist nicht erlaubt war.<\/li>\n\n\n\n<li>Tabelle: Das Modell baut eine <code>&lt;table&gt;<\/code> mit vollem Ged\u00f6hnse \u2013 allesamt nicht in der erlaubten Tag-Liste. Mein Prompt verlangte Listen, keine Tabellen.<\/li>\n\n\n\n<li>Dokumentger\u00fcst: Wie alle bisherigen Modelle nutzt auch Grok das vollst\u00e4ndige HTML-Ger\u00fcst.<\/li>\n\n\n\n<li>In einem strengen Benchmark ist das ein Totalausfall: Das Modell ignoriert die Whitelist komplett und baut stattdessen das, was es f\u00fcr \u201eeine gute Landingpage&#8220; h\u00e4lt. Praktisch ist das nachvollziehbar \u2013 <code>&lt;section&gt;<\/code> ist semantisch sinnvoll f\u00fcr Abschnitte \u2013 aber prompt-konform ist es nicht.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Struktur: 2\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die \u00dcberschriftenhierarchie ist inkonsistent: Es gibt ein <code>h1<\/code>, dann <code>h2<\/code>-\u00dcberschriften in den <code>&lt;section&gt;<\/code>-Bl\u00f6cken, und vereinzelt <code>h3<\/code>-Zwischen\u00fcberschriften. Keine Ebene wird \u00fcbersprungen \u2013 das ist positiv.<\/li>\n\n\n\n<li>Problematisch: Die <code>&lt;section&gt;<\/code>-Elemente mit <code>id<\/code>-Attributen. Die sind strukturell redundant, weil die IDs direkt an die <code>h2<\/code>-\u00dcberschriften h\u00e4tten geh\u00e4ngt werden k\u00f6nnen \u2013 so wie es mein Prompt vorsah.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation: 3\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Das <code>&lt;nav&gt;<\/code>-Element ist vorhanden, hat eine \u00dcberschrift und enth\u00e4lt eine <code>&lt;ul&gt;<\/code>-Liste mit Sprungmarken. Das ist strukturell sauber.<\/li>\n\n\n\n<li>Die IDs sind kurz und sprechend.<\/li>\n\n\n\n<li>Abzug: Die Sprungmarken verweisen auf die <code>&lt;section&gt;<\/code>-IDs statt auf <code>h2<\/code>-IDs, was technisch funktioniert, aber nicht der Prompt-Logik entspricht. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Grok-Test-KI-Modell-HTML-Code-Seite-1024x768.jpg\" alt=\"Test HTML-Code als Seite beim Vergleich der KI-Modell: Grok\" class=\"wp-image-12253\" style=\"border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:var(--wp--preset--shadow--natural)\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Grok-Test-KI-Modell-HTML-Code-Seite-1024x768.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Grok-Test-KI-Modell-HTML-Code-Seite-300x225.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Grok-Test-KI-Modell-HTML-Code-Seite-768x576.jpg 768w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Grok-Test-KI-Modell-HTML-Code-Seite.jpg 1313w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Lesbarkeit: 4\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Der Text ist energiegeladen, pointiert und unterhaltsam: \u201eBereit, dein Leben neu zu hauen?&#8220;, \u201eZu m\u00e4chtig f\u00fcr Weicheier&#8220;, \u201ePerformance-Kunst: Spalte Eier auf dem Kopf&#8220; \u2013 das sind Formulierungen, die Aufmerksamkeit erzeugen.<\/li>\n\n\n\n<li>Abzug gibt es f\u00fcr zwei Dinge: Erstens, der Ton kippt stellenweise ins reine Marketing-Hochglanz (\u201eSie ist eine Revolution in Edelstahl&#8220;, \u201eGodlike&#8220;), was zwar ironisch gemeint sein kann, aber die satirische Distanz verliert. <\/li>\n\n\n\n<li>Zweitens, die Fallbeispiele (\u201eHans aus Essen&#8220;, \u201eLena die Camperin&#8220;) sind sehr flach \u2013 sie funktionieren als Platzhalter, aber nicht als echte Charaktere.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Fehlerverhalten: 2\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Grok 4.1 erfindet fiktive Details (Marke <em>Schwinger &amp; S\u00f6hne<\/em>, Gewicht \u201eexakt 2000 Gramm \u2013 daher der Name&#8220;, \u201eseit 1999 ungeschlagen&#8220;), kennzeichnet diese aber nicht durchgehend als Fiktion oder Satire. Das ist grenzwertig, weil der Ton zwar \u00fcbertrieben ist, aber einzelne Aussagen wie echte Produktversprechen klingen k\u00f6nnten.<\/li>\n\n\n\n<li>Das gr\u00f6\u00dfte Fehlverhalten: Die Tabelle. Sie wird ohne Kontext oder Erkl\u00e4rung eingef\u00fcgt, und sie verletzt die Prompt-Regel \u201ekeine Tabellen, nur Listen&#8220;. Das ist kein Halluzinieren im klassischen Sinne, aber es ist ein Ignorieren der Aufgabenstellung.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Gesamt-Score<\/h3>\n\n\n\n<p><strong>11\/25 Punkten<\/strong> \u2013 schw\u00e4chste Leistung im Vergleich; massive Regelverst\u00f6\u00dfe, strukturelle Inkonsistenzen, aber daf\u00fcr ein energiegeladener, lesbarer Text.<\/p>\n\n\n\n<p>Grok 4.1 baut die Landingpage, die es selbst gern lesen w\u00fcrde \u2013 aber nicht die, die ich bestellt habe. Die Tabelle ist der Moment, in dem das Modell beschlie\u00dft: \u201eRegeln sind f\u00fcr andere, ich mache jetzt Design.&#8220;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bewertung-sonar\">Bewertung Sonar<\/h2>\n\n\n\n<p>Dieses Modell liefert die sauberste, konsequenteste Umsetzung meiner Whitelist\u2011Regeln \u2013 und gleichzeitig den stilistisch komplexesten, fast essayistischen Text. Der Output ist fachlich, ironisch und inhaltsstark, ohne die Tags \u00fcber die erlaubte Palette hinaus zu erweitern. Kurz: \u201eregelkonform und dennoch menschlich\u201c.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img decoding=\"async\" width=\"1361\" height=\"988\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Sonar-KI-Modelle-HTML-Code.jpg\" alt=\"Vergleich: KI-Modelle HTML-Code - Sonar\" class=\"wp-image-12232\" style=\"border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;box-shadow:var(--wp--preset--shadow--natural)\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Sonar-KI-Modelle-HTML-Code.jpg 1361w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Sonar-KI-Modelle-HTML-Code-300x218.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Sonar-KI-Modelle-HTML-Code-1024x743.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Sonar-KI-Modelle-HTML-Code-768x558.jpg 768w\" sizes=\"(max-width: 1361px) 100vw, 1361px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Regeltreue: 4\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sonar nutzt kein <code>section<\/code>, keine Tabellen, keine zus\u00e4tzlichen Struktur\u2011 oder andere Layout\u2011Elemente, die nicht explizit erlaubt waren \u2013 das ist die sauberste Einhaltung aller bisher getesteten Modelle.<\/li>\n\n\n\n<li>Negativ und daher ein kleiner Abzug: Das Modell nutzt die unerlaubten HTML\u2011Wrapper\u2011Elemente \u2013 wie alle anderen Modelle auch.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Struktur: 5\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ein <code>h1<\/code> als Titel der Seite. Darunter <code>h2<\/code>-Abschnitte und in jedem Abschnitt <code>h3<\/code>&#8211; und teilweise <code>h4<\/code>-Unter\u00fcberschriften, klar gegliedert und hierarchisch sauber.<\/li>\n\n\n\n<li>Keine Spr\u00fcnge, keine fehlenden Abschnitte, keine unn\u00f6tigen Verschachtelungen \u2013 das ist eine fast musterg\u00fcltige, f\u00fcr Maschinen und Menschen gleicherma\u00dfen gut verst\u00e4ndliche \u00dcberschriftenstruktur. <\/li>\n\n\n\n<li>Das Inhaltsverzeichnis sitzt sauber in einem <code>nav<\/code>-Block, enth\u00e4lt eine <code>ul<\/code>-Liste und verlinkt per Anker auf die einzelnen <code>h2<\/code>-Abschnitte. <\/li>\n\n\n\n<li>Die IDs sind kurz, sprechend und konsequent gebaut.<\/li>\n\n\n\n<li>Der einzige kleine Punkt zur Abwertung: Das Inhaltsverzeichnis hat keine eigene \u00dcberschrift; das ist zwar nicht streng zwingend, aber eine klare \u00dcberschrift w\u00e4re ein kleines Zugest\u00e4ndnis an die Struktur.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Sonar-Test-KI-Modell-HTML-Code-Seite-1024x768.jpg\" alt=\"Test HTML-Code als Seite beim Vergleich der KI-Modell: Sonar\" class=\"wp-image-12254\" style=\"border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:var(--wp--preset--shadow--natural)\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Sonar-Test-KI-Modell-HTML-Code-Seite-1024x768.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Sonar-Test-KI-Modell-HTML-Code-Seite-300x225.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Sonar-Test-KI-Modell-HTML-Code-Seite-768x576.jpg 768w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/Sonar-Test-KI-Modell-HTML-Code-Seite.jpg 1313w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Lesbarkeit: 5\/5<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Der Ton ist durchg\u00e4ngig ironisch, philosophisch, leicht zynisch, mit langen, komplexen Gedankeng\u00e4ngen, die aber klar und nachvollziehbar bleiben.<\/li>\n\n\n\n<li>Es gibt klare Abs\u00e4tze, kurze Einsch\u00fcbe, sprachliche Spr\u00fcnge, rhetorische Fragen und eine starke Metaphorik, die dem Text Charakter verleiht.<\/li>\n\n\n\n<li>Die Struktur ist klar, aber nicht flach \u2013 es gibt Vorteile, Nachteile, Fallbeispiele, Metaphern, Kritik und Mythen, alle in einer schl\u00fcssigen, logischen Abfolge.<\/li>\n\n\n\n<li>Lesbarkeit im Sinne von \u201eman kann\u2019s lesen\u201c und \u201eman will\u2019s lesen\u201c \u2013 das ist voll erf\u00fcllt.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Fehlerverhalten: 5\/5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sonar bleibt klar im Rahmen der Fiktionalit\u00e4t: Die Axt 2000 wird als Marketing\u2011Ph\u00e4nomen, als Symbol, als Ironie\u2011Projekt inszeniert, nicht als echtes, verifizierbares Produkt. Es werden keine falschen Studien, keine Zahlen und keine seri\u00f6se Studie erfunden, die man sp\u00e4ter als \u201eHalluzination\u201c entlarven k\u00f6nnte.<\/li>\n\n\n\n<li>Es reflektiert fast selbstironisch, dass es sich um eine \u00fcbertriebene Marketinggeschichte handelt, und benennt gleichzeitig, dass es ein \u201enormales Werkzeug\u201c mit \u201eStorytelling\u201c ist. Das ist keine Ausrede, sondern ein bewusster Rahmen, in den es sich selbst stellt.<\/li>\n\n\n\n<li>Keine Tableau-Halluzinationen, keine zus\u00e4tzlichen Docs, keine Metakommentare am Ende \u2013 nur ein sauberer, in sich geschlossener Text, der sich an die Regeln h\u00e4lt und dennoch frei denkt.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Gesamt-Score<\/h3>\n\n\n\n<p><strong>23\/25 Punkten<\/strong> \u2013 eine der st\u00e4rksten Leistungen im Vergleich: tadellos in Struktur, Navigation und Lesbarkeit, fast vollst\u00e4ndig regelkonform, nur ein kleiner Abzug f\u00fcr die fehlende <code>h2<\/code>-\u00dcberschrift im Inhaltsverzeichnis und dennoch nicht ganz perfekt beim Dokumentger\u00fcst.<br>Sonar versteht nicht nur, wie HTML zu bauen ist, sondern auch wie man schreibt \u2013 und liefert eine Seite, die ich allenfalls noch kleinredigieren muss. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ergebnisse\">Ergebnisse<\/h2>\n\n\n\n<p>Wenn ihr die Scores nebeneinander legt, zeigt sich ein klares Muster: Getrennt werden die Modelle jeweils danach, ob sie lieber Regel\u2011Anwalt oder Storyteller sein wollen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sonar (23\/25)<\/strong> ist das sauberste, konsequenteste KI-Modell. Es h\u00e4lt sich fast exakt an die Tag\u2011Whitelist, baut eine solide Hierarchie auf, sorgt f\u00fcr klare Navigation und liefert einen tiefen, fast essayistischen Text \u2013 ohne merkliche Halluzinationen. Wenn ihr \u201ewartbar, sauber, regelkonform\u201c wollt, seid ihr mit Sonar am besten bedient.<\/li>\n\n\n\n<li><strong>Claude Sonnet 4.6 (21\/25)<\/strong> ist der handwerklich st\u00e4rkste Allrounder: inhaltlich mutig, mit klaren Abs\u00e4tzen, sauberer Struktur und elegantem Fehlerverhalten. Das Modell unterscheidet zwar keine Regeln weg, aber es macht aus der Regelbrechung ein Feature, nicht eine Ausrede. Ideal, wenn ihr stilistische Sicherheit und strategische Tiefe braucht.<\/li>\n\n\n\n<li><strong>ChatGPT\u20115.2 (19\/25)<\/strong> ist der produktionsstarrste Output: eine komplette, sofort nutzbare One\u2011Page\u2011Landingpage, mit gro\u00dfartiger Lesbarkeit, klarer Struktur, aber fehlender Tag\u2011Whitelist\u2011Liebe. Wenn Mindestaufwand an Nachbearbeitung euer Ziel ist: Hier braucht ihr daf\u00fcr nur eine kurze CSS\u2011Layer draufhauen.<\/li>\n\n\n\n<li><strong>Gemini 3 Pro (15\/25)<\/strong> ist die Text\u2011Poetin: der unterhaltsamste Output, aber mit technischen Fehlern (z.B. fehlende \u00dcberschrift im <em>nav<\/em>, Reste eines Metakommentars am Ende). Wenn ihr Content f\u00fcrs Lesevergn\u00fcgen sucht und den Code ohnehin sauberstellt, lohnt sich der Blick auf Gemini f\u00fcr Inspiration.<\/li>\n\n\n\n<li><strong>Grok 4.1 (11\/25)<\/strong> ist der Chaot: voller Energie, aber mit massiven Regelverst\u00f6\u00dfen. Grok will Erfolg im Stil, nicht im Reglement \u2013 perfekt, wenn ihr seine Satire nutzt, das HTML aber selbst neu strukturiert.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-b1b988c3 wp-block-group-is-layout-constrained\" style=\"border-color:#787878;border-width:1px;border-radius:25px;margin-top:2em;margin-bottom:0;padding-right:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-text-align-left is-style-default\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:0;padding-bottom:1em;padding-left:var(--wp--preset--spacing--40);font-size:clamp(0.929em, 0.929rem + ((1vw - 0.2em) * 0.739), 1.4em);\">Mehr zum Thema K\u00fcnstliche Intelligenz<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-59c06ac7 wp-block-columns-is-layout-flex\" style=\"border-style:none;border-width:0px;border-radius:0px;margin-top:0;margin-bottom:0;padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/code78.de\/blog\/ki-modelle-vergleich-2026-der-grosse-test\/\"><img decoding=\"async\" width=\"1100\" height=\"720\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2025\/12\/KI-Modelle-Vergleich.jpg\" alt=\"KI Modelle Vergleich\" class=\"wp-image-5800\" style=\"object-fit:cover\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2025\/12\/KI-Modelle-Vergleich.jpg 1100w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2025\/12\/KI-Modelle-Vergleich-300x196.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2025\/12\/KI-Modelle-Vergleich-1024x670.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2025\/12\/KI-Modelle-Vergleich-768x503.jpg 768w\" sizes=\"(max-width: 1100px) 100vw, 1100px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center\" style=\"margin-bottom:1em;font-size:clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.196), 1em);\"><a href=\"https:\/\/code78.de\/blog\/ki-modelle-vergleich-2026-der-grosse-test\/\" class=\"ek-link\">KI Modelle Vergleich 2026: Der gro\u00dfe Test<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/code78.de\/blog\/ki-prompts-fuer-seo\/\"><img decoding=\"async\" width=\"1100\" height=\"720\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/KI-Prompts-SEO.jpg\" alt=\"KI-Prompts f\u00fcr SEO : 20 Prompts zum Kopieren\" class=\"wp-image-11085\" style=\"object-fit:cover\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/KI-Prompts-SEO.jpg 1100w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/KI-Prompts-SEO-300x196.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/KI-Prompts-SEO-1024x670.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/02\/KI-Prompts-SEO-768x503.jpg 768w\" sizes=\"(max-width: 1100px) 100vw, 1100px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center\" style=\"margin-bottom:1em;font-size:clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.196), 1em);\"><a href=\"https:\/\/code78.de\/blog\/ki-prompts-fuer-seo\/\" class=\"ek-link\">KI-Prompts f\u00fcr SEO: 20 strukturierte Befehle f\u00fcr Content, Keywords und Schema<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">M\u00f6gliche Fragen, klare Antworten <\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Was ist ein Modellvergleich?<\/h3>\n\n\n\n<p>Ein Test, bei dem verschiedene KI-Modelle denselben Prompt bekommen, damit Unterschiede im Output sichtbar werden.<br>Ich habe die Modelle ausgew\u00e4hlt, die Perplexity in der eigenen Hilfe als \u201ePro Search Models\u201c auflistet (ChatGPT\u20115.2, Claude Sonnet 4.6, Gemini 3 Pro, Grok 4.1, Sonar). Das ist f\u00fcr viele Nutzerinnen und Nutzer die realistische Auswahl, wenn sie in Perplexity HTML-Seiten bauen wollen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Warum gleiche Prompts?<\/h3>\n\n\n\n<p>Damit wir nicht \u201ewer den besseren Prompt kann\u201c testen, sondern wirklich das Verhalten der Modelle messen. Wenn alle dieselbe Aufgabe bekommen, k\u00f6nnen wir sauber unterscheiden, wer eher regelstreng arbeitet \u2013 und wer eher kreativ \u201emitschreibt\u201c.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Warum semantisches HTML?<\/h3>\n\n\n\n<p>Semantisches HTML nutzt Elemente nach ihrer Bedeutung (z.B. nav f\u00fcr Navigation, klare h1\u2013h4-Hierarchien). Das macht die Seite f\u00fcr Menschen, Suchmaschinen und Assistenztechnologien verst\u00e4ndlicher und ist gerade bei Landingpages ein entscheidender Qualit\u00e4tsfaktor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Was bedeutet \u201eFehlerverhalten\u201c in der Bewertungskategorie?<\/h3>\n\n\n\n<p>Damit meine ich, wie das Modell mit Unsicherheit, Fehlern oder Grenzen umgeht: Erkl\u00e4rt es ehrlich, was es nicht kann? Oder erfindet es \u00fcberzeugt Dinge? Ein Modell, das klar Restriktionen benennt oder sich selbstironisch im Rahmen einer Fiktion bewegt, punktet hier.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Warum hat Sonar in diesem Test so stark abgeschnitten?<\/h3>\n\n\n\n<p>Sonar h\u00e4lt sich fast perfekt an die Tag\u2011Whitelist, baut eine saubere Hierarchie, liefert ein durchdachtes Inhaltsverzeichnis und einen sehr klaren, ironischen Text, ohne typische Halluzinationen abzuliefern.Die HTML-Seite braucht kaum technische Nacharbeit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Kann ich diesen Test als offizielle Benchmark lesen?<\/h3>\n\n\n\n<p>Nein. Dein Test ist ein praktischer, konkreter Use\u2011Case\u2011Vergleich f\u00fcr euer eigenes Workflow\u2011Szenario (HTML\u2011Prototyping, Struktur, Lesbarkeit), nicht eine wissenschaftlich abgesicherte Benchmark. Er ist daf\u00fcr gedacht, zu zeigen, welches Modell wie mit deinen Prompt\u2011Regeln umgeht.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fazit\">Fazit zum Vergleich KI-Modelle HTML-Code <\/h2>\n\n\n\n<p>Am Ende des Tages entscheidet der Prompt, wie pingelig das Spiel laufen soll \u2013 ein strenges Whitelist\u2011Regime macht aus guten KI\u2011Modellen erst pr\u00fcfbare Werkzeuge. Aber eins bleibt: Die Axt 2000 bleibt \u00fcbertrieben gefeiert, die Modelle bleiben unperfekt \u2013 und ihr seid die Person, die im Code entscheidet, was bleibt und was gespalten wird.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n  <div class=\"related-post grid\">\r\n        <div class=\"headline\">\u00c4hnliche Beitr\u00e4ge<\/div>\r\n    <div class=\"post-list \">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Instagram Test-Reels: Trial Reels f\u00fcr Nicht-Follows strategisch nutzen\" href=\"https:\/\/code78.de\/blog\/instagram-test-reels\/\">\r\n\r\n      <img decoding=\"async\" width=\"1100\" height=\"720\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/01\/Instagram-Test-Reels-Trial-Reels.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Instagram Test-Reels: Smartphone zeigt Instagram-Profil von minus78\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/01\/Instagram-Test-Reels-Trial-Reels.jpg 1100w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/01\/Instagram-Test-Reels-Trial-Reels-300x196.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/01\/Instagram-Test-Reels-Trial-Reels-1024x670.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/01\/Instagram-Test-Reels-Trial-Reels-768x503.jpg 768w\" sizes=\"(max-width: 1100px) 100vw, 1100px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Instagram Test-Reels: Trial Reels f\u00fcr Nicht-Follows strategisch nutzen\" href=\"https:\/\/code78.de\/blog\/instagram-test-reels\/\">\r\n        Instagram Test-Reels: Trial Reels f\u00fcr Nicht-Follows strategisch nutzen  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Gemini Musik erstellen: So nutzt ihr die neue Lyria 3 Funktion\" href=\"https:\/\/code78.de\/blog\/gemini-musik-erstellen\/\">\r\n\r\n      <img decoding=\"async\" width=\"1100\" height=\"720\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/04\/Gemini-Musik-erstellen.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Mit Google Gemini Musik erstellen\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/04\/Gemini-Musik-erstellen.jpg 1100w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/04\/Gemini-Musik-erstellen-300x196.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/04\/Gemini-Musik-erstellen-1024x670.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/04\/Gemini-Musik-erstellen-768x503.jpg 768w\" sizes=\"(max-width: 1100px) 100vw, 1100px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Gemini Musik erstellen: So nutzt ihr die neue Lyria 3 Funktion\" href=\"https:\/\/code78.de\/blog\/gemini-musik-erstellen\/\">\r\n        Gemini Musik erstellen: So nutzt ihr die neue Lyria 3 Funktion  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Defluencer*innen: Wenn Nein-Sagen zum Business wird\" href=\"https:\/\/code78.de\/blog\/influencer-defluencer\/\">\r\n\r\n      <img decoding=\"async\" width=\"1100\" height=\"720\" src=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/01\/Defluencer.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Defluencer: H\u00f6rt auf zu kaufen!\" srcset=\"https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/01\/Defluencer.jpg 1100w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/01\/Defluencer-300x196.jpg 300w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/01\/Defluencer-1024x670.jpg 1024w, https:\/\/code78.de\/blog\/wp-content\/uploads\/2026\/01\/Defluencer-768x503.jpg 768w\" sizes=\"(max-width: 1100px) 100vw, 1100px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Defluencer*innen: Wenn Nein-Sagen zum Business wird\" href=\"https:\/\/code78.de\/blog\/influencer-defluencer\/\">\r\n        Defluencer*innen: Wenn Nein-Sagen zum Business wird  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 0px 1%;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 1.1em !important;\r\n      color: #787878 !important;\r\n          }\r\n\r\n    .related-post .post-list .item .post_thumb {\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      color: #3f3f3f;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 0.9em;\r\n      color: #3f3f3f;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    @media only screen and (min-width: 1024px) {\r\n      .related-post .post-list .item {\r\n        width: 30%;\r\n      }\r\n    }\r\n\r\n    @media only screen and (min-width: 768px) and (max-width: 1023px) {\r\n      .related-post .post-list .item {\r\n        width: 45%;\r\n      }\r\n    }\r\n\r\n    @media only screen and (min-width: 0px) and (max-width: 767px) {\r\n      .related-post .post-list .item {\r\n        width: 45%;\r\n      }\r\n    }\r\n\r\n      <\/style>\r\n    <\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Gleicher Prompt, frischer Thread, kein Nachfassen: Wer baut sauberes HTML \u2013 und wer spielt lieber \u201ekreatives Storytelling\u201c mit kaputter Hierarchie? Ich habe ChatGPT, Claude, Gemini, Grok und Sonar gegeneinander laufen lassen.<\/p>\n","protected":false},"author":1,"featured_media":12236,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137],"tags":[621,623,622],"class_list":["post-12215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kuenstliche-intelligenz-ki","tag-html-mit-ki-erstellen-test","tag-ki-modelle-html-code","tag-vergleich-ki-modelle-html"],"acf":[],"_links":{"self":[{"href":"https:\/\/code78.de\/blog\/wp-json\/wp\/v2\/posts\/12215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code78.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code78.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code78.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code78.de\/blog\/wp-json\/wp\/v2\/comments?post=12215"}],"version-history":[{"count":0,"href":"https:\/\/code78.de\/blog\/wp-json\/wp\/v2\/posts\/12215\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code78.de\/blog\/wp-json\/wp\/v2\/media\/12236"}],"wp:attachment":[{"href":"https:\/\/code78.de\/blog\/wp-json\/wp\/v2\/media?parent=12215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code78.de\/blog\/wp-json\/wp\/v2\/categories?post=12215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code78.de\/blog\/wp-json\/wp\/v2\/tags?post=12215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}