Vom Wireframe zur Oberfläche mit KI

Sobald Struktur und Inhalte stehen, ist die Übersetzung in eine Oberfläche der Schritt, bei dem KI am meisten Zeit spart. Genau dort passiert aber auch der häufigste Fehler: Das Modell gestaltet nicht nur, sondern baut nebenbei die Struktur um – und niemand merkt es, weil das Ergebnis gut aussieht.

1. Der Ablauf

Der vierte Schritt enthält den entscheidenden Satz: „Behalte Aufbau und Reihenfolge unverändert bei.“ Ohne ihn wird aus einer durchdachten Anordnung eine übliche – die Preise wandern nach unten, die Referenzen nach oben, und die Entscheidungen aus drei Modulen Arbeit sind stillschweigend überschrieben.

2. Vorgaben schlagen Anweisungen

Wenn Sie Ihr Token-Verzeichnis mitgeben, arbeitet das Modell darin. Wenn nicht, erfindet es ein eigenes – meist ein gefälliges, das mit Ihrer Marke nichts zu tun hat. Geben Sie deshalb die elf Werte aus der Token-Lektion als Liste mit, mit Namen und Werten, und verlangen Sie, dass ausschließlich diese verwendet werden.

Denselben Effekt hat eine bestehende Seite als Vorlage: „Verwende dieselben Farben, Schriften und Abstände wie auf der angehängten Seite.“ Das ist oft schneller, als Vorgaben aufzuschreiben, und führt zu einem Ergebnis, das sich sofort einfügt.

3. Die Prüfliste danach

Diese sechs Punkte dauern zusammen fünf Minuten und fangen den größten Teil der Probleme ab. Besonders die vierte Zeile ist verlässlich: Zustände werden praktisch nie mitgeliefert, wenn man sie nicht ausdrücklich verlangt.

4. Erfundene Inhalte

Ein eigener Warnhinweis gilt für Inhalte. Erzeugte Oberflächen enthalten regelmäßig Zahlen, Referenzen und Kundenstimmen, die plausibel aussehen und frei erfunden sind. Wenn so etwas unbemerkt in eine Abstimmung oder gar auf eine Seite gelangt, ist das nicht nur peinlich, sondern bei Werbeaussagen auch rechtlich heikel.

Der einfachste Schutz: Verlangen Sie ausdrücklich Platzhalter in einer erkennbaren Form – etwa in eckigen Klammern. Dann sieht jeder sofort, was noch zu füllen ist.

5. Das Ergebnis zurückführen

Ein erzeugter Entwurf ist ein Vorschlag, kein Bestandteil Ihres Systems. Übernehmen Sie daraus gezielt: Was gut ist, wird als Komponente aufgenommen und bekommt seine Zustände; was nur hübsch ist, bleibt draußen. Ohne diesen Schritt entsteht ein Flickenteppich aus erzeugten Einzelseiten, die untereinander nicht zusammenpassen – der häufigste Zustand von Websites, die schnell mit KI gebaut wurden.

6. Häufige Fragen

Funktioniert das auch aus einer Skizze auf Papier? Ja, ein Foto genügt. Beschreiben Sie dazu, was die Kästen bedeuten – bei handgezeichneten Skizzen ist die Deutung sonst Glückssache.

Was, wenn das Ergebnis besser ist als mein Wireframe? Dann prüfen Sie, warum. Wenn es an der Gestaltung liegt: übernehmen. Wenn es an einer strukturellen Änderung liegt, gehen Sie zurück ins Konzept und entscheiden Sie dort – nicht nebenbei im Entwurf.

Kann man so eine ganze Website gestalten? Muster für Muster ja. Seite für Seite nein, aus demselben Grund wie in der Übergabe-Lektion: Es entsteht keine Einheitlichkeit.

7. Übung zum Selbermachen

Nehmen Sie ein Wireframe aus Modul 5 und lassen Sie es zweimal übersetzen: einmal ohne Vorgaben, einmal mit Ihrem Token-Verzeichnis und den Regeln aus Schritt 3. Prüfen Sie beide Ergebnisse mit der Liste aus Tabelle 4.1 und zählen Sie die Befunde. Der Unterschied zeigt, wie viel Arbeit in der Vorbereitung steckt – und wie viel sie spart.

Stand: September 2026. Kursmaterial der Klarwerk Akademie. Methoden und Werkzeuge der Konzeption entwickeln sich weiter – die Grundprinzipien nutzerzentrierter Gestaltung bleiben.