How our vibe coded website looks like a designer made it

OP, you accidentally invented the design process that they teach in design school. You can officially call yourself a designer. 1) have a high level functional goal 2) be inspired and think of a motif 3) go wide within that motif and explore 4) narrow in on a single direction and iterate 5) fine tune the details until you are creatively satisfied and the design meets your goals from step 1.

A designer did make it! The process you undertook is called design!

Best tip in here: when tweaking details like colors and fonts, just ask Claude to make you throwaway picker tools right in the site. This is totally obvious in retrospect but I never thought of it (probably because of 25 years of thinking about tools in terms of reusable components). Thanks for writing!

Loved the process write-up and the iteration screenshots. The hero section looks cool, but the rest of the front page could be refined even further (it still has an AI‑generated look). When doing web designs with AI, I start with design tokens, typography, then build out every section by multiple iterations. Unfortunately, the more vague the prompt is, the more "AI‑generated" the end result looks.

It looks like a lot of their early attemps are early gpt outputs or claude design outputs, which have a lot of the same smell. People are discounting how good image->html flows are these days though. I had gemini describe this webpage as prompts, then fed it into an image -> code pipeline. Note that this is with 0 input from me: https://html.non.io/railcode-animated This is with Opus 5.5 building it out on low effort, and yes the spec was already made from the original site, but 0->1 that doesn't result in purple gradients or claude brown is very much possible now.