我用AI把网站做出了设计师的质感
How our vibe coded website looks like a designer made it
很多人认为'vibe coded'网站就是AI生成的廉价产物，但我的Railcode网站却常被误认为是专业设计师的作品。作为非设计背景的开发者，我利用Fable和Claude等coding agents，将童年游戏Rollercoaster Tycoon的灵感融入网页，通过不断生成、迭代和'fork'设计变体，最终打造出一个充满趣味且视觉统一的网站。这篇文章分享了我如何借助AI将抽象创意落地，以及为什么编码代理反而让我对设计产生了更浓厚的兴趣。
以前我对此无能为力，但现在我能够将脑海中的创意愿景变为现实。
HN 评论区
77- fiatpandas
楼主，你无意中发明了设计学院里教的那套设计流程。你现在可以正式自称设计师了。
1) 设定一个高层级的功能目标
2) 寻找灵感并构思一个主题
3) 在该主题范围内广泛探索
4) 聚焦于单一方向并迭代优化
5) 微调细节，直到你感到创作上的满足，且设计达成了第 1 步中的目标。
- ananmays
这确实是一位设计师做出来的！你所经历的过程就叫设计！
- quicklywilliam
这里最好的建议：在调整颜色和字体等细节时，直接让 Claude 在网站上为你生成临时的选择器工具。
事后看来这简直显而易见，但我以前从未想过（可能是因为 25 年来我一直把工具视为可复用组件来思考）。感谢分享！
- jjcm
看起来他们早期的尝试大多是早期 GPT 输出或 Claude 的设计输出，这些都带有一种相似的味道。不过，人们低估了如今图像转 HTML 流程的强大程度。
我让 Gemini 用提示词描述了这个网页，然后将其输入到图像转代码的流水线中。注意，这整个过程我没有任何输入：
https://html.non.io/railcode-animated
这是 Opus 5.5 在低努力模式下构建的，是的，规范确实源自原网站，但现在完全有可能实现从 0 到 1 的构建，而不会出现紫色渐变或 Claude 棕色调。
- chmod775
答案：因为这是人类通过迭代过程设计的。LLM 只是写了代码。