Gib deiner KI ein Design, das nicht nach KI aussieht
KI-Webseiten sehen fast immer gleich aus: lila Gradient, Inter-Font, vier Karten im Grid. Das ist ein Default, kein Limit. So gibst du deinem Agenten einen Design-Layer — und bekommst ein Ergebnis, als hätte es ein Webdesigner gebaut.
Du hast DESIGN kommentiert und den Link per DM bekommen? Genau richtig — das hier ist die komplette Anleitung aus dem Video.
Bevor du startest
Was du brauchst
- Claude Code auf deinem Rechner (Mac oder Windows) — die Installation dauert eine Minute, sie steht unten in Schritt 2.
- Ein Claude-Konto: Pro-Abo (ab ~20 €/Monat) oder API-Guthaben. Für den Einstieg reicht das kleinste Abo.
- 10 Minuten Zeit. Kein Design-Vorwissen — den Geschmack liefert der Skill, nicht du.
Warum jede KI-Seite gleich aussieht
Wenn du deiner KI einfach „bau mir eine Landingpage" sagst, bekommst du fast immer dasselbe: einen lila Gradient im Hero, Inter als Schrift und vier Karten im Grid. Nicht, weil die KI nichts Besseres kann — sondern weil sie ohne Vorgabe auf ihren sichersten Durchschnitt zurückfällt. Das ist ein Default, kein Limit.
Der Fix ist nicht „besser prompten". Der Fix ist, dem Agenten einmalig einen Design-Layer mitzugeben, den er ab dann bei jedem Projekt automatisch anwendet.
Claude Code installieren (falls noch nicht da)
Öffne das Terminal (am Mac: cmd + Leertaste → „Terminal" tippen → Enter) und füg das hier ein:
curl -fsSL https://claude.ai/install.sh | bash
Auf Windows nutzt du PowerShell:
irm https://claude.ai/install.ps1 | iex
Danach einmal claude eintippen und mit deinem Konto anmelden. Fertig.
Den Design-Layer als Skill installieren
Ein Skill ist ein wiederverwendbares Regel-Paket, das dein Agent lädt, bevor er loslegt. Für Design gibst du ihm einen Layer, der Typografie, Abstände und Farbdisziplin festlegt — und die generischen Default-Muster aktiv verbietet.
npx skills add <design-skill> -g -y
Den passenden Design-Skill findest du über die Skill-Suche:
npx skills find design
Global installiert (-g) steht der Layer in jedem Projekt zur Verfügung — du richtest ihn genau einmal ein.
Dieselbe Aufgabe — einmal ohne, einmal mit
Jetzt der Beweis, den du selbst siehst. Gib deinem Agenten zuerst die nackte Aufgabe:
Bau mir eine Landingpage für ein Fitness-Studio.
Schau dir das Ergebnis an — mit hoher Wahrscheinlichkeit: lila Gradient, Inter, vier Karten. Mach einen Screenshot. Dann dieselbe Aufgabe, diesmal mit aktivem Design-Layer:
Bau mir eine Landingpage für ein Fitness-Studio. Nutze den Design-Layer: eigenständige Typografie, großzügige Abstände, klare Farbdisziplin, keine generischen Karten-Grids.
Leg beide Screenshots nebeneinander. Der Unterschied ist der ganze Punkt: gleiche Aufgabe, gleiches Modell — nur ein Layer dazwischen.
Nachschärfen, bis es sitzt
Der Layer bringt dich zu 90 %. Den Rest sagst du dem Agenten in normalem Deutsch:
Der Hero ist noch zu voll — mehr Weißraum, eine klare Headline, und nimm den Verlauf raus. Sekundärfarbe nur für den Button.
Das ist das ganze Muster: nicht besser prompten, sondern dem Agenten Geschmack als festen Layer geben — und dann nur noch nachschärfen.
Erfolgs-Check
Das hast du jetzt
- Einen wiederverwendbaren Design-Layer, den dein Agent bei JEDEM Projekt automatisch anwendet.
- Dieselbe Aufgabe zweimal gebaut — einmal im KI-Default, einmal mit Layer — und den Unterschied schwarz auf weiß gesehen.
- Das Muster für jede zukünftige Seite: nicht besser prompten, sondern dem Agenten Geschmack als festen Layer mitgeben.
Zeig dein Vorher/Nachher — tagg mich, wenn deine Seite steht.
Kurz beantwortet
Häufige Fragen
Reicht nicht ein besserer Prompt?
Kurzfristig ja, dauerhaft nein. Ein Prompt gilt für einen Chat; ein Design-Layer als Skill gilt für JEDES Projekt automatisch — du musst den Geschmack nur einmal festlegen. Genau das ist der Unterschied zwischen ‹einmal schön› und ‹immer schön›.
Muss ich Designer sein, um den Layer zu bauen?
Nein. Der Layer hält Regeln fest — Typografie, Abstände, Farbdisziplin, keine generischen Default-Muster. Du beschreibst die Richtung in Worten; die konkrete Umsetzung macht der Agent. Ein fertiger Skill nimmt dir sogar das Beschreiben ab.
Funktioniert das nur für Websites?
Nein — für jede UI, die dein Agent baut: Landingpage, Dashboard, App-Screen, Portfolio. Der Layer sitzt VOR der eigentlichen Aufgabe, deshalb greift er überall.
Woran erkenne ich den KI-Default überhaupt?
An drei Dingen fast immer: lila/blauer Verlauf im Hero, Inter als Schrift, und drei bis vier gleich aussehende Karten im Grid. Sobald du das einmal siehst, siehst du es überall — und weißt, dass ein Layer fehlt.
Jedes Video hat sein eigenes Keyword — du findest es im Video und in der Caption. Kommentier es, und die Anleitung landet automatisch in deinen DMs. Kostenlos, ohne Anmeldung.
Folg @ramzi_goessing für tägliche Agent-Demos →