不用懂设计，三步搞定：去顶级网站养审美找对标，用截图喂给 AI 精准复刻，再把风格存成文档长期复用。
同样用 Vibe Coding 做网页，为什么有的人做出来又高级又顺眼，你做出来的却平平无奇，甚至有点丑？
你可能也遇到过这些情况：
问题其实不在 AI。 核心原因是：你心里没有「好看」的标准，也不知道好的设计去哪儿找；就算找到了好看的，也不知道怎么让 AI 精准地用上它。
这篇教程讲三件事：怎么养出自己的审美、去哪儿找顶级对标；怎么让 AI 把对标真正复刻成你自己的页面；以及怎么把好看的风格固定下来，以后每次都能直接复用。
全程不用懂代码，也不需要会设计，跟着操作就行。
本期出现的所有设计参考网站，按用途分三类整理。
| 网站 | 链接 | 用途 |
|---|---|---|
| Awwwards | awwwards.com | 设计圈的「奥斯卡」，全球最前沿、最有创意的获奖网站 |
| One Page Love | onepagelove.com | 专收单页网站，9000+ 精选案例，可按作品集 / SaaS / 电商等分类筛选 |
| 网站 | 链接 | 用途 |
|---|---|---|
| Mobbin | mobbin.com | 全球最大移动端设计参考库，几十万张真实 App 截图 |
| Refero | refero.design | 十几万张真实网页产品截图，PC / 网页类产品参考 |
| 产品 | 链接 | 适合做 |
|---|---|---|
| Stripe | stripe.com | SaaS、工具类、公司官网（干净专业的教科书） |
| Linear | linear.app | SaaS、工具类、公司官网（干净专业的教科书） |
| Airbnb | airbnb.com | 活动页、业务信息排布 |
Mobbin 和 Refero 都支持把喜欢的页面整页截图下载——这个功能在后面「喂给 AI」时会用到。
问题： 很多人让 AI 改设计，只会说一句「帮我做好看一点」。AI 一听也懵，它能怎么办？换个紫色渐变、把字调大——结果还是丑。
原因： 不在 AI，而是你心里没有「好看长什么样」的标准，所以没法描述。你可以不会设计，但得有审美，得知道什么是好的。
审美怎么来？按你当下的目标，分三种情况去找参考。
去 Awwwards 和 One Page Love 这两个站随便刷。前者是设计圈的「奥斯卡」，看的是最前沿、最有创意的设计，纯养眼界；后者专收单页网站（大多数 Vibe Coding 的人就做这个），分类特别全，想看作品集、SaaS、电商，按类型一筛同类里好看的全列出来。看到上心的随手收藏。
灵感站好看，但不一定实用。真到生产，要看有实际功能、能落地的设计：
这两个站能把喜欢的页面整页截图下载，这个功能很关键，后面会用到。
刷生产级页面别走马观花，要带着重点看：
| 看哪里 | 重点 |
|---|---|
| 导航栏 | logo、菜单、按钮怎么摆 |
| Hero 首屏 | 进来第一眼的那屏，大标题、副标题、按钮、主视觉怎么搭 |
| 内容区 | 往下滑的图文卡片、表格、排版，看反复出现的零件怎么对齐、留白、分组 |
看到合适的随手截图存下来，慢慢攒成你自己的参考库。
如果已经明确要做产品官网、公司官网或活动页，最高效的办法是直接看这个领域天花板级的真实产品：
新手做设计一定要学会抄，就抄这些成熟设计。看的时候同时想：这些功能为什么这么设计、布局为什么这么做、不同按钮和颜色为什么这样区分。时间长了，你就对网页设计有感觉了。
没目标就刷站养感觉，要动手就看组件、随手截图，目标明确就找对标抄结构。
攒了一批好看的参考图，生产时怎么用？让 AI 照着它做出来。
大多数人翻车的地方： 全凭感觉形容——「帮我做现代一点」「配色高级一点」「布局再大气一点」。这些词全是虚的，AI get 不到你脑子里的画面，只能瞎猜，越猜越离谱。
其实不用费劲描述，直接把截的图甩给它照着抄就行。
这一步有个重要前提：你用的 AI 必须能「看懂图片」。像 DeepSeek 这种纯文本模型看不了图。如果你用的是 Claude 就没问题；但如果你通过 cc switch 接了 DeepSeek 这类模型，得先换一个带视觉能力的模型，不然做不了。（工具怎么装、怎么接，见「Vibe Coding 必备工具集」教程，这里不重复。）
关键是不能只说「参考我的截图」——AI 不知道该参考什么。要把它的注意力拉到你想迭代的具体维度上：
对 AI 说：
我需要对当前业务的整体 UI 设计做一次风格迭代。
我会给你几张参考设计的截图，请你仔细分析它的视觉风格，然后把这种风格应用到我当前的页面上。
请重点还原这几个方面：
1. 配色：主色、辅助色、背景色、文字颜色
2. 字体：标题和正文的字号层级、粗细、对比
3. 间距与留白：模块之间、元素之间的呼吸感
4. 组件样式：按钮、卡片、导航栏的圆角、阴影、边框
5. 整体布局：参考它的排版结构来组织页面
这段提示词的关键，是把「好看」拆成了五块具体的东西去抄——配色、字体、间距、组件、布局。
发给 AI，等它完成。同一个页面，功能一行代码没动，只是把参考图喂进去、发这段提示词，整个质感一下就上来了。
最后一个很多人不知道的技巧：UI 设计持久化。
问题： 页面好不容易调好看了，过两天让 AI 做个新页面，它又给你打回原形。
原因： 刚才那套好看的风格只停留在了那次对话里，没有沉淀成设计资产。
解决办法：让 AI 把它记下来。 发下面这段提示词，让它把风格总结成一份设计规范文档：
对 AI 说：
请把我们现在这套设计风格，总结成一份设计规范文档，保存为 design.md。
内容包括：
1. 配色：主色、辅助色、背景色、文字色的具体色值
2. 字体：标题和正文的字号、字重、行高
3. 间距：常用的内外边距和模块间距
4. 组件样式：按钮、卡片、导航栏的圆角、阴影、边框规则
以后我每做一个新页面，你都要先读这份 design.md，严格按照里面的规范来设计，保证整个项目风格统一。
这么一来，好看的风格就被固化成了一个 design.md 文件。以后再做新页面不用重新描述，只要一句「参考 design.md 来做」，AI 就会照着这套规范来，整个项目从头到尾风格统一，再也不会做着做着就跑偏。
让 Vibe Coding 页面变好看，其实就三步，全程不用懂设计：
| 步骤 | 做什么 | 核心 |
|---|---|---|
| 1. 养审美 · 找对标 | 去顶级网站刷设计、随手截图攒参考库 | 心里先有「好看」的标准 |
| 2. 喂截图 · 精准复刻 | 把参考截图甩给 AI，用提示词把「好看」拆成配色 / 字体 / 间距 / 组件 / 布局 | 用参考，不用空泛描述 |
| 3. 存文档 · 长期复用 | 让 AI 把风格总结成 design.md，以后每个新页面先读它 | 把风格固化成设计资产 |
从找参考、到做出来、再到固定下来，一条龙。
Vibe Coding 让编程变容易了，但审美这项技能还是得自己积累，才能做出符合自己需求的好看网页。