Lass KI mit Geschmack gestaltenLass KI mit Geschmack gestaltenLass KI mit Geschmack gestalten

Bitte eine KI, eine Landing-Page zu bauen, und du kannst raten, was zurückkommt: eine zentrierte Überschrift, ein Untertitel, drei identische Feature-Karten mit abgerundeten Icons und ein Gradient-Button. Es ist kompetent und vollkommen vergesslich. Die Leute geben dem Modell die Schuld, keinen Geschmack zu haben. Das ist die falsche Diagnose. Das Modell hat jede schöne Oberfläche gesehen, die je ausgeliefert wurde; was ihm fehlt, ist ein System, in dem es bauen kann. Mit rohen Divs und ohne Constraints allein gelassen, fällt es auf den Mittelwert seiner Trainingsdaten zurück, und der Mittelwert des Internets ist eine Schablone.

Die Lösung ist kein besserer Prompt. Es ist besseres Werkzeug. Gib dem Agenten ein echtes Komponentenfundament, ein Bewegungsvokabular und eine Möglichkeit zu sehen, was er macht, und der Output ändert seinen Charakter komplett. Fünf Open-Source-Projekte decken diese ganze Kette ab: das Fundament, fertige Effekte, eine Motion-Bibliothek, einen visuellen Editor und Prompt-to-App. Hier ist jedes einzelne und wo es hineinpasst.

Warum KI-UI generisch aussieht

Ein Modell, das UI aus dem Nichts erzeugt, muss jede Entscheidung auf einmal erfinden: Abstand, Typo-Skala, Farbe, Elevation, Bewegung. Ohne ein System, auf das es sich berufen kann, landet jede Entscheidung auf der sichersten, häufigsten Option, und sicher-mal-fünf ist die Schablone, die du tausendmal gesehen hast. Der erfahrene menschliche Designer trifft nicht mehr Entscheidungen als das Modell; er trifft weniger, weil ein Design-System die meisten schon getroffen hat. Das ist das fehlende Teil. Übergib dem Agenten das System, und du entfernst die Entscheidungen, die Schrott erzeugen.

1. Das Komponentenfundament: shadcn/ui

shadcn/ui (github.com/shadcn-ui/ui) hat verändert, wie das funktioniert, indem es sich weigert, eine Bibliothek zu sein. Du installierst es nicht, um Blackbox-Komponenten zu importieren. Du führst eine CLI aus, und der Quellcode jeder Komponente landet in deinem Repository, gebaut auf Radix-Primitiven für Barrierefreiheit und mit Tailwind gestylt. Er gehört dir. Genau dieser Besitz ist das, was ein KI-Agent braucht: er kann den Button lesen, bearbeiten und erweitern, weil der Button eine Datei im Projekt ist, keine Abhängigkeit, die er rückentwickeln muss.

# shadcn/ui is not a dependency you install and import. You run a CLI and
# the component SOURCE lands in your repo, yours to read and edit.
npx shadcn@latest init
npx shadcn@latest add button card dialog input

# components/ui/button.tsx now lives in YOUR project.
# The agent edits this file directly. Nothing is hidden in node_modules,
# nothing is a black box it has to fight.

2. Fertige animierte Effekte: Magic UI

Magic UI (github.com/magicuidesign/magicui) ist der Begleiter, den die meisten mit shadcn/ui kombinieren. Es sind über 150 animierte Komponenten (Shimmer-Buttons, Marquees, animierte Beams, Zahlen-Ticker, Bento-Grids), gebaut mit React, TypeScript, Tailwind und Motion. Sie installieren sich genauso: Quellcode in dein Repo. Für einen Agenten verwandelt das Bewegung von etwas, das er Keyframe für Keyframe schreiben muss, in etwas, das er auswählt. Die Animation ist bereits korrekt; der Agent platziert sie nur.

// Magic UI and React Bits install the same way: source into your repo.
npx shadcn@latest add "https://magicui.design/r/shimmer-button"

// Then it is just a component. Compose, do not hand-roll the animation:
import { ShimmerButton } from "@/components/ui/shimmer-button";

export function CTA() {
  return (
    <ShimmerButton className="px-6 py-3 text-base font-medium">
      Start a project
    </ShimmerButton>
  );
}

3. Die Motion-Bibliothek: React Bits

React Bits (github.com/DavidHDev/react-bits) ist die umfangreichste der drei: eine ausufernde Sammlung von animiertem Text, animierten Hintergründen und interaktiven Komponenten, jede ein eigenständiger Schnipsel, den du hineinkopierst. Wo shadcn/ui das strukturelle Fundament und Magic UI das ausgefeilte Set an Effekten ist, ist React Bits die tiefe Reservebank, die du plünderst, wenn ein Abschnitt eine bestimmte Bewegung braucht: Split-Text-Enthüllungen, Gradient-Meshes, magnetische Buttons, scrollgesteuerte Zähler. Die Breite ist der Punkt; der Agent hat Optionen, statt eine zu erfinden.

4. Der visuelle KI-Editor: Onlook

Onlook (github.com/onlook-dev/onlook) schließt den Kreis, den die anderen vier nicht schließen können: das Sehen. Es ist ein quelloffener visueller Editor für React, oft als Design-Tool für Code beschrieben. Du siehst deine laufende App, wählst ein Element aus, ziehst es, stylst es um, und Onlook schreibt die Änderung in deinen Quellcode zurück. Für KI-Arbeit zählt das, weil der Agent sonst blind ist; er bearbeitet Code und hofft. Onlook gibt einem Menschen eine direkte Manipulationsebene über demselben Code, den der Agent schreibt, sodass Design-Absicht und Quellcode an einem Ort bleiben, statt auseinanderzudriften.

5. Vom Prompt zur App: bolt.new

bolt.new (github.com/stackblitz/bolt.new) ist die Eingangstür: beschreibe eine App in einfacher Sprache, und es baut und betreibt ein Full-Stack-Projekt im Browser, angetrieben von StackBlitz WebContainers, also ganz ohne lokales Setup. Es ist der schnellste Weg von der Idee zu etwas Laufendem, auf das du klicken kannst. Der Haken ist der, um den es in diesem ganzen Beitrag geht: Prompt-to-App ohne ein Design-System darunter erzeugt das Generische nur schneller. Die richtige Nutzung ist, mit bolt.new zu scaffolden und das Ergebnis dann auf ein echtes Fundament zu bringen.

Der Geschmack steckt im System

Zusammengenommen hören diese fünf auf, eine Werkzeugliste zu sein, und werden zu einer Pipeline für Geschmack. Der Trick ist, den Agenten ihrer bewusst zu machen. Ich mache das genauso, wie ich den Stack für jedes Projekt festlege: ich schreibe es in AGENTS.md, die Datei, die der Agent liest, bevor er eine Zeile Code anfasst. Das Design-System als harte Regel zu benennen, ist das, was den Agenten beim Komponieren hält, statt ihn zurückfallen zu lassen.

## Design system (do NOT hand-roll UI)

- Primitives: shadcn/ui in components/ui/. Compose these. Never raw div soup.
- Motion and effects: Magic UI and React Bits. Reach for an existing
  animated component before writing a new keyframe.
- Tokens: color, spacing, radius and shadow come from tailwind.config only.
  No magic numbers, no one-off hex values.
- Type scale is 1.25. Max one accent color per view.
- Never ship the default browser focus ring; style focus-visible explicitly.
- When unsure how something should look, generate a reference image first,
  then build to it. Do not improvise layout.

1. 01Scaffolde schnell mit bolt.new, wenn du eine laufende Form brauchst, auf die du reagieren kannst.
2. 02Stelle das Fundament auf shadcn/ui, als Quellcode in components/ui/ besessen.
3. 03Hol dir Bewegung aus Magic UI und React Bits, statt Keyframes zu schreiben.
4. 04Dirigiere es nach Augenmaß in Onlook, sodass Design-Änderungen in denselben Code zurücklanden.
5. 05Kodiere all das in AGENTS.md, sodass jede Sitzung im System beginnt.

Dem Modell fehlte nie der Geschmack. Ihm fehlte ein System, in dem es geschmackvoll sein kann. Gib ihm eines, und der Schrott verschwindet.

Generische KI-UI ist ein Werkzeugproblem im Gewand eines Talentproblems. Gib dem Agenten ein Fundament, das er besitzt, ein Bewegungsvokabular, aus dem er wählen kann, und eine Möglichkeit zu sehen, was er baut, und der Zentrierter-Hero-drei-Karten-Reflex verschwindet von selbst. Das ist der Unterschied zwischen einer Oberfläche, die KI-gemacht aussieht, und einer, die gemacht aussieht. Wenn du diesen Unterschied in dein Produkt eingebaut haben willst, ist das, was ich tue.