哈喽，我是大鹏，这里是你的 UI/UX 第二灵感库。
做设计10年，我收藏了200+个优质网站。这期挑6个最新挖到的，逐个拆解设计细节——不是让你看热闹，是看完就能直接抄到项目里。
01 🎨 HariKrishnan R — 用终端命令写作品集，太会了
网站：https://harikrishnanr.in/
一句话：ML工程师的个人作品集，用终端命令行风格做自我介绍，完全跳出千篇一律的模板。
设计风格
赛博极客 + 极简揉在一起。没有头像、没有大图背景、没有花哨动画，整个网站就像打开了一个终端窗口，逐行打印你的经历。第一次看到的时候我直接愣了3秒——原来作品集还能这么玩。
配色方案
|
|
|
|
|---|---|---|
|
|
#0F0F0F
|
|
|
|
#D4D4D4
|
|
|
|
#00FF00
|
|
配色饱和度极低，完全服务于「专业、冷静、技术感」的定位。
字体选择
- 标题/命令
等宽字体（Fira Code / Roboto Mono）——程序员天天用的代码字体，强化「工程师」身份认知 - 正文
Inter / Helvetica Now，保证长文可读性 - 彩蛋字体
页脚用了 Malayalam pixelated font（Rosu），像素化复古科技元素，细节处强化个人特色
布局特点
- 单栏流式布局，所有内容从上到下线性排列，移动端体验极佳
-
模块之间用 ---分隔线或命令块（> boot_sequence: hari.about）分割 - 左对齐，完全符合代码编辑和终端命令的阅读习惯
交互细节
-
命令块 > boot_sequence: XXX采用逐字打字动效，模拟终端运行效果，第一次看到会忍不住多盯几秒 -
技能标签、项目卡片悬停时有背景色切换 + 轻微上浮，细节很到位 -
页面底部 launch interface按钮，点击后可能有彩蛋动效（自己去试）
运用的设计理论
- 视觉层次
通过「字号 + 字重 + 颜色 + 位置」四维度建立清晰层次，一眼就能分清哪是标题、哪是正文 - 格式塔-接近性
相同模块内容间距更小，不同模块间距更大，访客自动归类关联内容，不用思考 - 留白运用
留白占比超过30%，符合「少即是多」原则，内容呼吸感极强
✂️ 直接能抄的3个细节
- 用「身份化视觉语言」替代传统自我介绍
— 不用「我是XXX，擅长XXX」，改用代码启动文案介绍身份，记忆点极强，面试官看完直接记住你 - 项目介绍用「技术标签 + 核心结果」结构
— 每个项目只写3个信息：项目名、技术栈、1句话核心成果，信息传达效率极高，比写一大段经历有用10倍 - 联系方式用「梗化文案」
— 不用生硬的「Contact Me」，改为「经过多年寻找，终于建立了和Harikrishnan沟通的安全通道」，降低联系门槛，还带点幽默感
02 🏢 Basement Studio — 收费$50k/项目的工作室，网站就长这样
网站：https://basement.studio/
一句话：服务过 Vercel、Next.js、Linear 等头部科技品牌的设计工作室，官网直接展示「为什么他们收费这么贵」。
设计风格
极简科技感 + 先锋创意的融合。既符合科技品牌的理性、高效调性，又有设计工作室的创意张力，不会过于冰冷——看完你就懂为什么客户愿意掏$50k。
配色方案
- 主色
低饱和度中性色（深灰、黑、白），保证内容清晰可读，不抢案例的风头 - 强调色
高饱和度亮色（品牌蓝、亮黄、荧光绿），用于按钮、重点文案，在极简页面中形成视觉焦点，引导视线 - 案例配色
完全匹配客户品牌色（Vercel项目用黑+蓝，Mr Beast项目用高饱和亮色），每个案例都像客户自己的落地页
字体选择
- 标题
无衬线粗体（Inter / Helvetica Now / PP Neue Montreal），字形简洁有力，视觉冲击强 - 正文
高可读性无衬线字体，字号偏小，行间距适中，长时间阅读不累 - 特殊字体
Slogan位置可能使用定制字体，和常规科技公司形成差异，一眼就能认出来
布局特点
- 响应式栅格系统，桌面端和移动端都适配完美，不存在「移动端将就看看」的问题
-
页面结构清晰： 首屏品牌介绍 → 合作客户展示 → 精选案例 → 服务能力 → 联系我们，用户3秒就能找到想要的信息 - 合作客户 logo 无限滚动，展示大量客户同时不占用过多页面空间，比静态排列 logo 效果好10倍
交互细节
-
合作客户区域无限滚动，流畅无卡顿，滚动时有轻微的视差感 -
页面模块进入视口时淡入 + 上移动效，不会太花哨，但足够抓眼球 -
案例卡片悬停时展示动效预览 / 项目简介，不用点进去就能看到核心信息 -
首屏可能放置品牌介绍视频，更生动传递理念（有些工作室官网首屏就是一段精炼的展示视频）
运用的设计理论
- 格式塔原理
元素布局符合接近性、相似性，用户快速区分内容模块，不用脑子思考 - 视觉层级理论
字号、字重、颜色、留白差异明确区分信息层级，重要的内容就是更大、更粗、更显眼 - 用户中心设计
页面结构从用户需求出发——客户想看案例，前3屏就有；想看合作品牌，滚动3秒就到，快速建立信任
✂️ 直接能抄的3个细节
- 合作客户无缝滚动展示
— 用无限滚动展示大量合作客户，比静态排列 logo 效果好10倍，非常适合B端服务类网站，3行代码就能实现 - 服务能力模块化展示
— 分成「网站&功能、视觉品牌、线下体验、营销执行」4个清晰模块，信息层级非常清晰，客户一眼看懂你能干什么 - 案例标签轻量化设计
— 每个案例标注服务标签，简洁不抢夺封面视觉焦点，兼顾信息传达和视觉美观，不会让页面看起来乱糟糟
03 💬 Monologue — 退掉Slack，用这个协作工具
网站：https://www.monologue.to/
一句话：AI语音转文字工具，主打「说一次，就能得到你想要的文字内容」，帮你把输入效率提升3倍。
设计风格
极简实用主义 + 轻科技感。所有设计都在降低用户认知负担，把注意力聚焦在「语音转文字」核心功能上，没有冗余装饰——第一次用的时候我就觉得：终于有人不把我当傻子了。
配色方案
- 主色
低饱和度蓝色/青色系，传递科技、可靠、高效感知，看一眼就知道是生产力工具 - CTA按钮
高饱和度强调色（绿色/橙色），引导用户点击，和背景形成明确对比，不会找不到按钮 - 背景
白色/浅灰，保证页面干净通透，长时间使用不累眼
UI组件风格
- 按钮
实心填充CTA + 描边次要按钮，视觉权重清晰，你知道哪个该点哪个不该点 - 代码块
语法高亮，符合开发者使用习惯，细节到位 - 证言组件
「用户头像 + 身份标签 + 证言内容」标准结构，增强可信度，不是随便找人写两句好评就完事
布局特点
- 单栏滚动式布局，每一屏只传递1个核心信息，不会一上来就扔一堆功能把你砸晕
- F型浏览优化
核心卖点、CTA按钮都放在视线最容易落下的位置，用户不用到处找「开始使用」按钮 - 场景化布局
「用户身份 + 真实输入/输出案例」左右/上下排布，直观展示产品适配能力，你一看就知道「哦，这个场景我也用得上」
交互细节
- 跨设备同步
iOS端设置自动同步到桌面端，切换设备不丢内容，体验很丝滑 - 上下文感知格式化
根据当前App自动调整格式（写代码时自动适配代码格式），不是死板的「语音转文字就完事」 - 全场景适配
所有App中可用，点击指定按钮即可唤起语音输入，不用切换App，效率极高 - 离线转录支持
无网络时也可使用核心功能，地铁上也能用，考虑很周到
运用的设计理论
- 奥卡姆剃刀原理
页面没有多余信息和装饰，每一个元素都有明确作用，不浪费用户一丝注意力 - F型浏览逻辑
内容按照用户浏览习惯排布，提升信息触达效率，重要信息一定在F型视线路径上 - 社会认同原理
放置行业知名人物短证言，降低用户信任成本，「连XXX都在用」比自卖自夸有用100倍 - 场景化设计
通过不同职业用户真实使用场景，让用户快速代入，「这就是为我设计的」
✂️ 直接能抄的3个细节
- 「场景化证言 + 真实案例」展示
— 针对不同职业用户展示真实使用场景，用户一眼看到「我用的时候会是什么样子」，转化率远高于空泛功能描述，这个套路哪里都能用 - 低门槛信任背书设计
— 在首屏、核心功能模块放置行业知名人物短证言，聚焦产品核心差异化优势，不是堆砌一堆「好评如潮」 - 定价模块「低决策成本」设计
— 先引导免费下载，再展示付费差异，明确标注年付优惠，降低用户决策压力，不会一上来就让你掏钱
04 🕯️ Flambette — 手工香氛品牌的治愈感，是怎么设计的？
网站：https://flambette.com/
一句话：加拿大手工香氛品牌，官网不像在卖货，更像在邀请你「慢下来，享受小瞬间」。
设计风格
温柔治愈的手工小众品牌路线。整体氛围像走进一家藏在街角的精致香氛小店，温暖且有记忆点，完全区别于工业化量产品牌的冰冷感——看完你会想：我也想做一个这样的品牌。
配色方案
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
所有产品图、场景图都经过统一调色处理，整体偏暖、低对比度，和品牌氛围高度统一，点开网站的那一刻你就能感受到「温度」。
字体选择
- 标题
衬线体/手写感无衬线体，带有轻微复古感和手工感，和「手工制作」的定位完美契合 - 正文
无衬线体，笔画清晰，易读性高，不会为了「设计感」牺牲可读性 - 字体层级清晰
标题、副标题、正文、辅助文字的字号/字重区分明显，信息层级一眼分清
产品展示布局特点
- 主题化区块划分
每个产品区块围绕一个主题（春日限定、Eclipse高端线、贺卡系列），不是把所有产品扔在一个页面里让你自己找 - 产品卡片统一规范
正方形产品图 + 名称 + 价格 + CTA按钮，卡片间适当留白，不会挤在一起像淘宝9.9包邮 - 穿插品牌故事区块
产品展示中间穿插手工制作场景实拍图，强化「全手工、天然成分」核心卖点，比在「关于我们」页面里放一堆文字有用多了
交互细节
- 产品卡片悬停
轻微阴影加深/放大效果，「加入购物车」按钮高亮显示，交互反馈清晰但不夸张 - 购物车侧边栏
点击购物车图标，侧边栏平滑滑出，不需跳转页面，购买流程不中断，体验很流畅 - 滚动视差效果
部分区块图片和文字采用轻微视差滚动，增加层次感，不会太花哨但足够精致
运用的设计理论
- 格式塔-相似性
所有产品卡片样式统一，用户自动归为同一类信息，不会觉得杂乱 - 情感化设计
配色、文案、图片都在传递「温暖、治愈、慢生活」情感，用户买的不是香氛，是一种生活方式 - 视觉层级理论
通过字号、字重、颜色、留白差异建立清晰视觉层级，重要的产品就是更显眼 - F型阅读模式
重要信息都放在F型阅读路径上，用户不用到处找「加入购物车」按钮
✂️ 直接能抄的3个细节
- 「主题化 + 场景化」产品区块设计
— 先给用户种草场景，再展示产品，比直接列产品图转化率高很多，这个逻辑哪里都能用：卖工具先讲场景，卖课程先讲痛点 - 充足的留白 + 统一低饱和配色
— 页面不拥挤，视觉舒服，既突出产品本身，又传递出品牌高级感和治愈感，不会让用户在页面里「迷路」 - 品牌故事自然植入
— 不在生硬的「关于我们」页面里放品牌故事，而是在首页产品展示中间自然植入，不打断浏览节奏，用户看完产品自然而然就了解了品牌
05 🤖 Adaline — AI Agent全生命周期管理，界面就这么专业
网站：https://www.adaline.ai/
一句话：AI应用全生命周期管理平台，解决AI产品团队在prompt管理、评估、部署、监控全流程的碎片化痛点。
设计风格
现代科技感 B2B SaaS设计风格。视觉上强调「专业、高效、可靠」，同时兼顾开发者的审美偏好，没有过度花哨的动效和装饰——第一次看到的时候我觉得：终于有一个AI工具网站不把我当小白用户了。
配色方案
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
UI组件风格
- 按钮组件
主CTA圆角矩形品牌蓝填充 + 白色文字，hover时轻微阴影加深，反馈清晰 - 卡片组件
浅灰背景 + 圆角 + 细微阴影，「图标 + 标题 + 短描述」结构，信息传达效率高 - 数据展示组件
超大号数字 + 小号注释文字，数字采用动态计数效果，3秒就能抓住用户注意力
布局特点
- 单栏滚动布局，遵循「注意力递减」规律，越重要的信息越靠上，不会把最重要的功能藏在页面底部
- 首屏左文右图
左侧核心标题 + 副标题 + CTA按钮，右侧产品演示截图，3秒内传递核心价值，用户不用猜这个产品是干什么的 - 核心功能区总-分结构
先总述平台核心价值，再分模块介绍每个功能卖点，信息层级清晰 - 信任背书区
4个核心数据指标横向排列，超大数字吸引注意力，「服务XXX团队」比「我们的产品很好」有用100倍
交互细节
- 导航栏滚动时固定悬浮，始终可以访问核心功能入口，不会滚下去就找不到导航了
- 核心数据指标滚动计数动效，强化用户对平台高性能的感知，「处理了XXX条数据」比静态数字有冲击力多了
- 博客/案例卡片hover时缩略图轻微放大，标题颜色变化，明确可点击，交互反馈清晰
运用的设计理论
- 格式塔原理（相似性、接近性），用户通过样式快速识别内容类型，不用思考「这个是什么」
- F型阅读模式，核心信息放在左侧、上方，符合用户浏览习惯，重要信息一定在视线路径上
- 层级原则（视觉层级），通过字号、颜色、间距、阴影建立清晰层级，用户一眼分清主次
- 社会认同原理，首屏底部、核心功能区后都加入客户Logo、客户评价，「连XXX都在用」比自卖自夸有用多了
✂️ 直接能抄的3个细节
- 核心数据指标动态展示设计
— 用超大号数字 + 滚动计数动效展示性能数据，瞬间建立用户对产品可靠性的信任，这个套路B2B SaaS网站一定要用 - 全链路功能的可视化图标体系
— 把抽象工作流程用连贯图标+短文案串联，用户3秒就能理解产品核心价值，比写一大段功能说明有用10倍 - 高频出现的轻量化CTA引导
— 在首屏、核心功能介绍后、客户案例后、页脚多次放置简洁CTA按钮，持续引导转化，但又不显得 aggressive，尺度拿捏得很好
06 🔺 Neobrutalism — 新野兽主义设计，反主流审美的新玩法
网站：https://www.neobrutalism.dev/
一句话：一套基于shadcn/ui改造的React组件库，主打Neobrutalism（新野兽主义）设计风格，MIT开源，直接能用。
设计风格
Neobrutalism（新野兽主义），刻意打破极简克制的主流审美，用粗重黑边、高饱和色块、无圆角/大圆角的强对比设计，传递出类似80年代海报、街头涂鸦的直白、生猛的视觉冲击力——第一次看到的时候我心想：这特么也行？
和主流设计风格对比
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
配色方案
- 底色
纯白/浅灰为主，部分区块用高饱和纯色（亮黄、亮橙、亮蓝、亮绿），对比极其强烈 - 边框
所有组件、容器统一使用纯黑粗边框（2-4px），没有灰色边框、没有描边渐变，就是要让你注意到边框的存在 - 文字
正文默认纯黑，重点信息用高饱和色块+黑字搭配，对比度极高，绝对不会看不清 - 交互
按钮hover直接切换为对比色，没有渐变、缩放等过渡动画，就是要生猛、直接
字体选择
- 标题/正文
粗体感强的无衬线手写/display字体，笔画粗重，边缘有轻微不规则感，和「粗粝」的设计语言完美匹配 - 字体大小对比强烈
标题字号远大于常规UI设计，正文字号也偏大，刻意放大视觉层级，就是要让你注意到信息的主次
组件展示布局特点
- 层级极简
页面导航只有5个核心入口（Docs、Components、Styling、Charts、Stars），不堆砌功能 - 组件预览直观
Button组件直接展示3种样式，旁边直接标注组件名称，不用猜哪个是哪个 - 信息密度高但有序
「组件展示 + 参数说明 + 代码示例」并行布局，信息传达效率极高，开发者一看就懂 - 社区评价反差感
专门设置「用户评价」区块，里面的评价都是负面吐槽，用反差感进一步强化风格独特性——这个操作太骚了
交互细节
- 搜索框支持快捷键唤起（⌘K），符合开发者使用习惯，细节到位
- 按钮hover直接切换高饱和背景色，没有渐变、缩放等过渡动画，就是要生猛、直接、不墨迹
- 表单输入框只有粗黑边框，聚焦时有明显边框色变化，反馈清晰，不会让用户猜「我焦点在哪」
- 主题切换纯色直接覆盖，没有过渡动画，风格统一，不追求「精致感」
Neobrutalism核心设计特征
- 粗黑边框
所有元素统一使用2-4px纯黑实线边框，拒绝细边框、灰色边框，就是要让你看到边框 - 高饱和纯色块
完全不用渐变、模糊、低饱和色，所有色块都是纯色，就是要扎眼 - 无精致装饰
拒绝阴影、渐变、发光、半透明等「精致化」设计，就是要粗粝、直接 - 强对比排版
字号、字重、色块对比非常强烈，信息传达优先级极明确，不用猜哪个是重点 - 反主流审美
刻意打破「UI要精致、要易读、要符合用户习惯」的常规原则，就是要让你记住它
✂️ 直接能抄的3个细节
- 强对比的组件样式切换设计
— 展示Default/Comfortable/Compact三种样式时，用不同大小粗黑边框+不同饱和度背景色区分，用户一眼看出差异，这个思路哪里都能用：展示不同版本、不同价位、不同风格，都可以用强对比来区分 - 反套路的用户评价展示
— 故意放负面吐槽，用反差感强化风格记忆，非常适合小众/风格化产品官网，用户看完会心一笑：「这品牌有点东西」 - 可定制的样式引导设计
— 设置Styling页面，展示不同配色方案的组件效果，用户直观看到不同配色下的效果，降低理解成本，同时还暗示：「你可以按需定制，不是死板的一套」
📝 6个网站的共同设计趋势
梳理完这6个网站，我发现几个明显的2026年设计趋势：
- 反精致化正在兴起
— Neobrutalism、赛博极客风，都在刻意打破「精致、柔和、易用」的常规，用有挑衅感的设计让用户印象深刻，不是「好看」，是「记住」 - 场景化展示取代功能罗列
— Monologue、Adaline、Flambette都在用「用户真实场景」传递价值，比空泛功能描述有效10倍，这个逻辑哪里都能用 - 配色从「安全」走向「有态度」
— 高饱和纯色、纯黑粗边框、极简单色，都在用配色表达品牌态度，不只是为了「好看」，是为了「被记住」 - 留白不再是「越多越好」
— Neobrutalism几乎不用留白，信息密度极高但有序，挑战了「留白=高级」的定势，有时候「满」也是一种高级 - 品牌故事植入方式在进化
— Flambette把品牌故事穿插在产品展示中间，不单独放「关于我们」页面，阅读体验更流畅，用户不反感