最近用 AI 写网页，我有个很强烈的感受：

代码反而不是最难的，最难的是——你根本不知道页面应该长什么样。

只告诉 AI“做得高级一点、有科技感一点”，最后出来的东西大概率还是熟悉的渐变背景、悬浮卡片和三栏布局。

所以我现在写网页前，会先看这两个网站。

第一个是 Site of Sites。

它更像一个网页审美样本库，收集了大量设计不错的网站，还可以按照行业、网站类型、视觉风格和建站平台筛选。

想做作品集、品牌官网、落地页，或者找极简、复古、黑白、3D、实验性设计，都能先进去看看别人是怎么处理版式、字体和视觉节奏的。

它解决的是：我的网站到底应该往哪个方向做？

第二个是 MotionSites。

这个网站更适合正在用 Cursor、Claude Code、Lovable、Bolt 写网页的人。

它不只是展示好看的动效网页，还会把页面布局、字体、动画、响应式设计和技术依赖整理成比较完整的提示词。

看到喜欢的效果，可以复制提示词交给 AI，再根据自己的项目继续修改。

它解决的是：看中了这个效果，怎么让 AI 帮我做出来？

我现在比较推荐的使用顺序是：

先去 Site of Sites 多看一些案例，确定网站的整体方向；

再去 MotionSites 找接近的动效和页面结构；

最后把参考拆开交给 AI，换成自己的内容、颜色和品牌风格。

这两个网站一个帮你“看懂好设计”，一个帮你“把设计说给 AI 听”。

当然，不建议整页照搬。真正有用的是学习它们怎么处理留白、字体、动效和信息层级，再做成适合自己项目的版本。

如果你最近也在用 AI 写网页，这两个网站真的值得放进收藏！

#AI工具 #编程AI #vibecoding #网页设计 #网页灵感参考