LOADING載入中
100 个提升审美的设计网站大赏
做视频、做 UI、写前端，做到后面基本都会有同一个感受：再技术差不多的情况下，最后拉开差距的全是审美。
现在 AI 能帮你写代码、做动画、出图，但出来的东西到底顺不顺眼、能不能交差，最后还是得自己拿主意拍板。
平时看过的好东西多了，你才说得出「这里字间距太挤」「那个转场太生硬」，让 AI 改或者自己动手调，方向才不会偏，最终出来的效果也会更好。
前阵子我把浏览器书签清理了一遍，删掉一堆早就断更的死链，最后留下这 100 个真正常打开看的网站，按平时干活的场景分成 9 类：
- 大赛与奖项（12 个）
- 动态设计与视频（14 个）
- 3D 与渲染（9 个）
- 电影画面与镜头参考（7 个）
- UI 设计（16 个）
- 网页灵感（10 个）
- 前端与交互（16 个）
- 字体与配色（10 个）
- 日常收集灵感（6 个）
大头是视频、UI 和前端，另外顺手把字体配色和收集素材的工具也带上了——毕竟不管做哪行，字和颜色都是底子。
每个站我都用一两句话写清楚了上面有什么、什么时候去翻。需要掏钱订阅才能看全的，我在后面标了（付费），剩下的都能直接白嫖。
所有网址我都挨个点开试过。像以前大家常刷的 Godly 现在会自动跳去 Recent，这种改名换姓的我都更新成了最新地址。
不过还是提醒 一下：把 100 个网址塞进收藏夹，审美是不会自动进脑子的。
真正管用的办法其实特笨，我写在了文章最后。
一、大赛与奖项：先看看顶配长什么样
刚入行或者做东西卡壳的时候，最直接的办法就是去看当年的获奖作品。先把行业最高标准装进脑子里，回头看自己的稿子，一眼就能挑出毛病。
1. Pwnisher 3D 渲染挑战赛
https://www.youtube.com/@pwnisher
油管博主 Clinton Jones（网名 Pwnisher）办的全球 3D 渲染比赛。玩法特别直观：他给一段定死相机轨迹和人物动作的白模，全世界几千个参赛者在这个底子上各自发挥，最后拼成一支长视频。到 2026 年已经办了 13 届。因为所有人的底子完全一样，谁的打光好、谁的脑洞大，放一起对比看得清清楚楚。
2. Awwwards
做网页和前端绕不开的奖。每天评出一个「今日最佳网站」，评委按设计、易用性、创意、内容四项打分，年底还会选年度大奖。很适合每天早上开工前花五分钟刷一下，看看现在的网页设计又卷出了什么新花样。
3. CSS Design Awards
https://www.cssdesignawards.com/
和 Awwwards 齐名的另一个网页大奖，也是每天推一个最佳站点，按 UI、UX、创新打分。它和 Awwwards 的评委口味不太一样，两边选出来的网站经常不重样，可以换着看。
4. The FWA
2000 年就开始办的老牌数字设计奖，也是每天更新一个获奖项目。相比规规矩矩的商业排版，FWA 更喜欢选那些在交互、WebGL、声音互动上玩出花来的技术流作品。
5. The Motion Awards
Motionographer 自己办的动态设计专项奖。片头、广告、品牌包装、纪录片各评各的，这两年还加了 AI 单元。最实在的是获奖页直接嵌着成片，不用再跳出去到处找，像《幕府将军》的片头就在里面，一个下午就能把一整年最好的动态作品刷一遍。
6. Apple Design Awards
https://developer.apple.com/design/awards/
苹果每年 WWDC 开发者大会上颁的奖。能上榜的 App 和游戏，在果味审美、交互手感和硬件特性结合上基本都是教科书级别的。苹果官方还会给每个获奖应用写一段评语，讲清楚为什么选它，做移动端的人非常值得细看。
7. D&AD
英国的设计与广告大奖，因为奖杯造型是铅笔，国内同行一般叫它「黄铅笔奖」。它最高级别的「黑铅笔」评选极其苛刻，有些年份宁可空缺也不发，能拿下的全是能写进设计史的案子。做品牌、广告和平面的人可以多翻它的历年档案。
8. The One Show & ADC
美国 The One Club 办的两个顶级大奖。One Show 更看重广告片背后的创意点子，而 1921 年创办的 ADC（纽约艺术指导俱乐部奖）更看重纯正的视觉表现、字体排印和工艺细节。
9. Runway AI Film Festival
AI 视频工具 Runway 办的 AI 影像节，2026 年已经是第 4 届，在纽约、洛杉矶、东京都有线下放映。除了短片，还分了设计、新媒体、时尚、广告几个赛道。官网的 Screening Room 能直接看历届获奖片，想知道 AI 视频的天花板现在到了哪儿，看这里最直接。
10. Tokyo TDC
https://tokyotypedirectorsclub.org/
东京字体指导俱乐部的年度奖。虽然名字里带「字体」，但它其实是整个亚洲视觉设计圈的风向标。评委眼光非常刁钻，获奖的海报、书籍和动态视觉大多带有很强的实验性，看腻了四平八稳的商业稿，去这儿洗洗眼睛特别好。
11. Annecy 安纳西国际动画节
https://www.annecyfestival.com/
1960 年创办的法国动画节，动画人眼里的最高殿堂。除了动画长片和独立短片，它还有专门的商业委托单元（广告、MV、片头），能看到全世界最好的一批美术风格和动态叙事。
12. Ciclope Festival
https://www.ciclopefestival.com/
一个专门按「工种」发奖的影视广告节。别的奖大多看整体创意，它偏偏把片子拆开：导演、摄影、调色、剪辑、三维动画、视觉特效、配乐各评各的奖。做视频的人如果想单拎出「调色」或「剪辑节奏」来研究，看这个奖最对路。
二、动态设计与视频
做动态和视频，闷头看软件教程很容易陷进参数里。先把好片子看够，知道什么叫好的节奏和转场，再回头找教程学做法，效率高得多。
13. Motionographer
动态设计圈办了快二十年的老牌网站。编辑挑片子的眼光很毒，平时不乱发水文，一旦更新基本都是值得反复拉片的好作品，还经常顺带放出工作室写的幕后制作手记。
14. STASH
很多动画和视效工作室都会订的在线片库（付费）。里面按风格和技法归档了成千上万支商业广告、MV 和频道包装，最大的价值是很多片子附带了制作花絮（Making-of）和工程拆解。
15. Art of the Title
https://www.artofthetitle.com/
专门研究电影、剧集和游戏「片头设计」的网站。它不光放高清片头视频，最下功夫的是长篇主创专访——把导演和设计师请来，把最初的草图、废稿、分镜脚本全摆出来，一步步讲这短短两分钟的片头是怎么磨出来的。
16. Vimeo Staff Picks
https://vimeo.com/channels/staffpicks
Vimeo 编辑部每天人工挑出来的短片频道。在视频圈子里，自己的作品能挂上一枚 Staff Pick 的标志是挺值得吹一辈子的事。不管是实拍短片、实验动画还是纪录片，水准都非常稳。
17. Behance 动态设计专区
https://www.behance.net/galleries/motion
虽然大家平时都在刷 Behance，但它的 Motion 分类尤其适合拿来学工作流。因为很多工作室在上面发项目时，会把前期的情绪板、风格帧（Styleframes）、动态分镜（Animatic）和最终成片一块儿放出来，相当于把整个交稿过程摊开给你看。
18. Short of the Week
https://www.shortoftheweek.com/
专门推荐全球优秀独立短片的网站，实拍和动画都有。每部片子下面都配了一篇编辑写的正经影评，帮你拆解导演是怎么在十几分钟里立住人物、讲完一个好故事的。
19. Directors Notes
一个做独立导演访谈的博客。每次聊一部短片，问的问题都很实在：当时怎么凑的钱、现场用的什么机器和镜头、后期遇到了什么麻烦。自己平时接片子、拍东西的人看这个会很有共鸣。
20. Sakugabooru
动画迷自己维护的「作画」片段库，存了 32 万多条从动画里剪出来的高光片段。每条都打好了标签：哪位原画师画的、出自哪部作品、是爆炸特效还是角色表演。想研究一个动作的节奏和弹性，搜标签就能拉出几百个片段逐帧看，做动画的人和用 AI 生成动作镜头的人都用得上。
21. Promonews
每天精选几支新出的 MV 和广告片，大多配着导演的创作说明：用什么机器拍的、为什么这么调色、某个镜头是怎么做出来的。MV 是风格化镜头、色彩和剪辑节奏最敢玩的地方，想找视觉风格参考，刷这里比在视频网站上大海捞针高效得多。
下面这 5 个不是聚合站，而是业内公认最能打的 5 家工作室官网。把他们作品集里的片子下到本地，放进播放器里按方向键一帧一帧拆着看，比报什么进阶班都管用：
22. BUCK（https://buck.co/）：全球规模和名气最大的动态设计工作室之一，苹果、耐克、Meta 的常客。2D、3D、实拍结合全能，作品集大得像个博物馆。
23. ManvsMachine（https://mvsm.com/）：伦敦的顶尖创意工作室，尤其擅长做三维材质碰撞和硬核产品广告，画面的光影质感好到让人头皮发麻。
24. Oddfellows（https://oddfellows.tv/）：美国工作室，主打插画风和 2D 角色动画，配色极其舒服，镜头衔接和动作惯性做得丝滑无比。
25. Golden Wolf（https://www.goldenwolf.tv/）：伦敦动画工作室，风格极好认——高饱和撞色、夸张的透视变形、快到飞起的剪辑节奏，满屏都是精力旺盛的街头卡通感。
26. Ordinary Folk（https://www.ordinaryfolk.co/）：温哥华的团队，专门把基础的 2D 几何图形玩出花来，运动曲线的弹性和节奏感拿捏得死死的。
三、3D 与渲染
做三维最怕自己关起门来瞎调材质球。多去社区看看成熟作品的线框和灯光布局，很多卡死你的问题其实别人早就有现成解法了。
27. ArtStation
干 CG 和游戏美术的人每天开机必逛的地方。全球各大游戏厂、影视视效公司的原画师、建模师、灯光师基本都在这儿安家，搜任何风格的概念设计或三维资产都能找到最顶级的参考。
28. The Rookies
专门给全球相关专业大学生和入行新人办的年度比赛社区，分 3D 动画、游戏开发、视觉特效、概念设计好几个赛道。刚学软件或者准备找工作的人可以去翻翻，看看现在的应届生作品集都已经卷到什么地步了。
29. 80 Level
专聊游戏美术和三维技术的媒体。这个站最值得看的是它的 Breakdown（制作拆解）文章：请原作者出面，把一个复杂的三维场景拆开，从用什么软件建白模、怎么在 Substance 里刷脏迹，到怎么在引擎里摆灯光，写得跟操作手册一样细。
30. Sketchfab
直接在网页上 360 度转着看 3D 模型的平台。遇到做得好的模型，点一下右下角的查看器设置，就能直接切到纯白模、线框（Wireframe）、法线贴图或者粗糙度通道——别人模型是怎么布线的、UV 怎么拆的，扒得干干净净。
31. befores & afters
专门扒好莱坞大片视效幕后的在线杂志。文章最爱放特效前后的对比图：左边是演员穿着动作捕捉服站在绿幕前，右边是合成完的爆炸场面，同时配着视效总监的采访，讲清楚这场戏到底是怎么借位和合成的。
32. fxguide
圈内资历最老的影视视效技术媒体。文章写得非常硬核，不聊八卦，专门深挖渲染器底层算法、虚拟制片 LED 棚管线、流体解算技术，适合想往技术美术（TA）或视效深水区走的人。
33. Blender Studio
Blender 官方自己的开源动画工作室（付费）。官方团队每年都会用 Blender 做一部高质量动画短片来测试软件极限，订阅之后不仅能看教程，还能把他们做片子用的角色绑定、灯光工程文件直接下到自己电脑里打开研究。
34. Poly Haven
做三维渲染必存的良心资源站。里面的高清 HDRI 环境光贴图、PBR 材质球和扫描模型全部采用 CC0 协议——意思是完全免费、不用注册就能直接下载，拿去接商业私活也不用署名。
35. Beeple Everydays
https://beeple-crap.com/everydays
数字艺术家 Beeple 从 2007 年 5 月 1 日那天起，逼自己每天做一张图传上网，结婚、生病、过年一天都没断过，就这么连着画了快二十年。你如果往前翻他头两年的图，会发现画得也挺糙的，但一页页往后翻，能亲眼看到一个普通人是怎么靠每天交作业硬生生把自己练成大神的。
四、电影画面与镜头参考
拍视频或者调色时，甲方常挂在嘴边的「电影感」其实是个很虚的词。与其自己瞎猜，不如直接把电影里的画面截出来，看专业的摄影指导是怎么布光、怎么压暗部、怎么选焦段的。
36. ShotDeck
《小丑》《宿醉》的摄影指导 Lawrence Sher 带头做出来的专业电影截图库（付费）。图库极其庞大，而且每张图的标签打得细到离谱：你可以直接筛选「黄金时刻 + 逆光 + 广角镜头 + 冷色调 + 车内景」，一秒钟就能拉出几十张完全符合要求的电影画面拿去做分镜参考。
37. FILMGRAB
完全免费的电影截图网站，收了几千部经典电影。它的整理方式很纯粹：一部电影就是一个单独的页面，里面整整齐齐摆着从片中挑出来的五六十张高清关键帧。想研究某位导演的用光和构图习惯，点进一页从头划到底就全明白了。
38. StillsLab
免费的影视截图库，电影、剧集、MV、广告都有，不付钱也能看全库。标签打得很细，可以按景别、机位角度、光线、色彩、日景夜景，甚至用的什么摄影机和镜头来筛，也能直接敲一句大白话描述画面去搜。每部片子的页面还会给出统计，比如《银翼杀手 2049》里夜景占 69%、柔光占 52%，研究一部片子的视觉配方特别方便。
39. Flim
接了 AI 语义搜索的影视截图库，除了电影还收了不少 MV 和商业广告。最好用的一点是不需要记片名，直接在搜索框里敲一句大白话（比如「一个人站在走廊尽头背光」或者「俯拍餐桌上的食物」），就能把各个片子里的类似镜头全搜出来。
40. EyeCannndy
一个把「镜头语言和剪辑手法」做成动图词典的网站。看到好看的转场或运镜叫不出名字很正常，这里把匹配剪辑（Match Cut）、希区柯克变焦、鞭甩转场、第一人称视角等几十种常见技法全列了出来，点开一个词条，直接给你看五六个不同广告和MV里的动图实例。
41. StudioBinder 镜头语言指南
https://www.studiobinder.com/blog/ultimate-guide-to-camera-shots/
一家做制片软件的公司写的系列教程，把景别、机位角度、运镜方式（推拉、摇移、甩镜头、环绕）一种一种讲清楚，每一种都配了电影里的实例。审美高度一般，但胜在系统、好查。用 AI 生成视频时，提示词里写「low angle」「dolly in」「whip pan」比写「拍得高级一点」管用得多，这些词在这里都能查到。
42. American Cinematographer
美国电影摄影师协会（ASC）办了一百多年的杂志。上面的文章大多是摄影指导亲自讲一部片子：为什么选这套镜头、用的什么机器、主光从哪儿打、调色怎么定。截图库告诉你画面长什么样，这里告诉你为什么这么拍。不少文章在官网免费就能读全文。
五、UI 设计
画界面之前，建议先去翻翻已经上线运营的真实产品，少逛概念设计社区。真实产品能帮你把异常状态、按钮层级这些基本逻辑理顺；概念稿好看归好看，很多根本落不了地，拿去喂 AI 只会让它做得更「AI 味」。
43. Mobbin
目前最好用的真实 App 截图库（付费，免费号能看一部分）。团队把海外大量主流 iOS、Android 和 Web 应用从头到尾截了个遍，攒了 60 多万张界面。当你要画一个「订阅付费页」或者「空状态提醒」时，直接上去筛这个功能标签，就能把 Airbnb、Spotify、Notion 的做法并排摆在一起对比。
44. Page Flows
Mobbin 看的是静态截图，而这个站存的全是真实产品的操作录屏（付费）。从新用户点开落地页、注册账号、绑卡付钱，一直到最后怎么找入口取消订阅，全程带着鼠标点击轨迹和页面跳转录下来，做交互流程梳理的时候极其省事。
45. Refero
专注 Web 网页端和 iOS 端的界面截图库（付费）。它的组件和页面类型标签切得非常碎，比如想单看别人怎么设计「表格筛选器」「面包屑导航」或者「价格对比表」，搜起来很准。它还有个免费子站 styles.refero.design，把两千多个真实网站的配色、字体、间距整理成了 AI 能直接读的 DESIGN.md，不登录就能看。
46. Nicelydone
专门收海外 Web 应用和 SaaS 软件界面的图库（付费）。平时做 ToB 业务、企业后台、工作台软件的人，看消费级 App 往往使不上劲，来这儿找复杂表单和数据看板的排版参考最合适。
47. SaaSFrame
也是盯着 SaaS 产品收集的界面库（付费），把营销官网、登录注册页、功能弹窗、后台设置页分门别类理好了，很适合独立开发者和 B 端设计师翻阅。
48. Figma Community
https://www.figma.com/community
Figma 自带的开源社区。看别人的截图只能看个皮毛，在这里看到好的设计系统、大厂开源组件库或者排得漂亮的模板，点一下右上角的「Open in Figma」，整个源文件就直接进你草稿箱了。点开图层面板，别人怎么套的自动布局（Auto Layout）、怎么命名的颜色变量，一目了然。
49. Apple 人机界面指南（HIG）
https://developer.apple.com/design/human-interface-guidelines/
苹果官方写给设计师和开发者的规范文档。遇到「底部导航栏该放几个图标」「手指点击热区最小留多少像素」「什么情况下该弹警告框」这种基础问题，不用在网上到处问人，直接翻苹果这套文档，里面把原因讲得明明白白。
50. Material Design 3
Google 的设计系统文档。就算你平时不做原生安卓应用，这套文档也极力推荐通读一遍。它把一套大厂设计系统是怎么定色阶、怎么算字号层级、怎么处理深色模式对比度、怎么定义组件悬停和按下状态的逻辑，毫无保留地全写出来了。
51. Vercel Web Interface Guidelines
https://vercel.com/design/guidelines
Vercel 整理的一份界面细节清单，交互、动画、布局、文案、表单、性能分门别类，每一条都是能直接照着检查的硬规矩，比如「手机上输入框字号不能小于 16px，不然 iOS 一点就会自动放大」「动画别偷懒写 transition: all」。最适合用 AI 写代码的人：页面上专门有一节教你接进 AI，给了现成的 AGENTS.md 和审查 skill，让 AI 写完界面后按清单逐条自查。
52. Impeccable
专门治「AI 味」的设计 skill。它把 AI 最爱用的默认套路列成了 62 项检查：米黄色的「AI 配色」、斜体衬线大标题、提示框左边一根彩色竖条、卡片里再套卡片、「01 Discover」这种编号小标题……装进 Claude Code、Cursor、Codex 之后，可以用它的命令让 AI 打磨排版、调布局、给自己的设计挑毛病。就算不装，把这份清单读一遍，也能一眼看出很多页面为什么透着廉价感。
53. The Component Gallery
一个专门把各家大厂「基础组件」拉出来同台比武的网站。比如你想研究一个最普通的「开关（Toggle）」或者「警告横幅（Alert）」，点进去，它会把苹果、谷歌、微软、Shopify、GitHub 等几十套设计系统里的对应组件截图和文档链接全列在一页上，写组件规范时拿来查漏补缺特别爽。
54. 60fps
专门收集「丝滑 UI 动效」的网站。里面全是高帧率录下来的真实应用交互片段，没有花里胡哨的废话，打开网页满屏都是各种极有手感的卡片展开、下拉刷新和页面过渡动效。
55. Spotted in Prod
https://www.spottedinprod.com/
专门抓拍海外已上线 iOS 应用里那些「让人眼前一亮的小细节」。全是几秒钟的实机操作短视频，比如某个按钮按下去时的微弱震动反馈视觉化、或者一段藏在设置页里的小彩蛋，很适合平时抠细节找灵感。
56. Growth.Design
两个产品设计师做的网站，专门用「连环画」的形式拆解知名 App 的真实体验。比如他们会像普通用户一样去走一遍 Duolingo 的新手引导，或者去订一次 Airbnb，然后一页页画出来：这一步文案为什么能让人安心付钱，下一步弹窗又为什么会把人吓跑。既好玩又有干货。
57. Laws of UX
把交互设计里常被拿来装门面的心理学定律（比如菲茨定律、希克定律、米勒定律、峰终定律），浓缩成了二十几张干净的图文卡片。每点开一张，用三句话告诉你这定律是什么意思、最早是谁提出来的、落到具体界面设计上该注意什么。写改版方案需要找理论依据时，上去翻一下很快。
58. Game UI Database
https://www.gameuidatabase.com/
一个规模吓人的游戏界面截图库，收了将近 2000 款主机与 PC 游戏、7 万多张高清截图。最牛的是它按 UI 功能做好了分类：你可以直接搜所有游戏里的「捏脸界面」「装备背包」「技能树」「任务弹窗」或「死亡结算画面」。哪怕不做游戏，去看看游戏设计师是怎么在极度复杂的信息量下排好视觉层级的，也相当涨见识。
六、网页灵感
每次接新网页需求，最忌讳直接打开软件对着白底画框。先花一刻钟去下面这几个站刷上几十个同类页面，心里有了三四个靠谱的版式方向再动手，能省下一大半返工时间。
59. Recent（原 Godly）
以前网页设计师几乎人手一个书签的 Godly（godly.website），现在输入原网址会直接跳转到这个新站 Recent。它保留了以前那种不用点进原网站、直接在缩略图上就能看高清滚动录屏的爽快体验，同时还把收录范围扩到了产品宣传片、App 图标、品牌视觉和海报。想看眼下海外独立开发者和科技公司最流行什么网页风向，刷它就对了。
60. Siteinspire
办了十来年的老牌网页灵感库，攒了几千个站。它的筛选器做得很好用，可以把「视觉风格（如网格、极简、大字报）」「网站类型（如作品集、电商）」和「所属行业（如建筑、时尚）」叠在一起筛。整体选品眼光很克制，很少收那种眼花缭乱的炫技站，全是耐看的排版。
61. Land-book
专门收落地页（Landing Page）的图库。除了产品首页，里面也单独分出了定价页（Pricing）、关于我们、个人简历页的合集，做常规商业网站很实用。
62. Landingfolio
也是收落地页的图库，但多做了一步：把页面拆成了首屏、功能介绍、用户评价、行动按钮、页脚这些区块，一共 4600 多个，能复制成 Tailwind、Figma 或 Webflow 格式（部分付费）。拿来喂 AI 特别顺手——挑一个喜欢的区块丢给它，比用文字描述「给我做个好看的首屏」准得多。
63. awesome-design-md
https://github.com/VoltAgent/awesome-design-md
GitHub 上的一个开源合集，把 Stripe、Linear、Vercel、Apple 这些公认好看的网站，各自的配色、字体、间距和组件风格整理成一份 DESIGN.md 文件。把它放进你的项目里，AI 就会照着这个品牌的规矩来生成界面，比你自己描述「我要 Linear 那种感觉」靠谱得多。
64. One Page Love
专门收集「单页网站」的网站。有些小产品、线下活动或者个人主页，根本撑不起好几个频道的导航栏，去这儿看看别人是怎么在一页从上滑到下的篇幅里，把事情讲得清清楚楚又有节奏感的。
65. Minimal Gallery
只收极简主义风格网站的图库。如果总觉得自己排出来的页面塞得满满当当、透不过气，去这里多看几个站，学学别人是怎么单靠黑白灰、大留白和干净的字号对比把页面撑起来的。
66. Dark Mode Design
https://www.darkmodedesign.com/
全网只收「深色模式」网页的图库。很多人做黑底网页容易要么漆黑一片分不清主次，要么发光特效加太多显得廉价。去这儿翻翻成熟案例，看看纯黑、深灰怎么拉开卡片层级，文字和细线边框该把透明度压到多少才不刺眼。
67. Hoverstat.es
专门收录「怪网站」的地方。里面基本看不到正经的商业公司官网，全是独立艺术家、先锋设计工作室、地下乐队或者实验建筑师的主页。导航栏藏在奇怪的地方、鼠标滑过去满屏乱飞——当你觉得现在的网页全都长一个样、看腻了套路的时候，去这儿逛逛会非常解闷。
68. Web Design Museum
https://www.webdesignmuseum.org/
一个正儿八经的「网页设计历史博物馆」。站长把 1991 年到 2006 年之间几千个古早网站的截图全存了下来——你能看到 1997 年的苹果官网长什么样、千禧年前后的雅虎门户排得有多密，以及当年红极一时的拟物化按钮和 Flash 酷站。除了怀旧，现在很多潮牌爱玩的千禧年复古风（Y2K），来这儿直接就能翻到最纯正的一手史料。
七、前端与交互
对写前端的人来说，看到一个惊艳的交互效果，光感叹一句「真牛」没什么用，按 F12 扒开看它到底是用 CSS 还是 WebGL 写的才算本事。下面这批网站，大部分都直接把源码摊开给你了。
69. Codrops
做创意前端的人必存的宝地。这个站常年分享各种能在 Awwwards 上拿奖的前端特效教程：WebGL 图片扭曲、丝滑的页面无刷新过渡、跟着滚动条变形的文字网格。最良心的是每一篇文章不仅把实现思路一步步讲清楚，还直接附上在线 Demo 和 GitHub 源码仓库。
70. CodePen Spark
CodePen 编辑部每周整理一次的创意代码合集。里面全是世界各地的前端用几百行 CSS、SVG 或 Canvas 写出来的小玩具。看中哪个效果，点进去左边就是 HTML/CSS/JS 源码框，随手改两个数字，右边画面当场就跟着变，拿来练手再好不过。
71. GSAP 官方 Demo 库
网页动画老大哥 GSAP（GreenSock）的官方示例库，一百多个效果按滚动、文字、悬停、鼠标跟随、轮播分好了类，每个都附 CodePen 源码。以前 GSAP 很多最好用的高级插件（比如做滚动绑定的 ScrollTrigger、拆字动画的 SplitText）是要掏钱买会员的，被 Webflow 收购之后，现在连带所有商业插件全部免费开放了。看中哪个效果，把源码直接丢给 AI 改，非常香。
72. Three.js 官方示例
想在浏览器里做 3D 效果，基本绕不开 Three.js。不用到处找野路子教程，先把官方这几百个在线 Demo 挨个点开看一遍——小到加载一个带骨骼动画的模型，大到海洋水面反射、物理碰撞、后期辉光通道，所有效果右下角都有个「源码」按钮，点开就是最标准的官方写法。
73. Shadertoy
图形学大神炫技的地方。这个网站里的所有酷炫画面——不管是翻滚的体积云、逼真的水波折射，还是一整座霓虹闪烁的立体城市，全都不靠导入外部图片或 3D 模型，纯粹是用几百行数学公式（GLSL 着色器代码）在显卡里实时算出来的。网页右边直接放着源码，虽然满屏三角函数看着头大，但想做流体背景或研究图形学的人绝对绕不开。
74. The Book of Shaders
如果你点开上面的 Shadertoy 觉得像在看天书，那就先来读这本免费的在线互动教程（自带中文版）。作者把枯燥的片元着色器（Fragment Shaders）掰碎了，从怎么用一条数学公式画出一条线、一个圆、再到生成噪波纹理，每一段代码都可以直接在文章里边改数字边看图案变化，是公认最好的 Shader 启蒙书。
75. Bruno Simon
法国开发者 Bruno Simon 的个人主页。别人的简历是一页 PDF，他的简历是让你在浏览器里直接开着一辆玩具车，在 3D 沙盘里横冲直撞，撞倒路牌就能看他的工作经历和项目。他写的《Three.js Journey》也是目前把 Web 3D 讲得最透彻的课程之一。
76. Lusion
英国一家专门接高定创意开发的工作室。他们自己的官网本身就是目前 WebGL 网页交互的天花板之一——从页面加载、滚轮阻尼、三维粒子转场到音效配合，没有一帧是卡顿或多余的，值得每个前端打开慢慢观摩。
77. Active Theory
美国顶尖的数字互动工作室。像好几届 Google I/O 大会的线上互动体验、早几年 Spotify 年度听歌报告（Wrapped）的互动页，很多大厂刷屏级的技术营销项目背后都是他们在写代码。
78. Framer Gallery
https://www.framer.com/gallery/
Framer 官方挑出来的优秀网站合集。Framer 的操作界面跟 Figma 几乎一模一样，但画完点一下发布就是个带真实代码的响应式网站。去这个画廊逛一圈，你就能知道现在一个不懂代码的设计师，单靠拖拽和自带组件能把网站动效做到什么程度。
79. Motion 官方示例
现在写 React 和 Vue 最常用的动画库 Motion（以前叫 Framer Motion）的官方示例页。从最基础的弹簧物理缓动、列表增删重排，到复杂的跟随滚动条动画，常用的 UI 动效基本都有现成的简短示例（部分付费）：所有示例都能看演示，基础分类的一百多个免费给源码，复制过来就能改着用；其余的要买 Motion+ 才能看代码。
80. React Bits
一个完全免费开源的 React 动画组件小超市。里面全是现成封装好的视觉小零件：文字乱码浮现、鼠标磁性吸附按钮、流光卡片边框、动态流体背景。左边调好速度、颜色参数，右边直接复制代码贴进自己项目里，五分钟就能让干巴巴的页面活起来。
81. coss ui
开源日程工具 Cal.com 自家的设计系统，前身是不少人收藏过的 Origin UI。基于 Tailwind 写的，五十多个基础组件加五百多个现成的小模块，MIT 协议随便用。它的风格很克制，看着就像一个认真打磨过的真实产品，而不是又一个「深色背景 + 发光边框 + 光束特效」的 AI 创业公司官网。
82. Josh W. Comeau
前端开发者 Josh Comeau 的博客。他讲 CSS 布局、弹簧动画、SVG 路径，不是干巴巴地贴代码，而是在文章里塞满能拖、能调参数的交互小图解，拖一下滑块你就明白为什么这条曲线看着更舒服。文章免费，进阶课程收费。原理看懂了，再让 AI 写动效时你才知道该提什么要求。
83. Rauno Freiberg
目前在 Vercel 担任设计工程师的 Rauno 的个人网站。强烈建议把他站里那篇《Invisible Details of Interaction Design》（交互设计中看不见的细节）从头到尾读一遍。他用十几个可以亲手点按的交互小组件，把「为什么苹果系统的滑动停下来那么自然」「下拉菜单怎么根据鼠标移动斜率防误触」这种藏在水面下的工程细节讲得明明白白。
84. Emil Kowalski
很多前端都在用的开源提示框组件 Sonner 和抽屉组件 Vaul 的作者，之前在 Linear 做设计工程师。他的博客文章篇幅都不长，但全在死磕一个问题：怎么让界面动画显得「克制又跟手」。比如弹窗到底该用多少毫秒、什么情况下绝对不要加动画，读完能改掉不少乱加动效的坏毛病。
八、字体与配色
不管你是剪片子加字幕，还是画界面写网页，字体和配色永远是最容易暴露基本功的地方。一个作品看着「土」或者「乱」，十有八九是这两样没收拾利索。
85. Typewolf
海外排版圈公认最靠谱的字体指南网站。站长是个对字体极度挑剔的设计师，以前每天推荐一个把字体用得极好看的真实网站，并标出它主标题和正文分别用了什么字（2025 年底之后就没再更新了，但攒下的案例和榜单照样能翻）。此外，网站里整理的「十佳无衬线体」「Google Fonts 最佳搭配方案」含金量极高，做英文或中西混排页面拿不准用什么字体时，去翻它的榜单绝对不会出错。
86. Fonts In Use
一个靠全球设计师共同维护的「字体实战档案馆」。它不卖字库，专门收集现实世界里的海报、书籍封面、唱片封套、路牌、网页截图，然后像法医一样把里面用到的每一款字体名字全扒出来标在旁边。你想知道某款字体印在纸上或排在网页上到底是什么气质，搜一下它里面的真实案例就清楚了。
87. Google Fonts
大家最熟悉的老朋友，完全免费可商用的开源字库。除了海量的英文字体，像中文里最常用的思源黑体（Noto Sans SC）、思源宋体（Noto Serif SC）、霞鹜文楷（繁体版）都能在上面直接下载，写前端更是连字体包都不用下，引一行链接就能跑。
88. Fontshare
印度知名字体大厂 ITF 办的免费字库网站。上面的字体虽然数量没有 Google Fonts 那么夸张，但款款都是精品，而且承诺 100% 免费供个人和商业项目使用。像这两年在海外独立网页和科技圈出镜率极高的几何无衬线体 Satoshi、标题字 Clash Display、General Sans，全是从这儿免费流出来的。
89. Butterick's Practical Typography
https://practicaltypography.com/
一本写得极其痛快的免费在线排版小书。作者既写过代码又当过职业字体设计师，书里没有任何故弄玄虚的艺术理论，上来就用「10 分钟掌握排版核心」一章直接给你划硬指标：正文一行控制在多少个字母最舒服、行高设多少倍、为什么绝对不要随便拉宽字间距。哪怕只读完这第一章，你排出来的文档和网页都会立马顺眼一大截。
90. Utopia
很多新手画页面时，大标题设 32px、小标题设 22px、正文设 14px，全是拍脑袋瞎填的，最后页面看着毫无秩序。这个小工具就是帮你按「数学比例」定字号的：分别填好手机和电脑上的正文字号，再选一个缩放倍率（比如大三度 1.250），它自动算出一整套会随屏幕宽度平滑缩放的字号变量，间距也能一起算。免费、不用注册，生成的 CSS 复制下来就能用，也可以直接丢给 AI 当排版规范。
91. Coolors
最好用的傻瓜式配色工具。打开网页什么都不用设置，直接敲键盘空格键，屏幕上就会随机刷出一组五色卡；看到顺眼的颜色点一下锁头把它锁死，再继续敲空格，算法就会自动围绕你锁住的颜色去配剩下的颜色。支持一键模拟色盲用户眼里的画面，还能直接把色卡导出成图片或代码。
92. Realtime Colors
https://www.realtimecolors.com/
存了一堆好看的五色卡，真到画页面时还是抓瞎——不知道哪个色填背景、哪个色涂按钮、哪个色写正文。这个工具解决的就是这个痛点：你可以在底部工具栏自己挑（或者随机摇出）文字色、背景色、主色、次色和强调色，上面的标准落地页和后台图表会实时跟着变色，还能随时点一下太阳/月亮图标看这套颜色切到深色模式会不会翻车。调好之后能直接导出 Tailwind 配置、CSS 变量，或者用它的同名插件一键同步进 Figma。
93. Radix Colors
https://www.radix-ui.com/colors
开源组件库 Radix 配套的一整套界面配色。它给的不是几组好看的色卡，而是把每种颜色拆成 12 级，并且规定好了每一级干什么用：哪几级当背景、哪几级给按钮悬停、哪几级画边框、哪几级写文字，深色模式也一并配好了。照着这套规矩用色，页面很难乱；跟 AI 说一句「颜色按 Radix 的 12 级来用」，也比说「配色高级一点」管用。
94. tweakcn
现在用 AI 写前端，很多人用的都是 shadcn/ui 这套组件，结果就是满大街的网站长得一模一样——这也是作者做它的原因。tweakcn 是给 shadcn 换皮的可视化编辑器：颜色、字体、圆角、阴影在左边调，右边的卡片、表单、仪表盘实时变样，还有一堆预设主题可以直接套，调满意了导出主题代码贴进项目就行。免费开源。
九、日常收集灵感
审美这东西没办法临时抱佛脚。平时刷手机、逛网页看到让人眼前一亮的图，随手按分类存进自己的库里，等真接了项目需要找方向时，翻自己的私藏永远比去全网大海捞针快。
95. Pinterest
图库体量依然是全网第一，尤其适合顺藤摸瓜：找准一张对味的参考图点进去，顺着底下的「相似图片」一路往下点，十分钟就能拉出几十张同风格的图。缺点是这两年首页信息流里混进了不少粗糙的 AI 生成图和营销号杂图，建议建几个私密画板（Board），只钉真正精挑细选过的好图，把推荐算法慢慢养干净。
96. Are.na
设计圈里很多极客、建筑师和独立撰稿人偏爱的资料收集工具。它长得非常素，没有广告、没有算法信息流、甚至连「点赞数」都没有。你可以建不同的频道（Channel），把图片、PDF 文献、网页链接、随手记的一段话塞进去，还能把自己的频道跟全世界其他人的公开频道串联起来。很适合安安静静攒某个特定课题的研究资料。
97. Cosmos
这两年在海外设计师圈子里蹿红的新一代灵感收藏夹。装上它的浏览器插件，平时在推特或任何网站上看到好图、好视频，右键一下就能收进自己的空间。它的界面排版极其干净，而且因为早期用户大多是审美在线的创意人，直接在它的发现页（Discover）里逛别人公开的收藏夹，图片质量非常高。
98. Savee
专门做给视觉设计师看的极简图片社区。打开网站连多余的文字标题都没有，满屏就是干干净净的高清大图瀑布流。上面沉淀的内容非常纯粹，基本集中在平面排版、品牌包装、先锋摄影、字体设计和工业造型，想找高级感平面参考时，来这儿刷比去综合平台效率高得多。
99. It's Nice That
伦敦办了很多年的创意文化媒体。每天更新几篇短文章，聊全球各地最新的插画、平面、动画、摄影项目。它好看的地方在于不光贴图，编辑很会挖创作者背后的好玩故事——比如这个奇怪的字体是怎么因为一次印刷失误弄出来的、那支荒诞的短片导演当时在想什么。很适合当午饭时的电子榨菜。
100. Brand New
https://www.underconsideration.com/brandnew/
全球品牌换标（Rebranding）的专业点评网站。只要国内外稍微有点名气的公司、大学、体育联赛或者消费品换了新 Logo 和新视觉系统，这里就会第一时间把旧版和新版并排摆出来，从字体微调、图形演变到实际延展应用做一番客观（有时相当毒舌）的拆解，底下还有全球同行投票打分（付费，不订阅只能看到新旧 Logo 的对比图）。常看这个站，能很快练出看透商业品牌设计好坏的眼力。
最后：怎么把这 100 个网站真正用起来
开头就说了，把这篇文章扔进收藏夹吃灰，一毛钱用都没有。
我自己平时用这些网站就四个笨办法，坚持下来挺管用的：
- 每天只挑一个站，看够 15 分钟就关掉。 千万别一口气在浏览器里开二十个标签页，那样看五分钟就会烦。不如给自己定个不用动脑子的固定排班：周一早上喝咖啡时刷 Awwwards，周二看 Motionographer，周三翻 Mobbin……每天只盯一个地方看一刻钟，细水长流才进得去脑子。
- 滑过去之前，强迫自己用一句话说出「它到底好在哪」。 看到一张图或一个网页觉得真好看，别光顾着存图，停下来想十秒钟：它让你觉得高级，到底是因为留白敢给？标题和正文字号拉得够开？背景灰色调得正？还是按钮弹出来的那一下速度刚好？你能用大白话把原因总结出来，这个招数才算变成你自己的了；说不出来，那就只是过了一遍眼瘾。
- 遇到特别喜欢的，直接上手拆一个、抄一个。 看到惊艳的网页，顺手按 F12 打开开发者工具，看看它的网格间距设的多少、用的哪款英文字体、CSS 缓动曲线写的什么参数；看到节奏极好的短片，下到本地拖进剪辑软件里，一帧一帧数它一个镜头停几秒、转场藏在哪一帧。看明白了，关掉原片自己新建工程仿做一遍，试一次能顶看十篇教程。
- 把看到的风格记住名字，变成跟 AI 说话的底气。 现在大家每天都在用 Claude、Cursor 或者各种生图工具干活。你如果只会跟 AI 说「帮我把网页改得大气一点、现代一点」，它给你的永远是最平庸的模板；但如果你平时逛多了上面这些站，你可以直接跟它下指令：「按 awesome-design-md 里 Linear 那份 DESIGN.md 的规矩，给我写一个深色的 Bento 网格卡片，边框加上微弱的高光描边，标题用 Satoshi 这种几何无衬线体，展开动画参考 Emil Kowalski 推荐的快速阻尼曲线，写完按 Vercel 的界面规范自查一遍」——当你能把具体的名字和手法甩出来时，AI 交出来的活儿完全是另一个档次。
说到底，只有你能准确叫出名字、说清门道的东西，才是你真正长在身上的审美。
这 100 个网站是我按自己平时做视频、画图的习惯筛出来的，肯定还有漏掉的好地方。如果你书签栏里也有平时舍不得删的压箱底网站，欢迎在评论区甩出来互通有无。
觉得这份清单有点用的话，不妨顺手点个赞、转给身边一起干活的朋友。下次开新项目对着屏幕发呆的时候，随时翻出来看看。
我是Eian，谢谢支持。
評論
0