Appearance
Vibe Coding出的项目太丑？10个设计网站拯救AI审美
审美不是天赋，是输入质量。
不是你描述得不够好。是AI的"最大公约数"——灰蓝配色、圆角白卡片、居中排版——安全，但无聊。
以下10个网站，按使用场景分类。
10个设计网站全览
| 网站 | 用途 | 一句话 |
|---|---|---|
| landinglove.com | 动效参考 | 收集优秀网站动画 |
| land-book.com | 高级审美 | 配色克制、排版讲究的设计 |
| awwwards.com | 创意天花板 | 网页设计奥斯卡 |
| onepagelove.com | 单页叙事 | 单页面网站精选 |
| mobbin.com | APP界面 | 主流App真实截图 |
| lapa.ninja | 落地页灵感 | 按颜色/行业筛选 |
| framer.com/gallery | Framer模板 | 专业设计师模板 |
| ui.aceternity.com | 酷炫组件 | 代码可直接复制 |
| 21st.dev | 设计词汇 | 按钮50种写法、导航30种风格 |
| siteinspire.com | 拔高上限 | 精选编辑的设计 |
按使用频率排序
每天用
| 网站 | 用法 |
|---|---|
| Aceternity UI | 做组件直接复制代码，推荐Gradient Text、Moving Border、Background Beams、Bento Grid |
| Mobbin | 做哪个功能页面前，先看头部产品的同类页面 |
每次开工前
| 网站 | 用法 |
|---|---|
| Lapa Ninja | 5分钟灵感热身，按颜色筛选建配色方案 |
| landinglove | 确定动效风格方向 |
每周逛一次
| 网站 | 用法 |
|---|---|
| Land Book | 培养审美直觉 |
| 21st | 更新设计词汇表，给AI下指令用精确风格标签 |
需要创意突破时
| 网站 | 用法 |
|---|---|
| Awwwards | 看创意天花板，重点看Developer Site分类 |
| One Page Love | 看单页叙事怎么做，按行业筛选 |
偶尔翻翻
| 网站 | 用法 |
|---|---|
| Framer Gallery | 模版截图发给AI参考布局 |
| Site Inspire | 拔高审美上限，关注字体搭配 |
实操流程：40分钟SaaS主页
Step 1：Lapa Ninja刷5分钟，锁定暗底+暖橙点缀配色方向
Step 2：landinglove找滚动视差+卡片hover光晕动效参考
Step 3：打开Claude Code，发参考截图：「暗底+暖橙点缀，滚动视差参考图1，卡片动效参考图2」
Step 4：AI第一版出来后，从Aceternity UI挑Moving Border和Gradient Text替换默认按钮标题
Step 5：Mobbin看3个头部SaaS产品定价页，微调布局
Step 6：用impeccable Skill做一次设计审查，改4个细节
全程40分钟。朋友问「你找了哪个设计师？」
核心原则
- 不要贪多：选2-3个组件作为亮点，其他保持干净
- 关键词就是生产力：用Brutalism/Glassmorphism/Minimalist/Dark Tech等精确标签
- AI需要的不是prompt技巧，是需要见过好的东西
关键词：Vibe Coding, 设计审美, AI设计, Aceternity UI, Mobbin
