前端审美积累贴

Radar Laboratory — Interactive Radar Phenomenology

佬，今天看到这个网站，感觉很有科技工业风，字体用的也比较讲究

提供prompt提示词一键复用

审美提升：

素材：

欢迎各位佬继续补充

nb，直接就是一个狠狠的审美积累 感谢佬

我的建议是先生图，图片抽卡比较快，直接写代码很浪费token。有ui图了就可以生成设计方案，色彩方案，这样最后做出来的效果比较好

学习下，前面做的项目，天天被老板吐槽UI丑 ^-^

好像有一个专门前端的skills

佬友收藏好丰富，收藏一波，后面总能用上

我最近也在vibecoding做网页，网页没什么实际功能，做展示用，前端的审美设计的确太关键了，那些大佬做的网页，简直是艺术品，我等codex干活的时候，没事经常上Awwwards上面看，实在夸张，不过这些应该属于是设计范畴了吧，感觉也不全是前端的活

另外分享一些我自己简单总结的优秀设计分享，纯文科生，语言表达可能很粗糙，有些专业术语说不上来 ^-^，权当分享，双！！号标注的，是我觉得复刻起来应该不算太难，但效果很好的点

1.https://good-fella.com/

！网站的“How it works”部分，下滑展示多个图片时，左侧的序号部分，有一个橙色的极小色块的动画，值得参考，可以作为序号滚动时的点缀。！

！以及该网站的导航栏设计值得参考。！

还有整体的设计语言中，主题色橙色的色块多次参与到动画中的设计思想，能进一步深化网页整体的设计视觉。

2.AVA SRG

！初次进入网站时的加载页动画设计！

贯穿网页全过程的主视觉设计：一个3D的手套模型，贯穿始终。

撞色设计：灰/深红/纸张质感的米色。

3.https://nfinitepaper.com/

！网站的第4个页面的粒子点云设计，大面积铺满全屏的扩散-聚合的动画设计！

4.https://follow.art/

！不同页面的配色完全不同，但色系搭配合理，同时多个页面的主题色会被应用到整个网页的背景色！

不同页面切换均采用一套动画设计，但通过不同的页面配色设计，很有效的解决了同质化设计所带来的无聊体验问题。

5.https://www.maxmilkin.com/

优秀的网页留白设计，页面文字比较小，留白大，但十分和谐，不觉得空。

6.https://digilab.co/

从第1页下滑开始设计了一个动画横跨第2页（可以把只有纯色背景但存在丝线汇集动画的内容看作第2页）来为第3页背景配色的大变动做铺垫过渡，解决了第1页和第3页配色相差过大带来的突兀。

7.https://stefanvitasovic.dev/

Hero页设计。

8.https://18.burocratik.com/

！区别于传统网页的纵向下滑叙事，此网站采用的是横向穿越，同时有一条贯穿整个交互过程的细线，随着滚轮下滑从左到右的移动，增强了引导性。！

鼠标在网站随意移动会带出一系列图片，而且此设计做到了传达设计的同时不影响信息传达，在关键的详细文本区做了隔离，鼠标不会带出图片。

感谢佬友，之前一直用 ai 做不出好看的 ui。现在可以狠狠学习了^-^