SiteForge: KI-Websites, die wirklich hochwertig aussehen

Jeder KI-Website-Baukasten hat dasselbe grundlegende Problem. Die KI macht alles in einem Durchgang – Design, Layout, Typografie, Farben, Abstände, Responsivität – und hofft, dass alles gut wird. Manchmal klappt das. Öfter entsteht etwas, das nach „KI“ aussieht: vertraute Layouts, sichere Schriften, vorhersehbare Farbpaletten. Lege zehn davon nebeneinander, und sie verschwimmen zu einer einzigen.

Wir wollten das von Grund auf lösen. Heute teilen wir die größte Änderung, die wir je an SiteDrop vorgenommen haben: SiteForge – eine eigens gebaute Website-Compiler-Engine, die trennt, was KI gut kann, von dem, was sie nicht gut kann, und Websites erzeugt, die wirklich individuell aussehen, nicht nach Vorlage.

Warum KI-Websites aus rohem HTML an eine Grenze stoßen

Wenn ChatGPT, Claude oder Gemini eine Website erzeugt, schreibt es rohes HTML und CSS. Das heißt: Die KI muss gleichzeitig Grafikdesignerin, Typografin, Farbexpertin, Barrierefreiheits-Expertin und Frontend-Entwicklerin sein – alles in einer einzigen Antwort.

Die Ergebnisse sind für das, was sie sind, beeindruckend. Aber sie haben eine harte Obergrenze:

• Typografie ist Raten. Die KI wählt Schriften, die sie aus den Trainingsdaten kennt. Es gibt keine modulare Schriftskala, keine berechnete Laufweite, keine Gewichtsstufen. Überschriften und Fließtext sehen einfach „okay“ aus.
• Farbpaletten bleiben an der Oberfläche. Du bekommst eine Primär- und eine Akzentfarbe – aber keine systematisch abgeleiteten Flächenfarben, dunklen Bänder, kontrastgeprüften gedämpften Töne oder Zustandsstufen für Interaktionen.
• Layouts wiederholen sich. Die KI greift auf dieselben sicheren Muster zurück, die sie tausendfach gesehen hat. Hero → Features → Kundenstimmen → CTA. Jedes Mal.
• Responsives Design ist fragil. Media Queries werden geraten, nicht berechnet. Auf dem Handy geht Dinge schief, die du erst nach dem Veröffentlichen entdeckst.

Das sind keine Fehler der KI – es sind Fehler, die entstehen, wenn man von der KI verlangt, alles auf einmal in einem Format (rohes HTML) zu erledigen, das kein Sicherheitsnetz hat.

Der SiteForge-Ansatz: Ein Compiler, kein Generator

SiteForge funktioniert grundlegend anders. Statt die KI HTML schreiben zu lassen, teilen wir die Arbeit in zwei Ebenen:

1. Die KI trifft die kreativen Entscheidungen. Sie wählt die Struktur (welche Bereiche in welcher Reihenfolge), die Markenpalette, die Schriftkombinationen, die Texte und die Bildrichtung. Sie gibt diese als strukturierte Spezifikation aus – eine SiteSpec –, nicht als rohes Markup.
2. Der Compiler übernimmt die Technik. Eine deterministische Engine liest die SiteSpec und erzeugt pixelgenaues HTML mit garantierten Kontrastverhältnissen, berechneten Schriftskalen, sauberen responsiven Breakpoints, fließendem Wechsel der Flächen und funktionierenden Navigations- Ankern. Jedes Mal.

Stell es dir vor wie den Compiler einer Programmiersprache. Der Programmierer schreibt Code auf hoher Ebene (die kreative Absicht). Der Compiler erzeugt optimierten Maschinencode (die ausgefeilte Website). Der Programmierer muss sich nicht um Speicher oder CPU-Register kümmern. Das erledigt der Compiler.

Was dabei herauskommt

Der Unterschied ist nicht subtil. Mit SiteForge gebaute Websites sehen aus, als hätte jeweils eine andere Agentur sie gestaltet – weil das System versteht, was jede Branche und jeder Stil braucht.

• Kuratierte Schriftkombinationen. Nicht „such dir eine Google- Schrift aus“. Wir haben eine Bibliothek sorgfältig getesteter Display-/Fließtext- Paare gebaut – Playfair Display mit Inter für editoriale Anwaltskanzleien, Bebas Neue mit Instrument Serif für stimmungsvolle Barbershops, Space Grotesk mit DM Sans für moderne SaaS-Produkte – jeweils mit modularer Skala, Laufweiten- Stufen, Gewichtssystem und Zeilenhöhen-Architektur.
• Systematische Farbpaletten. Jede Palette ist ein vollständiges System im Radix-Stil: Hintergrund, Fläche, Text, gedämpft, blass, Linie, Akzent (mit Hover- und Aktiv-Zuständen), Ergänzungsfarbe, dunkle Bänder und Chip-Hintergründe. Alle auf WCAG AA kontrastgeprüft.
• Design-Behandlungen. Die KI wählt eine visuelle Behandlung – Verläufe, Schatten, Eckenradien, Flächentexturen (Körnung, Punkte, Raster), Trennerstile (Winkel, Kurve, Bogen), Bildrahmung – und der Compiler wendet sie einheitlich auf jeden Bereich an.
• Rhythmus der Flächen. Keine zwei benachbarten Bereiche haben denselben Hintergrund. Der Compiler wechselt die Flächen automatisch ab, um visuell Luft zu schaffen, egal in welcher Reihenfolge die KI die Blöcke angeordnet hat.
• Garantiert funktionierende Navigation. Jeder Anker-Link führt ans Ziel. Tote Links werden automatisch bereinigt. Die Navigation wird ergänzt, wenn die KI sie weglässt. Das läuft deterministisch ab – keine kaputten „Scroll ins Nichts“-CTAs.

Über 20 eigens gebaute Blocktypen

SiteForge ist keine Vorlage mit variablem Text. Die Engine enthält eine reiche Bibliothek an Blocktypen, aus denen die KI zusammensetzen kann:

• Hero-Varianten – Vollbild, rechtes Panel, linkes Panel, geteilter Hintergrund, Collage, mit Layout-Steuerung für Medienposition, Textausrichtung, Platzierung von Kennzahlen und Tag-Karten.
• Inhaltsblöcke – Feature-Raster, Icon-Raster, wechselnde Zeilen, Kennzahlen-Zähler, Inhalte in Tabs, Prozess-/Zeitleisten- Schritte, Teamkarten, Projektgalerien.
• Soziale Bewährtheit – Testimonial-Karussells, eingebettete Social-Posts, Logoleisten, Vorher/Nachher-Slider, Fallstudien-Blöcke.
• Conversion – Preisstufen, Buchungs-CTAs, abschließende CTAs, FAQ-Akkordeons, Kontaktformulare mit Kartenintegration.

Jeder Blocktyp hat sein eigenes CSS, sein eigenes responsives Verhalten und seine eigene Kontrast- und Abstandslogik – alles deterministisch, alles getestet.

Die Playbook-Architektur

Erweiterbar wird das durch das Playbook-Muster. Der Compiler ist eine reine Funktion eines Playbooks – tausche das Playbook aus, und du bekommst eine andere Designsprache mit derselben Engine.

Ein Playbook bündelt:

• Eine Grammatik – das kreative Briefing, dem die KI folgt.
• Ein selbstdokumentierendes Schema – die strukturierte Spezifikation, über die die KI ausgibt (es bringt der KI die Sprache bei und schränkt gleichzeitig die Ausgabe ein).
• Block-Renderer – die Markup-Funktionen für jeden Bereichstyp.
• Basis-CSS – die Design-System-Tokens, erzeugt aus der aufgelösten Palette und Schriftkombination.
• Einen Design-Resolver – er übersetzt die kreativen Entscheidungen der KI in Engine-fertige Tokens (Kontraststufen, Gewichtsstufen, responsive Clamps).

Das Ergebnis: Die KI schreibt ein paar Zeilen kreativer Vorgabe. Die Engine erzeugt eine Website, für die eine Designagentur Tausende verlangen würde.

Was das für dich bedeutet

Wenn du den Erstellungsablauf von SiteDrop nutzt – Fragen zu deinem Unternehmen beantworten, einen Stil wählen –, werden deine Websites jetzt mit SiteForge gebaut. Die Erfahrung bleibt gleich (Fragen beantworten, Website erhalten). Die Qualität macht einen Sprung.

• Hochwertige Typografie, die wirklich einem Designsystem folgt, nicht zufälligen Schriftwahlen.
• Farbpaletten mit Tiefe – Flächen, Bänder, Hover- Zustände, Kontrastgarantien.
• Layouts, die atmen – saubere Abstände, wechselnde Flächen, visuelle Hierarchie.
• Von Anfang an mobil perfekt – das responsive Verhalten ist in die Engine eingebaut und wird nicht der Vermutung der KI überlassen.
• Funktionierende Kontaktformulare – Kontaktdaten werden deterministisch normalisiert (E.164-Telefonnummern, Anzeigeformen der Beschriftungen, Adressformatierung).

Das HTML gehört weiterhin dir. Du kannst es weiterhin herunterladen, bearbeiten oder überall hosten. Der Unterschied ist, dass das, was du direkt bekommst, deutlich besser ist.

Das Fazit

KI ist großartig bei kreativen Entscheidungen – den richtigen Stil, die richtigen Texte, die richtige Struktur für ein Unternehmen zu wählen. Bei der präzisen Technik, die diese Entscheidungen in eine ausgefeilte, barrierefreie, responsive Website verwandelt, ist sie weniger zuverlässig.

SiteForge lässt die KI tun, was sie gut kann, und erledigt den Rest mit einer deterministischen Engine, die Qualität garantiert. Das Ergebnis: KI-Websites, die wirklich hochwertig aussehen – nicht „nach KI“.