导航
🏠 首页 📐 设计规范库 🎨 风格范例 📋 详情预览 ℹ️ 关于
设计规范
🍎 Apple HIG 🤖 Material Design 3 🪟 Fluent Design 2 🔷 IBM Carbon 🐜 Ant Design 🏗️ Arco Design 🅣 TDesign 🎵 Semi Design 📱 HiUI Design 🛒 Find Design 🛍️ 有赞 Design 🍔 Element
风格范例
🍎 苹果官网 📱 小米官网 ⚡ Tesla 💳 Stripe 📝 Notion 🧠 Anthropic
主题
🌙 切换暗色模式
持续更新 · 已收录 12+ 大厂规范

一站式汇聚
全球顶级设计规范

苹果 HIG、谷歌 Material 3、阿里 Ant Design、字节 Arco Design……
所有大厂设计规范与标杆网站风格拆解,尽在一个站点。

12+
设计系统
200+
组件拆解
6
风格范例
设计灵感
📐

设计规范库

Apple / Google / 阿里 / 字节 / 腾讯 / 京东…

🎨

风格范例库

苹果官网 / 小米官网 / Tesla / Stripe…

🔄

规范对比工具

并排对比不同规范的色彩、组件、动效

我的收藏

保存常用规范条目,随时快速访问

设计规范库

汇聚全球顶级科技公司的设计系统与规范文档

🌍 国际大厂

🇨🇳 国内大厂

Ant Design 5.x

阿里巴巴 · 蚂蚁集团

企业级 React UI 组件库与设计语言。5.x 引入 CSS-in-JS 动态主题 + Design Token 体系,支持 AI 设计范式(Ant Design X)。

#FF6F00
#1677FF
#FAFAFA
#52C41A
#FF4D4F
React 中后台 Design Token AI 范式
↗ 访问官网

Arco Design

字节跳动

字节跳动出品的企业级智能设计系统。设计价值观:清晰 · 一致 · 韵律 · 开放。配套 DesignLab 风格配置平台。

#FF7D00
#27272A
#F2F3F5
#4080FF
#00B96B
React Vue 智能设计 DesignLab
↗ 访问官网

TDesign

腾讯

腾讯企业级设计体系,开源开放、持续迭代。提供 React / Vue / 小程序多端组件,含完善的设计指南与资源。

#0052D9
#4D8BFF
#F3F3F3
#E34D59
#2BA471
React Vue 小程序 MIT 协议
↗ 访问官网

Semi Design

字节跳动 · 抖音前端

由抖音前端团队与 MED 产品设计团队维护的设计系统。支持定制主题、国际化,注重开发体验与设计一致性。

#6B4BFF
#F5F5F5
#1A1A1A
#FF5C5C
#14AE5C
React 主题定制 国际化
↗ 访问官网

HiUI Design

小米

小米集团信息技术部推出的企业级设计系统。设计价值观:高效 · 友好 · 开放。聚焦中后台研发场景。

#FF6700
#1A1A1A
#F5F5F5
#4CAF50
#F44336
React 中后台 高效办公
↗ 访问官网

Find Design

京东 · JEL 前端

京东零售设计语言,覆盖 B 端中后台与 C 端营销场景。配套 NutUI 移动端组件库,强调一致性与高效率。

#C62828
#EF5350
#1A1A1A
#F5F5F5
#43A047
React Vue 小程序 零售电商 NutUI
↗ 访问官网

有赞 Design

有赞

有赞商家服务设计语言,深耕电商 SaaS 场景。注重商家后台操作效率与营销转化体验,配套完善的设计资源。

#1AAD19
#4CD964
#1A1A1A
#F8F8F8
#FF6B35
React 电商 SaaS 商家后台
↗ 访问官网

Element

饿了么 · 饿了么大前端

饿了么出品的企业级 Vue 组件库设计语言。Element Plus 支持 Vue 3,社区生态庞大,文档完善,上手成本低。

#409EFF
#79BBFF
#303133
#F5F7FA
#F56C6C
Vue Vue 3 社区生态 上手简单
↗ 访问官网

风格范例库

精选设计风格卓越的网站,从多维度拆解其视觉语言

iPhone 17 Pro 钛金属 · 全新设计

🍎 苹果官网

极简主义的巅峰。黑白交替的电影级节奏,SF Pro 紧凑排版,纯色背景衬托产品,滚动驱动叙事。

极简 留白 滚动叙事 产品聚焦 WebGL
3
1
980px
↗ 访问官网 apple.com
Xiaomi 小米 17 Pro 徕卡光学 · 骁龙旗舰 小米 Pad 8 小米 Watch S5

📱 小米官网

黑白灰主调 + 模块化布局。认知负荷最小化的交互范式,克制色彩营销,产品本身即焦点。

包豪斯 克制 模块化 视差滚动 品牌橙
4
8px
↗ 访问官网 mi.com
Model S 3.1s 0-100 km/h 637km 续航 250km/h 极速

⚡ Tesla

沉浸式体验驱动转化。全屏滚动叙事,每一屏都在为"下单"服务。性能数据直观冲击。

全屏滚动 故事化 数据冲击 沉浸感
暗色
100vh
↗ 访问官网 tesla.com
Payments infrastructure for the internet

💳 Stripe

复杂内容的高级表达。渐变色体系 + 插画 UI 结合,把支付 API 讲得简单优雅。

渐变 技术美学 信息分层 插画风
紫蓝
↗ 访问官网 stripe.com
Notion Your wiki, docs & projects. Together.

📝 Notion

亲和力中的高级感。黑白为主 + 轻松插画,用场景讲功能,几乎没有理解成本。

亲和 轻量 场景化 低认知
2
插画
↗ 访问官网 notion.so
Anthropic Building safe, interpretable AI for the benefit of humanity Read the news

🧠 Anthropic

AI 时代的克制叙事。温暖米色底 + 精简文案,让前沿 AI 技术显得可亲近、可信赖。

克制 温暖 AI 叙事 品牌色
米色
极低
↗ 访问官网 anthropic.com

规范详情页预览

以 Apple HIG 为例,展示单条规范的完整信息架构

🍎 Apple Human Interface Guidelines

最近更新:2026-06-08 | 适用平台:iOS · macOS · watchOS · visionOS · tvOS
↗ 官网

设计原则

🔍

Clarity · 清晰

文字在任何尺寸下都清晰可读,图标精准,功能显而易见,装饰恰到好处。

🎭

Deference · 尊重

界面帮助用户理解内容并与之交互,但从不与之竞争。毛玻璃、半透明、全屏体验。

🏛️

Depth · 深度

视觉层次与真实动效传达空间感。阴影、毛玻璃、视差、物理弹簧动画。

色彩体系

#000000
Absolute Black
#1D1D1F
Ink Black
#F5F5F7
Light Gray
#0071E3
Action Blue
#2997FF
Bright Blue

字体排版(SF Pro)

Display 64px · Bold
Headline 32px · Semibold
Title 20px · Semibold
Body text 用于正文内容展示 17px · Regular
Caption 辅助说明文字 12px · Regular

核心组件预览

Filled
填充按钮
Tonal
色调按钮
Outlined
描边按钮
Text
文字按钮

动效规范

弹簧动画
Spring(1, 80, 10)
标准缓动
cubic-bezier(.4,0,.2,1)
微交互
200ms ease-out

准备好提升设计效率了吗?

加入数千名设计师与开发者的行列,一站获取全球顶级设计规范资源。