KI-Kompass / Wissenskarten

Websites ohne KI-Einheitslook

Richtungen, Referenzen, Prüfung

Geprüft 16. Oktober 2026 · Michael Engel · Website

Ohne Vorgaben greift ein Modell zum Durchschnitt, zum Beispiel zu violetten Farbverläufen. Zwei Werkzeuge helfen dagegen. Anthropics öffentlicher Skill frontend-design legt eine feste Designrichtung fest und nennt typische KI-Fehlgriffe. Inspo ist ein MCP-Server, also eine Schnittstelle, die dem Agenten Werkzeuge bereitstellt. Er gibt dem Agenten echte Websites mit ihren Gestaltungswerten als Vorlage: Farben, Schriften, Abstände.

Wozu

Deine Seite sieht nach deiner Marke aus und nicht nach Vorlage.

Schritte

1. Für Landingpages den Skill frontend-design nutzen.
2. Immer mehrere Designrichtungen verlangen und erst dann eine wählen.
3. Echte Referenzen statt Adjektiven: Inspo installieren (laut Repo npx -y inspo-mcp install) und bei Bedarf nach Branche, Layout oder hell/dunkel filtern.
4. Nach den benutzten Referenzen fragen und prüfen, dass nichts kopiert ist.
5. Für Apps und Dashboards erst mehrere HTML-Entwürfe in mocks/ nebeneinanderstellen, dann umsetzen.
6. Eine design.md mit den Markenvorgaben erst auf die fertige erste Seite anwenden. Vorher legt sie die Gestaltung zu früh fest.
7. In der CLAUDE.md verlangen, dass ein Subagent das Ergebnis gegen die design.md prüft.

Vor dem ersten Entwurf: das Interview

Bevor Claude entwirft, führt es ein Interview: „Frag so lange, bis nichts mehr offen ist, mit Auswahlmöglichkeiten.“ Die Antworten landen in einer Datei brief.md. Alle späteren Entwurfsaufträge kommen aus diesem einen Dokument, so bleibt der Stil über mehrere Entwürfe gleich. AI LABS zeigt das mit Google Stitch, einem KI-Werkzeug für Seitenentwürfe, das sich aus Claude Code bedienen lässt. Das Muster geht auch ohne Stitch.

Grenzen

• Die Wirkung zeigen die Videos nur als Eindruck an wenigen Beispielen.
• Die Referenzen passen nicht immer zur Branche. Bei Screenshots mit Cookie-Banner rät der Agent den verdeckten Teil.
• Fremde Oberflächen nur nachbauen, wenn du darfst. Laut Inspo-README bleiben die Screenshots Werk ihrer Designer, jede Vorlage nennt ihre Quelle.
• Datenschutz: Inspo läuft lokal über npm oder über einen gehosteten Endpunkt des Anbieters. Beim gehosteten Endpunkt gehen deine Anfragen an Dritte. Laut README werden dort Werkzeugname, Erfolg und Dauer protokolliert, keine IP-Adressen und keine Suchtexte.
• Skills sind fremder Code. Vorher lesen und prüfen (siehe Verknüpfungen). Der Skill-Stand in den Videos ist vom Juni und sollte mit dem aktuellen Modell neu getestet werden.
• Die Stitch-Entwürfe im Video von AI LABS waren nur für den Computer gemacht, die Handyansicht brach. Stitch bietet Handy und Web zwar zur Wahl, trotzdem gehört eine eigene Prüfung in Tablet- und Handygröße dazu. Die fertigen Prüf-Skills aus dem Video liegen laut Video in der Community AI Labs Pro (Preis nennt das Video nicht), im Video lässt der Autor sie von Claude bauen. Stitch braucht ein Google-Konto, Preise nennt das Video nicht. Eine Kommandozeile von Google gibt es als npm-Paket @google/stitch (Version unter 1.0).

Verknüpfungen

• Fremde Skills prüfen: vor der Installation von Design-Skills und MCP-Servern.
• Checkpoints und Gates: Der Abgleich mit der Vorlage ist dort Gate 2.
• Claude arbeiten lassen, bis das Ziel erreicht ist – mit /goal: Auch dort hilft ein klickbarer Entwurf in mocks/ vor dem Bau.
• Die eigene Website von außen prüfen lassen: Fehler, Geschwindigkeit und Handyansicht am fertigen Ergebnis prüfen.

Quellen

• AI LABS: 4 Ways to Actually Build Stunning Websites with Claude Code, 13.06.2026, 2:43–3:49, 5:26–11:24. Gesponsert von Kimi, dazu Bezahl-Community
• AI LABS: Insane Claude Design Skills You Need To Build Beautiful Websites, 23.06.2026, 0:32–2:08. Gesponsert von SciSpace
• AI LABS: Github #1 Trending Skill’s Author Just Fixed Claude’s Design Problem, 18.09.2026, 5:24, 7:02–9:43, 11:08–11:53. Gesponsert von Monid/Manifold (6:05)
• AI LABS: Google Just Fixed AI Design By Releasing This, 13.10.2026, 1:38, 4:52–5:57, 7:03, 9:25–10:50, 13:01. Gesponsert von Wispr Flow (7:43–8:34), dazu Eigenwerbung für AI Labs Pro
• GitHub: anthropics/skills (frontend-design) und Nutlope/inspo, abgerufen 11.10.2026

Stand

Geprüft 11.10.2026, ergänzt 16.10.2026 · Reifegrad neu (Skills verfügbar, Wirkung nur von den Creatorn gezeigt)

Das mit deinem Team ausprobieren? Dafür gibt es die KI-Werkstatt. KI-Werkstatt ansehen