Warum KI-Agenten Komponenten neu erfinden statt bestehende zu installieren

Du findest ein Hero-Block-Bundle, das dir gefällt. Du fügst den Link in Cursor oder Claude Code ein und bittest um „diesen Hero auf meiner Landingpage“. Eine Minute später hast du einen Hero: mit anderem Abstand, einem anderen Gradient und ohne Einblendanimation. Er sieht aus wie jede andere KI-generierte Landingpage.

Ich habe eine Komponenten-Registry genau für diesen Workflow gebaut und lange Zeit damit verbracht herauszufinden, wo das Design verloren geht. Kurzfassung: nicht im Code. Es geht in der Zusammenfassung verloren.

Komponente auswählen → Anweisung kopieren → in den Agenten einfügen → der Agent führt `npx shadcn add <url>` aus → dein Projekt enthält exakt das, was die Vorschau gezeigt hat Enter fullscreen mode Exit fullscreen mode Die Anweisung wird aus den Metadaten der Komponente generiert, nicht von Hand geschrieben: Komponenten-ID, Installationsbefehl, Abhängigkeiten, was beibehalten werden soll (Motion, Typografie, Abstände, responsives Verhalten), was sich ändern darf (Texte, Links, Akzentfarbe) und eine ausdrückliche Regel, sie nicht von Grund auf neu zu bauen.

Auf dem Papier reicht das. In der Praxis brach es an zwei Stellen.

Wenn ein Agent eine URL „liest“, liest er sie in der Regel gar nicht. Das Web-Fetch-Tool leitet die Seite durch ein kleines Modell und gibt einen Digest zurück. Befehle und Fakten überleben den Digest. Prosa-Regeln wie „behalte die Einblendanimation“ oder „ändere das Grid nicht“ sind das Erste, was verloren geht.

Also installiert der Agent die Komponente korrekt … und „verbessert“ sie dann, weil der Teil, der sagte, dass er das nicht soll, ihn nie erreicht hat.

Wenn die Anweisung die Komponente beschreibt („ein Hero mit einem Gradient und zwei Buttons“), schreibt der Agent selbst einen Hero mit einem Gradient und zwei Buttons. Eine Beschreibung ist eine Spezifikation, und ein Agent mit einer Spezifikation baut.

Die Anweisung sollte also das Aussehen überhaupt nicht beschreiben. Sie sollte sagen: Hier ist der Befehl, hier ist der Quellcode, installiere es.

Zwei bis drei „Keep as installed“-Regeln ins Briefing aufzunehmen reicht nicht aus. Dupliziere sie an Stellen, die niemand zusammenfasst.

1. Das Briefing. Vollständiger Text, für den Menschen und (im besten Fall) für den Agenten.

2. Das docs-Feld des Registry-Eintrags. Die shadcn CLI gibt es nach der Installation im Terminal aus. Der Agent sieht sie als Befehlsausgabe, wortwörtlich, ohne Zusammenfassung dazwischen. Hier ist ein echtes Beispiel aus https://vibeui.club/r/en/hero-001.json:

Keep as installed: - die button-016-, heading-001-Imports aus @/components/vibeui/ — ihren Code nicht in den Block inlining und nicht durch eigene ersetzen; die Teile erhalten nur Props - light-dark() in der Palette: die Komponente muss dem umgebenden color-scheme folgen, anstatt ein eigenes Dark Theme mitzuliefern - der transparente Hintergrund als Standard — die Komponente sitzt auf dem Seitenhintergrund, statt selbst ein Panel unter sich zu legen Enter fullscreen mode Exit fullscreen mode 3. Ein Kommentar am Anfang der Datei. Die Datei wird Byte für Byte geschrieben, sodass die Regeln im Code landen, den der Agent gleich bearbeiten wird:

" use client " // VibeUI hero-001. Keep as installed: // - die button-016-, heading-001-Imports... // - light-dark() in der Palette... Enter fullscreen mode Exit fullscreen mode Eine Stolperfalle: Die shadcn CLI führt Dateien, die mit einer "use client"-Direktive beginnen, durch ts-morph und entfernt Kommentare, die vor der Direktive stehen. Der Header muss daher dahinter. Das Ganze umfasst etwa 20 Zeilen:

export function withPreserveHeader ( source: string, rules: string [], name: string ) { if ( rules. length === 0 ) return source const header = [ `// VibeUI ${ name }. Keep as installed:`,... rules. map (( r ) => `// - ${ r } ` ), "", "" ]. join ( " \n " ) // comments before "use client" are lost by the CLI, so the header goes after it const directive = /^ ([ "' ] use client [ "' ];?\r?\n)\r?\n? /. exec ( source ) return directive? ` ${ directive [ 1 ]} \n ${ header }${ source. slice ( directive [ 0 ]. length )} `: header + source } Enter fullscreen mode Exit fullscreen mode Regeln helfen nichts, wenn die Komponente im Projekt von jemand anderem bricht Der Agent wird deine Komponente in ein Projekt einfügen, das du nie gesehen hast. Was sich als zwingend notwendig herausstellte:

Ich nutze dieses Setup in VibeUI: einem shadcn-kompatiblen Katalog mit über 2.000 React/Tailwind-Komponenten und Landing-Blocks, bei dem jeder Eintrag ein „Copy for AI“-Briefing hat. Vorschauen und Suche sind ohne Konto offen zugänglich. Falls du das Problem „der Agent schreibt meine Komponente um“ anders gelöst hast, würde ich gerne in den Kommentaren erfahren, wie.