前端设计师必藏：48 种 HTML/CSS 设计风格完全图鉴
摘要： 本文系统梳理了 48 种主流 HTML/CSS 设计风格，涵盖创意艺术、进阶视觉和主流 UI 框架三大类别。每种风格均配有完整的配色方案、字体推荐、圆角规范、核心特征和适用场景，可直接作为日常开发的设计参考手册。
把日常开发中会遇到的 48 种设计风格做了一次系统梳理，分成三大类：
- 第一类（1-16）： 创意艺术风格——极简留白、赛博朋克、侘寂、波普……这些风格有强烈的视觉个性，适合特定调性的项目
- 第二类（17-32）： 进阶创意风格——玻璃拟态、像素风、全息投影、中国风……这些是近年来流行的新视觉语言
- 第三类（33-48）： 主流 UI 框架——Element Plus、Ant Design、shadcn/ui……这些是你每天都在用的组件库背后的设计系统
每种风格我都会给出 配色、字体、圆角、核心特征、适用场景 五个维度的说明，部分风格还附带了 色彩系统代码 和 实现技巧。
不管你是前端开发还是 UI 设计师，这篇文章值得收藏。
一、创意艺术风格（01-16）
这 16 种风格各有强烈的视觉个性，适合品牌官网、作品集、活动页等需要"有态度"的场景。
01 | 极简留白 Minimal
"Less is more"——密斯·凡·德·罗
极简不是"什么都没有"，而是"只留下必要的"。
视觉特征： 大量负空间、纤细线条、克制的黑白灰配色。字重极轻（300），行间距宽裕（2.0+），按钮用线框风格，hover 时才填充颜色。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #faf9f6 |
| 主文字 | #1a1a1a |
| 辅助文字 | #888888 |
| 线条 | #cccccc |
推荐字体： Cormorant Garamond（标题）+ DM Mono（辅助）
圆角： 0（直角）或极小
适用场景： 个人主页、摄影作品集、高端品牌、建筑事务所
设计技巧：
- 留白本身就是设计元素，不要急着填满
- 动效要克制，只在关键交互处使用
- 按钮用
border: 1px solid线框，hover 时反转为填充
02 | 奢侈杂志 Luxury / Editorial
奢侈品不需要解释自己，它只需要"看起来就很贵"。
视觉特征： 深邃的黑底 + 金色装饰线 + 衬线字体。双层边框、菱形装饰符号 ◆、宽字距大写字母，一切都在传达"仪式感"。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #0d0b08 |
| 主色 | #b8963e |
| 文字 | #e8d5a3 |
| 辅助文字 | #8a7e6a |
推荐字体： Playfair Display（标题，斜体更佳）
圆角： 0（直角，强调庄重感）
适用场景： 奢侈品官网、高端地产、珠宝品牌、高端酒店
设计技巧：
- 双层边框用
::before伪元素实现内框，内外间距 6px - 金色渐变按钮：
linear-gradient(135deg, #b8963e, #d4af60) - 按钮 hover 加
box-shadow: 0 0 30px rgba(184,150,62,.3)光晕
03 | 日式侘寂 Wabi-Sabi
接受不完美，在残缺中发现美。
视觉特征： 暖灰米色调、纸张纹理、不规则的留白、微旋转的线条。没有锐利的边角，一切都柔和、自然、不刻意。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #f5f0e8 |
| 主文字 | #3d3530 |
| 辅助文字 | #8a7e70 |
| 线条 | #c4b5a0 |
推荐字体： Noto Serif SC（正文）+ Ma Shan Zheng（装饰标题）
圆角： 以圆形为主，强调有机感
适用场景： 茶道文化、手工艺品牌、冥想应用、日式料理
设计技巧：
- 用 SVG noise filter 模拟纸张肌理
- 线条故意微旋转
transform: rotate(-2deg)，打破刻意的整齐 - 字间距宽（
letter-spacing: 8px），留出呼吸感
04 | 赛博朋克 Cyberpunk
霓虹灯在雨中闪烁，数据流穿过城市的血管。
视觉特征： 暗色底 + 霓虹青 #05d9e8 + 霓虹粉 #ff2a6d。卡片用 clip-path 裁切角，扫描线动画，文字发光效果。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #0a0a12 |
| 霓虹青 | #05d9e8 |
| 霓虹粉 | #ff2a6d |
| 文字 | #d1f7ff |
推荐字体： Orbitron（几何等宽感）
圆角： 不规则（用 clip-path: polygon(...) 裁切角）
适用场景： 游戏官网、科幻主题活动、音乐节、电竞
设计技巧：
- 顶部渐变线：
linear-gradient(90deg, #ff2a6d, #05d9e8, #d1f7ff) - 扫描线：
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.1) 2px, rgba(0,0,0,.1) 4px) - 文字发光：
text-shadow: 0 0 20px rgba(5,217,232,.5)
05 | 暗黑终端 Terminal
在黑与绿之间，代码与创意融为一体。
视觉特征： 纯黑背景 + 终端绿 #00ff41。等宽字体、终端窗口三色圆点（红黄绿）、光标闪烁动画。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #0c0c0c |
| 终端绿 | #00ff41 |
| 窗口红 | #ff5f56 |
| 窗口黄 | #ffbd2e |
推荐字体： DM Mono / Source Code Pro
圆角： 4px（终端窗口）
适用场景： 开发者主页、技术博客、黑客主题、CLI 工具展示
设计技巧：
- 终端窗口头部：三色圆点 + 深灰背景
- 光标：
animation: blink 1s step-end infinite - 命令提示符
$用绿色高亮，输出用暗绿色
06 | 深空科幻 Deep Space
在无垠的宇宙深处，光与暗交织成永恒的诗篇。
视觉特征： 深蓝黑底 + 多层 radial-gradient 模拟星云 + 玻璃拟态卡片。星光蓝文字，环形装饰元素。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #050510 |
| 主色 | #6a7fdb |
| 文字 | #c8d6ff |
| 辅助文字 | #5a6a8a |
推荐字体： Orbitron（400 轻量）
圆角： 16px
适用场景： 太空主题、科技公司、天文应用、科幻电影
07 | Art Deco 装饰艺术
几何与对称的交响曲，金色光芒勾勒出一个时代的辉煌。
视觉特征： 金色 #c8aa50 + 纯黑。对称构图、四角 L 形角标、菱形装饰、全大写宽字距。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #0d0d0d |
| 主色 | #c8aa50 |
| 文字 | #e8d5a0 |
推荐字体： Playfair Display（700，大写）
圆角： 0（几何直角）
适用场景： 酒吧/餐厅、剧院官网、复古品牌、高端活动
设计技巧：
- 四角 L 形角标：
::before+::after伪元素，border只保留两边 - 分隔线组合：线段 + 菱形（
transform: rotate(45deg)）+ 线段
08 | 80 年代复古 Retrowave
合成器的旋律在夜空中回荡，霓虹灯管映照着未来的轮廓。
视觉特征： 紫色基调 + 霓虹粉渐变文字 + 底部透视网格 + 日落圆形。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #1a0a2e |
| 霓虹粉 | #ff6ec7 |
| 紫色 | #7b2fff |
推荐字体： Bebas Neue（粗体大写）
圆角： 0
适用场景： 音乐专辑封面、游戏页面、派对活动、复古主题
设计技巧：
- 透视网格：
perspective(200px) rotateX(30deg)+ repeating-linear-gradient - 文字渐变：
-webkit-background-clip: text - 3D 按钮投影：
box-shadow: 0 4px 0 #7b2fff
09 | 老报纸 Newspaper / Letterpress
在数字世界中重建活字印刷的温度。
视觉特征： 旧纸色底 + 深墨文字。双线头尾边框、首字下沉、双栏排版。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #f4efe4 |
| 主文字 | #2a2218 |
| 辅助文字 | #8a7060 |
推荐字体： Playfair Display（标题）+ DM Mono（日期）
圆角： 0
适用场景： 文学博客、新闻类页面、复古品牌、编辑类网站
设计技巧：
- 双线边框：
border-top: 4px double - 首字下沉：
::first-letter { font-size: 48px; float: left } - 双栏文字：
column-count: 2; text-align: justify
10 | 孟菲斯 Memphis
打破规则，拥抱混乱。设计从来不需要循规蹈矩。
视觉特征： 浅色底 + 多色撞色（粉蓝黄紫）+ 散落几何图形 + 粗描边 + 大投影。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #fef5e7 |
| 粉色 | #ff3366 |
| 蓝色 | #33ccff |
| 黄色 | #ffcc00 |
| 紫色 | #9933ff |
推荐字体： Syne（700-800）
圆角： 24px
适用场景： 创意机构、儿童品牌、设计工作室、潮流活动
设计技巧：
- 散落几何图形用 absolute 定位 +
opacity: .15 - 卡片粗描边 + 大投影：
border: 3px solid #222; box-shadow: 8px 8px 0 #222 - 按钮 hover 位移效果：
transform: translate(2px, 2px); box-shadow: 2px 2px 0 #222
11 | 玩具 / 积木 Toy Block
圆润的边角，鲜亮的色彩，像积木一样搭建你的数字世界。
视觉特征： 多彩渐变背景 + 白色圆角卡片 + 多色按钮排列。超大圆角（32px），emoji 作为视觉元素。
推荐字体： ZCOOL QingKe HuangYou / Fredoka
适用场景： 儿童教育、游戏页面、趣味应用、亲子品牌
12 | 液态 / 流体 Liquid / Fluid
没有棱角，没有终点。如水般自由的形态。
视觉特征： 深色底 + blob 形态元素 + 毛玻璃卡片 + 紫粉蓝渐变。核心是 filter: blur(80px) 的浮动色块 + border-radius morph 动画。
推荐字体： Syne（600）
适用场景： 创意机构、音乐平台、艺术作品集
设计技巧：
- blob 形态变化动画：
@keyframes morph中交替变化 border-radius - 按钮渐变流动：
background-size: 200% 200%+ position 动画
13 | 森林 / 大地色 Forest / Earth
深绿与暖棕交织出大地的色调，在数字世界中重建一片宁静的森林。
视觉特征： 暗绿棕底 + 绿色系文字和按钮。自然质感，树叶 emoji 作为视觉锚点。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #1a1208 |
| 主色 | #6b8f3c |
| 文字 | #c8d4a8 |
| 辅助文字 | #7a8a60 |
推荐字体： Noto Serif SC（300）
适用场景： 环保品牌、户外运动、有机食品、露营旅游
14 | 水彩 / 手绘 Watercolor
水与色的相遇，每一笔都是不可复制的瞬间。
视觉特征： 暖白底 + 柔和的粉蓝绿色斑 + 全程斜体衬线字体 + 胶囊形按钮。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #fdf8f3 |
| 柔粉 | rgba(200,160,180,.4) |
| 柔蓝 | rgba(160,190,210,.4) |
推荐字体： Lora（斜体）
适用场景： 婚礼邀请、手作品牌、花艺工作室、咖啡馆
15 | 粗野主义 Brutalist
打破网格，撕碎规则。粗野主义不追求精致，它追求真实。
视觉特征： 纯白底 + 纯黑文字 + 高亮黄标记。超大字号 clamp(48px, 8vw, 80px)，左对齐不居中。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #ffffff |
| 文字 | #000000 |
| 高亮 | #ffff00 |
推荐字体： Syne（800 超粗）
圆角： 0
适用场景： 设计工作室、独立杂志、艺术展、先锋品牌
设计技巧：
- 高亮文字：
background: #ff0; box-decoration-break: clone; -webkit-box-decoration-break: clone - 按钮 hover 反色：黑变黄
16 | 工业机械 Industrial
齿轮转动，蒸汽升腾——精密仪器般的数字空间。
视觉特征： 金属灰底 + 暖灰文字 + 四角铆钉装饰 + 仪表进度条。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #1c1c1e |
| 卡片 | #222224 |
| 文字 | #d0d0d0 |
| 辅助文字 | #6a6a6e |
推荐字体： Russo One
圆角： 0
适用场景： 汽车品牌、工程公司、硬件产品、机械制造
设计技巧：
- 铆钉：
radial-gradient(circle, #555 30%, #333 70%)+box-shadow: 0 0 0 2px #2a2a2e - 仪表条多色渐变：
linear-gradient(90deg, #c0392b, #e67e22, #f1c40f)
二、进阶创意风格（17-32）
这 16 种风格是近年来兴起的视觉语言，很多已经成为现代 Web 设计的标配。
17 | 玻璃拟态 Glassmorphism
透明与模糊的完美结合，让界面拥有通透的层次感。
视觉特征： 深色背景 + 彩色光斑 + 半透明毛玻璃卡片。核心属性是 backdrop-filter: blur()。
实现要点：
.glass-card {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
推荐字体： Syne（600）
圆角： 24px
适用场景： macOS 风格应用、音乐播放器、仪表盘、天气应用
18 | 新拟态 Neumorphism
光影之间，界面像被雕刻出来一样。
视觉特征： 同色背景 + 双向软阴影（一暗一亮）创造凸起/凹陷效果。所有元素与背景同色。
核心技巧：
/* 凸起 */
.neu-raised {
box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff;
}
/* 凹陷 */
.neu-pressed {
box-shadow: inset 3px 3px 6px #b8bec7, inset -3px -3px 6px #ffffff;
}
推荐字体： Fredoka（圆润风格匹配）
圆角： 24px
适用场景： 计算器、音乐控制器、设置面板、智能家居控制
19 | 像素风 Pixel Art
像素之间藏着整个世界。
视觉特征： 暗蓝底 + 网格背景 + 像素字体 + HP 血条 + 方形按钮投影。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #1a1c2c |
| 金色 | #e8c547 |
| 血条绿 | #5ab55a |
| 边框 | #5e6988 |
推荐字体： Silkscreen / Press Start 2P
圆角： 0
适用场景： 复古游戏、独立游戏、像素社区、游戏工具
20 | 蒸汽波 Vaporwave
粉紫交织的梦境，90 年代的互联网记忆在霓虹中重生。
视觉特征： 紫色基调 + 霓虹粉蓝渐变文字 + 日落圆形 + 透视无限滚动网格 + 音乐柱动画。
推荐字体： Bebas Neue
适用场景： 音乐封面、派对活动、复古未来主题、合成器音乐
设计技巧：
- 透视网格无限滚动：
@keyframes gridScroll { to { background-position: 0 30px } } - 音乐柱动画：
scaleY+ 交错animation-delay
21 | 哥特 Gothic
在黑暗的深处，华丽与恐惧并存。
视觉特征： 纯黑底 + 暗红 #8b2020 + 哥特体字体 + 十字架装饰 + 渐变分隔线。
推荐字体： UnifrakturMaguntia（Google Fonts 可加载）
圆角： 0
适用场景： 暗黑品牌、重金属音乐、恐怖游戏、哥特服饰
22 | 波普艺术 Pop Art
安迪·沃霍尔说每个人都能成名 15 分钟。波普把艺术拉下神坛。
视觉特征： 奶白底 + 半调网点 + 粗描边 6px + 大投影 + 撞色 + 漫画字体。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #fff2cc |
| 红色 | #e63946 |
| 蓝色 | #457b9d |
| 描边 | #222222 |
推荐字体： Bangers
适用场景： 潮牌、漫画周边、潮流活动、街头文化
23 | 极光渐变 Aurora
当太阳风遇上大气层，光便开始舞蹈。
视觉特征： 深蓝黑底 + 多色模糊光斑（绿蓝紫）+ 波浪柱动画 + 渐变流动按钮。
推荐字体： Syne（700）
适用场景： 天气应用、音乐可视化、创意机构、天文科普
24 | 杂志拼贴 Collage
把不同材质、不同角度的碎片拼在一起，创造全新的叙事。
视觉特征： 米纸底 + 多色旋转色块 + 不规则网格布局。每个色块微旋转 rotate(-2deg) 到 rotate(1deg)。
推荐字体： Playfair Display（斜体）
适用场景： 杂志编辑、时尚品牌、创意提案、艺术展
25 | 折纸风 Origami / Paper
像折纸一样层叠的界面，每一层都有自己的深度与故事。
视觉特征： 三层暖灰色卡片错位叠加（每层 offset 8px），颜色逐层加深，模拟纸张叠影。
推荐字体： Noto Serif SC（400）
适用场景： 手工品牌、文具产品、阅读应用、手账社区
26 | 中国风 Chinese Traditional
一笔一墨，尽是千年风骨。
视觉特征： 宣纸底色 + 朱红色双层边框 + 红色印章方块 + 毛笔字体。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #f8f2e8 |
| 朱红 | #a03030 |
| 文字 | #2a1a10 |
| 辅助文字 | #5a4a3a |
推荐字体： Ma Shan Zheng（毛笔）+ Noto Serif SC（正文）
适用场景： 文化品牌、茶道产品、传统节日、中式餐饮
设计技巧：
- 印章方块：
border: 3px solid #a03030; transform: rotate(-5deg) - 分隔线组合：线段 + 菱形 ◆ + 线段
- 纸张纹理用 SVG noise filter
27 | 可爱风 Kawaii
今天也要开心鸭！
视觉特征： 粉嫩渐变背景 + 白色圆角卡片（28px）+ 彩色胶囊标签 + ASCII 表情 + 弹性按钮。
推荐字体： Fredoka（500）
适用场景： 女性向产品、二次元社区、甜品品牌、宠物应用
28 | 电影海报风 Cinematic
当光影成为叙事的语言，每一帧画面都是一首诗。
视觉特征： 纯黑底 + 上下 60px 黑色遮幅（模拟宽银幕）+ 金色调 + 星级评分 + 元数据行。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #0a0a0a |
| 金色 | #d4a853 |
| 文字 | #e8dcc8 |
| 辅助文字 | #5a5a5a |
推荐字体： Playfair Display（斜体）+ DM Mono（元数据）
适用场景： 影评网站、流媒体平台、电影节、个人作品集
29 | 手写涂鸦 Handwritten / Doodle
最好的想法都诞生在餐巾纸背面。
视觉特征： 米白底 + 手写字体 + 荧光标记线 + 虚线框 + 涂鸦装饰符号。
推荐字体： Caveat（手写体）
适用场景： 个人博客、创意笔记、儿童教育、咖啡馆菜单
设计技巧：
- 荧光标记：
background: linear-gradient(transparent 60%, rgba(255,230,100,.5) 60%) - 虚线框：
border: 2px dashed #e67e22
30 | 蒸汽朋克 Steampunk
齿轮转动，蒸汽升腾。在维多利亚时代的想象中，机械之美与浪漫主义碰撞出一个平行世界。
视觉特征： 深棕底 + 铜金色调 + 齿轮旋转动画 + 仪表盘 + 维多利亚字体。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #1a1208 |
| 铜金 | #b8860b |
| 深铜金 | #8b6914 |
| 文字 | #d4a857 |
推荐字体： MedievalSharp + Lora（斜体）
适用场景： 主题酒吧、桌游品牌、复古机械、独立游戏
31 | 全息投影 Holographic
彩虹色的光在棱镜中折射，创造出超越平面的视觉体验。
视觉特征： 深黑底 + 彩虹渐变边框（mask-composite 技巧实现）+ 网格背景 + 光扫过动画。
推荐字体： Orbitron（700）
适用场景： Web3 项目、NFT 平台、未来科技、区块链
设计技巧：
- 彩虹渐变边框：
-webkit-mask-composite: xor+mask-composite: exclude - 光扫动画：
transform: translate(-100%,-100%) rotate(45deg)→translate(100%,100%)
32 | 极地冰川 Arctic / Ice
深蓝与冰白交织出极地的寂静之美。
视觉特征： 深蓝渐变底 + 冰蓝装饰 + 数据面板（温度/湿度/能见度）+ 磨砂玻璃卡片。
配色方案：
| 角色 | 色值 |
|---|---|
| 背景 | #0a1628 |
| 冰蓝 | #64b5f6 |
| 文字 | #e0f0ff |
| 辅助文字 | #5a8ab5 |
推荐字体： Syne（600）+ Orbitron（数据）
适用场景： 天气应用、户外品牌、科研平台、极地探险
三、主流 UI 框架风格（33-48）
这 16 种是主流 UI 框架和设计系统背后的设计语言。了解它们的设计规范，能让你在使用这些框架时更得心应手。
33 | Element Plus
| 维度 | 说明 |
|---|---|
| 出品方 | 尤雨溪 / 开源社区 |
| 框架 | Vue 3 |
| 主色 | #409eff |
| 圆角 | 4px（输入框）/ 8px（卡片） |
| 字体 | Noto Sans SC |
色彩系统：
| 角色 | 色值 | 角色 | 色值 |
|---|---|---|---|
| Primary | #409eff | Success | #67c23a |
| Warning | #e6a23c | Danger | #f56c6c |
| Info | #909399 | Text | #303133 |
| Border | #dcdfe6 | Bg | #f5f7fa |
核心组件特征：
- 输入框 36px 高，focus 蓝色光晕
- Tag 标签多色系（蓝/绿/橙），4px 小圆角
- Alert 告警条：左侧图标 + 浅色背景
- 按钮：蓝色主按钮 + 白色默认按钮
适用场景： 中后台管理系统、企业应用
34 | Ant Design
| 维度 | 说明 |
|---|---|
| 出品方 | 蚂蚁集团 |
| 框架 | React / Vue |
| 主色 | #1677ff |
| 圆角 | 6-8px |
| 字体 | Noto Sans SC |
色彩系统（v5）：
| 角色 | 色值 | 角色 | 色值 |
|---|---|---|---|
| Primary | #1677ff | Success | #52c41a |
| Warning | #faad14 | Error | #ff4d4f |
| Text | #141414 | Text Sec | #8c8c8c |
| Border | #d9d9d9 | Bg | #f5f5f5 |
核心组件特征：
- Statistic 统计卡片：大号数字 + 小标签
- Progress 进度条：圆角 4px、渐变填充
- List 列表：头像 + 文字 + 分割线
- Badge 徽标：小胶囊标签
适用场景： 企业级中后台、数据密集型应用
35 | Material Design 3
| 维度 | 说明 |
|---|---|
| 出品方 | |
| 框架 | Android / Web / Flutter |
| 主色 | 动态生成（默认紫 #6750a4） |
| 圆角 | 12-28px（超大圆角） |
| 字体 | Roboto / Noto Sans SC |
色彩系统（Dynamic Color）：
| 角色 | 色值 | 角色 | 色值 |
|---|---|---|---|
| Primary | #6750a4 | On Primary | #ffffff |
| Primary Cont | #eaddff | Surface | #fffbfe |
| Outline | #79747e | On Surface | #1c1b1f |
核心组件特征：
- Chip 标签：8px 圆角、线框风格
- Filled Button：100px 胶囊形圆角
- Tonal Button：浅紫色背景
- Hero 区域渐变色块
设计亮点： Material 3 最大的创新是 动态色彩系统——根据用户壁纸自动生成配色方案。
适用场景： Android 应用、跨平台应用
36 | shadcn/ui
| 维度 | 说明 |
|---|---|
| 出品方 | shadcn（个人开发者） |
| 框架 | React + Tailwind + Radix |
| 主色 | 黑白为主 + 蓝 #3b82f6（可配置） |
| 圆角 | 8-12px |
| 字体 | Inter |
色彩系统：
| 角色 | 色值 | 角色 | 色值 |
|---|---|---|---|
| Background | #09090b | Foreground | #fafafa |
| Card | #09090b | Border | #27272a |
| Muted | #18181b | Muted Fg | #71717a |
| Primary | #fafafa | Ring | #3b82f6 |
核心组件特征：
- 极简黑白配色，边框极细
- Toast 通知：左侧圆形图标 + 标题 + 描述
- 按钮：实心白 + 线框两种
- 输入框：同色系边框，focus 蓝色光晕
为什么火： shadcn/ui 不是传统意义上的组件库——它把组件代码直接复制到你的项目中，你完全拥有代码，可以随意修改。这个理念在 2024 年掀起了巨大浪潮。
适用场景： 现代 Web 应用、SaaS 产品、开发者工具
37 | Tailwind UI
| 维度 | 说明 |
|---|---|
| 出品方 | Tailwind Labs |
| 框架 | 基于 Tailwind CSS |
| 主色 | 深蓝 #0f172a（Slate 900） |
| 圆角 | 10-16px |
| 字体 | Inter |
色彩系统（Slate）：
| 色阶 | 色值 | 色阶 | 色值 |
|---|---|---|---|
| Slate 50 | #f8fafc | Slate 700 | #334155 |
| Slate 100 | #f1f5f9 | Slate 800 | #1e293b |
| Slate 500 | #64748b | Slate 900 | #0f172a |
核心组件特征：
- Pill 标签：
border-radius: 9999px（全圆角） - 头像圆角方块：
border-radius: 12px - 按钮：深色实心 + 白色线框
适用场景： 现代营销页面、SaaS 落地页
38 | Ant Design 5 暗色主题
| 维度 | 说明 |
|---|---|
| 出品方 | 蚂蚁集团 |
| 主色 | #1677ff |
| 圆角 | 6-8px |
| 字体 | Noto Sans SC |
暗色色彩系统：
| 角色 | 色值 |
|---|---|
| Bg Base | #141414 |
| Bg Elevated | #1f1f1f |
| Border | #303030 |
| Text | rgba(255,255,255,.88) |
| Text Secondary | rgba(255,255,255,.45) |
适用场景： 暗色中后台、监控面板、开发者工具
39 | Arco Design
| 维度 | 说明 |
|---|---|
| 出品方 | 字节跳动 |
| 框架 | React / Vue |
| 主色 | #165dff（Arcoblue） |
| 圆角 | 8-12px |
| 字体 | Noto Sans SC |
色彩系统：
| 角色 | 色值 | 角色 | 色值 |
|---|---|---|---|
| Primary | #165dff | Success | #00b42a |
| Warning | #ff7d00 | Error | #f53f3f |
| Text 1 | #1d2129 | Text 3 | #86909c |
| Border | #e5e6eb | Fill | #f7f8fa |
核心组件特征：
- Steps 步骤条：圆形编号 + 连接线
- 渐变图标方块
- 输入框灰色背景，focus 变白底
适用场景： 字节系产品、企业应用
40 | Semi Design
| 维度 | 说明 |
|---|---|
| 出品方 | 抖音（字节跳动） |
| 框架 | React |
| 主色 | #6366f1（Indigo） |
| 圆角 | 10px |
| 字体 | Noto Sans SC |
核心组件特征：
- 渐变 Banner 头部
- 通知卡片：圆角 10px + 图标方块
- 色彩偏紫蓝调，比 Arco 更活泼
适用场景： 抖音系产品、创意工具
41 | Naive UI
| 维度 | 说明 |
|---|---|
| 出品方 | 07akioni（个人开发者） |
| 框架 | Vue 3 |
| 主色 | #18a058（绿色系） |
| 圆角 | 10px |
| 字体 | Noto Sans SC |
为什么特别： Naive UI 是少数以 绿色 为主色的 UI 框架（大多数框架用蓝色），这让它在视觉上有很高的辨识度。
色彩系统：
| 角色 | 色值 | 角色 | 色值 |
|---|---|---|---|
| Primary | #18a058 | Warning | #f0a020 |
| Info | #2080f0 | Error | #d03050 |
| Text | #333333 | Divider | #efeff5 |
适用场景： Vue 3 项目、管理后台
42 | Mantine
| 维度 | 说明 |
|---|---|
| 出品方 | 社区开源 |
| 框架 | React |
| 主色 | #228be6（Blue 6） |
| 圆角 | 8px |
| 字体 | system-ui / Noto Sans SC |
核心组件特征：
- SegmentedControl 分段切换控件
- 环形进度：
conic-gradient实现 - 胶囊标签 + 数据标签
适用场景： 现代 Web 应用、数据仪表盘
43 | Fluent UI
| 维度 | 说明 |
|---|---|
| 出品方 | 微软 |
| 框架 | React |
| 主色 | #0078d4（Brand Blue） |
| 圆角 | 4px（Win11 风格） |
| 字体 | Segoe UI / Noto Sans SC |
核心组件特征：
- 亚克力材质（Acrylic）：
backdrop-filter: blur(20px); background: rgba(255,255,255,.7) - Tab 底部指示条：3px 圆角
- Toggle 开关：圆角矩形 + 圆形滑块
设计亮点： Fluent UI 最大的特色是 亚克力材质——模拟 Windows 11 的毛玻璃效果，让界面有"透过玻璃看桌面"的感觉。
适用场景： 微软生态应用、Windows 风格 Web 应用
44 | Carbon Design
| 维度 | 说明 |
|---|---|
| 出品方 | IBM |
| 框架 | React / Vue / Angular / Svelte |
| 主色 | #0f62fe（Blue 60） |
| 圆角 | 0px（直角为主） |
| 字体 | IBM Plex Sans + IBM Plex Mono |
色彩系统：
| 角色 | 色值 | 角色 | 色值 |
|---|---|---|---|
| Blue 60 | #0f62fe | Green 50 | #24a148 |
| Yellow 30 | #f1c21b | Red 60 | #da1e28 |
| Gray 100 | #161616 | Gray 10 | #f4f4f4 |
核心组件特征：
- 无圆角设计（0px），体现 IBM 的严谨感
- 网格 Tile 数据方块
- 等宽字体用于标签和代码
- 按钮 48px 高度（大触控区域）
适用场景： 企业级应用、数据可视化、云平台
45 | Chakra UI
| 维度 | 说明 |
|---|---|
| 出品方 | Segun Adebayo |
| 框架 | React |
| 主色 | #3182ce（Blue 500） |
| 圆角 | 12-16px |
| 字体 | system-ui / Noto Sans SC |
色彩系统：
| 角色 | 色值 | 角色 | 色值 |
|---|---|---|---|
| Blue 500 | #3182ce | Purple 500 | #805ad5 |
| Green 500 | #38a169 | Red 500 | #e53e3e |
| Gray 50 | #f7fafc | Gray 800 | #1a202c |
核心组件特征：
- 渐变头部（蓝紫渐变）
- 列表项：圆点 + 文字 + 右侧标签
- 按钮渐变：
linear-gradient(135deg, #3182ce, #805ad5)
适用场景： 现代 React 应用、注重可访问性的项目
46 | TDesign
| 维度 | 说明 |
|---|---|
| 出品方 | 腾讯 |
| 框架 | React / Vue |
| 主色 | #0052d9（Brand Blue） |
| 圆角 | 6px |
| 字体 | Noto Sans SC |
色彩系统：
| 角色 | 色值 | 角色 | 色值 |
|---|---|---|---|
| Brand | #0052d9 | Brand Hover | #266fe8 |
| Success | #00a870 | Warning | #ed7b2f |
| Error | #e34d59 | Text 1 | #181818 |
| Border | #e8e8e8 | Bg | #f3f3f3 |
核心组件特征：
- Tab 导航：底部指示线
- 信息格（Info Card）：大数字 + 小标签
- 蓝色主色调偏深沉
适用场景： 腾讯系产品、企业应用
47 | Radix Primitives
| 维度 | 说明 |
|---|---|
| 出品方 | Workos |
| 框架 | React |
| 主色 | 无默认主色（Headless） |
| 圆角 | 8px |
| 字体 | Inter |
设计理念：
Radix 是一个 Headless（无样式） 组件库——它只提供行为逻辑和无障碍支持，不提供任何视觉样式。开发者完全自定义外观。
核心原则：
1. 不提供视觉样式，只提供行为逻辑
2. 内置 WAI-ARIA 无障碍支持
3. 支持键盘导航
4. 与 Tailwind / CSS Modules 等完美配合
shadcn/ui 就是基于 Radix 构建的。
适用场景： 高度定制化项目、自建设计系统
48 | DaisyUI
| 维度 | 说明 |
|---|---|
| 出品方 | Pouya Saadeghi |
| 框架 | Tailwind CSS 插件 |
| 主色 | #3b82f6（Blue 500） |
| 圆角 | 10-16px |
| 字体 | Noto Sans SC |
色彩系统（默认暗色主题）：
| 角色 | 色值 | 角色 | 色值 |
|---|---|---|---|
| Primary | #3b82f6 | Secondary | #641ae6 |
| Success | #22c55e | Warning | #f59e0b |
| Error | #ef4444 | Base 100 | #191e24 |
| Base 200 | #1d232a | Base 300 | #2a323a |
核心组件特征：
- Alert 告警：圆角 12px + 彩色背景
- Range 滑块：渐变填充
- Badge 徽标：胶囊形
- 支持 30+ 内置主题切换
适用场景： Tailwind 项目快速开发
附录：速查总表
创意艺术风格（01-16）
| # | 风格 | 关键词 | 主色调 | 圆角 |
|---|---|---|---|---|
| 01 | 极简留白 | 负空间、克制 | 黑白灰 | 0 |
| 02 | 奢侈杂志 | 金色、衬线 | 黑金 | 0 |
| 03 | 侘寂 | 纸纹、朴素 | 暖灰 | 圆形 |
| 04 | 赛博朋克 | 霓虹、扫描线 | 青+粉 | 裁切角 |
| 05 | 终端 | 等宽、绿字 | 黑+绿 | 4px |
| 06 | 深空 | 星云、光晕 | 深蓝 | 16px |
| 07 | Art Deco | 几何、对称 | 黑金 | 0 |
| 08 | 80s 复古 | 网格、渐变 | 紫+粉 | 0 |
| 09 | 老报纸 | 首字下沉 | 米白+墨 | 0 |
| 10 | 孟菲斯 | 撞色、几何 | 多色 | 24px |
| 11 | 积木 | 圆润、鲜亮 | 多彩 | 32px |
| 12 | 流体 | blob、毛玻璃 | 紫粉蓝 | 24px |
| 13 | 森林 | 大地色、自然 | 暗绿棕 | 8-16px |
| 14 | 水彩 | 柔和、手绘 | 暖白+粉 | 20px |
| 15 | 粗野 | 超大字号 | 黑白黄 | 0 |
| 16 | 工业 | 铆钉、金属 | 金属灰 | 0 |
进阶创意风格（17-32）
| # | 风格 | 关键词 | 主色调 | 圆角 |
|---|---|---|---|---|
| 17 | 玻璃拟态 | 毛玻璃、透明 | 深紫 | 24px |
| 18 | 新拟态 | 软阴影、凸凹 | 统一灰 | 24px |
| 19 | 像素风 | 8-bit、网格 | 暗蓝+金 | 0 |
| 20 | 蒸汽波 | 日落、网格 | 紫粉蓝 | 0 |
| 21 | 哥特 | 暗红、哥特体 | 黑+暗红 | 0 |
| 22 | 波普 | 半调、粗描边 | 撞色 | 0-4px |
| 23 | 极光 | 光斑、波浪 | 绿蓝紫 | 20px |
| 24 | 拼贴 | 旋转、色块 | 多色 | 0 |
| 25 | 折纸 | 层叠、纸张 | 暖灰层 | 0 |
| 26 | 中国风 | 印章、毛笔 | 宣纸+朱红 | 0-4px |
| 27 | 可爱 | 粉嫩、圆润 | 粉彩 | 28px |
| 28 | 电影 | 黑边、金色 | 黑+金 | 0 |
| 29 | 手写 | 涂鸦、标记 | 米白+橙 | 50px |
| 30 | 蒸汽朋克 | 齿轮、铜金 | 棕+铜金 | 12px |
| 31 | 全息 | 彩虹、光扫 | 彩虹渐变 | 16px |
| 32 | 冰川 | 冰蓝、极地 | 深蓝+冰蓝 | 20px |
UI 框架风格（33-48）
| # | 框架 | 出品方 | 主色 | 圆角 | 框架 |
|---|---|---|---|---|---|
| 33 | Element Plus | 社区 | #409eff | 4-8px | Vue 3 |
| 34 | Ant Design | 蚂蚁 | #1677ff | 6-8px | React/Vue |
| 35 | Material 3 | 动态色 | 12-28px | 全平台 | |
| 36 | shadcn/ui | 社区 | 黑白 | 8-12px | React |
| 37 | Tailwind UI | Tailwind Labs | #0f172a | 10-16px | 任意 |
| 38 | Ant Design 暗色 | 蚂蚁 | #1677ff | 6-8px | React/Vue |
| 39 | Arco Design | 字节 | #165dff | 8-12px | React/Vue |
| 40 | Semi Design | 抖音 | #6366f1 | 10px | React |
| 41 | Naive UI | 社区 | #18a058 | 10px | Vue 3 |
| 42 | Mantine | 社区 | #228be6 | 8px | React |
| 43 | Fluent UI | 微软 | #0078d4 | 4px | React |
| 44 | Carbon | IBM | #0f62fe | 0px | 全框架 |
| 45 | Chakra UI | 社区 | #3182ce | 12-16px | React |
| 46 | TDesign | 腾讯 | #0052d9 | 6px | React/Vue |
| 47 | Radix | Workos | 无默认 | 8px | React |
| 48 | DaisyUI | 社区 | #3b82f6 | 10-16px | Tailwind |
如何选择合适的风格？
按项目类型选择
| 项目类型 | 推荐风格 |
|---|---|
| 企业后台 | Element Plus / Ant Design / Arco Design / TDesign |
| 营销落地页 | Tailwind UI / 极简留白 / 奢侈杂志 |
| 创意作品集 | 赛博朋克 / 孟菲斯 / 流体 / 粗野主义 |
| 品牌官网 | 根据品牌调性匹配（奢侈→金色系，自然→森林系） |
| 游戏相关 | 像素风 / 蒸汽波 / 赛博朋克 |
| 文化/传统 | 中国风 / 侘寂 / Art Deco |
| 个人博客 | 手写涂鸦 / 极简留白 / 老报纸 |
持续热门：
- Glassmorphism（玻璃拟态）——已经从"趋势"变成了"经典"
- shadcn/ui 风格——开发者社区最爱的 UI 方案
- 暗色主题——已经成为标配，不是加分项
上升趋势：
- Bento Grid（便当盒布局）——卡片化信息展示
- 动态色彩系统——Material You 引领的个性化配色
- 3D 元素融入 Web——Three.js + CSS 3D
- 可变字体（Variable Fonts）——一个字体文件包含所有字重
