作者：Yakko Majuri，Railcode 创始人。文章发表于 2026 年 8 月 10 日：How our vibe coded website looks like a designer made it。下文的「我」均指作者，模型偏好是他当时的个人体验。
想到用 Vibe Coding 做的网站，脑海里可能会浮现那种深色渐变背景、紫色强调色的落地页。我做了一个这样的假网站当例子，结果它看起来和不少真实网站还挺像。
但 Railcode 网站 也是我用 Vibe Coding 做的，样子却很不一样，可以看看当时的网站演示。
说它「像设计师做的」，我自己都觉得有点夸张，但真有人这么说。好几个人来问我网站是怎么做的，甚至问我找谁合作的。被问得多了，我决定试着讲清楚这次设计的创作过程，虽然这事挺难。
我没觉得自己多厉害，也不认为设计师可以省掉，恰恰相反。大家都在讨论 LLM 生成的设计有多糟糕，我却发现，有 Coding Agent 帮忙之后，我对设计越来越感兴趣了。以前我有想法也做不出来，现在终于能把脑海里的画面变成真正的东西。
我想说明的是，Coding Agent 也能帮人做出有品位的设计。这里的「有品位」，就是做出自己喜欢的东西。可以放心去试。
我还把所有原型和生成它们的准确 Prompt 放进了一个索引里，这样就能回看每一步到底是怎么走过来的。
一大堆过山车
Railcode 的名字来自「code on rails」，也就是让代码沿着轨道运行。在 Railcode 里，应用和 Agent 本质上都是代码；我们负责基础设施和 guardrails，也就是那些「轨道」，让它们能在安全的环境里快速部署。
决定做网站的前一周，我发现自己在 Railcode 里给自己做东西特别开心。我本来就是它的活跃用户。问了客户，他们也说用得很开心。
轨道加上乐趣，那不就是过山车吗？于是我决定，网站上要有过山车。
我不是设计师，很难凭空想出一个完整的概念，所以得靠例子和灵感。我有两种做法：
上网找自己喜欢的设计。
让 Agent 围绕同一个东西，用不同风格生成一大批设计。
这样做，是想看看还有哪些可能。我会从不同地方拿到一些想法，把它们拼起来，再不停地改，直到自己满意。大多数尝试最后都走不通。
最初的过山车原型演示里，有两个 ASCII 风格的方案。它们的灵感来自我那周看过的一位朋友的网站。剩下的交给 Fable 自由发挥。这些方案都只是灵感的种子。
探索时，有两种做法对我很有帮助：
让复杂程度拉开差距。 给 Agent 一个概念，让它从简单到复杂、从克制到夸张，各做一些版本。这样能看出这个概念本身有没有意思。如果整条光谱上的方案我都不喜欢，可能就是方向选错了。也能看出，我更想做得简洁一点，还是可以再疯狂一点。
留几版让它放开做。 尝试一个概念时，我通常至少要 4 个版本，有时会要 10 个。至少一半会给些指导，剩下的就让 Agent「go wild」。这些自由发挥的结果大多很糟，但有时能点出新想法。
那个又丑又疯的霓虹灯版本，显然就出自「放开做」的那一组。我绝不会直接用它，但它让我跳出了 ASCII 的思路，开始想做点更大胆的东西。
过山车大亨
小时候，我玩过一款叫 RollerCoaster Tycoon 的游戏，也就是《过山车大亨》。至少对我来说，目标就是建出最酷的游乐园。游戏里确实能搭出很好看的乐园。
看着 Claude 做出的那个霓虹灯怪物，我想起了这款游戏，也确定了网站要向它致意。
我先让 Fable 做了一个迷你版游戏，Prompt 是这样的：
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意思是：做一个类似《过山车大亨》的独立组件，在一个 HTML 里就能实际玩起来；并行做两个版本，其中一个使用透明背景。
小游戏演示挺酷的。有那么一会儿，我真觉得网站里会放一个游戏。但玩了一阵之后，我发现这有点过头了。
于是我重新来过，决定先做出一座自己真正喜欢的过山车。试了很多次之后，终于做出来了。
当时我以为大功告成了，直接把过山车往一个网站模板上一放，甚至短暂地觉得这样就行了。
但看着放进模板的效果，我又觉得：这网站中间怎么突然冒出一座过山车？太突兀了。
看来还得有一整座游乐园。
从过山车到整座乐园
既然要做乐园，我不知道为什么就觉得，它应该放在 Hero，也就是首屏主视觉区域的底部。大概是以前看过的网站留下的印象，但我已经想不起具体是哪几个了。
于是我让 Agent 加一条乐园景观带：
add a thin strip of maybe 200px height where we have a bunch of amusement park attractions in the same style as the rollercoaster也就是：加一条大约 200px 高的窄带，在里面放一批游乐设施，风格要和那座过山车一致。这是当时的景观带演示。
这时已经能看出一点整体方向了，可放到网页上，效果还是挺差。与此同时，我也已经确定要做一个介绍 Coding Agent 的区域，正在并行处理那部分组件。
继续迭代后，景观带和首屏的关系才变得顺眼。
我是以先前那座过山车为基准统一其他素材的风格，逐个挑选动画、逐个调整。还做了一个决定：景观带不应该孤零零地摆在那里，而应该承担向下一个区域过渡颜色的作用。这个想法应该也来自以前看过的网站，只是同样记不起具体出处了。
不断复制、比较和微调
做到这个版本时，我非常开心，立刻拿去给朋友看。但总感觉哪里还差一点，于是开始不断复制设计，做出一个又一个 fork。
我做网站时，会先把所有内容放在一个 HTML 文件里。等设计基本定下来，才拆成 React 组件，让 Agent 可以并行修改不同组件。
因为单文件特别方便复制：改一两个地方，把新旧版本摆在一起，马上就能比较。
我还会做一些自己称为「playground」的小页面，用来试颜色和其他变量。
这次，我先把草地从蓝色改成绿色，毕竟草地就是绿的嘛。但第一次得到的绿色不太对。我就让 Claude 做了一个 playground，可以随手调整强调色、文字颜色、草地颜色、背景颜色等，最后才找到想要的草地色调。
我甚至有点想做一个小型开源工具，专门处理这些版本复制和 playground。有空也许会试试。
草地弄好之后，我开始抠其他细节。
其实还没决定做过山车时，我就让 Fable 做过「一个有趣的开发者工具网站」的 mockup，也就是设计草稿。大部分都挺烂。但后来想改进 CTA，也就是引导用户采取行动的按钮时，我想起其中有个设计正好合适，就把那个按钮方案拿了出来。
所以我愿意在早期多看一些设计，哪怕它们很糟。说不定后面就能从里面翻出一块宝。
白色背景也没有给我想要的那种有趣的感觉。我就把它改成天蓝色，再加上云朵。白色变成蓝色，感觉一下就不一样了。
接下来的东西都顺着这个方向展开。Hero 决定了整个网站后续的风格。
当时 Railcode 产品里的强调色还是蓝色，但网站里的绿色出现得太自然了，我就接受了，没有硬往回改。于是有了浅绿色区域、深绿色区域，最后还有土壤颜色的页脚。看来之后可能还得回头调整一下产品设计……
网站其余部分仍然改了很多轮。不过整体风格定下来之后，做新图标、新素材时就有了参考。先找到自己想要的感觉，后面才知道该往哪里走。
当然，总有更多细节可以抠。最后再举一个导航栏的例子：无论固定成哪一种颜色，我都觉得它和页面不太搭。所以我让导航栏随着当前可见的页面区域，逐渐变成那个区域的背景色。我觉得这种变化让效果好了很多。
在这之前，白色、浅蓝色、浅绿色、深绿色的固定版本我都试过。后来才发现，让它们随页面切换就挺好。
灵感从哪里来
作为非设计师，看已有作品是我创作过程里少不了的一步。清楚的例子，也更方便告诉 Coding Agent 我到底想要什么。
有时做出的东西，会和参考作品很像。比如从浅色区域过渡到深色区域的处理，我经常会参考 Contextual AI。对比示例里，左边是 Contextual AI，右边是 Railcode。
另一些影响则没那么直观。比如 Railcode 里有一个区域，其实受到了 Clay 的启发。对应的对比示例里，左边是 Clay，右边是 Railcode。
我也一直在看其他网站。即便没有拿来一个明确的元素，它们仍然会影响我。Railcode 看起来和 Sentry 完全不同，但我一直看 Sentry 的网站，琢磨插画怎么才能和内容配合得好。
有张对话截图里，已经是午夜过了半小时，我还在发消息：「再来点。」
把这些做法放在一起，大致是这样：
我做设计只用 Anthropic 的模型。以我当时的体验，即便给出具体指示，OpenAI 的模型仍然做得很吃力；Fable 是我最喜欢的。
在我满意设计、准备开始处理文案等内容之前，所有东西都留在一个 HTML 文件里。
我看很多网站找灵感，会反复看自己喜欢的网站，也不断找新网站。如果特别喜欢某个组件，就拿它作为继续探索的起点。
我会在一开始让 Claude 生成大量不同的网站，最后扔掉其中 99% 的工作。但偶尔也会从中取出一个组件，或得到一个值得试的新想法。
我经常让 Coding Agent 留几个方案「放开做」，也会让它从同一个创意种子出发，做出从极简到离谱的一整组版本。
我喜欢随时能回看自己的过程，所以会不断复制设计，改几个地方，再和原版比较。可能沿着新版本继续，也可能退回原版，但我从不删除这些 fork。
我会做 playground，让自己直接调整颜色、字体和位置，实时看效果，省掉每次都要告诉 Agent 改什么的缓慢往返。
我不停地迭代，再迭代。大多数尝试都是死路。
而且，我在这个过程中玩得很开心。
