AI 生成的网站，很容易长成同一张脸：深色背景、紫色渐变、发光按钮、居中大标题，再加几块毛玻璃卡片。
单个看还不错，放在一起就毫无辨识度。这种现象可以叫 LLM Design Slop：大模型设计废料。
问题不是 AI 不会设计，而是它太擅长生成“统计意义上正确”的设计。你给它的要求越抽象，比如“现代、简洁、高级、有科技感”，它越会退回最安全、最常见的模板。
但这不意味着非设计师就只能接受默认审美。
开发者 Yakko Majuri 为项目 Railcode 设计官网时，没有专业设计背景，主要依靠 Coding Agent，却做出了一个复古游戏感的游乐园网站。很多人甚至以为他请了设计工作室。
真正值得学的，不是他做出了一个多漂亮的页面，而是他的工作方式：不把 Agent 当设计外包，而是当成一个可以快速试错、大量探索的设计搭档。
一、别让 AI 一次生成，而是让它帮你“淘金”
非设计师最难的，往往不是写 CSS，而是不知道自己想要什么。
如果直接说“帮我设计一个现代、漂亮、高级的网站”，Agent 大概率会给你深色渐变、卡片布局和毛玻璃。
更有效的方式是两条路一起走：
一是主动看优秀网站，拆解它们的色彩、字体、空间、阴影和版块过渡；二是让 Agent 大量生成不同方向的原型。
不要只围绕一个方案反复改。让它探索不同布局、风格和视觉表达。大多数方案可能都不够好，但一个方案里可能有好按钮动效，另一个方案里可能有好插画构图。
这就像淘金：不需要每块石头都有价值，只需要筛出值得保留的部分。
二、先给产品找一个视觉隐喻
开始设计前，先问一句：这个产品能不能用一个具体画面来表达？
这就是视觉隐喻。
Railcode 的名字里有 Rails，也有 Fun。作者没有做传统 B2B SaaS 网站，而是把“轨道”和“好玩”联想到过山车，最后把整个网站做成了一个游乐园。
于是，过山车成了核心视觉资产；天空、云朵、草地、站台、地下岩层，自然延展成不同页面区域的背景。
原本互不相关的 UI 元素，因为共享同一个视觉概念，形成了统一的设计语言。
所以，不要一上来就摆导航栏、按钮和卡片。先找到一个能代表产品气质的画面，再围绕它搭建页面。
三、用“跨度生成”打开设计空间
找到概念后，可以让 Agent 一次性生成多个方向，而不是只改一个方案。
可以直接用这个 Prompt：
围绕这个产品概念，生成 7 个不同方向的网站视觉原型。
前 2 个保持克制、极简，验证信息架构和可读性；
中间 2 个增加交互、动效和视觉细节；
后 3 个完全放开，大胆尝试复古、游戏化甚至荒诞的表达。
不要共享相同布局和配色，优先展示视觉差异，不要过早追求代码复用。
为什么要故意“放飞”？
因为极简方案能验证概念是否清晰，极端方案更容易打破思维惯性。最有价值的创意，常常来自那些看起来不太合理的方案。
四、找到视觉锚点，再围绕它构建世界
当多个原型里出现让你眼前一亮的核心元素时，就找到了视觉锚点。
它可以是一幅插画、一个像素角色、一辆过山车，也可以是一种特殊图形语言。
但找到漂亮元素，不等于网站就会漂亮。把一辆像素风过山车放在普通白页中央，它仍然像一张贴上去的图。
正确做法是围绕锚点补全环境：过山车需要轨道和站台，轨道需要游乐园，游乐园需要天空、云朵、草地和远景，不同页面区域还可以延展出地下岩层和建筑。
先确定最重要的视觉资产，再让 Agent 围绕它补全环境。这样生成的网站，通常比先搭标准网页框架、再往里塞插画更有整体感。
五、工程师的优势：用敏捷开发做视觉设计
这套方法之所以适合开发者，是因为它利用了工程师熟悉的快速迭代。
第一，设计定型前坚持单文件 HTML。
别急着上 Next.js、React、Tailwind 和复杂目录。设计探索阶段的任务是快速验证视觉想法，不是构建可维护系统。
先让 Agent 把 HTML、内联 CSS、JavaScript 和动画都放进一个 index.html。想试新布局，就复制成 index_v2.html、index_v3.html，浏览器并排比较。
失败版本也不用急着删，后面可能还会用到。等布局、色彩、节奏和交互都定了，再重构为组件。
第二，别反复描述感觉，让 Agent 做个 Playground。
“草地再自然一点”这种反馈很低效。颜色、间距、透明度本来就是数值，不该用模糊语言来回猜。
更好的办法，是让 Agent 生成一个临时调试面板：背景色、草地色相、文本对比度、页面间距、圆角和阴影都能实时拖动。
你负责判断结果，Agent 负责搭工具。满意后，再把参数写回正式样式。
第三，让视觉元素承担页面过渡。
高质量网站不只是每个 Section 单独漂亮，而是区域之间能衔接。
游乐园页面可以从淡蓝天空，过渡到过山车轨道和站台，再到绿色草地，最后延展成暗色地下岩层。导航栏也可以透明开始，滚动穿过不同区域时同步变色。
这些细节不复杂，却能明显提升完成度。
六、一套更轻的工作流
可以把它记成六步：
找隐喻 → 跨度探索 → 选锚点 → 补环境 → 调参数 → 再工程化。
传统流程是先定页面结构，再填视觉元素，最后优化细节。这套 Agent 工作流更像：先探索视觉可能性，再从优秀元素中提炼设计语言，最后转化成完整网站。
最大的变化是：设计探索变便宜了。
过去生成多个高保真方案要花大量时间，现在 Agent 很快就能给出大量可运行原型。开发者可以把精力更多放在比较、筛选和判断上。
写在最后
AI 降低了实现门槛，却提高了审美判断的价值。
当生成插画、布局、动画和原型变得越来越容易，真正稀缺的是：知道什么视觉语言适合产品，能从一堆方案里识别有价值的元素，能判断页面是否协调、是否有辨识度。
所以，非设计师使用 Coding Agent 的正确姿势，不是让 AI 替你做设计，而是用它放大你的探索能力。
先找到一个有趣的概念，让 Agent 帮你试几十种可能；挑出值得保留的元素，再通过不断试错，把它们组合成一个完整世界。
别再满足于默认的深色渐变紫模板了。
AI 时代，每个开发者都有机会为自己的产品创造一个独一无二的世界。
