Claude Code en UI aanpassen: van uitleggen naar aanwijzen

Wie met Claude Code of een andere coding agent werkt, kent het patroon. De eerste versie van een pagina staat er in een paar minuten. Daarna begint het bijsturen: de knop moet iets meer ruimte, de kop is te groot, die kaart moet naast de andere en niet eronder.

Dat bijsturen kost bij ons de meeste tijd. Niet omdat de agent het niet kan, maar omdat hij niet ziet waar jij naar kijkt.

Het probleem: UI uitleggen in woorden

Een UI-aanpassing in woorden ziet er vaak zo uit:

"On the pricing page, the button at the bottom of the second card should get the same style as the button in the header, with more space above it."

Je agent moet dan eerst uitzoeken welke pagina je bedoelt, welk component dat is, in welk bestand het staat en welke van de knoppen de tweede kaart is. Soms vindt hij de goede. Soms past hij een andere knop aan, en begin je opnieuw.

Hoe preciezer je wilt zijn, hoe meer je gaat typen: bestandsnamen, class names, stukjes markup. Je bent dan meer bezig met uitleggen dan met beoordelen.

Wat we eerst probeerden

• Screenshots plakken. Helpt de agent te zien wat je bedoelt, maar niet waar het in de code staat.
• Bestanden en componenten noemen. Werkt, maar dan moet jij eerst zelf zoeken. Daar wilde je de agent juist voor gebruiken.
• Alles in één lange prompt. Tien opmerkingen in één bericht leveren vaak acht goede wijzigingen op en twee die je niet meer terugvindt.

De oplossing: aanwijzen

Een collega aan je bureau zou je gewoon laten wijzen: "deze, hier". Dat wilden we ook voor onze agent. Daarom bouwden we Tencil.

Met Tencil klik je in je draaiende app op het element en typ je wat er anders moet. Je agent krijgt het component, de source file en de markup mee. Uitleggen waar iets staat is niet meer nodig.

Zo werkt het:

1. Start Tencil met npx tencil vanuit je project. Het ligt dan als overlay over je dev-site.
2. Druk op C, klik op een element en typ je prompt.
3. Je opmerking gaat naar Claude Code of T3 Code. Het antwoord van je agent staat naast de pagina, de wijziging zie je zodra je dev-server herlaadt.

Wil je een hele pagina nalopen, dan zet je eerst al je opmerkingen neer en stuur je ze daarna samen. Elke pin krijgt een eigen thread. Klopt het nog niet, dan reageer je erop voor een volgende ronde. Is het goed, dan sluit je hem.

Wat je nodig hebt

• Node 22 of nieuwer.
• Claude Code of T3 Code.
• Een project met een dev-server, zoals Next.js, Vite of een andere.

Er is geen Tencil-server en geen account. Je dev-site, een kleine daemon en je agent draaien op je eigen laptop. Tencil is gratis en open source onder de Apache-2.0-licentie. De code staat op github.com/tencildev/tencil.

Wat het ons opleverde

Het grootste verschil zit niet in snelheid, maar in hoe je werkt. Je beoordeelt de pagina zoals een gebruiker hem ziet, en wijst aan wat beter kan. Je hoeft niet meer te schakelen tussen browser, code en prompt.

Een coding agent maakt de eerste versie snel. Het verschil tussen een snelle eerste versie en een goede pagina zit in de details, zoals snelheid en toegankelijkheid, en die details wijs je makkelijker aan dan dat je ze beschrijft.

Benieuwd hoe we AI verder inzetten? Lees hoe je AI agents inzet in het MKB of waarom wij als bureau eigen producten bouwen.