想到由 vibe coding 生成的网站，多数人联想到暗色渐变与紫色点缀的通用人工智能落地页。然而笔者同样用此法搭建了您正在浏览的网站，观感截然不同。虽觉称其出自设计师之手言过其实，但确有人如此评价并询问制作方式与协作对象。屡被问及后，笔者决定梳理构建该站的创作过程。

想到“vibe coded 网站”，你大概会想到这种样子：

这只是示例用的假网站（但看起来像很多非示例的真网站）。

不过，你现在正看的这个网站也是 vibe coded 的，而且看起来很不一样。我个人觉得说它像设计师做的有些夸张，但真有人这么讲——很多人问我怎么做的，甚至和谁合作的。被问多了，我决定讲讲给 Railcode 网站做设计的创作过程。不是觉得自己牛或设计师多余（恰恰相反），而是大家都在聊 LLM 设计垃圾时，我反而因为有了 coding agents 对设计更兴奋：以前无助，现在能把创意变现实。我想展示你能用 coding agents 做出有品味的设计（品味即你自己喜欢的），你该有信心这么做。

为了写这篇，我把每个原型拉进索引，附上生成它的确切提示词，好真正追溯过程。

一大堆过山车

Railcode 名字来自“code on rails”。Railcode 里的应用和代理只是代码，由我们处理基础设施和护栏（rails），以便快速安全部署。决定做网站前一周，我发现自己（作为活跃用户）在里头给自己建东西很有趣，问客户他们也这么说。Rails + fun = rollercoaster，于是决定网站放个过山车。

我不是设计师，很难从零创作，得靠例子和灵感。两个方法： 1. 浏览网页找喜欢的设计 2. 让代理生成大量不同风格的设计

目的是打开思路，常从多处抓想法组合迭代，大多死胡同。最初的过山车设计里，ASCII 设计受朋友网站启发，其他让 Fable 想象，作为灵感种子。

几点帮我： - 强度层级：让代理按强度/复杂度光谱生成设计，判断概念是否有趣，以及该极简还是更疯狂。 - 放开了做：试概念时通常要至少 4 版有时 10 版，一半给指导，其余让代理自由发挥。大多很糟但能提供新火花。那个丑霓虹设计就是自由发挥的，虽不用但带离 ASCII 想法走向雄心。

过山车大亨

小时候玩《过山车大亨》，目标是建最酷游乐场，画面很美学。看到 Claude 建的霓虹怪物想起这游戏，决定网站参考它。先让 Fable 建迷你版游戏：“build a rollercoaster tycoon like contained component that I can actually play around with in an html — build two in parallel actually. one of them should have a transparent background”。本想放游戏，玩后觉得太多，回到画板只要一个喜欢的过山车。多次尝试后得到单个过山车，曾直接放模板上，但过山车在中间太突兀，显然需要整个公园。

脱离轨道

决定要公园，觉得该放在首屏底部。于是建了条带状区：“add a thin strip of maybe 200px height where we have a bunch of amusement park attractions in the same style as the rollercoaster”。放网站上仍糟：

（同时并行搞定了 coding agents 区块组件。）迭代后变成：

方法是以早先过山车为锚，手选动画，决定带状区不独立而是颜色过渡到下个部分。

分叉又分叉

定稿那版我很开心给朋友看，但感觉不对，分叉（forks）上场。我建网站先保持单 HTML 文件直到就绪，再转 React 组件并行编辑。原因是可以快速 fork/copy 设计，改一两处并排比较。

我还建“playgrounds”调颜色变量。草色从蓝改绿（草本来绿），但绿的调不对，让 Claude 建 playground 试强调色、文本色、草色、背景色等，定下草色调。（差点想建开源工具帮这过程。）草色定后我开始抠细节。早在过山车前，让 Fable 建“mockups of a fun website for a dev tool”，大多垃圾，但后来 CTA 设计想起有个合适的：

这说明早期接触多设计即使糟，后来可能淘到宝。白背景不好玩，改天蓝加云，白变蓝差别巨大。其余跟随，首屏定了全站。Railcode 产品强调色本是蓝，但网站绿色自然出现就拥抱了，有了浅绿深绿区块和土壤页脚。风格定后做新图标可引用。导航原静态色不对，做成随视区背景变色，试过白、浅蓝、浅绿、深绿，最后全变最好。

灵感

非设计师靠现有作品灵感，清晰例子也是引导代理最佳方式。有时很像参考的，如浅变深模式常看 Contextual AI：

有时不清，如 Railcode 区块受 Clay 启发：

也不断看不同网站，即使没直接用也有影响。Railcode 不像 Sentry 但常看其插图融合。

午夜过30分：“more”

过程最相关几点： - 只用 Anthropic 模型设计，OpenAI 即使具体指示也挣扎。Fable 最棒。 - 保持单 HTML 直到满意设计和文案。 - 看大量网站灵感，常回看喜欢的，找新的。特定组件就用作基础。 - 让 Claude 初始生成大量网站，扔掉99%，偶尔拉组件或得新想法。 - 常让代理“放开了做”几个设计，也按极简->夸张光谱建多版。 - 喜欢易追溯，常 fork 设计改几处比原版，不删 fork。 - 建 playgrounds 实时玩颜色字体位置，而非慢迭代。 - 迭代再迭代，大多死胡同。

最重要：过程有乐趣 :)

社区对用 AI 辅助迭代生成网站的过程评价分化，多数人肯定其体现了人类设计师的品味与正统设计流程，部分人则指出成品视觉与代码仍带有典型的 AI 生成痕迹与低级陋习。

认为迭代过程本身就是真正的人类设计

• 不少读者指出，尽管代码由大语言模型写出，但作者经历的灵感搜集、尝试与细化正是设计本质，甚至契合设计学院教材，核心在于人类品味与引导而非单纯追求速度。（较多人） > 你无意中发明了设计学院里教的设计流程，现在可以正式自称设计师了。（@fiatpandas）

认为网站仍带有明显的 AI 生成痕迹与陋习

• 多名评论者认为页面观感依然像随性 AI 编程的产物，玻璃面板等元素格格不入，且源码依赖大量脚本、不含静态内容，验证器报出二十余处警告，反映模型从不懂规范的人类处学来了坏习惯；也有人调侃首个俯冲后的急转弯缺乏缓冲，反映物理设计上的随意。（较多人） > 你的网站看起来就是 AI 做的，只要把玻璃面板和标签页换成符合整体美学的东西，我就能信这是人设计的。（@slopinthebag）

有价值的补充

• 有开发者演示，借助图像描述转代码管线零人工输入即可克隆该站视觉，说明当前工具已能避免典型的紫渐变等 AI 味配色，赋能质量提升可行（@jjcm）。
• 调试细节时可直接让 Claude 在站内生成一次性的颜色字体选取小工具，这种把 AI 当灵活助手而非决策者的用法被赞实用（@quicklywilliam）。
• 将 AI 当作放大品味的工具而非替代决策者，往往比单纯追求产出速度更能做出好作品（@an0malous、@Zaraif13 合并）。