我们用 vibe coding 做的网站，为什么看起来像设计师做的
文章摘要
作者 Yakko Majuri 是 Railcode 的创始人之一。Railcode 是一个让团队部署内部工具和智能体的平台，名字取自”code on rails”：应用和智能体本质上就是代码，平台负责基础设施和护栏（rails），让它们能在安全环境里快速上线。这篇文章写于 2026 年 8 月，副标题是”编码智能体反而让我越来越喜欢设计”。
开场。 一提到 vibe coding 做出来的网站，大家脑子里浮现的多半是深色渐变背景加紫色点缀的那种落地页。可 Railcode 的官网也是他 vibe coding 出来的，长得完全不同：天蓝色背景、飘着云，首屏底部是一条像素风的游乐园，过山车在上面跑。他说自己觉得”像设计师做的”有点夸大，但真有很多人跑来问他怎么做的、和谁合作的。所以他决定讲讲自己的创作过程。他强调这样做并不是觉得自己多厉害，也不是说设计师不再必要（恰恰相反），而是因为大家都在谈 LLM 产出的设计垃圾，他自己却因为有了编码智能体而对设计更感兴趣了：”以前我束手无策，现在终于能把脑子里的创意变成现实。”为了写这篇文章，他把所有原型连同生成它们的提示词整理成一个索引页，以便如实还原过程。
一大堆过山车。 做网站前一周，他发现自己在 Railcode 里给自己做东西特别好玩，问客户，客户也说好玩。”轨道 + 好玩 = 过山车”，于是网站上要有一辆过山车。他不是设计师，很难从零构思，只能依赖范例和灵感，方法有两个：上网找自己喜欢的设计；让智能体用不同风格生成一大堆同一主题的设计。他通常会结合多处的想法反复迭代，大多数时候走进死胡同。第一批过山车里，两个 ASCII 风格的方案受朋友网站启发，其余交给 Fable 自由发挥。他总结了两个技巧：一是强度梯度，让智能体把同一个概念做成从极简到夸张的一系列版本，如果整条光谱上都没有喜欢的，大概是概念本身不对，同时也能判断这个概念该收着做还是放开做；二是放飞，每次至少要 4 个版本，有时 10 个，一半给出明确指引，另一半告诉智能体”随便发挥”，这些版本大多很烂，但能激发新想法。那个丑得出奇的霓虹版本就属于”放飞”那一半，他绝不会用，却把他从 ASCII 思路里拉了出来。
过山车大亨。 霓虹版让他想起小时候玩的《过山车大亨》，他当年的目标就是造出最漂亮的游乐园。于是他让 Fable 做了一个可以真正上手玩的迷你版游戏组件，一度以为网站上要放一个游戏，玩了一阵觉得太过了。他退回去只求一辆自己真正喜欢的过山车，试了很多次终于得到满意的一辆，直接把它贴到模板上，以为大功告成。结果一看：”一辆过山车待在网站正中间算怎么回事？”显然缺一整座游乐园。
偏离轨道。 他觉得游乐园应该放在首屏底部（他确信是在别的网站上见过，但想不起是哪个），于是让智能体”在同一风格下做一条 200px 左右高的游乐设施横条”。放进网站一看还是很糟，再迭代：以先前那辆过山车为基准统一各个素材的风格，逐个挑选和打磨动画，并决定横条不要孤立存在，而是作为向下一个区块过渡的色带。
分叉再分叉。 有了这版设计他很满意，马上给朋友看，但总觉得哪里不对。他的习惯是网站在基本定型之前一直只用一个 HTML 文件，最后才拆成 React 组件让多个智能体并行修改，这样复制一份设计、改一两处、并排对比就非常快。他还会做”游乐场”（playground）：一个可以实时调节强调色、文字色、草地颜色、背景色等变量的小工具。草地从蓝色改成绿色（”草是绿的嘛”），但颜色总不对味，就是靠这种调色游乐场找到了想要的绿。他甚至想做一个开源小工具专门管理这些分叉和游乐场。
抠细节。 早在决定走过山车路线之前，他让 Fable 做过一批”开发工具的有趣网站”样稿，几乎全是垃圾，但在琢磨 CTA 按钮时他想起其中一个设计正好合适，这就是早期大量接触设计的意义，哪怕它们很糟。白色背景不够”好玩”，他改成天蓝色，再加上云朵，”白变蓝带来了天壤之别”。之后首屏决定了整个网站：产品本身的强调色是蓝色，但网站上的绿色出现得太自然，他干脆顺势而为，于是有了浅绿和深绿的区块，最后还有一个”土壤”页脚，他开玩笑说可能得反过来改产品的设计了。导航栏原本是固定颜色，他试过白、浅蓝、浅绿、深绿，最后让它随当前区块的背景色变化。
灵感来源。 作为非设计师，借鉴现有作品对他至关重要，清晰的范例也是引导编码智能体的最好方法。有些地方借鉴得很直接，比如从浅色区块过渡到深色区块的做法参考了 Contextual AI；有些则不太明显，比如某个区块受 Clay 官网启发；还有一些从未具体借用、但一直在影响他，比如他反复看 Sentry 的网站，琢磨插图如何和内容结合。文中有张截图是凌晨十二点半他给智能体发的一个字：”more”。
过程要点。 他最后列了一份清单：只用 Anthropic 的模型做设计，OpenAI 的模型即使给了具体指示也很吃力，Fable 是”最好中的最好”；设计满意之前一切都放在一个 HTML 文件里；大量浏览网站找灵感，非常喜欢某个组件时就以它为基础继续搭；开头让 Claude 生成大量不同的网站，99% 的工作最后扔掉，但偶尔能从中捞出一个组件或一个新想法；经常让智能体在几版设计上”放飞”，或把一个想法做成从极简到离谱的一系列版本；不停”分叉”设计、改几处和原版对比，从不删除任何分叉；做调颜色、字体、位置的游乐场，实时看效果，省掉让智能体一遍遍改的慢循环；迭代、迭代、再迭代，大多数迭代都是死胡同；最重要的是，享受过程。
HN 评论精华
本帖 137 分、约 80 条评论。讨论的焦点很快从”像不像设计师做的”转到”他做的这件事本身就叫设计”，同时也有不少人直言网站仍然有 AI 味。作者 yakkomajuri 本人在评论区回应了一些批评。
他就是设计师。 排在最前的是 chmod775 的一句话：”答案：因为是人在迭代过程中设计了它，LLM 只是写了代码。”ananmays 说得更直接：”确实是设计师做的！你经历的这个过程就叫设计！”fiatpandas 的评论很受欢迎：作者”不小心发明了设计学院教的那套流程”，可以正式自称设计师了，并把它概括成五步：确定高层的功能目标；获得灵感、想出一个母题；在母题内广泛探索；收窄到一个方向反复迭代；打磨细节直到创作上满意且满足第一步的目标。bbor 补充说他在佐治亚理工学的设计流程不太一样，只有两步循环：”做点什么”，然后”看在上帝的份上，拿去给用户看！给你妈看也行！”SV_BubbleTime 说他有员工嘲笑他用 Claude Design 迭代了那么多轮，他的回答是：这正是设计，我只是不会用 Illustrator 和 Photoshop 而已，没人能一次做对。Gualdrapo 唱反调说，这听起来更像在模板商店里没完没了地翻，直到找到一个”凑合能用”的；kdkcienciencjs 反驳：迭代是好设计不可或缺的部分，用什么工具都一样。
代价是时间。 socializer 指出这种做法的取舍在于慢：保持创作控制权，用 AI 也能写出有见地的博客或工作邮件，但你就不再是 100 倍速，而接近人类速度了；与此同时不在乎质量的人能产出 100 倍的东西，所以到最后你的收件箱和信息流里大多是垃圾。agilek 回应：花时间不是代价，那就是设计工作本身。augment_me 认为真正的变化在于，不上设计学院也能当设计师，一个会用工具的程序员可以以同样速度出设计、建数据库、做客服系统。hk1337 认为 AI 能做出漂亮的 UI，但 UX 背后有很多心理学，AI 未必能把握人的因素；strangecasts 给出更具体的解释：目前大多数模型的网站生成流程里没有”用计算机操作去实际点一遍”的环节，也没有可以随手接入的注视预测模型，所以除非有人引导，模型做出的 UI 容易千篇一律。
但它还是有 AI 味。 phoronixrly 说网站仍带着 LLM”设计”网站的一些套路特征，作者承认确实如此，尤其是首屏以下的部分，因为这件事太耗时间，又得顾产品，改完文案后就有点偷懒了。slopinthebag 自称是做 UI 的，先说明不是针对谁，然后直言”你的网站看起来像 AI 做的”，问题出在毛玻璃面板和标签页与整体风格不协调，换掉它们就能让人相信是人设计的；他说网站其余部分让他想起《星露谷物语》的官网，挺可爱。作者表示认同。nexo-v1 也认为首屏很酷，但首页其余部分仍有 AI 生成的观感；他自己用 AI 做设计时会先定设计令牌和字体，再一个区块一个区块地多轮迭代，提示词越模糊，结果越像 AI 做的。bardackx、Wazzymandias 也都觉得仍有”LLM 腔”。
一分钟复刻实验。 jjcm 做了个实验：让 Gemini 把这个网页描述成提示词，再喂给图像转代码的流水线，用 Opus 5.5 低强度生成，自己零输入，得到了一个没有紫色渐变也没有”Claude 棕”的版本。zeroonetwothree 觉得比原版还好看，seizethecheese 嫌颜色刺眼，queenkjuul 觉得绿色太亮但动画更好。spoiler 认为这有点像普通人看到蒙德里安的画说”我也能画”：复制当然可以，但你不会凭空做出”这个”，复刻版缺少原版的很多细节。jjcm 本人也同意原作更好，他想说明的只是：从零到一的 vibe coding 落地页如今质量已经可以相当高，作者在这一点上有点”故意示弱”。
其他细节。 quicklywilliam 认为文中最有用的技巧是让 Claude 直接在网站里做一次性的颜色、字体选择器，说这事后看来很显然，但他从没想到过，大概是因为 25 年来一直把工具当成可复用组件来思考；agos 提到今年 WWDC 有个讲座建议利用模拟器的新缩放功能放一个”抽屉”来装各种微调控件。几位读者从过山车爱好者的角度挑毛病：queenkjuul 问为什么过山车上的人是站着的、轨道上还站着人（Rapzid 调侃：车上的人不愿坐等革命，轨道上的人在阻挡进步）；blt 说第一个大落差后面紧跟一个没有倾斜的弯道，”Claude 一定很喜欢横向 G 力”。shikck200 看了源码，批评页面只是一个空壳 HTML 加一大堆 JavaScript，连静态内容都不随页面加载；owebmaster 回了一句”我花大钱请过的设计师做得比这差多了”。MisterMunchkin 分享了自己的做法：让一个子智能体扮演”痛恨 AI 垃圾的 Hacker News 读者”，把整个界面过一遍、删掉所有垃圾内容，他说效果很好。rmeertens 说受这篇文章启发，给自己的日语学习网站加了一条回转寿司传送带。