让 AI “做得高级一点”，通常等于什么都没说。高级感可能是留白、强排版、暗色电影感，也可能是 WebGL、编辑部风格或极简 SaaS。没有明确参照时，模型只能回到最常见的渐变、圆角卡片和三栏布局。
更有效的做法，是先建立一套参考链：用优秀网站确定视觉上限，用真实产品校正信息结构，再补充动效规则，最后把颜色、字体、间距和组件整理成 AI 能执行的设计约束。下面 8 个网站分别负责其中一环。
第一层：先确定视觉方向，而不是急着写提示词
1. Awwwards：看品牌网站如何制造第一印象
Awwwards 汇集大量获奖网站和评审案例，适合观察品牌官网、互动叙事、滚动转场与首屏构图。浏览时不要只记住“很炫”，而要记录页面在第一屏用了什么比例、字体如何建立层级、滚动到哪里发生节奏变化，以及视觉效果是否真的服务品牌。
适合：品牌官网、作品集、活动页、强调记忆点的发布页。
官网：https://www.awwwards.com/
2. Recent：快速扫一遍当下的视觉语汇
Recent 把网页、品牌、字体、动效、插画、3D 和包装等内容放在同一个灵感入口。它的价值不是直接给你完整页面答案，而是让你看到不同媒介最近在使用什么色彩、字形、材质和构图，避免参考池只剩下同一种 SaaS 模板。
适合：找风格关键词、建立 moodboard、补充字体与品牌参考。
官网：https://recent.design/
3. Landbook：从可落地的网站案例里筛版式
Landbook 是人工整理的网站设计画廊，可按行业、风格、页面类型、字体、颜色和平台筛选，还能分别查看区块、移动端、动效与标题文案。相比只追求实验性的展示站，它更容易找到能直接落到商业项目中的首页、定价页和作品集结构。
适合：落地页、企业站、作品集、首页区块和移动端参考。
费用：基础浏览可用，Pro 方案与价格以官网实时页面为准。
官网：https://land-book.com/
第二层：用真实产品修正信息架构
4. Mobbin：不要凭空设计登录、订阅和设置流程
Mobbin 收集真实移动应用和 Web 产品的界面截图与流程。做登录、会员、支付、搜索、设置或新手引导时，可以先看成熟产品如何安排字段、提示、错误状态和下一步，而不是只参考一张脱离上下文的漂亮截图。
适合：App、小程序、后台、SaaS 和复杂产品流程。
费用：可免费浏览部分内容，完整检索和流程库通常需要订阅。
官网：https://mobbin.com/
5. SaaSFrame：同时看 SaaS 官网和产品内部界面
SaaSFrame 把 SaaS 营销网站、产品界面、UX 模式和用户流程放在一起，并提供可编辑的 Figma 资源与面向 AI 设计的提示内容。它适合解决一个常见断层：官网做得很漂亮，但登录后的仪表盘、空状态和升级流程完全不是同一种语言。
适合：SaaS 官网、仪表盘、定价、注册、升级和留存流程。
费用：有免费浏览与付费会员，价格以官网为准。
官网：https://www.saasframe.io/
第三层：先说明动效承担什么任务
6. Unicorn Studio：把 WebGL 视觉变成可嵌入效果
Unicorn Studio 面向设计师制作 WebGL 动效和交互视觉，可用于粒子、流体、3D、鼠标跟随和动态背景，并能嵌入 Framer、Webflow、Wix 等建站环境。参考它时要先决定动效是在建立氛围、解释产品，还是响应用户操作，避免整页都在动却没有信息重点。
适合：Hero 背景、产品发布页、交互作品集和品牌视觉。
官网：https://www.unicorn.studio/
7. MotionSites：按动效类型拆 Hero 区
MotionSites 聚合 Hero 区、动画背景、渐变、网页模板与 AI 设计提示，可按滚动、悬停、视差、3D、Shader、视频背景和微交互等类型浏览。它特别适合把一句模糊的“首屏要炸”变成可描述的镜头、层次和交互触发条件。
适合：Vibe Coding、首屏动画、微交互和动态背景参考。
官网：https://motionsites.org/
第四层：把审美参考翻译成 AI 能执行的规则
8. Refero Styles：直接生成 AI 可读的 DESIGN.md
Refero Styles 把真实产品网站里的颜色、字体、间距、组件和界面密度整理成设计系统，并提供适合 Cursor、Claude Code、Codex、v0、Lovable 等工具读取的 DESIGN.md。它解决的不是“哪里好看”，而是“怎样把这种感觉转换成可重复执行的参数”。
适合：给编码 Agent 建立设计约束、统一多个页面、减少模板感。
状态：产品仍在持续更新，具体可用范围和方案以官网为准。
官网：https://styles.refero.design/
一套更稳的实际用法
- 先写项目目标：目标用户是谁、希望他完成什么、页面最重要的一次转化是什么。
- 每层只选一个主参考：视觉、产品流、动效和设计系统各选一个，避免把十种风格混在一起。
- 只拆规则，不搬资产：记录配色比例、字号层级、间距、栅格、按钮反馈和滚动节奏，不复制对方品牌、插画、文案和源码。
- 把规则写成验收条件：例如“正文最大宽度 720px”“动效只出现在首屏和章节切换”“移动端不依赖悬停”。
- 最后再让 AI 实现：先做首屏和一个典型内容区，确认方向后再扩展整站。
可以直接交给 AI 的提示词骨架
为【项目类型】设计【页面名称】。视觉方向参考【网站 A】的配色比例和排版密度，信息结构参考【网站 B】的【具体流程】，动效只参考【网站 C】的【某种交互】，不要复制品牌资产与文案。请先输出设计规则：颜色、字体层级、栅格、间距、圆角、阴影、按钮状态和移动端策略；确认后再实现。页面必须突出【核心行动】，并以【三条可验证标准】作为验收条件。
网页的“高级感”很少来自一个形容词。它来自一致的取舍：哪些内容先出现，哪些地方保持安静，什么时候让画面动起来，以及整套规则能否在所有页面里稳定复用。参考站真正值得收藏的，是它们帮助你把这些取舍说清楚。
桂公网安备45080202000358号
