KI-Webdesign-Workflow mit 5 Ressourcen für Gestaltung, Prüfung und Tests

Das Anfrageformular auf der Website eines Renovierungsbetriebs soll Kontaktdaten, Raumgröße und Budget eines Hauseigentümers an das Unternehmen übermitteln. Eine überzeugende Bestätigungsmeldung kann den Eindruck erwecken, das sei erledigt. Auch dann, wenn nichts verschickt wurde.

Für diesen Leitfaden schrieb Claude zwei Test-Startseiten für einen erfundenen polnischen Renovierungsbetrieb. Wir prüften sie mit Playwright CLI, einem Werkzeug, mit dem ein Coding-Agent einen Browser bedienen kann. Beide Formulare zeigten nach einer gültigen Eingabe eine Bestätigung an. Nur eines übermittelte die Anfrage an das Testziel.

Dieser Unterschied erklärt, warum das Erzeugen einer Seite nur ein Teil des KI-Webdesign-Workflows ist. Ein Unternehmen muss auch die gestalterische Richtung festlegen, das Ergebnis prüfen und nachvollziehen, was passiert, wenn ein Besucher die Website benutzt. Fünf offen zugängliche Ressourcen decken diese Aufgaben ab, ergänzt um 3D als optionale Erweiterung.

Die beiden Seiten, die jeweils aus einer einzigen Datei bestanden, erhielten unterschiedliche Anweisungen. Für Seite A genügte eine kurze Bitte um eine polnische Startseite für Badsanierungen mit Kontaktformular, ohne Zieladresse für Anfragen. Seite B folgte dem unten verwendeten Briefing und den Gestaltungsregeln sowie der Anweisung, Anfragen per POST an eine festgelegte Adresse zu senden.

Dasselbe Skript prüfte beide Seiten, während ein lokaler Server die Anfragen protokollierte. Weil sich die Anweisungen unterschieden, handelt es sich um eine eigens erstellte Demonstration, keinen kontrollierten Vergleich der Werkzeuge. Ausgeführt wurde ausschließlich Playwright CLI; die anderen vier Ressourcen haben wir anhand ihrer Dokumentation geprüft. Die begleitenden Anweisungen wurden nachträglich festgehalten. Die Testdateien wurden nicht unabhängig überprüft.

Die Prüfungen zeigten außerdem Probleme, die auch eine funktionierende Übermittlung nicht lösen würde. Seite A entfernte die voreingestellte Fokusumrandung der Formularfelder, ohne eine Umrandung oder einen Schatten als Ersatz hinzuzufügen. Bei Fokus änderte sich die Rahmenfarbe; diese Änderung blieb unbewertet. Der Text des zentralen Buttons erreichte ein Kontrastverhältnis von 2,21 zu 1 und lag damit unter den auf Stufe AA für normalen Text geforderten 4,5 zu 1. Der Text im Aufmacher erreichte gegenüber dem helleren Ende eines Farbverlaufs 4,48 zu 1.

Seite A lieferte außerdem zwei namentlich zugeordnete Kundenstimmen und das Versprechen, Arbeiten fristgerecht und im vereinbarten Budget abzuschließen. Ein echtes Unternehmen bräuchte für beides Belege, bevor es solche Aussagen veröffentlicht. Browserprüfungen können eine ausbleibende Anfrage aufdecken. Sie belegen nicht, dass eine Kundenstimme echt ist.

Ein KI-Coding-Agent kann aus einem kurzen Prompt eine Seite erzeugen. Auch Claude Code von Anthropic und Codex von OpenAI brauchen allerdings Entscheidungen darüber, was das Unternehmen erreichen will, und eine Prüfung ihrer Ergebnisse. Die fünf offen zugänglichen Ressourcen decken Gestaltungsregeln, Designanleitung und Überarbeitung, Browserprüfungen sowie optionales 3D ab. Der erfundene Renovierungsbetrieb gibt jeder Aufgabe einen konkreten Zweck. Ein Hauseigentümer soll eine Anfrage mit Raumgröße und ungefährem Budget verschicken können.

Vor dem Bauen die Richtung festlegen

Bei einem Renovierungsbetrieb muss der Agent wissen, ob fertige Bäder, Preise oder das Team den Anfang machen sollen. Ein vages Briefing überlässt diese Entscheidungen dem Modell. Halten Sie Zielgruppe, zentrale Handlung, Reihenfolge der Inhalte, gestalterische Richtung und Rahmenbedingungen fest, bevor Sie die Seite erzeugen lassen.

„Kontakt aufnehmen“ lässt offen, was das Formular leisten soll. Eine Anfrage mit Raumgröße und ungefährem Budget gibt dem Agenten konkrete Felder vor, um die er gestalten kann. Polnisch als erste Sprache, echte Projektfotos und ein Datenschutzhinweis am Formular grenzen seine Möglichkeiten weiter ein. Bewahren Sie die Antworten beim Projekt auf.

Zielgruppe [wer kommt, mit welchem Gerät und welche Anbieter zum Vergleich stehen]
Zentrale Handlung [die eine Sache, die ein Besucher tun soll]
Inhaltliche Prioritäten [1, 2, 3, 4 nach Bedeutung]
Gestalterische Richtung [drei gewünschte Eigenschaften, eine unerwünschte]
Rahmenbedingungen [Sprachen, Inhaltsregeln, Leistungsgrenzen, rechtliche Hinweise]

Das Briefing legt den Zweck fest. DESIGN.md hält die visuellen Regeln fest, die auf allen Seiten gelten sollen. Das von Google Labs, Googles Experimentiereinheit, veröffentlichte Format verbindet strukturierte Werte mit schriftlichen Begründungen.

Strukturierte Werte legen Farben, Typografie, Abstände und Eckenradien maschinenlesbar fest. Der Text erklärt, wo sie hingehören und warum. Die Spezifikation befindet sich im Alpha-Stadium und kann sich ändern.

Beim Renovierungsbetrieb erhält der Anfrage-Button den grünen Akzent, weil das Senden einer Anfrage die zentrale Handlung ist. Die folgenden Werte dienen als Beispiel. Prüfen Sie die Feldnamen anhand der Spezifikation, bevor Sie die Datei anpassen.

---
name: Renovation Studio
colors:
  primary: "#1F2A2E"
  neutral: "#F7F5F0"
  tertiary: "#2F6F5E"
typography:
  body:
    fontFamily: Source Sans 3
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  heading:
    fontFamily: Source Sans 3
    fontSize: 36px
    fontWeight: 700
rounded:
  sm: 4px
spacing:
  md: 16px
  section: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 12px
---

Unter den Werten erklären Sie deren Zweck. Der Anfrage-Button verwendet die Tertiärfarbe. Fließtext beginnt bei 18 Pixeln, vorbehaltlich einer Prüfung auf echten Geräten. Fotos erhalten großzügige Abstände, weil fertige Projekte im Briefing an erster Stelle stehen. Diese Begründung gibt dem Agenten eine Grundlage für seine Entscheidungen auf der nächsten Seite.

Eine separate Community-Bibliothek namens DESIGNmd stellt Dateien in diesem Format bereit, darunter Interpretationen der Gestaltung bekannter Unternehmen. Die Beispiele zeigen, wie andere ihre Regeln ordnen; es bleiben Auslegungen der Community. Unser Artikel In Sekunden zur Landingpage und die Gestaltungsregeln, die sie auf Kurs hielten beschreibt ein veröffentlichtes Beispiel dafür, wie Designregeln KI-generierte Landingpages steuern.

Taste Skill liefert übertragbare Anweisungen, die ein Agent vor dem Gestalten einer Oberfläche laden kann. Sie betreffen Hierarchie, Typografie und Abstände und werden durch Referenzbilder und Browserprüfungen ergänzt. Die Dokumentation weist darauf hin, dass gutes Design damit nicht garantiert ist. Das Modell und die Richtung, die man ihm vorgibt, beeinflussen das Ergebnis weiterhin.

Ein Skill bringt eigene Vorlieben mit. Kräftige Farben und markante Schriften können dem Briefing eines Renovierungsbetriebs widersprechen, dessen Website ruhig und praktisch wirken soll. Unsere vorgeschlagene Rangfolge lautet daher Briefing, DESIGN.md, dann Skill. Übernehmen Sie einen Vorschlag, wenn er einer Entscheidung des Unternehmens dient.

Impeccable, von Paul Bakaus für Claude Code und Codex entwickelt, bietet mehr als zwanzig Befehle zum Gestalten, Prüfen und Verfeinern von Oberflächen, darunter critique, audit und polish. Liegt bereits ein erster Entwurf vor, beginnen Sie mit einer Kritik anhand des Briefings.

Die Werkzeuge überschneiden sich. Taste Skill enthält Browserprüfungen, Impeccable leitet auch die Gestaltung an. Das eine für den Entwurf und das andere für die Überprüfung einzusetzen, ist unser Vorschlag für den Einstieg und keine strikte Trennung ihrer Fähigkeiten.

Prüfen Sie die Hierarchie, bevor Sie Details verfeinern. Ein Feinschliff kann eine Seite verschönern, deren Prioritäten weiterhin falsch gesetzt sind. Fragen Sie bei der Renovierungsseite:

• Ist der Anfrage-Button auf einem Smartphone das auffälligste Element?
• Folgt die Reihenfolge der Abschnitte den inhaltlichen Prioritäten, also Fotos, Preisen, Ablauf und Team?
• Sehen wiederkehrende Elemente wie Projektkarten jedes Mal gleich aus, und verhalten sie sich gleich?
• Behauptet ein Text etwas, das der Betrieb nicht belegen kann, etwa namentliche Kundenstimmen, Fertigstellungstermine oder Preise? Sind noch Platzhalter vorhanden?

Eine sinnvolle Anweisung lautet etwa „Prüfe die Startseite anhand des Briefings. Liste auf, wo die zentrale Handlungsaufforderung mit anderen Elementen konkurriert. Ändere vorerst nichts.“ Prüfen Sie die Ergebnisse, bevor Sie eine engere Änderung beauftragen, etwa /impeccable polish für das Layout des Anfrageformulars.

Prüfen, was nach dem Klick passiert

Playwright CLI ermöglicht einem Coding-Agenten, eine Seite zu öffnen, Buttons anzuklicken, Formulare auszufüllen und die folgenden Netzwerkanfragen zu prüfen. Screenshots, Listen der Seitenelemente und Konsolenmeldungen helfen dabei, Verhalten nachzuvollziehen, das ein Standbild nicht belegen kann. Das Repository nennt derzeit Node.js ab Version 18 als Voraussetzung. Prüfen Sie die Anforderungen der Version, die Sie installieren. Der Browser läuft normalerweise ohne sichtbares Fenster.

Beginnen Sie mit dem schmalen Layout, der Formularprüfung und der Zustellung der Anfrage.

1. Schmales Layout. Stellen Sie mit dem dokumentierten Befehl resize eine Breite und Höhe ein. Öffnen Sie das Menü, folgen Sie einem Link und prüfen Sie, ob die Seite wechselt und das Menü sich schließt. Damit prüfen Sie das Layout bei dieser Breite. Touch-Eingaben, die Browseroberfläche des Smartphones und die Leistung auf einem echten Gerät brauchen weiterhin ein echtes Smartphone.
2. Formularprüfung. Schicken Sie das Anfrageformular zunächst leer und dann mit einer ungültigen E-Mail-Adresse ab. Prüfen Sie, ob jedes betroffene Feld einen eigenen Fehlerhinweis zeigt.
3. Zustellung. Senden Sie gültige Testdaten. Prüfen Sie anschließend, ob die Bestätigung erscheint, die Netzwerkanfrage erfolgreich ist, die Konsole keine Fehler zeigt und die Anfrage mit vollständigen Feldern im Testpostfach oder in der Datenbank ankommt. Eine Bestätigung und eine erfolgreiche Serverantwort belegen die Zustellung noch nicht. Bei einer simulierten Anfrage bleibt sie ungeprüft. Halten Sie das im Testbericht fest.

Diese Prüfungen belegen nur, was im getesteten Browser bei der getesteten Breite funktioniert hat. Ein verkleinertes Desktop-Browserfenster prüft weder Touch-Eingaben noch die Browseroberfläche eines Smartphones oder dessen tatsächliche Leistung. Testen Sie die Seite vor dem Start deshalb auch auf einem echten Smartphone.

Die Ergebnisse zu Fokus und Kontrast geben Anhaltspunkte für eine separate Prüfung der Barrierefreiheit. Browserautomatisierung kann bei Tabulatorreihenfolge und Formularfehlern helfen. Die Bedienbarkeit und die gemessenen Kontraste muss dennoch jemand im jeweiligen Zusammenhang beurteilen. Die hier verwendete Kontrastvorgabe stammt aus den WCAG 2.2, den vom W3C veröffentlichten Richtlinien für barrierefreie Webinhalte.

• Sichtbarer Tastaturfokus. Gehen Sie die Seite mit der Tabulatortaste durch. Jedes interaktive Element muss in sinnvoller Reihenfolge erreichbar sein und sichtbar anzeigen, wo der Fokus liegt.
• Beschriftete Felder. Jedes Formularfeld hat eine sichtbare Beschriftung, die auch während der Eingabe stehen bleibt.
• Verständliche Fehlermeldungen. Jeder Hinweis steht neben dem betroffenen Feld und erklärt, was falsch ist und wie es sich beheben lässt.
• Lesbarer Kontrast. Text hebt sich vom Hintergrund ab. WCAG 2.2 fordert auf Stufe AA für normalen Text mindestens 4,5 zu 1.
• Verhalten beim Vergrößern. Bei 200 Prozent Zoom bleiben alle Inhalte sichtbar und sämtliche Funktionen bedienbar.
• Einwilligungsbanner. Beim ersten Besuch verdeckt ein Einwilligungsbanner das Anfrageformular auf einem kleinen Bildschirm nicht.

Der European Accessibility Act, eine EU-Richtlinie zur Barrierefreiheit von Produkten und Dienstleistungen, gilt seit dem 28. Juni 2025. Er erfasst unter anderem Dienstleistungen im elektronischen Geschäftsverkehr. Gemeint sind aus der Ferne und auf individuelle Anfrage eines Verbrauchers erbrachte Dienstleistungen, die auf den Abschluss eines Verbrauchervertrags abzielen.

Kleinstunternehmen, die Dienstleistungen erbringen, sind ausgenommen. Gemeint sind Unternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Nach der KMU-Definition der Europäischen Kommission muss ein Unternehmen innerhalb einer größeren Gruppe unter Umständen deren Zahlen mitrechnen. Weder die Beschäftigtenzahl allein noch das Vorhandensein eines Anfrageformulars klärt die Einordnung unseres erfundenen Betriebs. Auch unterscheiden sich die nationalen Regelungen.

Entscheiden, was die Website braucht

img2threejs ergänzt den grundlegenden Ablauf um eine optionale visuelle Funktion. Ausgehend von einem Referenzbild schreibt der Skill ein prozedurales Modell in Three.js, einer JavaScript-Bibliothek für 3D-Grafik. Der Agent baut es schrittweise auf, rendert jede Fassung und vergleicht sie mit dem Bild. Er extrahiert kein Mesh und verwendet keine Photogrammetrie. Wie das Projekt selbst einräumt, verrät das Referenzbild nichts über die verdeckten Seiten eines Objekts. Das Modell kann deshalb angenähert, stilisiert oder mit wenigen Polygonen ausgeführt sein.

Für den Renovierungsbetrieb ist ein Foto mit ziemlicher Sicherheit die bessere Wahl. Kunden wollen ein fertiges Bad im Raum sehen, und ein 3D-Modell erhöht die zu ladende Datenmenge auf dem Smartphone. Wer ein konfigurierbares Objekt verkauft, hat einen besseren Grund für eine drehbare Ansicht, wenn dessen Form die Kaufentscheidung verständlicher macht. Auch dann muss eine Annäherung als Illustration gekennzeichnet oder mit dem tatsächlichen Produkt abgeglichen werden.

Beginnen Sie bei der Renovierungsseite mit einem Briefing und dokumentierten Gestaltungsregeln, einem Werkzeug für Designanleitung oder Überarbeitung und Browserprüfungen des Wegs bis zur Anfrage. Taste Skill und Impeccable überschneiden sich. Wählen Sie zunächst eines. Ergänzen Sie img2threejs erst, wenn 3D eine Aufgabe erfüllt, die ein Foto nicht ebenso gut lösen kann.

Dass die Ressourcen offen veröffentlicht sind, macht den Ablauf nicht kostenlos. Prüfen Sie die Lizenz jedes Projekts und kalkulieren Sie die Kosten für den KI-Coding-Agenten, das Hosting und optionale Bild- oder andere Dienste ein. Planen Sie außerdem Zeit für das Briefing, die Anbindung des Anfrageziels, die Prüfung von Aussagen und erneute Tests ein. Die Demonstration misst das Verhalten zweier Seiten. Sie belegt weder Nettoeinsparungen noch mehr Anfragen.

Bestandene Prüfungen belegen weder ein wettbewerbsfähiges Angebot noch überzeugende Texte. Auch eine funktionierende Website kann ohne Anfragen bleiben. Die Sicherheit im Produktivbetrieb braucht eine eigene Prüfung. Sich ändernde Befehle und Formate müssen mit dokumentiertem Prüfdatum kontrolliert werden. Unser Überblick zu GitHub-Repositories für Unternehmen behandelt Einrichtung und laufende Kosten.

Für den Renovierungsbetrieb endet die Prüfung vor dem Start am Ziel der Anfrage. Sind Raumgröße, Budget und Kontaktdaten vollständig angekommen? Die Bestätigung auf Seite A hätte eine reine Screenshot-Prüfung bestanden. Erst als wir der Anfrage folgten, wurde sichtbar, was noch fehlte.

Häufige Fragen

So haben wir getestet

Am 28. Oktober 2026 führten wir Playwright CLI 0.1.22 mit Chromium ohne sichtbares Browserfenster auf zwei Startseiten für den erfundenen Betrieb aus. Beide bestanden aus jeweils einer Datei und wurden direkt von Claude geschrieben. Ein lokaler Server protokollierte jede Anfrage, ein Skript führte dieselben Prüfungen auf beiden Seiten aus. Wir prüften horizontalen Überlauf bei 390 und 320 Pixeln Breite, das Menüverhalten, die vollständige Sichtbarkeit des ersten Buttons im ersten Bildschirmausschnitt, die Formularprüfung, die Bestätigungsmeldung, die Anfrage und deren Eingang auf dem Server, Konsolenmeldungen, Fokusumrandungen und Schatten sowie den Textkontrast anhand der Farben der Seiten.

Playwright CLI war die einzige Ressource, die wir für diesen Leitfaden ausführten. DESIGN.md, Taste Skill, Impeccable und img2threejs prüften wir anhand öffentlicher Dokumentation und Repositories. Nicht untersucht wurden echte Geräte, weitere Browser, Screenreader, Ladegeschwindigkeit oder die Frage, ob eines der Designs Kunden überzeugt.

playwright-cli open http://localhost:3000
playwright-cli resize 390 844
playwright-cli screenshot
playwright-cli snapshot
playwright-cli fill <ref> "Anna Test"
playwright-cli click <ref>
playwright-cli requests
playwright-cli console

Weitere Artikel zu KI in Unternehmen auf Deutsch.

Diese deutsche Fassung wurde mit KI aus dem Englischen übersetzt. Die Inhalte und Testergebnisse stammen aus dem englischen Original von IC Lab Desk. Englisches Original lesen.