概述
设计系统为 Shopify、IBM、Salesforce、Airbnb、Twitter 等许多公司的前端团队提供支持。本指南面向专业开发者,探讨了最优秀的团队如何大规模构建设计系统,以及他们使用这些工具的原因。我们将逐步介绍如何从头开始建立核心服务、库和工作流来开发设计系统。
目录您将构建什么
Emotion
Prettier
GitHub Actions
ESLint
Chromatic
Rollup
npm
Auto
在我们构建一个受 Storybook 自身 启发的设计系统的过程中,跟随我们的脚步。我们将通过检查设计系统的三个技术部分来学习开发者对设计系统的看法。
- 🏗 常用可复用 UI 组件
- 🎨 设计令牌:样式特定的变量,例如品牌颜色和间距
- 📕 文档站点:使用说明、叙述、注意事项
之后,我们将建立用于审查、测试、文档和分发的工业级基础设施。
作者

Dominic Nguyen
Storybook 设计
Tom Coleman
Storybook 核心
审阅者




Fernando Carrettoni
Auth0 的设计系统
Jessie Wu
纽约时报工程师
John Crisp
Acivilate 工程师
Daniel Duan
Squarespace 工程师
Kaelig Deloumeau-Prigent
Shopify 的 UX 开发