百度
内容生态 Design System
There’s a lot of rumors of a big impending UI redesign from Apple.
Let’s imagine what’s (or what could be) next for the design of iPhones, Macs and iPads.
Timeline
Timeline
2024 - Now
Teammates
Product & Engineering
Contributions
Product Design, Product Management, Strategy
内容概览
Section 01
项目背景
我于 2023 年夏天加入百度 MEUX 体验设计中心，主导搭建新一代内容生态设计系统，目标是为百家号生态下的多类产品提供一致性强、可扩展性高的设计支持。
该项目几乎从零开始，旨在构建一套灵活、可定制、具备持续演进能力的系统，能够覆盖从创作者平台 (百家号)、营销平台 (度星选) 及 AIGC 工具 (度加)，到多种内部运营与管理工具在内的多样化产品形态与界面需求。
在此之前，团队依赖的是一个基于 Ant Design 代码库逐步演化而来的 React 组件集合。尽管积累深厚，但这一架构已难以支撑日益增长的业务复杂性与产品场景的差异化，亟需一次系统性的重构与升级。
Baidu 内容生态产品业务概览
内容生态产品体系的 UI 场景高度多样，涵盖下图内容：
我联合设计及前端团队，通过对 组件抽象、模块化建设、Token 语义规范、组件工程标准 的系统性构建，确立了一套统一的设计语言与技术方案选型，实现了设计系统的全面重构与落地应用。
内容生态的主要业务产品范围
Section 02
设计变量引入内容生态
在我加入百度时，Design Token 已不再是新兴概念。
早在 2022 年，我在快手中台团队主导并落地了面向 B 端效率工具的 Design Token 体系。相比之下，百度内容生态仍普遍采用十六进制硬编码，缺乏语义统一与系统治理。
因此，在设计系统的初期建设阶段，我将 Design Token 的引入与规范化作为高优任务。从构建基础变量体系着手，逐步推进视觉属性的语义抽象与组件结构的系统重构，并与前端团队协作建立跨平台适配的 Token 管理机制，为后续的主题系统扩展、暗黑模式支持及品牌风格切换打下基础。
Design Token 概览
我主导了从零构建 Design Token 体系，覆盖颜色、排版、尺寸、边框、阴影与动效等多个维度，逐步建立了超过 300 枚语义化 Token，并通过 Figma 与代码双轨驱动，实现高效协同与持续演进的交付机制。
从触发到内容分发，全面提升创作效率与参与意愿。
三层级变量结构
在 Design Token 的体系设计中，我结合过往实践经验与行业成熟范式，构建了一套更契合内容生态的三层级结构：01-基础变量（Base Tokens）、02-场景变量（Contextual Tokens）、03-语义变量（Semantic Tokens）。这一结构并非简单的分组命名，而是自底向上的派生体系，支持变量的递进式抽象与灵活复用。
从触发到内容分发，全面提升创作效率与参与意愿。
语意化的 Design Token 建设
从设计工程化的视角来看，Design Token 的语义化命名与规范构建，本质上是一种 CSS 变量设计实践。
提升语义清晰度与可读性：采用字符分隔，可以构建如
[Category]-[Property]-[Variant]-[State]的层级结构，使 Token 命名本身就成为一种自解释的文档。遵循 Web 原生技术规范：该命名方式与原生 CSS 自定义属性 (
--kebab-case) 的格式完全一致。这确保了设计系统在 Web 端的实现最为直接、优雅。
从触发到内容分发，全面提升创作效率与参与意愿。
无缝对接自动化工具链：主流的 Design Token 自动化工具（如 Style Dictionary, Tokens Studio 等）在解析和生成多平台代码时，默认将 Token 的层级结构映射为字符分隔式。
保障跨平台扩展的一致性：字符分隔式作为一种在 Web, iOS (Swift), Android (XML) 等主流平台中都能被原生、无歧义解析的“最大公约数”。
从触发到内容分发，全面提升创作效率与参与意愿。
在进行变量的语义化设计时，我将它们解构为两种核心类型：数值尺度 (Value Scale) 变量 与 用途语境 (Contextual Use) 变量。这两者共同构建了一个稳定灵活的 Token 体系。
这类变量通过量化分级来命名。其核心目的是为基础视觉属性（如字号、间距、层高、动画时长）建立一套有限且有序的选择集。这从源头上约束了设计的随意性，确保了整个产品视觉输出的统一与和谐。
从触发到内容分发，全面提升创作效率与参与意愿。
用途语境化变量：系统的“设计语言”
这类变量通过描述其应用场景和功能来命名，名称可直接体现设计意图。它的价值在于将设计决策与具体的“数值”解耦。
从触发到内容分发，全面提升创作效率与参与意愿。
WCAG 2.1 AA 色彩对比度标准
我将无障碍标准（WCAG）纳入 Design Token 体系的构建讨论，主要原因在于其核心要求与颜色值的明度对比紧密相关。不含涉及界面缩放 200% 等与布局尺寸有关的标准 —— 这一部分在当前阶段确实覆盖较浅。
根据 2022 年的埋点数据，百度内容生态的大量用户依旧使用中低端 Windows 显示器和设备，这对文字与背景的可读性提出了更高要求。
考虑到实际视觉设计的灵活性与用户设备的多样性，我们未采用 WCAG 的 AAA 级对比度标准，而是以 AA 级作为系统设计的目标标准。这一选择也符合 W3C 的建议——不应将 AAA 级作为整站强制性标准，因为部分内容在视觉设计与交互上难以全面满足其全部要求。
通过 Figma 插件对所有颜色变量进行系统审查，我们确保其在一级与二级核心页面中的实际对比度均满足 WCAG AA 标准，兼顾了设计表达与可达性要求。
从触发到内容分发，全面提升创作效率与参与意愿。
Section 02
Figma 的组件化建设
Figma 组件化是设计系统的核心产出，其基础搭建方法与实践已非常成熟。因此，这里将不再赘述基础组件的搭建过程，我想深入探讨的是超越“标准答案”的部分。
我将重点阐述，在百度内容生态的特定业务需求驱动下，我所主导的几项关键的、区别于以往实践的 Figma 组件化升级。
从触发到内容分发，全面提升创作效率与参与意愿。
建立 Figma Properties 与代码 Props 的映射
组件工程化的核心，是在设计师与开发者之间建立一套统一的语言，而组件的 属性（Properties / Props） 正是这门语言的核心。
Figma 的组件属性（如 Variants, Boolean）本质上是 视觉/交互配置的集合，而 React 等框架中的 Props 则是 逻辑与功能的接口。这种差异是导致设计与研发无法真正实现对齐的主要原因。
从触发到内容分发，全面提升创作效率与参与意愿。
Fig Auto Layout 的结构性价值：从 Flexbox 设计组件布局
组件化建设的第二个关键要素是布局的结构化，Auto Layout 在 Figma 中的引入改变了设计师对布局的认知。
从触发到内容分发，全面提升创作效率与参与意愿。
插槽机制：组件灵活性的新范式
设计系统面临的一个根本难题是如何在规范性与灵活性之间找到平衡。插槽（Slot）机制正是这一问题的有效解决方案。
<slot> 概念compound.thephoenixgroup.com，在设计层面上提供了一个空白占位符，允许设计师在不拆散（detach）组件的情况下插入各种所需的子内容。我在项目中广泛实践插槽方法，允许组件内部预留可替换的占位区域，设计师在不拆解组件（Detach）的情况下，通过插槽替换实现个性化内容，进而避免业务文件与库之间失去联系。从触发到内容分发，全面提升创作效率与参与意愿。
从 UI 到 Pattern
随着组件系统的成熟，我们逐渐意识到仅停留在 UI 层面的组件是不够的，更深层次的抽象模式（Pattern）才能真正推动设计质量的提升和决策效率的提高。然而，模式建设是一项高成本、高投入的工作，需要谨慎推进。
组件解决“做出来” 的问题，强调可复制性；
模式解决“应该怎么做” 的问题，更抽象也更耗时；
等视觉、行为一致性达到 80% 后，再挑一两个关键流程抽象成模式，别一开始就追求“大而全”。
从触发到内容分发，全面提升创作效率与参与意愿。
Section 03
数字资产的云端化建设
在数字资产（图标、插画、空状态）的建设层面，我主要帮助 Baidu 内容生态完整建设了「数字资产的云端化交付与管理」体系。这里你可以查看我们的NPM资产集合。
这里我不再讨论基础性的图标绘制或规范概念，更多说一说数字资产的自动化交付流程，因为：在当代前端开发与设计协作中，图标系统已不再是简单的视觉资产集合，而是演变为一个集性能优化、体验提升和流程自动化于一体的复杂工程。
全面 SVG 代码化
虽然在我接手内容生态时已经拥有了大量的SVG图标，但早期产品各个业务页面依然遗留大量PNG资源。全盘遍历线上遗留图标，进行归纳、聚合、去重，并全面SVG化。
SVG 在不同像素密度屏幕下表现清晰，且具备丰富的设计控制能力。为实现图标的动态响应式尺寸，我们将 SVG 的单位由传统的像素（px）转换为 em。这使得图标尺寸能根据所在父元素字体大小动态调整，确保视觉表现的和谐与统一。
针对 Figma 默认导出 px 单位的问题，我专门开发了自动化工具，批量将 SVG 文件的 px 单位转换为 em，彻底解决了设计到开发的适配问题。
从触发到内容分发，全面提升创作效率与参与意愿。
Section 04
设计系统的文档化建设
设计系统文档化也属于设计系统建设的重要产物之一。也许大众理解的DS核心只是组件库，但文档工具也承载了一半以上的DS知识性产出。进而避免，尽管系统本身在不断迭代，但相关的知识和规范却散落在各处，不成体系。
我们面临的首要问题不是“写什么”，而是“写在哪里”。这个问题我在快手设计中台团队就经历和实践过，但过往的经验让我对文档化形态有新思考。
首先，静态的PDF文件早已过时。而内置CMS的静态站点工具则是现在的主流，这也是我在快手的技术选型方案。但实践告诉我，除了设计角色，其它职能根本就想不起来站点的URL或者完全忘记了它的存在。根本原因是企业中的阅读和记录习惯让他们更为直觉的想到：企业文档或者Figma文档。
从触发到内容分发，全面提升创作效率与参与意愿。
因此本次我并没有再押注到单一的设计系统文档站点，而是基于不同只能角色的习惯进行有点到线的关联：
使用指南和最佳实践、组件使用场景、设计规范等一系列偏向于内容指南的部分，我通过百度如流文档建设，这也是大家看文字类文档的习惯；
可交互式组件、组件API则由研发自行维护，我推荐通过Domi等自动化文档建设工具搭建；
设计侧的基础与业务组件则在Figma中进行维护，可直接复制到业务文件中，加速需求完成效率；
重要的是如何链接：Figma中每个组件都会绑定规范使用指南链接，同时会添加组件代码API链接。这方便了设计与研发双角色；
通过 Figma 的 Code Connect 功能，让开发者在 Dev Mode 中就能拿到符合我们规范的代码；
Section 05
设计系统的文档化建设
在构建内容生态设计系统的过程中，我始终坚持「度量先行」。借助 Figma Library Analytics，我不仅追踪按钮等核心组件的实例数与插入次数，还提出“相对采纳率”——统计系统组件在整份设计文件中的占比，以真实反映渗透度。
我将度量框架拆分为质量与效能两条主线：
质量关注组件分离率与变体覆盖率，直接衡量系统健康；
效能通过需求吞吐增幅量化设计与研发协同带来的工时回报。
你可以延伸阅读我在百度定制的所有详细度量指标。