推文

@10xmylife · 2026-09-28 20:13

Vibe Coding 页面不好看？先收藏这 10 个设计参考站 👀 👇 1. Landing Love｜想做漂亮的动效 想研究开场动画、滚动节奏和页面转场，可以先来找参考。 2. Land-book｜想找整体视觉方向 页面没什么大问题，但总觉得差点质感？可以来看看不同网站的排版、配色和留白，先确定自己想要哪一种感觉。 3. Awwwards｜想跳出常见的页面套路 想做一个更有记忆点的网站，可以来逛获奖作品。看看别人怎么安排第一屏、表达品牌，再挑适合自己项目的细节。 4. One Page Love｜想把一个页面做完整 适合找产品介绍页、个人主页和单页网站的参考。除了看整体效果，也可以单独研究某一块内容该怎么排。 5. Mobbin｜想做 App 和产品界面 登录、搜索、设置、订阅……这些具体页面怎么设计，可以来看看真实产品的界面和操作流程。 6. Lapa Ninja｜想找落地页灵感 做产品官网时，不知道第一屏该放什么、后面怎么接？可以来找落地页参考，把页面的内容顺序先理清楚。 7. Framer Gallery｜想看 Framer 作品 这里能看到创作者用 Framer 做出的不同网站。做作品集或品牌页面前，可以先逛一圈，找找版式和视觉表达的方向。 8. Aceternity UI｜想加有表现力的组件 它提供 React、Next.js 组件，接入时记得让 AI 一起处理依赖和样式适配。 9. 21st｜想找现成的组件和风格 从首屏、背景到 UI 组件、模板和主题，都能在这里找。先挑中一个具体方向，再让 AI 围绕它继续搭页面，沟通会清楚很多。 10. Siteinspire｜想练习看懂设计 可以按风格和网站类型筛选案例。看到喜欢的页面，试着拆一下：好看的是字体、图片，还是布局和留白？下次给 AI 提需求时就能说得更具体。 收藏之后，建议直接拿一个正在做的页面来用：找 2～3 个参考，圈出想借鉴的细节，再交给 AI 实现。 比如：“参考 A 的首屏排版、B 的配色，按钮交互参考 C。”这比一句“帮我做得高级一点”，更容易得到你想要的结果。

曝光 3639 · 评论 4 · 点赞 43 · 书签 64