design-system-mapping

Industry Design System Benchmarking

Applicable Scenarios

• Designing complex back-office / SaaS / developer tools
• Table- and form-intensive pages
• Projects that need to establish standards quickly
• Drawing on the best practices of mature systems

Non-Applicable Scenarios

• Consumer-facing marketing (high degree of freedom; over-referencing leads to homogenization)
• Products with a strong brand (should have a unique visual language)

Comparison of Mainstream Design Systems

System	Maintainer	Characteristics	Suitable Scenarios
Material Design	Google	Cross-platform experience, card-based, shadow hierarchy	Android / Web / cross-platform
Apple HIG	Apple	iOS/macOS platform guidelines, Liquid Glass	iOS / macOS / iPad apps
Fluent Design	Microsoft	Windows style, rich motion	Windows / Office-like
Carbon	IBM	Enterprise-grade, data-intensive, highly accessible	Enterprise SaaS / data platforms
Atlassian Design	Atlassian	Collaboration products	Collaboration tools / project management
Polaris	Shopify	E-commerce / merchant back office	Merchant tools / e-commerce back office
Pajamas	GitLab	Developer tools	Developer platforms
Ant Design	Ant	Mid- and back-office, well-developed tables and forms	Chinese mid- and back-office
MUI	Material UI	Material + React implementation	React projects
shadcn/ui	shadcn	Copy-and-paste style, Radix under the hood	Modern web applications
Radix	Modulz	Unstyled components, keyboard / ARIA	Custom visuals + strong accessibility
Tailwind UI	Tailwind	Tailwind prebuilt components	Tailwind projects
Tabler / AdminLTE	Open source	Back-office admin templates	Back-office templates

Selection Guide

项目类型 → 推荐对标

中文中后台 → Ant Design（首选）+ shadcn（视觉升级）
英文 SaaS → shadcn / Radix + 自定义视觉
企业级数据平台 → Carbon（可访问性 + 数据密集）
开发者工具 → Pajamas / GitHub 风格
电商/商家 → Polaris（电商场景成熟）
移动 App → 平台原生（HIG / Material）
跨平台一致 → Material Design 3

Benchmarking Method

1. 不要全盘照搬
   - 借鉴模式和方法论
   - 不抄具体视觉风格

2. 关注成熟模式
   - 表单：标签位置、错误提示、必填标记
   - 表格：排序、筛选、分页交互
   - 导航：层级结构、当前位置高亮
   - 反馈：Toast / Alert / Banner 用法

3. 关注可访问性
   - 大厂系统的 ARIA 实现
   - 键盘交互模式
   - 焦点管理

4. 关注组件 API 设计
   - 命名约定
   - 属性结构
   - 变体（variant）系统

Common Pattern Comparison

Button Variants

Material：FAB / Filled / Tonal / Outlined / Text
Apple：Filled / Bordered / Plain
Ant：Primary / Default / Dashed / Text / Link
shadcn：Default / Destructive / Outline / Secondary / Ghost / Link

Form Field Labels

顶部标签：Material / Ant Design / 大部分
左侧标签：Carbon / 数据密集场景
浮动标签：Material 早期 / 已不推荐

Table Selection

左侧复选框：所有主流系统
点击行选中：Notion / 现代工具
Shift 多选：Carbon / Ant

Feedback

Toast：Material（Snackbar）/ Ant（Message）/ shadcn（Sonner）
Modal：所有系统
Drawer：Ant / Carbon / 大屏侧边操作
Banner：GitLab / Polaris

Output Format

## 设计系统对标：[页面/功能]

### 主参考系统
[选用的系统] + 理由

### 借鉴的模式
1. [模式 1] 来自 [系统] - 适配方式：[本项目如何调整]
2. [模式 2] 来自 [系统] - 适配方式：...

### 不采纳的部分
- [原系统的某个设计] - 不适合的原因：...

### 视觉调整
- 颜色：使用本项目品牌色，不用原系统颜色
- 字体：[本项目字体]
- 圆角：[本项目圆角规范]

### 组件 API 命名
- 按钮变体：primary / secondary / danger / ghost（参考 shadcn）
- 表格列：title / dataIndex / render（参考 Ant）

### 可访问性策略
- 键盘交互：参考 Radix
- ARIA 属性：参考 Carbon

Workflow

1. 识别项目类型和场景
2. 选择主参考系统（1~2 个）
3. 列出值得借鉴的模式
4. 列出不采纳的部分（避免照抄）
5. 结合本项目品牌做视觉调整
6. 输出对标说明

Quality Self-Check

□ 主参考系统是否合适
□ 是否只借鉴模式不抄视觉
□ 是否考虑了多个系统的优点
□ 是否结合本项目品牌做调整
□ 可访问性策略是否参考了强系统（Carbon/Radix）

Common Pitfalls

1. Wholesale copying——copying the visuals, layout, and components entirely → losing the brand
2. Looking at only one——missing the good practices of other systems
3. Ignoring the scenario——using the Material style for SaaS → unprofessional
4. Ignoring accessibility——the referenced system has weak accessibility
5. Chasing the new and discarding the old——looking only at shadcn and not at Ant's maturity
6. Not adjusting——applying the template directly → homogenization

Supporting Templates

• templates/design-system-benchmark-template.md — system comparison table + pattern comparison table

Collaboration with Other Skills

上游：
  visual-style → 决定整体视觉风格

平行：
  enterprise-patterns → 借鉴具体模式
  atomic-design → 组件分层参考
  accessibility → 可访问性参考

下游：
  design-handoff → 标注组件来源（"参考 shadcn"）