一、了解设计系统
本单元介绍设计系统：什么是设计系统、设计系统的关键角色，以及 Salesforce Lightning Design System（SLDS）如何作为 Salesforce 的设计系统。
学完本单元，你将能够：识别良好设计系统的特性与能力、描述设计师与开发者如何使用/贡献/管理设计系统、解释 SLDS 如何帮助开发者在 Salesforce 平台构建解决方案、描述 SLDS 与大多数设计系统有何不同。
什么是设计系统（What Is a Design System?）
先定义设计系统：它是可复用 UI 元素（称为组件）与可重复设计模式的集合。
组件可包括按钮、菜单、声音、动画、视觉模式等；部分设计系统提供构建在 UI 平台上的完整功能组件，而 SLDS 这类则提供平台无关的组件（提供 HTML 与 CSS，但不含功能代码）。模式是针对常见用户问题或任务的可复用、文档化解决方案，由组件、布局与交互的特定组合构成完整的用户体验（如多步表单、登录页）。简言之，UI 模式指导组件如何组织与交互以提供最佳体验。设计系统是指导产品创建的综合标准集，涵盖模式、组件、指南与最佳实践库，确保设计一致。
一个好的设计系统是：可扩展（Scalable）——随系统成熟，构建基础元素的花费更少、可复用；高效（Efficient）——让设计师与开发者专注可用性与意义；视觉一致（Visually cohesive）——标准化组件强化视觉风格与品牌；共享（Shared）——可复用、文档化、可访问的元素支持协作。设计系统还能让你大规模管理设计，随需求变化快速更新界面。
关键角色：消费者（Consumers）——使用设计系统元素构建应用的设计师、开发者与利益相关者；贡献者（Contributors）——创建构成设计系统的元素与模式，任何人都可提议新元素或修改建议；策展人（Curators）——设计系统的守护者，维护系统、审查更新并教育社区。
在 Salesforce，SLDS 帮助团队高效、规模化地设计一致的产品体验：用例特定的模式让设计师更快迭代，组件开发者始终拥有最新框架，客户与合作伙伴用频繁更新、干净一致的系统构建定制。大多数设计系统提供完整功能代码，但 SLDS 因支持 LWC、React 等多种代码库而必须保持独立——Salesforce 通过 Lightning base components 提供实现许多 SLDS 组件设计的功能代码。注意：SLDS 现有两个版本——Spring '25 引入 SLDS 2（用 styling hooks 实现更深定制与主题化，可选的 Cosmos 主题），原始 SLDS 现称 SLDS 1。
二、了解 SLDS 的开发历史与原因
本单元追溯 SLDS 的演进——从早期不一致的 UI，到原始 Lightning Design System，再到今天 SLDS 1 与 SLDS 2 并存。
学完本单元，你将能够：描述影响 SLDS 开发的条件、解释 SLDS 设计系统团队的目标。
SLDS 的起源故事（The Origin Story）
Salesforce 并非一直有完善的设计系统。SLDS 1 走了一条迂回的道路，它响应 Salesforce 的增长、技术变化与日益增长的用户需求而演进。故事始于 2013 年，Lightning Experience 发布前两年：Salesforce 快速增长，正准备推出首个完整移动版平台 Salesforce1。设计师与开发者意识到需要确保全系 Salesforce 应用的一致体验，并为一个随公司演进的系统奠定基础。
于是这个团队开始记录模式库并构建初始样式指南。Salesforce1 工程团队选择了design tokens（设计令牌）来描述跨原生操作系统与 Web 应用工作的样式指南值。到 2015 年初，设计师与开发者把模式库与令牌和扩展的 CSS 框架结合，创建了 Landmark Design System——围绕 HTML 蓝图而非完整功能组件构建，以确保与任何平台协作。
随后团队用名为 Lightning Experience 的全面视觉语言重新设计 Salesforce Classic（Aloha）UI，目标：帮助销售用户更快成交、提高服务用户生产力、为所有用户提供现代 UI。2015 年，设计指南与 CSS 框架结合，Lightning Experience 从移动扩展到桌面；Salesforce CEO Marc Benioff 将其更名为 Salesforce Lightning Design System（SLDS）。2016 年初 SLDS CSS 框架加入核心 Salesforce 代码，SLDS 现称 SLDS 1。早期采用者包括 Sales Cloud、Salesforce Mobile、Service Cloud。为响应客户请求，Salesforce 在 v1.lightningdesignsystem.com 推出了全球首个开源企业设计系统。
SLDS 1 与 SLDS 2——两个系统，一个愿景
到 2018 年，Salesforce 平台全面采用 SLDS 1，定期发布影响整个平台的更新。随着增长，设计系统在使命上面临挑战：在 3 年增长 5 倍的情况下维持一致的用户体验，需要仔细权衡多次收购、新产品、技术变化与每次大版本的优先级变化。SLDS 团队不仅随每次发布更新模式，还整合新的设计元素到 SLDS 1。
今天 Salesforce 维护两个版本的 SLDS：SLDS 1（2015 年发布，企业设计的标准，提供语义化可访问的组件标记、跨浏览器兼容的 CSS、图标、字体与设计指南，使用 BEM 命名如 .slds-button）；SLDS 2（2024 年发布，基于 Lightning Platform 的 Salesforce 产品 agentic 设计系统基础，用design tokens与styling hooks 带来灵活样式框架与高级主题化、支持 dark mode，强调开箱即用的 base Lightning components 而非蓝图）。两者并存——可在同一 org 使用，SLDS 2 是新开发的战略方向，SLDS 1 继续为现有实现维护。按自己的节奏迁移。
三、成为 SLDS 的倡导者
本单元探索设计系统的人性化一面：为什么采用是共同责任、为什么使用共享设计系统让所有人受益，以及 SLDS 大使如何在组织内外倡导最佳实践。
学完本单元，你将能够：描述设计系统团队的结构与职责、倡导 SLDS 的采用。
为什么设计系统需要倡导（Why Design Systems Need Advocacy）
设计系统的价值取决于其采用程度——组件与指南如果没人用就毫无价值。团队抵制设计系统的常见理由："自定义更快"（长期并非如此）、"我们的用例特殊"（很少）、"设计系统没有我们需要的"（贡献回去！）。使用 SLDS 让所有人受益：用户获得跨产品一致、可预测的体验；设计师专注于解决问题而非重画按钮；开发者用预构建、已测试、可访问的组件更快构建；组织减少技术债务与上手时间。
整个 SLDS 是整个社区的责任。设计系统团队策展 SLDS 1 与 SLDS 2 并维护网站、教育大众、构建工具、与工程团队协调；同时 Salesforce 研究员、无障碍专家、产品设计师、产品经理与工程师通过识别 SLDS 模式尚未解决的问题来贡献。外部还有庞大的合作伙伴与客户生态依赖活跃社区来产生想法、提供反馈、提交贡献。
为什么用 SLDS：没人被强制使用，但大多数 Salesforce 设计师都使用——一致性设计改善用户体验，因为用户知道该期待什么、如何使用 Salesforce 应用的标准部分。使用 SLDS 能帮助任何规模的项目顺畅运行，减少工作量与技术债务，惠及 Lightning 主题、显示密度、从右到左本地化与 dark mode 等领域。它还帮你构建：使用结构化、已验证、可信的模式；提高功能采用率；更快扩展、更少技术债务；为残障用户提供无障碍；反映 Salesforce 品牌。为最大化收益，可提名一位 SLDS 大使——充当设计师/开发者与 SLDS 策展人之间的联络人，分享信息、反馈、建议与贡献。
四、探索 SLDS 资源
本单元探索实际可用的资源：SLDS 网站（组件蓝图与设计指南）、设计令牌系统、工具，以及 SLDS 的未来。
学完本单元，你将能够：描述 SLDS 1 的主要资源（设计指南、组件蓝图、设计令牌）、访问 SLDS 1 关于设计/无障碍/语气语调的文档。
SLDS 资源与未来（SLDS Resources and the Future）
设计系统团队的官方目标：通过人的指导与内部工具，在我们的产品中建立高质量、品牌一致的体验。团队通过赋能设计师与开发者提供"人的指导"，帮助贡献者理解小改动如何影响更大系统，并构建工具（交互指南、视觉设计指南等）。
SLDS 1 的核心要素：设计指南（Design guidelines）（SLDS 2 中称"模式"）——描述如何根据特定用例使用模式与组件，回答"数据如何显示/录入、搜索如何处理、UI 如何表示加载中"等大问题；组件蓝图（Component blueprints）——静态、框架无关、可访问的 HTML 与 CSS（如复选框、页眉、动态菜单），开发者用蓝图构建组件（需与 JavaScript 框架集成才能交互）；设计令牌（Design tokens）——存储视觉设计属性的命名实体，用令牌代替硬编码值（如颜色的 hex 值、间距的像素值），更新令牌值即自动更新所有实例，便于跨 Web 与原生应用更新与扩展设计元素。
更多资源：工具（API、插件、设计套件）；语气语调指南（让 Salesforce 内容清晰、一致、有吸引力）；无障碍指南（帮助残障人士感知、理解、导航、交互，所有 Salesforce 应用努力达到 WC3 WCAG 2.0 AA 标准——为所有鼠标操作提供键盘替代、正确标注表单字段与按钮、为所有图片/视频/图标/SVG 提供文本替代，每个 SLDS 1 组件必须用 ARIA 标记向辅助技术标识自己）。注意 SLDS 2 架构不同：它解耦结构与视觉样式以提供真正定制与主题化能力，优先 CSS 自定义属性而非设计令牌，强调开箱即用的 base Lightning components，为未来的 AI-ready 组件奠基。
SLDS 的未来：Salesforce 是设计系统领域的行业领导者，SLDS 1 是全球首个开源企业设计系统。如今 SLDS 团队正在思考下一代系统的问题：设计系统如何利用 AI 与 agent？能否让任何人在任何 JavaScript 平台使用 Lightning Web Components 而无需重写代码？多个设计系统如何相互构建、把用例扩展到其他主题？无论答案如何，问题会不断出现，SLDS 会继续演进。