Build the useful path

The happy path, end to end

This is the longest block, and most of it is unglamorous. Build the input, then the action, then the result, as plainly as possible. A file picker that looks like a file picker. A button that says what it does. A result you can copy or download.

Get the whole path working once, roughly, before improving any part of it. A beautiful input with no result is not a tool; an ugly tool that works is one.

Use the three examples

Run your three real examples through it after every meaningful change. They will break things your imagination did not: the file with a strange name, the list with an empty line, the email with a plus sign. Fix what they reveal. Add a fourth example whenever you find a new kind of input.

Working with an AI assistant

Describe the input, the action and the result, and paste a real example. Ask for the smallest version. Read what it writes before running it, and ask it to explain anything you could not change yourself. You are going to maintain this; it is not.

What to ignore for now

Colours, animations, edge cases nobody will hit, performance beyond “fast enough with my examples”. The next step is for making it clear; this one is for making it work.

Done when

All three examples go from input to result without you touching the code in between, on the live address.