總覽
設計系統為 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 開發