如何让 AI 编写的网页看起来像设计师的专业作品
原文来源：Railcode Blog
当你想到一个靠 vibe coding（氛围编程）做出来的网站时，脑子里大概会浮现出这样的东西：
仅作示例用途的假网站（它看起来很像许多并非示例用途的真实网站）
不过，你现在正在浏览的这个网站，也是我用 vibe coding 做出来的——而且，它看起来完全不一样：
说实话，我个人觉得说它"像是设计师做的"有点言过其实，但我确实被这么夸过！很多人主动来问我这个网站是怎么做的，甚至问我跟谁合作设计的。
既然被问了这么多次"到底是怎么做出来的"，我就想，不如接下这个几乎不可能完成的任务，把我在构建 Railcode 网站时的整个创作过程讲一讲。
并不是因为我觉得自己有多牛，也不是说设计师不需要了（恰恰相反），而是因为当大多数讨论都在吐槽 LLM 生成的设计垃圾时，我却发现，有了编程 Agent 帮忙之后，我对设计反而更有热情了。以前我在这方面束手无策，而现在，我能真正把自己脑海里的创意构想变成现实。
所以我在这里的目标，是想说明：你完全可以借助编程 Agent 做出有品味的设计（所谓"有品味"，就是你自己喜欢的东西），并且你应该有底气这么做。
一大堆过山车
Railcode 这个名字源自 "code on rails"（跑在轨道上的代码）这个理念。在 Railcode 里，应用和 Agent 本质上都只是代码，而我们负责处理基础设施和护栏（也就是那些轨道），让它们能在一个安全的环境中快速部署。
然后，在我决定做这个网站的前一周，我意识到自己在 Railcode 里给自己做东西时玩得特别开心（我是重度用户），而当我问客户时，他们也说玩得很开心。
轨道 + 好玩 = 过山车，于是我决定，这个网站上一定要有过山车。
话说回来，我并不是设计师，所以从零开始构思概念对我来说真的很难。这意味着我必须依赖案例和灵感。为此，我有两个方法：
- 在网上浏览我喜欢的设计
- 让 Agent 用不同风格给同一个东西生成一大堆设计
这样做的目的在于打开思路，看看究竟有哪些可能性。大多数时候，我会从多个地方收集灵感，把它们组合起来，然后不断迭代，直到做出让自己满意的结果。但大多数时候，这都是一条死胡同。
这一次，最早的过山车设计是这样的：
那两个 ASCII 设计（上面两个）的灵感，来自我那一周早些时候看到的一个朋友的网站。其他的则交给 Fable 自由发挥。它们的作用是充当灵感的种子。
这里有几个对我很有帮助的做法：
- 强度层级（Levels of intensity）： 我会让 Agent 拿一个概念/想法，生成处于强度/复杂度光谱上不同位置的设计。这让我能判断这个概念整体上是否有趣（如果整个光谱上的设计我都不喜欢，那多半是我选错了光谱），也能让我感受到，是该在这个概念上更极简一些，还是有空间做得更疯狂。
- 放飞自我（Go wild）： 试验一个概念时，我通常会要求 Agent 至少给出 4 个版本，有时甚至 10 个。其中至少一半的版本我会给出一定程度的指引，剩下的则告诉 Agent 放飞自我。大多数时候这些版本会烂得离谱，但它们往往能成为新想法的火花。
你大概能看出来，那个又疯狂又丑的霓虹设计就属于"放飞自我"的那一部分，它是我绝对不会采用的，但它把我从 ASCII 的思路里拉了出来，带向了更有野心的方向。
过山车大亨
一张《过山车大亨》游乐园的截图
小时候，我常玩一款叫《过山车大亨》（Rollercoaster Tycoon）的游戏。游戏目标（至少对我来说）就是建造一座尽可能酷的游乐园。就像你在上面看到的那样，你能建出非常✨有美感✨的乐园。
看着 Claude 做出来的那个霓虹怪物，我想起了这款游戏，也就是在那一刻，我确定我想让我的网站向它致敬。
所以一开始，我真的让 Fable 给我做了一个这款游戏的迷你版：
"做一个像《过山车大亨》、封装好的组件，我能在 html 里实际拿它玩——其实做两个并行的版本。其中一个要有透明背景。"
这挺酷的，有那么一瞬间，我以为我的网站里真的会塞进一个游戏，但玩了一会儿之后，我意识到那样会有点过火。
于是我重新开始构思，决定只做一架我真正喜欢的过山车。在足够多次尝试之后，我终于得到了它：
当我做出这个设计时，我以为大功告成了。以至于我直接把过山车往一个模板上一贴，一度觉得这样就行了。
这虽然挺酷的，但这过山车搁在网站正中间到底是什么鬼？它格格不入。
显然，我们需要的是整整一座乐园。
彻底脱轨
既然决定需要一座乐园，我不知为何觉得它得放在 hero（首屏）区域的底部。我很确定这念头来自我以前看过的一些网站，但一个都想不起来是哪家。
于是就有了这一条横带：
"加一条高度大概 200px 的细长横带，里面放一堆和过山车同风格的游乐园设施。"
到这里，你开始能看到构想逐渐成形了，但一旦把它放到网站上，它看起来还是很糟：
顺带一提，在这个阶段，我同时也想清楚了要做一个"编程 Agent"板块，并在为它制作组件。
不过，在此基础上继续迭代，你就能得到这个：
精修后的 hero，其中游乐园横带自然过渡到下一个板块
我做到这一步的方法是：让所有素材的设计都以之前那架过山车为锚点，亲手挑选并逐个打磨每一个动画，并且认定这条横带不应该独立存在，而应该是对下一个板块的颜色过渡。最后这一点我确信来自我见过的某些网站，但具体是哪些，我想不起来了。
无穷无尽的分支
做出最后那个设计时，我特别开心，甚至马上就展示给了一个朋友看。但总觉得哪里还差点意思，于是"分叉"（fork）就登场了。
做网站时，我会一直只用一个 HTML 文件，直到它基本成型，然后才把它转成 React，拆分成各种组件，这样就可以让多个 Agent 并行地编辑它们。
这么做的原因是：分叉/复制一个设计、改动一两个地方、然后把它们并排放在一起对比，会变得非常快。
同一个设计的多个分叉并排展示以便对比
我还会做另一件事：搭建我称之为"游乐场"（playground）的东西，在里面可以随意摆弄颜色和其他变量。
在这个案例里，我一开始把草地的颜色从蓝色改成了绿色（毕竟草是绿的，还用说嘛），但得到的绿色并不完全是我想要的。于是我让 Claude 搭了一个这样的游乐场，在里面可以尝试不同的点缀色、文字色、草地色、背景色等等，我也正是通过它找到了心仪的草地色调。
（我甚至有点想做一个小巧的开源工具，专门用来辅助这些分叉和游乐场。也许等我有时间了会试试。）
草地搞定之后，我就开始沉迷于各种细节。
其实在转向过山车方向之前，我启动整个流程的第一步，是让 Fable 给我做"一个有趣的开发者工具网站的一组 mockup"。它们绝大多数都是垃圾，但当我在思考 CTA 更好的设计时，我记起曾见过一个很合适的东西：
从早期 mockup 里翻出来的一个小巧的 CTA 按钮设计
这就是为什么要在流程早期就接触大量设计，哪怕它们很糟糕。你可能会在后面的某个阶段，从中淘到一块璞玉。
另外，白色背景让网站显得一点都不有趣（而我想要的就是有趣），所以我把它改成了天蓝色，又加上云朵来烘托氛围：
从白到蓝的变化，效果天差地别。
其余的一切都由此展开。首屏决定了整个网站剩下的部分。
Railcode 产品的点缀色目前是蓝色，但网站上出现的绿色是如此自然，以至于我干脆顺水推舟，而不是跟它较劲。于是就有了浅绿和深绿的板块，最后甚至有了"土壤"页脚。也许我得因此回头重新审视一下产品的设计……
网站剩下的部分仍然经历了大量迭代，但一旦整体风格大体成型，我就能在制作新图标和新素材时全程参照它。先把"氛围"定下来很重要，因为这样我就有了明确的方向感。
但总有更多细节值得你去抠。我要举的最后一个例子是导航栏——它固定成一种静态颜色时感觉很不对劲，于是我让它随当前可视板块变化，平滑过渡到对应板块的背景色。在我看来，这带来了巨大的差别！
我试过白色、浅蓝、浅绿和深绿这些静态版本，最后才意识到，最好的做法就是它们全都要。
灵感
就像我前面说的，作为一个非设计师，从已有作品中汲取灵感，对我的创作过程来说至关重要。而清晰的范例，也是引导编程 Agent 的最好方式。
有时候，你最终会做出一个和你见过的某样东西非常相似的呈现方式，比如这个从浅色切换到深色的板块——这是一种相对常见的手法，但我常常会去参考 Contextual AI：
左边是 contextual.ai，右边是 Railcode 网站
但另一些时候，灵感来源就没那么明显了。比如 Railcode 的这个板块，其实灵感来自 Clay：
左边是 clay.com，右边是 Railcode 网站
我也一直在不断地浏览各种各样的网站，即使最终没有从中用到任何具体的东西，它们依然产生了影响。Railcode 的网站和 Sentry 的网站一点都不像，但我反复看他们的站点，去感受那些能与内容良好契合的插画是怎么做的。
凌晨 0:30 之后："再来"
我还有很多想说的，但我觉得这篇文章已经太长了。所以如果要总结我认为自己流程中最关键的部分，那就是：
- 设计方面我只用 Anthropic 的模型。我发现 OpenAI 的模型即便给了很具体的指示也很难做得好。Fable 是最中之最。
- 在满意设计、准备开始打磨文案之类的内容之前，我会把所有东西都放在同一个 HTML 文件里。
- 我会看海量的网站来找灵感。我会经常回看自己很喜欢的网站，也持续寻找新的网站。如果我特别喜欢某个具体的组件，就会把它作为我在此基础上继续搭建的底子。
- 一开始我会让 Claude 生成一大堆不同的网站，最后 99% 的成果都会被我扔掉，但偶尔我会从其中某个里抠出一个组件来用，或者只是借此冒出一个新的想法去尝试。
- 我经常让编程 Agent 在几个设计上"放飞自我"，也会让它们抓住一个想法的种子，从极简 -> 夸张的整个光谱上做出多个版本。
- 我喜欢让自己的过程有一份随手可查的痕迹，所以我会不断地"分叉"一个设计，改几处，再和原版对比。之后我可能会在分叉版本上继续做，也可能回到原版，但我从不删除任何分叉。
- 我会搭建游乐场，在里面可以轻松地摆弄颜色、字体和布局位置，并实时看到结果，而不必经历"让 Agent 改一下"这种缓慢的迭代过程。
- 我迭代，迭代，再迭代。大多数迭代都是死路。
而最重要的是，我在这个过程里玩得很开心 :)
POV：当 Fable 扛下重活时的我