提到通过 AI 写前端（Vibe Coding），大多数人脑海里往往是千篇一律的「AI 模板脸」：黑紫渐变、磨砂玻璃与千篇一律的 Bento Grid。
Railcode 创始人 Yakko Majuri（前 PostHog 核心工程师）最近分享了他完全用 Coding Agent 搓出高质感官网的实操细节，在 Hacker News 引发热议。他把 Agent 从“写代码的”变成了“探索设计的催化剂”，总结出 4 条极具实操价值的策略：
1️⃣ 从具象 Motif 切入：Railcode 核心是 Agent 运行护栏（Code on rails），Rails + Fun 自然推导出“过山车”意象，并引申到童年《过山车大亨》的复古美学，彻底摆脱千篇一律的 SaaS 模板。
2️⃣ Go Wild 极端发散找灵感：单次让 Agent 生成 4~10 种跨度极大的设计方案（从 ASCII 到离谱霓虹）。99% 是废稿，但那 1% 离谱的尝试正是点燃灵感的火花。
3️⃣ 单文件 HTML 并行分叉（Forks）：设计定型前坚决不拆组件！单文件复制分叉（v1.html / v2.html）零成本，同屏横向对比，定型后再工程化。
4️⃣ 现场手搓调色盘（Playgrounds）：拒绝在对话框里拉扯“草地再绿一点”，直接让 Claude 在页面里手搓交互式 Slider/Color Picker，自己实时拖拽调出满意 Hex 色值。
5️⃣ 动态吸色导航栏：Nav 随页面滚动实时吸取当前视口区块背景色，消弭生硬拼接感。
⚡️ Agili 点评：
很多人觉得 AI 只能生成设计废品，本质是把 AI 当成了“一键交卷的外包”。AI 不具备高级审美，但 AI 是人类历史上最廉价、最耐疲劳的草稿发生器。
设计从来不是 prompt 出来的，而是探索、收敛与微调的结果。人类负责定审美天花板与关键决策，AI 负责高速试错与并行铺路。
🔗 Source: https://railcode.dev/blog/vibe-coded-website
