今天这篇文章，我想和你认真聊一件事——
为什么你刷了那么多设计网站，收藏了那么多灵感图片，但真到自己动手做设计的时候，脑子里还是一片空白？
这个困惑我也有过。后来我发现：问题不是灵感不够，而是你从来没有系统地拆解过一个好设计。
这期，我从自己知识库的「网站合集」模块里，挑了 4 个今年最值得深度拆解的设计网站/资源。每个我都会告诉你：它好在哪里、用了什么设计手法、你能在自己的项目里怎么用。
📋 本期速览
|
|
|
|
|
|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. Basement.studio — 当官网变成一件数字艺术品
🔗 https://basement.studio/
一句话介绍
Basement 是阿根廷的一家创意技术工作室，他们的官网本身就是他们最好的作品——进入首页，你不是在看一个网页，而是在探索一个 3D 空间。
设计风格分析
视觉特征：
-
深色沉浸式背景 + 发光粒子系统 -
无传统导航栏，靠鼠标拖拽和滚动驱动场景切换 -
每个项目案例有独立的「展示空间」，像美术馆的独立展厅 -
字体极简，大字号，留白极度克制
技术栈：
-
Three.js + React Three Fiber（3D渲染） -
GSAP（高精度动画时序控制） -
WebGL Shader（自定义粒子效果）
风格标签： 3D 沉浸式 暗黑科技感 极简叙事 空间交互
设计理论解读：空间叙事（Spatial Storytelling）
Basement 的设计背后，是一套完整的空间叙事设计哲学。
传统网页设计是平面思维：屏幕是一个矩形画布，信息沿着 Y 轴从上到下排列。用户的阅读路径是线性的——先看到 Hero，再看到 Features，最后看到 Footer。
Basement 把这套逻辑彻底颠覆了。他们把网页变成了三维空间：
- Z 轴
被用来表达信息层级——前景是核心交互，中景是辅助信息，远景是氛围营造 - 摄像机运动
代替了页面滚动——用户通过「移动视角」来「浏览内容」 - 空间记忆
取代了「翻页感」——用户会记住「那个发光的粒子在左上方」，而不是「那段文字在第 3 屏」
这套手法的核心设计原则是：把信息映射到空间，而不是时间。
如果你理解了这个原则，你就能解释为什么 Apple 的产品页那么好看——他们早在 2015 年就开始用「空间滚动叙事」了（还记得 iPhone 6s 的那个「深处」页面吗）。
对你的学习价值
① 如果你是学生或初级设计师
打开 Basement 的网站，不要用「看」的方式，要用「拆」的方式：
-
右键 → 检查 → 找到 Three.js 的 Canvas 元素 -
观察：粒子数量是多少？（太多会卡，太少没效果） -
观察：摄像机的移动速度是多少？（太快头晕，太慢没感觉） -
观察：鼠标拖拽的「惯性」是怎么实现的？（这是一个可以写进作品集的细节）
把这个过程记录下来，就是一份高质量的案例拆解笔记。
② 如果你在做作品集
不要只在作品集里放「最终设计稿」。学 Basement 的思路——给你的每个项目创造一个「展示空间」：
-
Project A 用 3D 粒子背景 -
Project B 用视频全屏背景 -
Project C 用交互式时间线
让 HR 翻你的作品集时，感觉像在「参观展览」，而不是「翻阅 PDF」。
③ 如果你在做品牌官网
Basement 的思路可以直接复用：选一个核心视觉符号（他们选了粒子），让它贯穿整个网站。首页有、项目页有、关于页有——用户会记住这个符号，也就记住了你的品牌。
延伸知识
- 类似风格的网站
：OXYZ3（https://oxyz3.xyz/）、KODE Immersive（https://kodeimmersive.com/） - 入门 Three.js
：推荐 Bruno Simon 的 Three.js Journey（https://threejs-journey.com/）—— 这是目前最好的 Three.js 系统课程 - 设计概念
：摄像机语言（Camera Language）——电影里的推拉摇移，在网页设计里同样适用。你不需要会拍电影，但你需要理解「视角变化」如何影响用户的情绪。
2. Neobrutalism.dev — 为什么「丑」的设计反而火了？
🔗 https://www.neobrutalism.dev/
一句话介绍
这不是一个设计工具，而是一份设计风格的宣言 + 开源组件库。它用 Shadcn/ui 构建了一套完整的「新粗野主义」UI 组件，同时深入阐述了这种风格的设计哲学。
设计风格分析
什么是新粗野主义（Neobrutalism）？
这个词听起来很玄，其实设计语言非常简单：
|
|
|
|
|---|---|---|
|
|
|
2-4px 纯黑粗边框 |
|
|
|
硬阴影（无模糊，直接偏移） |
|
|
|
0 圆角或 2-4px 小圆角 |
|
|
|
高饱和、冲突色 |
|
|
|
粗体、大字号、有态度 |
|
|
|
个性、叛逆、有趣 |
设计理论解读：反精致的崛起
新粗野主义的流行，本质上是一种审美疲劳后的反叛。
过去 5 年，几乎所有的 SaaS 产品都长成了一个样子：
-
蓝白配色 -
大圆角卡片 -
柔和的渐变按钮 -
大量的留白
这个风格非常「安全」——它不会出错，但也不会被记住。
新粗野主义做的是相反的事情：
-
它故意让边框「不精致」 -
它故意用「冲突」的配色 -
它故意让界面看起来「像没做完」
但恰恰是这种「不完美」，传达了一种态度：
「我们不在乎看起来完美，我们在乎我们是谁。」
这种态度，对 Z 世代用户来说，比「专业感」更有吸引力。
对你的学习价值
① 理解「风格体系」是怎么建构的
Neobrutalism.dev 最有价值的地方，不是那几个组件，而是它展示了——如何为一套设计风格建立规则。
-
边框多粗？→ 3px solid black -
阴影怎么画？→ box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) -
圆角多少？→ 0px 或 4px -
配色怎么选？→ 高饱和原色 + 纯黑纯白
把这套规则文档化，就是一份**设计系统（Design System）**的雏形。你在做自己的设计系统时，也可以参考这个思路——先定规则，再画界面。
② 打破「好看 = 极简」的思维定式
很多设计师陷入一个误区：认为「越简单越好看」、「白色越多越高档」。
新粗野主义证明了：有态度、有个性的设计，同样可以非常棒。设计的目标不是「不出错」，而是「被记住」。
这个道理，对你的作品集同样适用——不需要每个作品集都做成 Apple 风格，找到你自己的「设计态度」，比模仿精致更重要。
③ 落地难度极低
新粗野主义是开发最友好的设计风格之一：
-
粗边框 → 一行 CSS -
硬阴影 → 一行 CSS -
纯色填充 → 不需要渐变
如果你是一个人在做项目（设计 + 前端全包），新粗野主义可以极大提升你的交付速度。
延伸知识
- InspoWeb 上用 Neobrutalism 的网站
：Good Eat'n（https://www.goodeatn.com/）、MUX（https://www.mux.com/） - 设计理论
：反设计（Anti-Design）运动 —— 1970 年代意大利的设计运动，故意打破网格、排版和色彩规则，来创造视觉冲击力。新粗野主义可以说是它在数字时代的「温和版」。 - 推荐阅读
：《Visual Grammar》（把视觉元素当作语法来理解的经典小书）
3. Cosmos.so — 你的灵感，不应该只是一堆截图
🔗 https://www.cosmos.so/
一句话介绍
Cosmos 是一款专为创意工作者设计的视觉灵感收藏工具。你可以把它理解为「Pinterest + Notion 的结合体」——它不仅能收藏图片，还能自动提取颜色、按项目组织、用 AI 搜索，甚至生成精美的灵感展示页。
设计思路：从「收藏」到「系统」
大多数设计师的灵感管理是这样的：
手机相册一堆截图 + Pinterest 一堆 Pin + 电脑桌面一个叫「参考」的文件夹
结果呢？要用的时候找不到，找到了也忘了当初为什么收藏。
Cosmos 解决的核心问题是：让灵感从「堆着」变成「可用」。
它的设计逻辑是一个完整的闭环：
采集（浏览器插件一键保存）
↓
标记（自动提取颜色 + 手动打标签）
↓
组织（按项目/主题/情绪分类）
↓
检索（按颜色搜、按关键词搜、AI语义搜索）
↓
输出（一键生成精美的灵感展示页）
对你学习设计的帮助
① 建立你的「设计判断力」训练系统
一个设计师的成长速度，很大程度上取决于他/她如何管理输入。
用 Cosmos 管理灵感的正确姿势是：
-
每收藏一张图，问自己：它好在哪里？（配色？排版？动效？） -
用 Cosmos 的颜色提取功能，看 50 张你觉得配色好看的图，观察它们的色板有什么规律 -
你会发现：原来你喜欢的设计，80% 都用了「低饱和暖灰 + 一个高饱和强调色」的配色策略
这就是从感性到理性的设计学习过程。
② 为面试作品集做准备
面试的时候，面试官经常会问：
「你的设计灵感来源是什么？」「你平时怎么积累设计素材？」
如果你能展示你按「金融科技」「医疗健康」「教育产品」分类整理的灵感库，并说出每张图你为什么收藏——这比说「我平时看 Dribbble」要有说服力得多。
③ 理解「信息管理产品」的设计思路
Cosmos 本身也是一个非常好的产品设计案例来研究：
-
它解决了什么痛点？（设计师灵感管理混乱） -
它的核心差异化是什么？（AI 搜索 + 颜色搜索，不只是标签） -
它的商业模式是什么？（Freemium，个人免费、团队付费）
研究 10 个这样的产品，你对「产品设计思维」的理解会超过 90% 的 UI 设计师。
延伸知识
- 替代工具对比
：Eagle（本地管理，一次买断）、Pinterest（免费但管理能力弱）、Milanote（更侧重项目协作和思维导图） - 灵感管理方法论
：Zettelkasten（卡片盒笔记法） 在设计灵感管理中的应用——每张灵感卡片都应该有自己的标签、关联和你的思考笔记，而不只是图片本身 - 推荐关注
：Are.na（概念性灵感平台，比 Pinterest 更有深度）、Mobbin（真实产品截图，适合 UI 参考）、SiteInspire（网页设计案例）
4. Bento Grid — 为什么全世界的设计师都在用「便当盒布局」？
这个趋势是什么？
**Bento Grid（便当盒网格）**是近年来 UI 设计中最具统治力的布局趋势之一。它的名字来源于日本便当盒的分格结构——不同大小的矩形模块组合成一个整体，每个模块承载独立的内容。
Apple 在 WWDC 2023 的 Keynote 中大量使用了 Bento Grid 来展示 Apple Silicon 芯片的各类功能特性，从此这个布局风格在设计师圈彻底爆火。
核心案例（均来自我的网站合集）
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
设计原理：为什么 Bento Grid 这么好用？
① 非对称平衡
传统网格系统（比如 12 列网格）要求所有元素对齐到统一的列宽，这很「安全」，但也很「平」。
Bento Grid 允许不同大小的模块组合——有的卡片占 2 列，有的占 1 列，有的竖长、有的横宽。这种非对称性创造了视觉节奏感：大卡片是「锚点」（吸引注意力），小卡片是「呼吸空间」（让眼睛休息）。
② 信息密度与可读性的平衡
Bento Grid 天生适合展示多类型信息。比如一个个人主页可以同时展示：
-
大卡片：自我介绍 + 头像 -
中卡片：最新项目列表 -
小卡片：社交媒体链接 -
长卡片：最新动态 / 博客文章
所有信息在一个屏幕里呈现，但又不会显得拥挤——因为每个模块有清晰的边界（边框或背景色区分）。
③ 响应式的优雅降级
在桌面端是 Bento 拼图，在移动端自然退化为堆叠卡片。这个「降级友好」特性让它在全平台都能很好地工作，这也是为什么它这么受前端开发者欢迎。
对你的学习价值
① 布局思维的进阶
从「对齐排列」到「空间叙事」——Bento Grid 迫使你思考：
-
哪些内容重要？（给大格子） -
哪些内容辅助？（给小格子） -
内容之间是什么关系？（相邻摆放 = 有关联；分隔摆放 = 独立）
这套思维，对你做**信息架构（IA）**也有很大帮助。
② 直接用在作品集里
如果你的作品集还在用传统的「列表式布局」，试试 Bento Grid。它能让你的作品展示从「一维列表」变成「二维叙事」，视觉档次直接提升一个级别。
③ 理解 Apple 的设计语言
Apple 是 Bento Grid 在科技圈的最大推手。研究 Apple 的 Keynote、产品页、甚至 App Store 的排版，你会发现 Bento Grid 无处不在。理解这个布局，也是在理解世界一流科技公司的设计语言。
延伸知识
- Bento Grid 的起源
：Apple 的「Bento」应用（已停更）+ 日本便当文化 + 现代 Dashboard 设计 - 相关设计趋势
：Masonry Layout（瀑布流）——Pinterest 风格的参差排列，与 Bento Grid 互补，适合图片密集型展示 - 工具推荐
：CSS Grid Generator（https://cssgrid-generator.netlify.app/）—— 可视化生成 Grid 代码，初学者神器 - Bento Grid 灵感网站
：BentoGrids（https://bentogrids.com/）—— 专门收集 Bento Grid 设计案例的网站
📌 大鹏的碎碎念
这期拆了 4 个方向：3D 空间叙事、反精致风格、灵感管理系统、网格布局趋势。
它们有一个共同点：都不是「好看就行」的设计，而是有清晰设计逻辑和理论体系的设计。
这也是我的知识库一直在强调的事情——
设计不是「审美」，是「解决问题的方法论」。
🗂️ 关于「第二灵感库」知识库
上面拆的这些网站，其实都来自我知识库里的**「网站合集」模块**。
我的知识库目前有 11 个模块，覆盖了一个 UI/UX 设计师从入门到进阶到职业发展的完整路径：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
目前知识库已经整理完成，里面附带了我自己用的：
-
📦 Figma Web 官网模板 -
📱 App 模板 -
🎬 UX 交互动效模板 -
🔧 Figma 汉化软件 + 3 套课程 -
🔌 Figma 插件库 -
📚 设计电子书籍
如果你想系统提升设计能力，而不是每次都靠「刷 Dribbble 找灵感」——在评论区留言：「资源」，我会把详细信息发给你～