设计系统中的 HTML

设计系统是一个共享库，包含组件、令牌、模式和指南，供组织的各个产品使用。该系统的 HTML 部分封装了标记约定，使每个产品都能呈现结构一致的按钮、模态框、表单和卡片。

令牌是原子化的设计值（颜色：blue-500，间距：16px）。组件是可复用的 HTML+CSS+JS 单元（按钮、模态框、TextField）。模式是更高层次的组合（登录表单、带头像的内容卡片）。HTML 结构在组件层级固定，模式则负责组合组件。

组件会编码最佳实践：每个按钮都使用 <button> 元素，而不是 div，并设置正确的类型属性。每个模态框都会限制焦点移动、支持退出键，并使用正确的 ARIA 角色。采用组件可以避免为每个产品功能重复实现无障碍支持。

Storybook 会在隔离环境中，使用各种属性和变体渲染每个组件。设计师和产品经理无需阅读代码，就能看到可用的组件；开发者无需搜索源代码，就能看到使用示例。它是设计系统文档的实际标准。

将设计系统视为一个按语义化版本发布的包。具有破坏性的 HTML/CSS 变更（例如重命名使用方所依赖的 CSS 类，或移除组件插槽）应提升主版本号。使用方可以按照自己的计划有意进行更新，而不会被意外变更打个措手不及。

组件属性、插槽和暴露部分构成公共接口。一旦发布给使用方，就应将它们视为修改代价很高的内容。请逐步弃用：在旧接口旁边添加新接口，针对旧用法记录警告，经过充分评估的时间后再移除旧接口。

令牌支持主题切换：替换颜色令牌映射后，每个组件都会采用新的调色板。当令牌驱动一切、组件引用令牌而不是硬编码值时，白标化（不同品牌共享组件但使用不同视觉样式）就会变得非常简单。

对于使用多个框架（React、Vue、Angular）的组织，网页组件可以提供一套在各处都能使用的实现。使用 Lit、FAST 或原生方式构建，然后在任何框架中以相同方式使用。HTML 结构才是契约，而不是框架。

设计系统会为每个组件一次性内置无障碍支持：键盘操作处理、ARIA 角色、焦点管理和色彩对比度。采用该系统的产品团队可以直接继承无障碍能力，而不必从头构建每项功能，从而可量化地减少整个公司的无障碍错误。

跟踪哪些产品使用设计系统的哪些版本。Backstage 的组件目录、监控 package.json 的自定义 Slack 机器人，或简单的内部仪表板，都能显示哪些地方尚未采用最新版本。采用率指标可以证明持续投入的必要性。

确定谁可以添加组件：只能由中央设计系统团队负责？还是接受产品团队的分布式贡献？每种模式都有各自的权衡。中央团队发布速度较慢，但能维护质量；分布式团队行动迅速，却有碎片化的风险。请根据组织规模审慎选择。

设计系统是持续演进的产品。随着产品中出现新的模式，添加相应组件；弃用不再适用的组件；当根本性决策需要改变时进行重构。将系统视为有路线图的软件，而不是已经完成的成品。

为什么设计令牌（例如颜色：blue-500、间距：16px）比组件中的硬编码值更受青睐？

设计系统将令牌（原子化的值）、组件（可复用的 HTML 单元）和模式（更高层次的组合）打包成一个供各产品共享的带版本库。使用 Storybook 编写文档，使用网页组件实现跨框架使用，并使用语义化版本保证稳定性。为每个组件内置无障碍支持，跟踪采用情况，并将系统作为持续演进的产品不断改进。