How our vibe coded website looks like a designer made it(railcode.dev) |
How our vibe coded website looks like a designer made it(railcode.dev) |
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.
I like hearing it articulated for me.
1. Do something. (Many of the five above seem nice! But there’s lots of methods that fit different tasks)
2. Ask some users please for the love of god! Show it to somebody! Get your mom’s feedback! Anybody!!!
Etc. It was drilled into me pretty hard at GaTech by their HCI prof, but perhaps he spent so much time reiterating it because it’s heterodox.
It doesn’t help that “design” covers everything from splash pages that sell SaaS to doors and blankets and stuff. I’m a little dubious of any single unified framework other than the aforementioned Frantic Dyad that could hope to cover all that space.
This trade-off is something I like the least about AI. In the time it takes someone to produce excellent results using AI without giving up control, people unconcerned with quality or style can produce 100x as much. So by the end of the day, your inbox or your social media feed is mostly slop.
Choose 1:
A UX-designer with that outputs design with AI at the speed of a UX-designer without AI
A programmer that can output designs with AI at the same speed, and make your database, and make your helpdesk, and make your social media, booking systems, etc.
The "designer" happens to not to be human. At that point it just sounds like going to a website template store and scrolling endlessly through options until you find a template you'd say "meh, this will do".
I explained that exactly what design is I just lack the skills to do it in illustrator and Photoshop but yes, no one gets it right the first time.
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!
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.
https://validator.w3.org/nu/?doc=https%3A%2F%2Frailcode.dev%...
Doing this is really time-consuming so certainly there were some corners cut -- need to also focus on product after all!
Particularly after we changed a lot of the messaging (after this post was written) I slacked off a bit. Keen to hear what's most annoying to you though, always looking for feedback.
The website is simple enough that any design decicion could just as well ahve been done by a real human.
The em-dashes, and the gradients were always egregious because they're strong opinionated decisions. This is just a straighforward, clean, tasteful website (really what most sites should aim for).
This website demonstrates a tremendous amount of human effort, and it walks through the iterative design process that led to the final result. Taking inspiration, trying out ideas, tinkering—that's design.
Your site looks like an AI made it.
Now there is an actually easy fix: just replace the glass panels and tabs with something that actually fits the rest of the aesthetic. And then I could buy that it was human-designed, at which point, it basically was. And just AI-coded.
Otherwise it's quite cool, and well done.
The rest of the design kind of reminds me of stardew valley's site, which is quite cute.
Hope you don't take this as evil criticism, overall I'm a big fan.
edit: it's not even AI coded, more like incohesive, and with the context of the article...but a simple fix and overall well done ;)
Where is this glass?
Is it the lighter green cards on the home page? That's not really glass, that's just a different a lighter color scheme. The tabs also look fine.