Een AI-agent leren om websites te bouwen en React-componenten te schrijven

Ik betrapte mezelf er onlangs op dat we gewend zijn geraakt aan neurale netwerken die code schrijven, maar het proces lijkt nog steeds op het heen en weer sturen van tekstblokken in een chat. Je kopieert een prompt, krijgt een muur van code, plakt het in je project, en beseft dat je imports bent vergeten of dat de styles zijn gebroken... Bekende routine?

Het lijkt erop dat de mensen bij Google Labs hetzelfde zat waren en stitch-skills hebben gelanceerd. Dit is niet nog een "programmeur-doder", maar eerder een set concrete skills voor AI-agents die werken via het MCP (Model Context Protocol). Simpel gezegd: dit zijn instructies en tools die je Claude, Cursor of Gemini niet alleen tekst laten genereren, maar bewust de projectstructuur laten manipuleren, designsystemen volgen en zelfs complete websites assembleren uit één zin.

Wat is dit eigenlijk

Het project is een bibliotheek van skills die zijn afgestemd op het werken met Stitch — een server voor visuele vormgeving en interface-generatie. Het belangrijkste kenmerk hier is standaardisatie. Elke skill in de repository is verpakt volgens een uniform sjabloon: er is een manifest voor de agent (SKILL.md), validatiescripts en "gouden standaard"-voorbeelden.

Dit is nodig zodat de agent niet hoeft te raden wat te doen, maar een duidelijk algoritme volgt. Als je bijvoorbeeld vraagt om een schets om te zetten in React-componenten, gebruikt de agent skill react-components, die de regels van het spel kent: hoe syntaxis controleren en design tokens niet verliezen.

Waar is het nuttig voor in de praktijk

De repository bevat momenteel ongeveer een dozijn kant-en-klare skills. Ik heb de skills uitgelicht die daadwerkelijk tijd besparen, in plaats van alleen maar flashy te zijn in demos.

Complete site-generatie via stitch-loop

In plaats van "bouw me een landingspagina" te vragen en één bestand index.html te krijgen, laat deze skill de agent een volwaardige structuur deployen. Het creëert de noodzakelijke pagina's zelf, organiseert bestanden en controleert of alles daadwerkelijk opent. Dit is in wezen prototype build-automatisering.

Gedachten polijsten met enhance-prompt

Vaak geeft een neuraal netwerk een slecht resultaat omdat de prompt iets was als "maak het mooi." Skill enhance-prompt neemt je gefragmenteerde ideeën en zet ze om in een spec met UI/UX-termen en designsysteem-context. Het is alsof je een ervaren lead het werk laat nakijken voordat het naar een developer wordt gestuurd.

Documentatie via design-md

Mijn "favoriete" deel van het werk — beschrijven waarom de knop precies die kleur heeft en hoe de spacing werkt. Skill design-md analyseert het project en genereert het DESIGN.md bestand zelf. Het is niet alleen een lijst van styles, maar een beschrijving van het designsysteem in menselijke taal die vervolgens helpt om nieuwe schermen nauwkeuriger te genereren.

Converteren naar React en shadcn/ui

Voor degenen die al met prototypes hebben gespeeld en dit naar productie willen pushen, zijn er skills react-components en shadcn-ui. Ze zorgen ervoor dat bij het overzetten van design naar code, component-logica niet verloren gaat en de juiste libraries worden gebruikt.

Hoe het werkt onder de motorkap

Als je in een willekeurige skill-map kijkt, zie je een strikte structuur. De mensen bij Google Labs zijn duidelijk voorstanders van voorspelbaarheid:

• SKILL.md: in wezen een systeemprompt die de taak van de agent uitlegt.
• scripts/: uitvoerbare bestanden voor het valideren van het resultaat. Als de agent de code heeft verprutst, zal het script het daarover informeren.
• examples/: referentievoorbeelden. Het model leert ervan (few-shot learning) om te begrijpen welk resultaat wordt verwacht.

Skills installeren is zo eenvoudig mogelijk gemaakt via CLI:

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

De opdracht zelf zal de tools vinden die je hebt geïnstalleerd (zoals Cursor of Claude Code) en er nieuwe mogelijkheden aan toevoegen.

Is het de moeite waard om te proberen

Het project is specifiek. Als je code op de ouderwetse manier in plain Vim schrijft zonder AI-assistentie, is dit waarschijnlijk niet nuttig voor je. Maar als je al een deel van je routine naar Cursor hebt verplaatst of MCP-servers gebruikt, dan is stitch-skills een geweldig voorbeeld van hoe je werk met neurale netwerken kunt structureren.

Dit zal vooral aanspreken bij frontend-developers en degenen die snel MVPs bouwen. De mogelijkheid om een abstracte schets om te zetten in een gestructureerd project met documentatie en React-componenten in een paar minuten is iets waar we uiteindelijk toch wel zullen komen.

Aan de negatieve kant: de documentatie is op sommige plaatsen wat dun, en het project wordt niet officieel ondersteund door Google als een commercieel product (het is een Google Labs-experiment). Maar als fundament voor het creëren van je eigen skills of voor het versnellen van je huidige layout-werk — het is een zeer waardevolle optie.

Je kunt alle beschikbare skills bekijken en de specificatie lezen in de projectrepository.