设计系统 CLI 使用指南

项目介绍

设计系统 CLI（Design Systems CLI）是由 Intuit 开发的一个命令行工具箱，旨在帮助开发者快速创建和管理设计系统。它提供了一套完整的工具，支持 TypeScript、CSS 和 styled-components，并且能够输出 CommonJS 和 ES Module 格式的代码。设计系统 CLI 的目标是减少开发者配置工具链的时间，让开发者能够专注于设计和开发高质量的组件。

项目快速启动

安装

首先，确保你已经安装了 Node.js（版本 >= 10.18.1）和 Yarn。然后，你可以通过以下命令安装设计系统 CLI：

npm install -g @design-systems/cli

创建新项目

安装完成后，你可以使用以下命令创建一个新的设计系统项目：

npx design-systems-cli init my-design-system

启动项目

进入项目目录并启动项目：

cd my-design-system
yarn start

构建项目

使用以下命令构建项目：

yarn build

应用案例和最佳实践

应用案例

设计系统 CLI 已经被许多公司和团队用于创建和管理他们的设计系统。例如，Intuit 使用它来维护他们的设计系统，确保所有产品的一致性和高质量的用户体验。

最佳实践

1. 组件化设计：使用设计系统 CLI 创建的组件应该是独立的，能够在不同的项目中复用。
2. 自动化测试：利用设计系统 CLI 提供的测试工具，确保每个组件的质量。
3. 文档化：使用 Storybook 和 Playroom 等工具，为你的设计系统创建详细的文档。

典型生态项目

Storybook

Storybook 是一个用于开发和展示 UI 组件的工具。设计系统 CLI 与 Storybook 集成，可以帮助你快速创建和展示组件。

Playroom

Playroom 是一个用于实时设计和测试组件的工具。设计系统 CLI 支持 Playroom，让你能够在不同的上下文中尝试和调整组件。

Jest

Jest 是一个流行的 JavaScript 测试框架。设计系统 CLI 内置了对 Jest 的支持，让你能够轻松地为你的组件编写单元测试。

ESLint

ESLint 是一个用于检查和修复 JavaScript 代码的工具。设计系统 CLI 集成了 ESLint，帮助你保持代码的一致性和质量。

通过这些工具和最佳实践，设计系统 CLI 能够帮助你快速创建和管理高质量的设计系统。