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.
ANananmays20小时前
A designer did make it! The process you undertook is called design!
QUquicklywilliam19小时前
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!
NEnexo-v12小时前
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.
JJjjcm19小时前
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.
评论
5 条预览评论 · 正在加载完整讨论请先登录 h4cker 账号，然后连接 Hacker News 后发表评论。
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.