Eine Website mit KI zu gestalten heißt heute meistens: Ein KI-Agent schreibt HTML und CSS, und du siehst das Ergebnis sofort im Browser. Der Umweg über eine gezeichnete Vorlage in Figma, die danach jemand nachbaut, fällt dabei weg. Das spart Zeit, aber nur, wenn vorher klar ist, was gebaut werden soll. Ohne diese Klarheit liefert die KI zuverlässig das, was sie am häufigsten gesehen hat: eine Seite, die aussieht wie tausend andere.
Dieser Artikel beschreibt den Ablauf, mit dem wir bei Heidrich Digital und Kiekkist arbeiten, Schritt für Schritt. Er funktioniert mit jedem KI-Agenten, der Code schreiben kann.
Warum Figma bei kleinen Websites oft ein Umweg ist
Figma ist ein Zeichenwerkzeug für Oberflächen. In großen Teams ist es unverzichtbar: Viele Leute arbeiten gleichzeitig an einem Designsystem, Entwickler holen sich Maße und Farben ab, Kunden geben Entwürfe frei. Für eine Firmenwebsite mit acht bis zwölf Seiten sieht die Rechnung anders aus. Der Entwurf in Figma ist ein Bild der Website, nicht die Website. Wie sich ein Text bei 390 Pixel Breite umbricht, wie ein Menü mit der Tastatur funktioniert, wie schnell die Seite lädt, zeigt erst der Browser.
Wenn ein KI-Agent direkt im Code gestaltet, ist der Browser die Arbeitsfläche. Jeder Entwurf ist sofort eine echte Seite, die du auf dem Telefon öffnen kannst. Figma selbst bietet eigene KI-Funktionen an, die aus einer Beschreibung Websites erzeugen. Das zeigt, wohin die Reise geht: Die Grenze zwischen Entwurf und Umsetzung verschwimmt.
Einschätzung von Till Heidrich: Ich habe mich in den letzten Jahren durch Hunderte, wenn nicht Tausende Website-Designs und WordPress-Themes geklickt, bis ich den Wald vor lauter Bäumen nicht mehr gesehen habe. Dann habe ich mir ein eigenes Werkzeug gebaut, das Referenzen sammelt, Entwürfe als echte Seiten zeigt und sie prüft. Aus diesem Werkzeug ist Kiekkist entstanden.
Schritt 1: Ein Briefing, das die KI nicht raten lässt
Die meisten schwachen KI-Websites scheitern nicht am Werkzeug, sondern am ersten Satz. „Erstelle eine moderne Website für einen Elektriker“ lässt alles offen, und die KI füllt die Lücken mit dem Durchschnitt. Ein brauchbares Briefing beantwortet vorher vier Fragen:
- Wer kommt auf die Seite? Zum Beispiel Hausbesitzer aus dem Landkreis, die eine Wallbox wollen, oder Einkäufer in der Industrie, die einen Prüfbericht brauchen.
- Was sollen sie tun? Anrufen, ein Formular abschicken, einen Termin buchen, ein PDF laden. Eine Handlung pro Seite ist die Regel, zwei sind die Ausnahme.
- Was gibt es wirklich? Leistungen, Preise oder Preisrahmen, Einzugsgebiet, Öffnungszeiten, Ansprechpartner mit Namen, eigene Fotos.
- Was unterscheidet den Betrieb? Ein Meisterbrief, ein Notdienst, eine Spezialisierung, ein Familienname seit drei Generationen. Was hier steht, wird später zur Überschrift.
Schreib die Texte vor dem Design, zumindest grob. Eine KI, die echte Texte bekommt, baut Seiten, die zu diesen Texten passen. Eine KI, die Platzhalter bekommt, baut Seiten für Platzhalter.
Schritt 2: Echte Referenzen statt Stichwörter
Wörter wie „modern“, „clean“ oder „hochwertig“ bedeuten für jeden etwas anderes. Referenzen sind genauer. Sammle zwei bis fünf Websites, die dir gefallen, und notiere zu jeder, was genau dir gefällt: die Schriftgröße der Überschriften, der ruhige Weißraum, die Art, wie Fotos angeschnitten sind, die Navigation.
Zwei Regeln helfen dabei. Die Referenzen dürfen aus anderen Branchen kommen, oft ist das sogar besser, weil sonst alle Handwerkerseiten gleich aussehen. Und eine Referenz ist eine Richtung, keine Vorlage zum Abpausen. Layout, Texte, Bilder und Farben bleiben eigen. Was du übernimmst, ist das Niveau und das Gefühl.
Schritt 3: Drei Richtungen als echte Seiten
Hier zeigt sich der größte Vorteil der Arbeit ohne Figma. Statt eines Entwurfs lässt du dir drei klar verschiedene Richtungen bauen, jeweils als echte Startseite mit den echten Texten aus Schritt 1. Klar verschieden heißt: andere Schriften, andere Farbwelt, anderer Aufbau des ersten Bildschirms. Drei Varianten desselben Layouts mit anderen Farben helfen bei der Entscheidung nicht.
Sieh dir jede Richtung in zwei Breiten an, am großen Bildschirm und am Telefon. Ein Entwurf, der am Desktop überzeugt und am Telefon zur Textwüste wird, fällt sofort auf. Wer Kunden hat, kann die drei Richtungen als Link schicken. Die Entscheidung trifft der Mensch, nicht die KI.
Schritt 4: Entscheidungen festschreiben
Sobald eine Richtung gewählt ist, gehört sie in eine Datei, die der KI-Agent bei jeder weiteren Seite liest. Darin stehen Schriften, Farben mit ihren Kontrastwerten, Abstände, Rundungen, wie Buttons und Formulare aussehen, und ein paar Sätze zur Tonalität der Texte. In der Fachsprache heißen diese festen Werte Design-Tokens.
Ohne diese Datei driftet jede neue Seite ein Stück weg: Die Kontaktseite bekommt plötzlich andere Abstände, die Leistungsseite eine neue Grautönung. Mit der Datei bleiben zwölf Seiten ein System. Kiekkist-Designs bringen diese Datei als DESIGN.md und Token-Datei mit, damit ein KI-Agent beim Anpassen nicht rät.
Schritt 5: Prüfen, bevor du es schön findest
KI-Agenten schreiben Code, der funktioniert und trotzdem Fehler hat. Eine Fallstudie aus dem Januar 2025 hat eine ohne Vorgaben erzeugte Seite untersucht: Die Kontraste lagen teils bei 1:1 bis 2,2:1, es fehlten eine Hauptüberschrift und der Hauptbereich, Bedienelemente waren mit der Tastatur nicht erreichbar. Automatisch erkennbare Fehler ließen sich schnell beheben, die übrigen nicht vollständig. Es ist nur ein Preprint zu einer einzigen Seite, also ein Hinweis und kein Beweis.
Auch ohne KI ist das Web nicht in gutem Zustand. Die jährliche Messung WebAIM Million fand Anfang 2026 auf 95,9 Prozent der eine Million meistbesuchten Startseiten automatisch erkennbare Fehler, im Schnitt 56,1 pro Seite.
Geprüft wird deshalb immer zweimal:
- automatisch mit einem Prüfwerkzeug gegen WCAG 2.2 AA, dazu Ladezeit und die Frage, ob die Seite Inhalte von Dritten nachlädt
- von Hand mit Tastatur, Zoom auf 200 Prozent, Screenreader-Stichprobe und einem Blick auf jede Seite am Telefon
Wie das ohne bezahltes Werkzeug geht, steht im Artikel Barrierefreiheit selbst prüfen. Unser Prüfwerkzeug ist Open Source, die Regeln stehen auf der Seite Open Source.
Schritt 6: Übergabe und Betrieb mitdenken
Eine fertige Seite ist erst der Anfang. Wer pflegt die Texte? Wo liegt die Seite, wer hat die Zugänge zur Domain, wer macht Updates? Bei einer statischen Seite, die der KI-Agent als HTML oder Astro erzeugt hat, ist der Betrieb einfach, aber er muss geklärt sein. Der Ratgeber Theme gekauft, was nun? geht diese Fragen der Reihe nach durch.
Wann Figma doch die bessere Wahl ist
Ohne Figma zu arbeiten ist kein Grundsatz. Es gibt Fälle, in denen der Zeichenweg schneller und sicherer ist:
| Situation | Besser |
|---|---|
| Kleine Firmenwebsite, ein Ansprechpartner entscheidet | direkt im Code mit KI-Agent |
| Landingpage oder Funnel mit wenigen Schritten | direkt im Code |
| Großes Designsystem mit vielen Produkten | Figma |
| Mehrere Gestalter arbeiten gleichzeitig | Figma |
| Vertraglich vereinbarte Freigabe am Entwurf | Figma oder Freigabe am Live-Link, vorher klären |
| App mit vielen Zuständen und Bildschirmen | Figma für den Ablauf, danach Code |
Wer mit Kunden arbeitet, die es gewohnt sind, Entwürfe als Bild freizugeben, sollte den Ablauf vorher erklären. Ein Link auf eine echte Seite ist für die meisten Kunden verständlicher als eine Zeichnung, aber nur, wenn sie wissen, dass sie gerade einen Entwurf sehen.
Der kürzeste Weg: mit einem geprüften Design anfangen
Die Schritte 2 bis 5 kosten die meiste Zeit. Wer sie abkürzen will, startet mit einem fertigen, geprüften Design und passt es mit dem KI-Agenten an: Texte, Fotos, Farben, Abschnitte. In der Galerie liegen Designs für viele Branchen, jeweils mit allen Seiten, Prüfbericht und Token-Datei. Einige sind kostenlos. Wie das Anpassen abläuft, steht unter So funktioniert’s.
Wer wissen will, woran man eine KI-Website erkennt, die ohne diese Schritte entstanden ist, findet die typischen Merkmale im Ratgeber KI-Website erkennen und die Gründe im Artikel Warum KI-Websites alle gleich aussehen.