编程 AI 生成的网站"能跑但难看":瓶颈不在代码,在输入

2026-08-29 20:31:26

AI 生成的网站“能跑但难看”:瓶颈不在代码,在输入

最近一年有个体感越来越明确:写代码正在变成 AI 开发里最简单的那部分。

以前做一个网站,先画页面,再写 HTML、CSS、JavaScript,然后一点点调响应式、组件和交互。现在流程完全变了:打开 Cursor、Claude Code、Lovable、v0 或 Bolt,输入一句“做一个 SaaS Landing Page”,几分钟后一个能运行的网站就出来了。

但新问题也随之出现——能跑是能跑,就是不好看。

大量时间花在描述“要什么”,而不是“怎么写”

如果你经常用 AI Coding,大概率经历过这样的对话:

“帮我做一个现代化 SaaS 官网。”

AI 生成完,你看了一眼说“太普通了,再高级一点”。AI 改了,你说“渐变太多了,简单一点”。又改,你说“卡片不要这么圆”,再改,你说“Hero 太像 AI 生成的网站了”,最后来一句“能不能有点 Linear、Stripe 那种感觉”。

折腾半小时,页面勉强接近想要的效果。这时会发现一个矛盾:AI 几分钟写完页面,人却花几十分钟告诉它页面应该长什么样。

开发效率的新瓶颈出现了。它不再是代码,而是 Prompt + 审美 + 表达能力

为什么 AI 生成的界面千篇一律

网上已经形成一种明显的“AI 网站风格”:大标题、渐变背景、三个 Feature Card、圆角、发光效果、底部 Pricing 和 FAQ。不难看,但看多了会发现每家用 AI 做出来的都长差不多。

原因不复杂。告诉 AI “Build a beautiful modern SaaS landing page”,它只能生成自己理解中的“Modern SaaS”的平均答案。描述越模糊,结果越接近模板。

真正影响最终效果的,往往不是 AI 能不能写 React、Tailwind 熟不熟,而是:你有没有准确告诉 AI,你到底想要什么。

关键取舍:是重构整站,还是只改局部

实际开发里有一个容易出现的问题:网站整体已经做完,只是某个 Hero 不满意、Pricing 太平庸、Dashboard 缺一个 Chart、背景太单调、按钮没质感。如果为了一个按钮让 AI 重构整个页面,很容易把原本正常的部分改坏。

一个更可控的思路是拆开处理:

  • 需要完整网站,给整站 Prompt;
  • 需要应用界面,看对应类型的界面 Prompt;
  • 只想改 Hero、Pricing、CTA,就只针对该 Section 出 Prompt;
  • 只缺一个 Button、Card、Chart,就只描述这个组件;
  • 想让页面视觉更丰富,单独指定背景处理方案。

这也是我做 BuildPromptKit 的出发点:与其每次都从“做漂亮一点”开始和 AI 对话,不如找一个自己喜欢的设计,把完整的设计描述交给 AI。流程从“从零描述”变成“找设计 → 复制 Prompt → 丢给 AI Builder → 生成”。

Prompt 正在变成一种开发资产

以前保存的是代码片段、UI Component、Figma Template、CSS 动画、React Boilerplate。现在值得保存的东西里多了一样:Prompt

一个足够详细的 Prompt 不只几句话,它可能包含页面结构、Typography、Spacing、Color、Component Style、Animation、Interaction、Responsive Design、Visual Hierarchy——本质上是一份可以被 AI 直接理解的轻量级设计文档

Prompt 还有一个特性:不绑定具体工具。 同一个 Prompt,可以丢给 Cursor、Claude Code、Lovable、v0、Bolt、Gemini、Replit 或 Windsurf,哪个生成得好就用哪个。

Vibe Coding 的核心不是“不会写代码”,而是“能不能定义好产品”

很多人把 Vibe Coding 理解成“不会写代码的人用 AI 写代码”。这只是第一阶段。AI Coding 能力继续提升后,会不会写某个框架没以前重要了,真正拉开差距的变成:

  • 你知道自己想做什么吗?
  • 你能把需求描述清楚吗?
  • 你有基本的审美吗?
  • 你能判断 AI 生成的东西哪里不好吗?
  • 你能给 AI 一个足够的上下文吗?

AI 能完成大量执行工作,但方向需要人决定。Prompt 不会因为模型越来越强就消失,恰恰相反——模型能力越强,一个好的输入能撬动的能力越大。

什么情况下别只靠 AI

有几种场景不建议完全依赖 AI 生成界面:

  1. 产品有明确的设计规范或品牌风格——AI 默认输出的是平均审美,不是你的品牌调性。需要把设计规范写进 Prompt,或者干脆自己定好基础样式再让 AI 填充。
  2. 关键页面(定价页、注册转化页、Dashboard 核心视图)需要精确的控制——这类页面不只是“好看”的问题,涉及信息层级、用户决策路径、数据可读性。AI 生成的布局不一定符合你的转化目标。
  3. 要改局部而不是整体时——小改动用局部 Prompt 精确控制,让 AI 重构整站通常得不偿失。
  4. 你已经发现 AI 反复生成同一个风格,但说不上哪里不对——这种情况问题往往不在 AI,在于描述里缺少具体的参考锚点(对比对象、风格关键词、明确的设计约束)。

最后

AI Coding 把“从想法到产品”的距离缩短了很多。以前一个想法可能因为不会前端、不会设计、没有开发团队,永远停留在备忘录里。现在一个人真的可以在几小时内把想法变成能访问的产品。

但当“写出来”越来越容易以后,竞争才刚刚开始:拼的不再只是能不能做出来,而是能不能做得更好。

BuildPromptKit 做的就是这部分事——它是一个面向 AI Coding 的 UI Prompt 灵感库,覆盖 Website、App、Section、Component、Background 等不同类型,解决一个具体问题:当你准备让 AI 做网站或 App 却不知道该怎么描述设计时,先找一个起点。

如果你也在用 Cursor、Claude Code、Lovable、v0、Bolt 等工具做产品,可以看看:BuildPromptKit — AI Builder Prompt Library,也可以告诉我你缺哪类 Prompt,我继续往里面加。

具体效果可以看看:https://www.buildpromptkit.com/sites/securify-data-hero

复制全文 生成海报 AI开发 前端 界面设计 提词工程 Code

推荐文章

程序员茄子在线接单