The wine profile in a Claude project drew one complaint more than any other: the filling in itself. You answer ten questions, keep the answers somewhere, pour them into the shape of the template, and paste the whole thing into a project’s instructions. Do that in a chat window and you lose the thread halfway. Do it in a notes app and you end up with brackets that no longer line up.
So I turned it into a card. Ten fields, and at the bottom the text you copy. It sits at sparkone.nl/tools/smaakprofiel.html and works in both languages.
The job
One page, nothing else. No account, no server, no framework that falls over in a year. What you type has to stay in your browser, because it is about what you drink and what you spend, and nobody needs to host that.
The page also had to look like the rest of the site. That sounds like a detail, and it is the reason I set the prompt up differently than usual.
My actual prompt
Build a page in public/tools/ that asks ten questions and turns them into a
profile text the user can copy. One file, no external scripts or fonts,
no network traffic. What the user types stays in localStorage.
Read DESIGN.md first and use only the colours, sizes and fonts documented
there. Do not invent new values.
The page is bilingual with a toggle at the top. Switching languages keeps
everything already filled in.
Next to copy, add a button that saves the profile as a text file.The line doing the most work is the one about DESIGN.md. Without that pointer you get a page that looks fine and belongs nowhere: its own blue, its own greys, rounded corners where the site has sharp ones.
Taken apart
The pattern comes loose from this page, and it applies the moment you build something that has to sit next to existing work.
Point at the document, not at taste. “Make it look good” or “use our house style” gets you an average. “Read DESIGN.md and use only what’s in it” gets you something checkable, because afterwards you can go through it line by line.
Say what is not allowed in. No external scripts, no fonts from a CDN, no network traffic. Those are not style choices, they are properties you are stuck with later.
Describe the behaviour on the second pass. Most bugs in small interfaces are not in the first render but in the second: what happens when someone switches language, comes back an hour later, or hits clear. Leave that out and the model decides for you, and it usually decides to wipe.
What broke
More interesting than what worked. I have a check on this site that looks over any interface change, and it came back with three things.
The first was a thick coloured border down the left side of the note block. That is one of the most recognisable tells of AI-generated interfaces, and I had put it there myself without thinking. Replaced with a panel carrying the same ink border as everything else.
The second was a set of font sizes that were not on the site’s type ramp. Something like 0.875rem here, 1.5rem there. On its own it looks fine, and next to an article you see immediately that it is not the same page.
The third is the one worth keeping. The model had added a dark mode with colours it made up, while the site has no dark mode. That is the classic pattern: adding something that is a good idea in isolation but was never agreed anywhere, so nobody maintains it. Removed.
None of the three came from my own eye. They came from a check that runs automatically, which is the real point of this piece. You can let a model build things you cannot fully judge yourself, as long as something is watching that does know the agreements.
Ethics note
The card sends nothing anywhere, and that is a claim you can check in the code: there is not a single network call in it. What you type goes to localStorage, which is storage inside your own browser.
That is not the same as safe. On a shared computer your profile is simply sitting there, with no password in front of it. The clear button really does wipe it, and on a laptop you share with other people that is the button to use.
Also watch what a card like this makes easy. Once your profile sits neatly in one block of text, it is just as easily pasted into the chat window of a service you know nothing about. The format makes sharing easier, and sharing is exactly what you don’t want to do with this kind of text without thinking first.
Take it
Fill in the card if you don’t have a profile yet. Ten minutes, and afterwards you have something you can paste into any project.
If you want to build a page like this for your own subject, here is the empty version of the prompt:
Build one HTML file in [folder] that asks [number] questions about [subject]
and turns them into text the user can copy.
No external scripts, no fonts from elsewhere, no network traffic.
Input stays in localStorage.
Read [path to your style document] first and use only the colours, sizes
and fonts in it. Do not invent new values.
Also describe the behaviour when: switching language, returning after an hour,
and pressing clear.A small exercise for today: take a form you fill in regularly, count the fields, and see whether three of them could go. That saves more than any prompt.