别再做 AI Slop 了

9 个世界级设计系统，是 Vibe Coder 的审美必修课

AI 能生成代码，但生成不了品味。
在你抱怨”做出来的东西怎么这么丑”之前，先问问自己：你给过 AI 一个好的设计标准吗？

打开任何一个 AI 生成的网站，你大概率会看到这些东西：毫无意义的渐变背景、圆角堆圆角的卡片、居中放大的标题、emoji 当图标用、千篇一律的紫蓝配色……它们不是设计，是 AI 的”平均脸”——所有训练数据混合后得到的那个最安全、也最无聊的结果。

这就是 AI Slop：能用，但难看得千篇一律。

问题出在哪？不是 AI 不行。AI 见过全世界最好的设计，也见过全世界最烂的设计。当你不给它任何标准时，它只能输出”平均值”。真正的问题是：作为 Vibe Coder，你自己有没有一套审美标准去判断、去约束、去指导 AI？

如果你连”好的间距应该是多少””这个配色为什么别扭””这个按钮为什么看起来不专业”都说不清楚，那你就只能接受 AI 给你的任何东西。

改变这一切的起点，是学习 设计系统（Design System）。

一、什么是设计系统？为什么它比"让 AI 自己设计"更重要

设计系统不是一套 UI 组件库那么简单。它是一整套完整的设计标准：从顶层的 设计原则和哲学，到中层的 视觉规范（色彩、字体、间距、动效、图标），再到底层的 可复用组件 和 代码实现。它回答的是”我们为什么这样设计”和”我们具体怎么做”这两个根本问题。

打个比方：如果做产品像盖房子，设计系统就是 建筑规范 + 标准建材库 + 施工手册。没有它，每个房间的门尺寸都不一样，电线乱拉，墙厚薄不均——看起来每面墙都立着，但整个建筑随时可能塌。

为什么学设计系统比单纯让 AI 生成更重要？
因为 AI 的设计输出是”统计平均”，而设计系统是”经过验证的最优解”。当你理解了设计系统背后的逻辑，你就能：
1. 判断 AI 输出的好坏
2. 给 AI 精确的约束和反馈
3. 在 AI 犯错时知道怎么修
审美不是天赋，是训练出来的判断力。

设计大师 Paul Rand 有一句话，放在 AI 时代简直像预言：

“没有美学，设计要么是陈词滥调的单调重复，要么是对新奇的疯狂追逐。没有美学，计算机不过是一台无意识的速度机器，产生没有实质的效果、没有相关内容的形式，或没有有意义形式的内容。”
— Paul Rand，被 IBM Design Language 官网引用

下面这 9 个设计系统，来自 Apple、Google、Microsoft、Adobe、IBM、Mozilla、Atlassian 等全球最顶尖的科技公司。每一个都经过了亿级用户的真实验证。它们不是”参考一下就好”的素材，而是值得你花时间深入研读的设计教科书。

01. Apple HIG — 平台设计的"宪法"

"唯一由平台方亲自撰写的设计规范"

Apple · iOS / macOS / watchOS / tvOS / visionOS · 非开源

Apple HIG 官网首页 — 覆盖 Apple 全平台的设计指南

Apple 的《人机界面指南》（HIG）不是一个可下载的 UI Kit，而是一套 平台级设计宪法。它覆盖 iOS、iPadOS、macOS、tvOS、visionOS、watchOS 六大平台，与 SwiftUI、SF Symbols、Xcode 深度绑定。

2026 年 6 月，Apple 重写了设计原则，从经典的”清晰、遵从、深度”三条扩展为八大原则：目标感、能动性、责任感、熟悉感、灵活、简洁、匠心、愉悦感。其中”能动性”（让用户随心所欲地使用）和”责任感”（以用户最佳利益为核心，优先安全和隐私）直接回应了 AI 时代的设计伦理挑战。

视觉特点： 极简克制，以内容为中心。半透明模糊材质（Material）营造层次感，SF Symbols 矢量图标库与平台深度集成，系统级浅色/深色模式自动切换，动效强调自然流畅的物理模拟（如弹簧效果）。

为什么值得学： HIG 不教你”拖一个按钮”，而是教你”为什么这个按钮应该在这里”。它要求设计者理解设计背后的意图，这种深度是其他通用系统无法企及的。即使你不做 Apple 平台的产品，读 HIG 也能帮你建立”平台原生设计思维”——理解一个操作系统如何思考设计一致性。

02. Material Design 3（M3 Expressive）— 从"好用"到"动情"

"首个将情感驱动 UX 作为核心叙事的主流设计系统"

Google · Android / Flutter / Web · 开源

Material Design 3 官网首页 — M3 Expressive 主打"Design with emotion"

Material Design 是 Google 的开源设计系统，也是全球使用最广泛的设计系统之一。当前的核心演进方向是 M3 Expressive——”Design with emotion”（情感驱动设计）。官网明确写道：”M3 Expressive 为打造更可用、更有吸引力的产品而生，通过鲜艳的色彩、直觉的动效、自适应组件、灵活的排版和对比鲜明的形状，创造有情感冲击力的 UX。”

这标志着 Material Design 的三次进化：从 M1 的”拟物物理感”（纸张隐喻），到 M2 的极简功能主义，再到 M3 Expressive 主动追求情感表达和视觉个性。

视觉特点： 基于 5 个关键色（primary、secondary、tertiary、error、neutral），每个关联 13 级色调调色板。支持 Android 12+ 的 Dynamic Color（动态取色）——从壁纸算法提取颜色生成自定义主题。M3 Expressive 新增 35 种变形形状、基于物理弹簧的 Motion Physics 动效系统（由 design tokens 驱动）、可变字体支持和强调文本样式。

为什么值得学： M3 是最具实验性和视觉表现力的主流设计系统。它的 Dynamic Color 是业界独有的个性化色彩方案，Motion Physics 将动效参数抽象为 design tokens 实现设计-开发一致性。如果你在做消费级产品、移动端应用或 Flutter 跨平台项目，M3 提供了从设计到代码的完整开源链路。

03. Microsoft Fluent 2 — 亿级用户验证的生产力美学

"克制的半透明" — 由 Teams、Outlook、Windows 亿级用户验证

Microsoft · Web / iOS / Android / Windows · 部分开源

Microsoft Fluent 2 官网首页 — "Let the flow"，深色主题与虹彩 3D 几何

Fluent 2 是微软的跨平台设计系统，服务于 Windows 11、Office 套件、Teams、Outlook 等核心产品。如果说 M3 Expressive 是”情感张扬”，那 Fluent 2 就是 “冷静专业”。

第三方对 Fluent 2 的美学有一段精准描述：”如果说它的前身 Aero 是为了炫技而存在的华丽玻璃，那 Fluent 2 就是有纪律的半透明——表面会适应你的壁纸和主题，圆角在柔和的同时不失严肃，克制的蓝色强调色在不喧哗的情况下指引操作。结果是一个感觉平静、高效、低调现代的操作系统级设计系统。”

视觉特点： 色彩分 neutral（中性色）、shared（共享色）、brand（品牌色）三类，token 化管理，强调色为克制的蓝色。形状系统极简到只有四种：rectangle（矩形）、circle（圆形）、pill（药丸形）、beak（喙形）。延续 Acrylic（亚克力）和 Mica（云母）半透明材质但更加克制。Elevation 系统通过 z 轴阴影创造层级。

为什么值得学： Fluent 2 是最”企业级”的设计系统。它由真实亿级用户产品驱动验证——官网直接展示”Teams 利用 Fluent 2 提升性能、降低复杂度”。更重要的是，Fluent 2 在 无障碍（A11y） 方面的投入最为系统实用：Focus Order 和 Color Contrast Checker 不是文档中的”建议”，而是可直接下载的 Figma 插件。如果你在做企业级生产力工具、B2B SaaS 或后台管理系统，Fluent 2 的”冷静高效”气质和无障碍实践是最好的参考。

04. Adobe Spectrum — 用工程精度做创意工具设计

"理性驱动" — 每个组件都由研究和测试驱动，色彩精度令人惊叹

Adobe · 桌面 / 移动 · 开源

Adobe Spectrum 官网首页 — 服务于 Photoshop、Illustrator 等创意工具

Spectrum 是 Adobe 官方设计系统，服务于 Photoshop、Illustrator、Premiere Pro 等全家桶产品的设计一致性，同时作为开源项目对外提供。它确立了三大核心原则：

Rational（理性） — “基于真实世界情境，每个组件、模式和原则都由研究和深思熟虑的测试驱动” – Human（人本） — “将客户需求置于首位，深度致力于高标准的无障碍、诚实和对用户注意力的尊重” – Focused（聚焦） — “在需要的时候交付需要的东西，没有不必要的装饰”

视觉特点： 色彩体系的工程化程度令人惊叹。每个主题使用 11 级完全去饱和的中性灰阶——这不是审美选择，而是工程决策：去饱和灰阶能避免图像编辑工作流中因色彩适应或同时对比导致的颜色误判。13 种颜色每种 14 级色阶，所有灰阶通过 目标对比度比率的多项式曲线 精确生成，深色主题对比度更高以保持感知一致性，严格满足 WCAG 标准。字体采用 Adobe Clean 家族 + Source Code Pro，字号比例 1.125（大调），比常见的 1.25 更保守，体现创意工具中信息密度优先的取向。

为什么值得学： Spectrum 是唯一一个将”基于研究和测试”写入首要原则的设计系统。它的灰阶不是凭感觉调的，是算出来的；它的组件每个都有独立版本号、changelog 和公开 issue 列表，透明度在企业级设计系统中极为罕见。它同时提供 CSS、React、Web Components 三种框架实现。如果你在做复杂生产力工具、创意软件或任何需要处理图像/视频/数据的专业桌面应用，Spectrum 对色彩准确性和信息密度的处理是教科书级的。

05. Atlassian Design — 为"美丽的混乱"而设计

"把协作的产品内核深度融入设计哲学"

Atlassian · Web · 部分开源

Atlassian Design 官网首页 — "Better teamwork by design"

Atlassian Design 服务于 Jira、Confluence、Trello、Bitbucket 等全线协作产品，以及新兴的 AI 助手 Rovo。它的核心主张是 “Better teamwork by design”（通过设计实现更好的团队协作），首页副标题进一步阐释为”Designing for the beautiful mess of modern work”（为现代工作中美丽的混乱而设计）。

Atlassian 直面一个现实：“Teamwork is messy and AI adds to it”（团队协作本身是混乱的，AI 加剧了这种混乱）。它的设计不是试图消除混乱，而是将混乱转化为创意优势。首席设计官 Charlie Sutton 说：”理解新技术的底层材质，是设计师超越表层交互、真正创新的关键。”

视觉特点： 采用基于 Design Token 的语义化色彩系统，色彩角色明确分为 neutral、brand、information、success、warning、danger、discovery、accent、inverse、input 共 11 种。强调层级从 subtlest 到 boldest，支持 light/dark 双主题，严格遵循 WCAG AA 对比度。品牌字体为定制的 Charlie Sans，应用内字体为 Atlassian Sans 和 Atlassian Mono。字体 Token 使用 rem 单位而非像素，以支持用户浏览器字体缩放。首页直接展示大量 Design Token 名称（如 color.text.accent.red），将技术规范作为视觉设计的一部分。

为什么值得学： Atlassian Design 最突出的特点是将”协作”这一产品内核深度融入设计哲学，而非停留在通用组件层面。它有三个前沿实践值得关注：

DESIGN.md 创新 — 将设计上下文像代码 README 一样便携化 2. AI 设计的系统化探索 — 专门推出 Rovo UI 组件库，研究”动效词汇如何提升提示工程” 3. 生态开放性 — 通过 Forge UI Kit 赋能第三方开发者

如果你的产品涉及多人协作、复杂工作流或 AI 功能集成，Atlassian 的实践极具参考价值。

06. Carbon Design System — 真正开源的企业级设计系统

"碳元素构建复杂结构" — 真正开源、多框架平等支持的企业级设计系统

IBM · Web（多框架） · 完全开源

Carbon Design System 官网首页 — IBM 的开源设计系统

Carbon 是 IBM 的开源设计系统，官网定义为”IBM 面向产品和数字体验的开源设计系统”。它的命名寓意深刻：”自然界中碳元素从简单化合物构建复杂结构——这一意象隐喻我们的单个样式和组件如何组合出美丽复杂、自然直观的设计。”

Carbon 提出五大指导原则：

开放 — “Carbon 的用户也是其创造者” – 包容 — “为所有人可访问而设计” – 模块化与灵活 — “组件设计为彼此无缝协作” – 用户优先 — “通过严格研究聚焦真实的人” – 构建一致性 — “每个元素都从头设计为优雅地协同工作”

视觉特点： 中性灰家族在默认主题中占主导，利用微妙的明度变化将内容组织到不同区域；核心蓝色家族是所有 IBM 产品的主要操作色。独创的 Layering model（分层模型） 定义了颜色如何堆叠——浅色主题中 White 和 Gray 10 交替，深色主题中每层变亮一个色阶。使用开源字体 IBM Plex（Sans、Serif、Mono 三系列），排版系统分为 Productive set（紧凑产品用）和 Expressive set（大尺寸营销用）两套。采用 IBM 的 2x Grid（二分网格），可将空间分为 2、4、8、16、32 或 64 列。

为什么值得学： Carbon 是真正的开源治理典范——由 IBM 出资构建但完全开源，React 组件已迭代到 v1.115，成熟度极高。它是少有的 多框架平等支持 的设计系统：官方维护 React 和 Web Components，社区维护 Angular/Vue/Svelte。更值得关注的是它在 AI 时代的前沿布局：2025 年发布 Carbon AI Chat v1，2026 年推出”将 Carbon 设计系统知识通过 MCP（Model Context Protocol）接入 AI 工作流”——这意味着 AI 可以直接查询和使用 Carbon 的设计规范，是设计系统与 AI 融合的先锋实践。如果你在做企业级 B2B 产品、数据密集型应用或需要长期维护的大型产品套件，Carbon 的模块化架构和开源治理模式值得深入研究。

07. IBM Design Language — 有哲学深度的品牌设计语言

"设计是我们建立纽带的方式" — 有哲学深度的品牌级设计语言

IBM · 全媒介（数字 + 印刷 + 视频） · 品牌资源开放

IBM Design Language 官网首页 — 定义"Designed by IBM"的品牌设计哲学

IBM Design Language 不是一个组件库（那是 Carbon 的职责），而是定义 “什么是 IBM 的设计” 的品牌级设计哲学与视觉规范系统。它覆盖从 Philosophy、Typography、Color、2x Grid、Logo、Iconography、Illustration、Photography、Data visualization 到 Animation 的完整光谱，横跨数字与印刷媒介，是真正意义上的”全渠道设计语言”。

它的哲学深度在所有设计系统中最为突出。核心主张是 “Design is how we build bonds”（设计是我们建立纽带的方式），以 “Think → Guide” 作为设计的根本动作——”每个设计和每个设计师的目的是引导……去引领、激发、提供、进步，在情感和功能上推动人们向前。”

四大设计原则中，”Uniquely Unified（独特而统一）”的追问尤其震撼：

“如果遮住 Logo 或名称，你还能认出这是 IBM 设计的吗？”

这种对品牌可识别性的极致追求，在设计系统领域极为罕见。

视觉特点： 以 “Blue at the core”（蓝色为核心） 为特征——”即使红色也带有一丝蓝色”，由此形成”a singular IBM”的统一感。10 个色彩家族，每个 10 个色阶，提供 HEX、RGB、Pantone、CMYK 四套色值。企业字体 IBM Plex 包含四个子家族（Sans、Mono、Serif、Condensed），每个 8 个字重，共 64 种字体，支持 100+ 语言。Mono 版本每个字形占据 600 单位空间，”从打字机时代汲取灵感”，呼应 IBM 的历史传承。

为什么值得学： IBM Design Language 是唯一一个真正的”设计语言”而非”设计系统”——它不提供按钮和表单，而是定义”为什么这样设计”。它展示了如何将半个多世纪的设计思想（从 Paul Rand 的美学理论到 Eliot Noyes 的”brand is character”）沉淀为可执行的原则体系。它与 Carbon 的分层架构（Design Language 定义”是什么”，Carbon 实现”怎么用”）为大型企业提供了品牌与产品设计治理的范本。即使你不做企业品牌设计，读 IBM 的设计哲学也能帮你理解：好的设计系统背后，必须有一套自洽的价值观。

08. Mozilla Protocol — 专注"网站"的营销设计系统

"为网站而生" — 唯一专注营销网站和品牌官网的设计系统

Mozilla · Web（营销网站） · 完全开源

Mozilla Protocol 官网首页 — Mozilla 和 Firefox 网站的设计系统

Protocol 是 Mozilla 和 Firefox 网站的设计系统（当前版本 22.0.0），作为 www.mozilla.org 的前端框架。它是所有 9 个系统中 唯一专注于”网站”而非”应用” 的设计系统——它不试图解决按钮在表单里的间距问题，而是解决”如何让一个全球营销网站在 100 种语言下都保持品牌一致”。

五大设计原则：

Meaningful（有意义） — “如果设计的某个方面不能增强内容，就应该移除它” – Flexible（灵活） — “选择灵活而非精确” – Accessible to all（人人可及） – Global（全球化） — “绿色不一定总是通行，符号和习语对不同人有非常不同的含义” – Useful（有用） — “任何组件如果不能证明有用，就不属于这里”

视觉特点： 色彩分为 Mozilla 品牌色（黑、白、灰阶、绿、水蓝、种子黄、黏土、橙、粉，命名充满自然/有机调性）和功能色板（8 色 × 10 级色阶）。支持 双品牌主题：Mozilla 品牌使用 Mozilla Headline + Mozilla Text，Firefox 品牌使用 Metropolis + Inter。核心创新是 uniwidth 字体设计——所有字重和样式保持标准化间距和字距，消除文字重排风险，保护布局完整性。提供标准和紧凑两套字号系统，分别服务营销网站和 Web 应用。

为什么值得学： 如果你在做营销网站、品牌官网、内容驱动型网站或开源项目官网，Protocol 是最对口的参考。它的组件集（Billboard、Download Button、Newsletter、Language Switcher、Sticky Promo）明显面向获客和品牌传播场景。uniwidth 字体设计 是真正的工程创新——通过统一所有字重的字宽，消除了按钮、标签在切换语言或字重时的布局抖动，这在多语言营销场景中是刚需。双品牌主题展示了设计系统如何优雅地服务于同一组织下的多个品牌。

09. Google Design — 不是组件库，是设计文化杂志

"设计永无止境" — 不是组件库，而是设计文化杂志

Google · 内容平台（无平台限制） · 内容开放

Google Design 官网首页 — "Discover the people and stories behind the products"

Google Design 不是一个组件库或设计规范系统，而是 Google 的设计编辑平台。官网标题为”Discover the people and stories behind the products”（发现产品背后的人和故事）。About 页面明确写道：”Google Design 是一个编辑平台，展示 Google 设计的广度和工艺——从构想到进行中再到成品。通过展示设计背后富有想象力的人，我们希望揭示产品是如何被创造的，并加深你与产品的连接。”

它的核心理念是 “Design is never done”（设计永无止境）。它不输出一套固定的设计规则，而是通过持续的内容创作呈现设计的过程性和思辨性。官网文章”UX Design as Dance Theater”说：”就像舞蹈一样，伟大的产品设计在迭代、协作和对细节的关心中蓬勃发展。”

视觉特点： 杂志式编辑排版，首页采用全屏深色英雄区 + 奶油色内容区交替的结构，视觉节奏鲜明。使用超大号无衬线标题（文章标题占据半屏以上），配合简洁正文，呈现典型的编辑设计风格。按”Recent、Typography、UX、Guides、Archive”等主题分区，三列文章卡片网格。

内容资源： 不提供组件库，其”资源”是内容资产——Spotlight（深度特写）、Perspectives（观点）、Guides（指南）、Podcasts（播客）、Conversations（对话）。50+ 话题标签覆盖 AI、Art Direction、Color、Design systems、Figma、Fonts、Hardware、Industrial Design、Motion、Sound Design、Typography、Variable Fonts 等。代表文章包括”Code is a Design Material”（代码即设计材料）、”Designing for Transparent Screens”（为 AI 眼镜设计的显示系统）、”Making Google Sans Flex”（Google Sans 可变字体从诞生到开源）。

为什么值得学： 在设计系统日益同质化的今天，Google Design 提醒我们：设计不仅是可复用的 UI 组件，更是产品背后的人和故事。 它的文章质量极高，覆盖从 AI 眼镜界面设计到可变字体工程的前沿话题，是了解 Google 设计哲学最真实的窗口。其杂志式视觉风格本身也值得参考——为设计系统官网的”非工具页”提供了优秀范本。把它当作设计灵感和行业趋势的来源，定期阅读，比刷 Dribbble 上的碎片化作品有营养得多。

九系统速览：哪个适合你？

9 个系统各有侧重，不存在”最好的”，只有”最适合你当前项目的”。下面这张表帮你快速定位：

二、行动指南：如何开始学，如何用设计系统指导 AI

第一步：选 1-2 个系统深入读，不要贪多

9 个系统全部精读不现实，也没必要。根据你的产品类型选 1-2 个最对口的：

做移动端/App → Apple HIG + Material Design 3 – 做企业 SaaS/后台 → Microsoft Fluent 2 + Carbon – 做创意/专业工具 → Adobe Spectrum – 做营销/官网 → Mozilla Protocol – 做协作/AI 产品 → Atlassian Design – 想补设计哲学 → IBM Design Language + Google Design

读的时候不要只看组件长什么样，重点读 设计原则页面 和 Foundations（色彩/字体/间距）。理解”为什么”比记住”是什么”重要 10 倍。

第二步：把设计原则写进你的 AI Prompt

大多数人给 AI 的 prompt 是”帮我做一个好看的登录页”。这等于让 AI 自由发挥——结果就是 AI Slop。

更好的做法是把设计系统的原则写进 prompt：

<code> 使用 Material Design 3 的设计规范创建一个登录页。要求： ① 色彩使用 primary 色 #6750A4 及其 tonal palette，支持动态取色； ② 字体使用 Roboto，类型尺度遵循 display/headline/title/body/label 五级； ③ 间距使用 8dp 基准网格； ④ 按钮使用 Filled Button 样式，圆角 20dp； ⑤ 支持浅色/深色模式切换。 </code>

看到区别了吗？当你给出具体的设计 token 和规范时，AI 的输出质量会有质的飞跃。

第三步：用组件库约束 AI 的输出

如果你用的是有组件库的设计系统（如 Material、Carbon、Fluent），直接告诉 AI 使用哪个组件库的哪个组件，而不是让它”自己设计一个”：

❌ “做一个导航栏” → ✅ “使用 Material Design 3 的 Navigation Bar 组件” – ❌ “做个弹窗” → ✅ “使用 Carbon 的 Modal 组件，size=sm，包含 primary 和 secondary action” – ❌ “做个数据表格” → ✅ “使用 Fluent 2 的 Details List 组件，支持排序和筛选”

第四步：建立自己的"审美反馈循环"

学设计系统不是一次性的事，而是持续训练判断力的过程。建议：

拆产品： 每天用一个你觉得”好看”的 App 时，停下来想：它用了什么间距？色彩比例是多少？字体层级怎么排的？为什么这样设计？ – 对比 AI 输出： 每次 AI 生成界面后，拿它和设计系统的规范对比，找出至少 3 个不符合规范的地方，然后让 AI 修改。 – 建参考库： 把你觉得好的设计截图存下来，按”色彩/排版/布局/动效”分类，需要时给 AI 看参考图。 – 读 Google Design： 把它加入你的阅读列表，每周读一篇，了解设计前沿和方法论。

最后一句话： AI 是你手里的画笔，而设计系统是教你怎么画画的老师。画笔再好，不会画的人也只能涂鸦。不要满足于”AI 能做出来”，要追求”我知道什么是好的，并且能让 AI 做出来”。
从今天开始，选一个设计系统，读它的设计原则页面。只需要 30 分钟，你看 AI 生成的界面时，眼光就会不一样。

本文基于 2026 年 9 月各设计系统官网实际内容撰写 · 所有截图来自对应官网首页

原文首发于 X： https://x.com/shynloc/status/2095161607341101328

了解 ~/jintaoblog/朝夕见闻志⚡️ 的更多信息

订阅后即可通过电子邮件收到最新文章。