Van het wijnprofiel in een Claude-project kreeg ik één klacht vaker dan alle andere: het invullen zelf. Je moet tien vragen beantwoorden, de antwoorden ergens bewaren, ze in de vorm van het sjabloon gieten en dat geheel in de instructies van een project plakken. Wie dat in een chatvenster doet raakt halverwege de draad kwijt, en wie het in een notitie-app doet zit met haakjes die niet meer kloppen.
Dus heb ik er een invulkaart van gemaakt. Tien velden, en onderaan staat de tekst die je kunt kopiëren. Hij staat op sparkone.nl/tools/smaakprofiel.html en werkt in beide talen.
De klus
Eén pagina, verder niets. Geen account, geen server, geen framework dat later omvalt. Wat je typt moet in je browser blijven, want het gaat over wat je drinkt en wat je uitgeeft, en dat hoeft niemand te hosten.
De pagina moest er bovendien uitzien als de rest van de site. Dat klinkt als een detail, maar het is de reden dat ik de prompt anders opzette dan ik gewend was.
Mijn echte prompt
Bouw een pagina in public/tools/ die tien vragen stelt en er een profieltekst
van maakt die je kunt kopiëren. Eén bestand, geen externe scripts of fonts,
geen netwerkverkeer. Wat de gebruiker typt blijft in localStorage.
Lees eerst DESIGN.md en gebruik alleen de kleuren, maten en fonts die daar
gedocumenteerd staan. Verzin geen nieuwe waarden.
De pagina is tweetalig met een knop bovenin. Bij wisselen blijft alles wat
al is ingevuld gewoon staan.
Naast kopiëren moet er een knop zijn die het profiel als tekstbestand opslaat.De regel die het meeste werk deed is die over DESIGN.md. Zonder die verwijzing krijg je een pagina die er prima uitziet en nergens bij hoort: eigen blauw, eigen grijstinten, afgeronde hoeken waar de site scherpe randen heeft.
Ontleed
Het patroon is los te trekken van deze pagina, en het is bruikbaar zodra je iets bouwt dat naast bestaand werk moet staan.
Wijs naar het document, niet naar de smaak. “Maak het mooi” of “gebruik onze huisstijl” levert een gemiddelde op. “Lees DESIGN.md en gebruik alleen wat daar staat” levert controleerbaar werk op, want achteraf kun je regel voor regel nakijken of het klopt.
Zeg wat er niet in mag. Geen externe scripts, geen fonts van een cdn, geen netwerkverkeer. Dat zijn geen stijlkeuzes maar eigenschappen waar je later aan vastzit.
Beschrijf het gedrag bij wisselen. De meeste fouten in kleine interfaces zitten niet in de eerste weergave maar in de tweede: wat gebeurt er als iemand van taal wisselt, terugkomt na een uur, of op leegmaken drukt. Als je dat niet benoemt, kiest het model zelf, en het kiest meestal wissen.
Wat brak
Interessanter dan wat werkte. Ik heb een controle op de site die bij elke wijziging aan een interface meekijkt, en die gaf drie dingen terug.
De eerste was een dikke gekleurde rand aan de linkerkant van het notitieblok. Dat is een van de meest herkenbare tekenen van door AI gegenereerde interfaces, en ik had hem er zelf ingezet zonder erbij na te denken. Vervangen door een vlak met dezelfde inktrand als de rest.
De tweede was een reeks lettergroottes die niet op de typografische ladder van de site stonden. Iets van 0,875rem hier, 1,5rem daar. Los lelijk het niet op, maar naast een artikel valt het meteen op dat het niet dezelfde pagina is.
De derde is de leerzaamste. Het model had een donkere modus toegevoegd met zelfverzonnen kleuren, terwijl de site geen donkere modus heeft. Dat is het klassieke patroon: iets toevoegen dat op zichzelf een goed idee is, maar dat nergens is afgesproken en dus nergens onderhouden wordt. Eruit gehaald.
Alle drie kwamen niet uit mijn eigen oog, maar uit een controle die automatisch draait. Dat vind ik het echte punt van dit stuk. Je kunt een model laten bouwen zonder dat je alles zelf kunt beoordelen, mits er iets meekijkt dat wél weet wat de afspraken zijn.
Kanttekening
De kaart stuurt niets door, en dat is een bewuste keuze die je aan de code kunt controleren: er staat geen enkele netwerkaanroep in. Wat je typt gaat naar localStorage, en dat is opslag in je eigen browser.
Dat is niet hetzelfde als veilig. Op een gedeelde computer staat je profiel er gewoon, zonder wachtwoord. De knop “leegmaken” wist het echt, en op een laptop die je met anderen deelt is dat de knop die je gebruikt.
En let op wat een kaart als deze makkelijk maakt. Zodra je profiel netjes in één blok tekst staat, is het ook zo gekopieerd naar een chatvenster van een dienst waar je verder niets van weet. Het formaat maakt delen makkelijker, en delen is precies wat je met dit soort tekst niet wil doen zonder na te denken.
Pak ‘t zelf
Vul de kaart in als je nog geen profiel hebt. Duurt tien minuten en je hebt daarna iets dat je in elk project kunt plakken.
Wil je zelf zo’n pagina bouwen voor jouw onderwerp, dan is dit de lege versie van de prompt:
Bouw één HTML-bestand in [map] dat [aantal] vragen stelt over [onderwerp]
en er een tekst van maakt die de gebruiker kan kopiëren.
Geen externe scripts, geen fonts van elders, geen netwerkverkeer.
Invoer blijft in localStorage staan.
Lees eerst [pad naar je stijldocument] en gebruik alleen de kleuren,
maten en fonts die daar staan. Verzin geen nieuwe waarden.
Beschrijf ook het gedrag bij: van taal wisselen, terugkomen na een uur,
en op leegmaken drukken.Kleine oefening voor vandaag: neem een formulier dat je regelmatig invult, tel de velden, en kijk of het er ook drie minder kunnen zijn. Dat scheelt meer dan welke prompt ook.
Zulke oefeningen werken beter aan een tafel dan in je eentje. Ik weeg of ik er een dag van maak, waarop je met een eigen formulier binnenkomt en met een werkende invulkaart weggaat. Wie dat zou willen, kan zich melden op de praktijk.