AI 数据通道：JSON·Markdown

2026 企业级 UI/UX 设计经验规范（移动端 & Web 端）

从 Material Design 3、Apple HIG、Microsoft Fluent 2、IBM Carbon、Shopify Polaris、Atlassian Design System、Ant Design、Semi Design、TDesign、shadcn/ui、Radix UI 等顶级系统，以及 ChatGPT / Claude / Notion / 飞书 / Linear / Figma 等真实产品中提炼的可执行规范。
目标：指导 AI 与设计师做出先进、人性化、美观的企业级界面。每一条规则尽量给数值、阈值与判断条件，而非空泛理论。

一、认知地基：三大目标与决策框架 #

1.1 三大目标的定义 #

目标	含义	判断标准
先进	技术架构与工程实践领先	可主题切换 / 可密度切换 / 令牌化 / 无障碍达标 / 性能预算可控 / 多端一致
人性化	尊重用户认知与注意力	渐进披露 / 错误预防 > 错误恢复 / 可撤销 / 上下文帮助 / 容错交互
美观	视觉层级清晰、节奏统一	视觉焦点唯一 / 留白合理 / 色彩和谐 / 字体韵律 / 细节打磨到位

1.2 设计决策的优先级顺序（冲突时从上到下） #

正确性 — 数据准确、状态一致（错误数据比难看更致命）
可用性 — 能完成任务、可访问、可键盘操作
清晰性 — 层级明确、一眼定位主操作
效率 — 减少步骤、支持批量、可记忆快捷键
一致性 — 复用模式与令牌，不发明新交互
美观 — 在以上基础上打磨视觉

铁律：美观永远不能牺牲正确性与可用性。例如不要为了视觉对称把危险删除按钮和主要操作按钮做成同等视觉权重。

1.3 三个”先问自己”再动手 #

这个界面唯一的主任务是什么？（任何元素如果不服务主任务，考虑移除）
用户最常做的操作是什么？把它放到最短路径与拇指/鼠标热区
这个界面在加载/空/错误/无权限/断网时分别长什么样？

二、设计令牌体系（Design Tokens） #

令牌化是”先进”的底座。没有令牌化，暗色模式、多主题、密度切换都无从谈起。

2.1 三层令牌架构 #

Global Token (全局原始值)
  ├─ color-blue-500: #1677ff
  ├─ space-4: 16px
  └─ radius-6: 6px
        ↓ 映射
Alias Token (语义令牌，跨主题切换的关键)
  ├─ color-primary: {color-blue-500}
  ├─ color-surface: {color-white}
  ├─ color-text-primary: {color-gray-900}
  └─ spacing-content: {space-4}
        ↓ 映射
Component Token (组件级令牌)
  ├─ button-bg-primary: {color-primary}
  ├─ button-radius: {radius-6}
  └─ button-padding-x: {spacing-content}

规则：

组件消费只引用 Alias / Component Token，禁止直接用 Global Token
暗色模式只改 Alias Token 映射，组件代码零改动
同一值出现第二次就抽成 token（DRY 原则应用到视觉变量）

2.2 色彩系统 #

色板生成：以一个品牌主色为种子，生成 10–13 级梯度（50–950 或 100–1000）。推荐用 OKLCH 色彩空间生成，感知均匀。

语义角色（必须定义，不可只给色值）：

primary 主操作色（按钮、链接、焦点环）
surface 表面色（页面背景、卡片背景）
container 容器色（次级背景，比 surface 略深/浅）
text-primary / text-secondary / text-disabled
border / divider
success / warning / error / info
每个语义色在亮/暗模式各有映射

对比度（WCAG AA 强制）：

正文（<18px 或 <14px bold）≥ 4.5:1
大字（≥18px 或 ≥14px bold）≥ 3:1
交互组件边框、图标 ≥ 3:1
非文本装饰可不满足，但不能影响信息识别

色彩使用纪律：

一个界面同时出现的强色不超过 2 种（主色 + 一个语义色）
灰阶用同色相不同明度（冷灰或暖灰统一），避免黑白灰混搭发脏
暗色模式不用纯黑 #000，用深灰 #0d0d0d ~ #1a1a1a，减少 OLED 边缘发灰感
暗色模式背景饱和度略降，避免大面积高饱和色刺眼

2.3 字体排版系统 #

字号阶梯（模块化比例约 1.2–1.25）：

令牌	大小	行高	用途
display	48–56px	1.1	营销页大标题
h1	32–36px	1.2	页面主标题
h2	24–28px	1.25	区块标题
h3	20–22px	1.3	卡片标题
h4	18px	1.35	小标题
body	14–16px	1.5	正文（Web 14，移动 16 防缩放）
caption	12–13px	1.4	辅助文字

规则：

正文行高 1.5，标题行高 1.1–1.3
字重：正文 400，强调 500–600，大标题 600；慎用 700，过大易显笨重
行宽：正文单行 45–75 字符最佳，超 75 字符加宽行高
字体栈：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif；数字用等宽或 font-variant-numeric: tabular-nums 保证对齐
移动端正文最小 16px，避免 iOS 自动放大
中文与英文/数字混排时，中文字号略大于英文或加 letter-spacing

2.4 间距系统 #

4px 基础栅格（部分系统用 8px，但 4px 更精细）：
4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80

语义间距令牌：

spacing-content 内容内边距（卡片 16–24）
spacing-section 区块间距（32–64）
spacing-field 表单字段间距（16–24）
spacing-inline 行内元素间距（8–12）
spacing-touch 触控元素间距（≥8，移动端）

规则：

所有间距必须是基础栅格的倍数，禁止 7px、13px 这类野值
相关元素间距小，无关元素间距大（亲密性原则）
标题与正文间距 < 正文段落间距 < 区块间距

2.5 圆角 / 阴影 / 边框 #

圆角：

小组件 4–6px（按钮、输入框、标签）
卡片 8–12px
大容器 12–16px
圆形（头像、图标按钮）50%
统一风格：要么全直角（硬朗商务），要么全圆角（友好），不要混用

阴影（层级表达）：

z1：卡片悬浮 0 1px 2px rgba(0,0,0,.06)
z2：下拉/弹层 0 4px 12px rgba(0,0,0,.08)
z3：对话框 0 12px 32px rgba(0,0,0,.12)
暗色模式阴影改用更深的表面色叠加，或降低阴影透明度
能用边框就不用阴影，边框更轻量

边框：

默认 1px，色值用 border 令牌（比背景深一档）
聚焦时边框色变 primary + 2px 焦点环

2.6 动效令牌 #

令牌	时长	缓动函数	用途
motion-fast	100–150ms	ease-out	微反馈（hover、点击）
motion-normal	200–300ms	ease-in-out	状态切换、展开
motion-slow	300–500ms	cubic-bezier(.4,0,.2,1)	页面转场、弹层进入

规则：

进入用 decelerate（ease-out / 先快后慢）
退出用 accelerate（ease-in / 先慢后快）
弹性动效仅用于愉悦场景，企业系统慎用
动效期间保持可交互，不阻塞
尊重 prefers-reduced-motion，开启时降级为淡入淡出或关闭

2.7 暗色模式切换规则 #

不做简单反色（白底黑字 → 黑底白字），而是重新映射语义色
暗色下：背景用深灰非纯黑，文字用浅灰非纯白（#e8e8e8），降低对比刺激
暗色下阴影几乎不可见，改用更深的表面色区分层级
图片/图表颜色降饱和或提供暗色版本
跟随系统 + 手动切换，记住用户选择

三、移动端设计经验 #

3.1 平台规范优先原则 #

iOS 应用遵循 HIG：导航栏、Tab Bar、Sheet（底部模态）、手势返回、系统字体
Android 应用遵循 Material 3：Top App Bar、Bottom Navigation、FAB、Navigation Drawer、返回箭头 Up
跨平台不抄对方原生组件：同一功能用各自范式实现（如 iOS 用 Sheet，Android 用 Bottom Sheet 或全屏页面）
平台原生组件优先于自绘，保证系统级手势与无障碍

3.2 导航架构 #

层级 ≤ 3 级（首页 → 列表 → 详情）
底部 Tab 3–5 个，超过 5 用「更多」抽屉
Tab 图标 + 文字双重标识，文字不可省
主操作放拇指热区（屏幕底部 1/3，单手可及）
次级操作放顶部或右滑操作
iOS 左滑返回手势；Android 系统返回键 + Up 导航（父层级）
模态：iOS Sheet 从底部滑出，Android 用全屏或 Bottom Sheet

3.3 触控与可达性 #

最小可点击区域：iOS 44×44pt，Android 48×48dp
相邻可点击元素间距 ≥ 8pt
输入框高度 ≥ 44pt
键盘弹出时不遮挡当前输入项（scroll into view 或键盘上推）
按钮内边距充足，文字不贴边
关键操作不放屏幕顶部角落（拇指难及）

3.4 表单与输入 #

单列垂直布局（移动端不做多列表单）
标签顶对齐（节省横向空间）
输入框占位符给示例，不给标签（标签消失后用户迷失）
数字输入唤起数字键盘，邮箱唤起邮箱键盘
实时校验，错误信息在字段下方红色提示
提交按钮固定底部，键盘弹出时跟随
复杂表单分步，显示进度条

3.5 列表与卡片 #

长列表虚拟滚动
卡片间距 12–16px，内边距 16px
卡片信息层级：主标题 > 副信息 > 操作
左滑显示操作（iOS 风格）或长按菜单
列表项高度统一，视觉节奏一致
图片加载用占位灰底 + 渐显

3.6 动效 #

微交互 100–200ms，转场 250–400ms
页面间转场：iOS 推入（从右滑入），Android 共享元素过渡
列表项增删用动画提示，不突兀
加载用骨架屏而非转圈（骨架屏减少感知等待）
60fps，掉帧即失败

3.7 性能 #

首屏懒加载 + 骨架屏
图片懒加载 + 占位
长列表虚拟滚动
动画用 transform/opacity（GPU 加速），避免 layout 属性
包体积控制，按需加载

四、Web 端与中后台设计经验 #

中后台（B 端）是企业级设计的主战场，参考 Ant Design / Carbon / Atlassian / Polaris / Semi。

4.1 通用 Web #

12 列栅格，最大内容宽度 1200–1440px
正文单列宽度 ≤ 1200px（阅读舒适）
固定顶部导航 + 面包屑
内容区最小宽度 1024px，小屏降级为响应式或提示用桌面端
链接下划线或颜色区分，hover 反馈

4.2 中后台布局 #

经典布局：顶部 Logo + 全局操作 / 左侧可折叠菜单（≤3 级）/ 内容区 / 可选右侧抽屉

菜单分组，支持搜索（菜单项 >20 个时）
菜单折叠后图标 + tooltip
内容区内边距 24px，卡片间距 16–24px
页面顶部：标题 + 面包屑 + 主操作按钮（右上角）
多 Tab 页签（标签页）支持关闭其他、刷新

4.3 表格系统（最高频组件） #

基础规范：

支持密度切换（comfortable 48px / compact 40px / dense 32px 行高）
固定首列（勾选框）+ 末列（操作列），横向滚动时始终可见
列宽可拖拽调整并记忆
表头支持排序、筛选
行 hover 高亮，行操作 hover 显示（降视觉噪音）
斑马纹可选，密度大时用

大数据量：

虚拟滚动 + 服务端分页
分页器：显示总数、可跳页、可调每页条数（10/20/50/100）
搜索/筛选条件内联表头或顶部筛选区
批量操作：勾选后顶部出现操作栏 + 选中数量

三态必设计：

加载态：骨架行或表格内 loading
空状态：插图 + 说明 + 引导操作（如「新建第一条数据」）
错误态：错误说明 + 重试按钮

高级：

可展开行（子表格）
行内编辑（双击或点击单元格编辑）
导出功能
列设置（显示/隐藏列）

4.4 表单系统 #

单列优先，效率最高
标签：浏览为主左对齐，填写为主顶对齐
字段分组用卡片或分隔线
必填标记 *，可选字段可不标
实时校验（失焦或输入时）+ 提交校验
错误信息在字段下方，红色 + 图标
帮助文本用 tooltip 或字段下灰色说明
分步表单用 Stepper，每步可独立保存草稿
长表单底部固定操作栏（保存/取消）
提交中按钮 loading 防重复提交
离开未保存提示（beforeunload 或路由守卫）

4.5 导航与信息架构 #

扁平化，关键功能 ≤ 3 次点击到达
面包屑 + 返回，用户随时知道自己在哪
全局搜索（Cmd/Ctrl+K）快捷入口
最近访问 / 收藏夹
角色切换（多租户/多角色场景）

4.6 Dashboard 与数据可视化 #

一个图表只说一个结论，标题即结论（如「本月销售额环比增长 12%」而非「销售趋势」）
优先横向条形图（易比较）、折线图（趋势）
慎用饼图（难比较面积）、3D 图表（误导）、仪表盘（信息密度低）
提供下钻：点击图表元素跳转明细
时间筛选器：预设（今日/本周/本月/自定义）
关键指标卡（KPI Card）：数值 + 同比/环比 + 迷你趋势图
数据加载用骨架，不空白
图表配色用语义色 + 色盲安全调色板（避免红绿同时作为唯一区分）

4.7 反馈体系 #

类型	用途	示例
Message / Toast	轻提示，3s 自动消失	「保存成功」
Notification	重提示，需手动关闭	「审批待处理」
Alert	内联提示，页面内	表单顶部错误汇总
Modal	阻断确认	删除确认
Inline	字段级	输入校验错误

危险操作（删除、批量操作）必须二次确认
破坏性操作用红色按钮 + 警告文案
成功反馈轻量，错误反馈醒目
加载：按钮 loading / 骨架屏 / 全局进度条

4.8 权限体系（RBAC） #

三级控制：菜单（路由）/ 按钮 / 数据列
无权限不显示优于禁用（除非有教学价值，禁用 + tooltip 说明原因）
越权操作明确提示，不静默失败
角色可切换时，UI 即时刷新
敏感数据脱敏显示（如手机号 138****8888）

五、AI 产品设计经验（2026 新增） #

参考 ChatGPT / Claude / Notion / 飞书 / Ant Design X。

5.1 对话流设计 #

消息流式输出（打字机效果），可随时中断（停止按钮）
用户消息与 AI 消息视觉区分（背景色 / 头像 / 对齐）
AI 消息支持：复制 / 重新生成 / 点赞踩 / 编辑后重发
代码块：语法高亮 + 一键复制 + 语言标签
长消息支持折叠 / 锚点跳转
历史会话列表，可重命名 / 删除 / 置顶 / 分组

5.2 上下文管理 #

显示当前上下文占用（如「已用 8K / 128K tokens」）
可清空上下文、新建会话
多会话切换，状态隔离
可上传文件 / 图片作为上下文
@提及引用历史消息或文档

5.3 工具调用可视化 #

工具调用过程可折叠展示（思考 → 调用工具 → 获得结果 → 继续回答）
不要让用户对着空白等几十秒，用进度提示
工具结果可展开查看原始返回
Agent 多步执行显示执行路径

5.4 长文与文档协作 #

Artifacts 独立画布，与对话分离（Claude 模式）
文档可编辑、可版本对比、可回滚
Block Editor（Notion 模式）：块级编辑 / 拖拽排序 / 斜杠命令
实时协作光标 + 评论锚点

5.5 输入区设计 #

多行自适应高度
支持附件 / @提及 / 斜杠命令
快捷键发送（Enter 发送，Shift+Enter 换行）
输入区始终可见，不滚动消失
预设提示词 / 快速指令

5.6 信任与可解释性 #

AI 输出标注来源（引用、链接）
AI 输出可编辑、可撤销
不确定时 AI 主动声明，不胡编
敏感操作 AI 不直接执行，需用户确认
AI 能力边界明确告知（能做什么、不能做什么）

六、人性化设计原则 #

6.1 渐进式披露（Progressive Disclosure） #

默认只展示常用功能，高级选项折叠
详细信息按需展开（hover tooltip / 点击展开 / 「更多」）
复杂表单分步，不让用户一次面对 50 个字段
降低认知负荷：界面同时呈现的信息块 ≤ 7（米勒定律）

6.2 错误预防 > 错误恢复 #

危险操作二次确认
删除按钮与确认按钮距离拉开，防误点
不可逆操作要求输入名称确认（如 GitHub 删仓库）
输入约束：数字字段不允许字母，日期用选择器不用手输
提交前实时校验，不要等提交后才报错
智能默认值，减少用户输入

6.3 可撤销性 #

尽可能让操作可撤销（删除 → 软删除 + 撤销 toast）
提供 Undo 而非反复弹确认框（「你确定吗？」很烦）
文档/表单自动保存草稿
版本历史可回滚

6.4 认知负荷管理 #

一个页面一个主任务
视觉焦点唯一（主操作按钮视觉权重最高）
分组与留白引导视线
进度可见（步骤条、进度条）
不在用户专注时弹无关通知

6.5 包容性设计 #

支持键盘完整操作（Tab 顺序合理）
支持屏幕阅读器（aria 标签、语义化 HTML）
不只用颜色传达信息（色盲友好，加图标/文字）
文案通俗易懂，少用术语，必要时提供解释
支持放大字体不破坏布局
考虑弱网/低端设备场景

七、美观设计原则 #

7.1 视觉层级 #

通过大小、颜色、对比、留白建立层级，而非全是边框
主操作按钮：实心主色，视觉权重最高
次操作按钮：描边或文字按钮
三级操作：文字链接或图标
危险操作：红色，且与主操作分离
标题 > 正文 > 辅助文字，字号/字重阶梯清晰

7.2 留白与节奏 #

留白不是浪费，是呼吸
相关元素间距小，无关元素间距大
统一间距栅格（4/8 倍数），视觉节奏一致
卡片内边距 ≥ 16px，不贴边
区块间留白 32–64px，分隔清晰

7.3 色彩和谐 #

60-30-10 原则：60% 主背景色 / 30% 次背景色 / 10% 强调色
同界面强色 ≤ 2 种
灰阶统一色相（全冷灰或全暖灰）
语义色克制使用（红黄绿蓝不要满屏）
暗色模式降饱和

7.4 字体韵律 #

字号阶梯清晰（不连续跳跃）
行高随字号变化（大字行高小，小字行高大）
字重对比建立层级（400 vs 600，而非 400 vs 500）
数字对齐用 tabular-nums
中英文混排注意基线对齐

7.5 细节打磨 #

图标风格统一（线性 / 填充 / 双色，不混用）
图标粗细与字重匹配
按钮圆角与卡片圆角协调
阴影层级一致
加载/空状态配图风格统一
hover/focus/active 三态都有反馈
1px 对齐误差都不可接受（对齐到像素）

7.6 美观优先级（不要过度设计） #

企业系统美观服务于效率，不是炫技
动效克制，除非是营销页
渐变/玻璃拟态等流行风格谨慎用，看场景
一致性 > 新奇性（统一比花哨更重要）
留白 > 装饰

八、无障碍设计（Accessibility） #

8.1 WCAG 2.1 AA 强制项 #

对比度：正文 ≥ 4.5:1，大字 ≥ 3:1，交互组件 ≥ 3:1
颜色非唯一信息载体
文本可放大 200% 不丢失功能
键盘可完整操作
焦点可见（焦点环 ≥ 2px，高对比）
可暂停/停止/隐藏的动效
页面有清晰的 title、有 lang 属性

8.2 键盘交互 #

Tab 顺序与视觉顺序一致
焦点不跳进隐藏元素
Esc 关闭弹层，焦点回到触发元素
快捷键不与浏览器/屏幕阅读器冲突
Cmd/Ctrl+K 全局搜索
表格支持方向键导航

8.3 屏幕阅读器 #

语义化 HTML（用 <nav> <main> <button> 而非全 <div>）
图标按钮加 aria-label
表单字段关联 <label>
动态内容加 aria-live（如 toast 播报）
图表提供文字摘要（不是所有用户都能看图）

九、设计模式目录（Patterns） #

模式 > 组件。复杂场景先查官方 Patterns，再用组件实现。模式解决”什么场景用什么组合”，组件解决”长什么样”。

模式来源	强项场景
Carbon Patterns	数据密集、表单编排、筛选、空状态、批量操作
Atlassian Patterns	协作、评论、权限、状态流转
Polaris Patterns	电商后台、订单流程、商品管理
Material Patterns	基础交互范式、响应式、动效
Ant Design Pro	中后台布局、表格、表单、权限

常见模式清单：

空状态模式（引导操作）
加载模式（骨架 / spinner / 进度）
错误恢复模式（重试 / 降级 / 离线）
批量操作模式（选中栏 + 操作）
筛选与搜索模式（内联 / 抽屉 / 顶栏）
分步流程模式（Stepper / 向导）
主从详情模式（Master-Detail，列表+详情）
内联编辑模式
确认模式（二次确认 / 输入确认）
通知与提醒模式

十、场景 → 资源快速映射 #

场景	首选	次选
iOS 应用	Apple HIG	Material 3
Android 应用	Material 3	—
国内中后台	Ant Design	Semi / Arco / TDesign
数据/分析平台	Carbon	Ant Design
电商后台	Polaris	Ant Design
项目管理	Atlassian	—
协同办公	Semi	Atlassian
企业微信生态	TDesign	—
国际化中后台	Arco	Semi
Office/办公	Fluent 2	—
AI 聊天/Copilot	ChatGPT + Ant Design X	—
长文/文档协作	Claude + Notion	—
现代 SaaS 快速开发	shadcn/ui + Radix	Mantine
无障碍基础组件	Radix UI	Base Web
React 快速开发	Chakra UI / MUI	—

十一、上线前自查清单 #

11.1 通用 #

色彩/间距/圆角全部令牌化，无硬编码
暗色模式可用且对比达标
对比度 WCAG AA 通过
键盘可完整操作，焦点可见
三态齐全（加载 / 空 / 错误）
响应式断点全覆盖
文案无错别字，无占位符遗留
图标风格统一
间距对齐到栅格

11.2 移动端 #

触控目标 ≥ 44pt（iOS）/ 48dp（Android）
主操作在拇指热区
支持手势返回（iOS）
键盘不遮挡输入项
单列表单布局
长列表虚拟滚动
首屏骨架屏
遵循平台原生导航范式

11.3 Web 中后台 #

表格密度可切换
危险操作二次确认
权限可见性策略（不显示 / 禁用 + 提示）
表单实时校验 + 提交防重复
长列表虚拟滚动 + 服务端分页
批量操作栏
全局搜索（Cmd+K）
面包屑 + 返回
离开未保存提示
图表有色盲安全配色 + 文字摘要

11.4 AI 产品 #

流式输出可中断
上下文占用可见
工具调用过程可视化
AI 输出可编辑/可撤销
来源标注
敏感操作需用户确认

十二、AI 执行指南：决策树与优先级 #

12.1 接到设计需求时的决策顺序 #

1. 这是哪个平台？ → iOS(HIG) / Android(M3) / Web / 跨端
2. 这是哪类产品？ → 消费级 / 中后台 / AI 产品 / 数据平台
3. 选定主参考系统（见第十节映射表）
4. 先查 Patterns，再选组件
5. 用令牌定义颜色/间距/字体
6. 设计主任务路径 → 次要功能 → 异常态
7. 三态齐全（加载/空/错误）
8. 无障碍自查
9. 暗色模式验证
10. 响应式验证

12.2 实现优先级（投入产出比排序） #

令牌化 + 暗色模式（一次投入，全局受益）
三态设计（加载/空/错误，最易遗漏却最影响体验）
无障碍基线（对比度 + 键盘 + 触控尺寸）
表格与表单规范（B 端最高频）
反馈体系（Toast/Notification/Modal 分层）
响应式适配
动效打磨（最后做，锦上添花）

12.3 学习路径推荐（投入产出比） #

Material Design 3（建立基础设计思维）
Apple HIG（掌握移动端交互）
Ant Design + Semi Design（学习国内企业级后台）
Carbon + Atlassian + Polaris（复杂业务系统）
shadcn/ui + Radix UI（理解组件实现与可访问性）
ChatGPT、Claude、Notion、飞书（拆解 AI 与协同产品的完整体验）

附：核心资源链接（按类别） #

设计系统

Material Design 3: https://m3.material.io
Apple HIG: https://developer.apple.com/design/human-interface-guidelines
Microsoft Fluent 2: https://fluent2.microsoft.design
IBM Carbon: https://carbondesignsystem.com
Shopify Polaris: https://polaris.shopify.com
Atlassian Design System: https://atlassian.design
Ant Design: https://ant.design
Ant Design X: https://x.ant.design
Semi Design: https://semi.design
Arco Design: https://arco.design
TDesign: https://tdesign.tencent.com
Fusion Design: https://fusion.design

开源 UI（看源码）

设计模式

Carbon Patterns: https://carbondesignsystem.com/patterns
Atlassian Patterns: https://atlassian.design/patterns
Polaris Patterns: https://polaris.shopify.com/patterns
Material Patterns: https://m3.material.io/components

真实产品拆解

ChatGPT / Claude / Gemini / Notion / Figma / Linear / 飞书 / Jira / Slack / Microsoft Teams / GitHub

一句话总结：令牌化是地基，三态是底线，无障碍是责任，模式优先于组件，一致性胜过新奇，留白胜过装饰，正确性永远高于美观。