Wie man einen KI-Agenten beibringt, Websites zu erstellen und React-Komponenten zu schreiben

Ich habe mich neulich dabei ertappt, darüber nachzudenken: Wir haben uns daran gewöhnt, dass neuronale Netze Code schreiben, aber der Prozess sieht immer noch so aus, als würde man Textbrocken in einem Chat hin und her schicken. Du kopierst einen Prompt, bekommst eine Wand von Code, fügst sie in dein Projekt ein, merkst dann, dass du Imports vergessen hast oder die Styles nicht mehr funktionieren... Routine, oder?

Es scheint, als hätten die Leute bei Google Labs genug davon und haben stitch-skills herausgebracht. Das ist kein weiterer „Programmierer-Killer", sondern eine Sammlung konkreter Skills für KI-Agenten, die über das MCP (Model Context Protocol) funktionieren. Vereinfacht gesagt: Das sind Anweisungen und Werkzeuge, die es deinem Claude, Cursor oder Gemini ermöglichen, nicht nur Text zu generieren, sondern bewusst die Projektstruktur zu manipulieren, Design-Systeme zu befolgen und sogar vollständige Websites aus einem einzigen Satz zusammenzustellen.

Was ist das überhaupt

Das Projekt ist eine Bibliothek von Skills, die für die Arbeit mit Stitch angepasst sind — einem Server für visuelle Gestaltung und Oberflächengenerierung. Das Hauptmerkmal hier ist die Standardisierung. Jeder Skill im Repository ist nach einer einheitlichen Vorlage verpackt: Es gibt ein Manifest für den Agenten (SKILL.md), Validierungsskripte und „Goldstandard"-Beispiele.

Das ist notwendig, damit der Agent nicht raten muss, was er tun soll, sondern einem klaren Algorithmus folgt. Wenn du zum Beispiel fragst, wie man eine Skizze in React-Komponenten umwandelt, nutzt der Agent Skill react-components, der die Regeln kennt: wie man die Syntax überprüft und Design-Tokens nicht verliert.

Wofür ist es in der Praxis nützlich

Das Repository enthält derzeit etwa ein Dutzend fertige Skills. Ich habe diejenigen hervorgehoben, die tatsächlich Zeit sparen, anstatt nur in Demos gut auszusehen.

Vollständige Website-Generierung über stitch-loop

Anstatt „baue mir eine Landing Page" zu sagen und eine einzige Datei index.html zu erhalten, lässt dieser Skill den Agenten eine vollständige Struktur bereitstellen. Er erstellt die notwendigen Seiten eigenständig, organisiert die Dateien und prüft, ob alles tatsächlich funktioniert. Im Wesentlichen ist dies eine Automatisierung des Prototypenbaus.

Gedanken verfeinern mit enhance-prompt

Oft liefert ein neuronales Netz ein schlechtes Ergebnis, weil der Prompt irgendwie war wie „mach es hübsch." Skill enhance-prompt nimmt deine fragmentierten Ideen und verwandelt sie in eine Spezifikation mit UI/UX-Begriffen und Design-System-Kontext. Es ist, als hätte man einen erfahrenen Lead, der die Aufgabe überprüft, bevor sie an einen Entwickler geht.

Dokumentation über design-md

Mein „Lieblingsteil" der Arbeit — zu beschreiben, warum der Button genau diese Farbe hat und wie der Abstand funktioniert. Skill design-md analysiert das Projekt und generiert die DESIGN.md-Datei selbst. Es ist nicht nur eine Liste von Styles, sondern eine Beschreibung des Design-Systems in menschlicher Sprache, die dann dem gleichen KI-Agenten hilft, neue Screens genauer zu generieren.

Konvertierung zu React und shadcn/ui

Für diejenigen, die bereits mit Prototypen herumgespielt haben und dies in die Produktion bringen wollen, gibt es die Skills react-components und shadcn-ui. Sie stellen sicher, dass beim Übertragen des Designs in Code die Komponentenlogik nicht verloren geht und die richtigen Bibliotheken verwendet werden.

Wie es unter der Haube funktioniert

Wenn man sich einen Skill-Ordner ansieht, findet man eine strenge Struktur. Die Leute bei Google Labs sind offensichtlich Verfechter von Vorhersagbarkeit:

• SKILL.md: im Wesentlichen ein System-Prompt, der die Aufgabe des Agenten erklärt.
• scripts/: ausführbare Dateien zur Validierung des Ergebnisses. Wenn der Agent den Code vermasselt hat, teilt ihm das Skript dies mit.
• examples/: Referenzbeispiele. Das Modell lernt daraus (Few-Shot-Learning), um zu verstehen, welches Ergebnis erwartet wird.

Das Installieren von Skills wird so einfach wie möglich über die CLI gemacht:

npx skills add google-labs-code/stitch-skills --skill react:components --global

Der Befehl selbst findet die installierten Tools (wie Cursor oder Claude Code) und fügt ihnen neue Fähigkeiten hinzu.

Lohnt es sich, es zu probieren

Das Projekt ist spezifisch. Wenn du Code noch auf die altmodische Art in purem Vim ohne KI-Unterstützung schreibst, wird dir das wahrscheinlich nicht nützlich sein. Aber wenn du bereits einen Teil deiner Routine zu Cursor verlagert hast oder MCP-Server nutzt, dann ist stitch-skills ein großartiges Beispiel dafür, wie man die Arbeit mit neuronalen Netzen strukturieren kann.

Das wird besonders Frontend-Entwicklern und denen gefallen, die schnell MVPs bauen. Die Möglichkeit, eine abstrakte Skizze in wenigen Minuten in ein strukturiertes Projekt mit Dokumentation und React-Komponenten zu verwandeln, ist etwas, wohin wir ohnehin irgendwann kommen werden.

Auf der negativen Seite: Die Dokumentation ist stellenweise etwas dünn, und das Projekt wird von Google nicht offiziell als kommerzielles Produkt unterstützt (es ist ein Google-Labs-Experiment). Aber als Grundlage für die Erstellung eigener Skills oder zur Beschleunigung deiner aktuellen Layout-Arbeit — es ist eine sehr empfehlenswerte Option.

Du kannst dir alle verfügbaren Skills ansehen und die Spezifikation im Projekt-Repository lesen.