Introducing Design Systems CLI

Design systems are a growing ecosystem for building and documenting reusable interface components on the web. New tools are redefining the development experience for teams creating modern JavaScript web applications.

Design Systems CLI is a simple command-line tool for scaffolding, developing, testing, building, and documenting JavaScript components. It uses a variety of awesome open source tools, as well as some new ones, to automate most of the setup work that can make managing a design system seem daunting. It’s a tool that has significantly improved developer velocity at Intuit, and we hope others will find it equally useful.

Design Systems CLI Graphic by Kelly Harrop

Features

Create: A scaffolding command that sets up new design systems, components, and packages. We have default templates but you can always bring your own!

Build: A simple build step which outputs commonjs , esm , and css artifacts for your components.

Dev: Start a Storybook instance for development and watch for changes. When run from a component’s directory, it automatically finds dependencies and builds what is needed.

Proof: Run Proof, our test runner for Storybook. You can use it to do browser automation, accessibility scans, and screenshot testing.

Size: Generate statistics about the bundle size of your components. This command also includes tools for debugging and diffing changes.

And More: There are also commands for common tasks like cleaning, linting, building storybook, testing, and fetching updates. Read more in our documentation.

Beginnings

At Intuit, we’ve been on a multi-year journey to separate our base interface styles from application code and business logic. In parallel, there are multiple initiatives working to unify the design of our products such as TurboTax, QuickBooks, Turbo, and Mint. Our team works on a core UI framework where we end up creating many of the UI components used in TurboTax. We are constantly iterating on our development process to increase velocity and encourage contribution across teams.

Very quickly we discovered Storybook, which has amazing capabilities for developing and documenting components. Design Systems CLI is the product of almost a year developing tools around a large Storybook project.

Benefits

Many teams inside the company are comfortable using projects like create-react-app, but that tool is mainly focused on building full web applications using React. We wanted to make something that has the same productivity benefits for design systems, including default configurations for all of the required tooling.

Since the primary users of components are other developers, we really just want to do a minimal build that ensures the component will run in any JavaScript environment, including CommonJS and ESM. We also built tools around PostCSS, such as postcss-themed, which allow us to write themed components across products.

This also led to the develop feature, which saves a lot of time while authoring components. In a large system, Storybook can take minutes to start up while building every component. Building just the dependencies you need saves time and keeps development speed constant.

We introduced templates to take all of the guesswork out of setting up a monorepo or scaffolding a component. It also helps standardize code organization between teams, which makes components easier to move between systems.

Lastly, we spent a lot of time on the testing and debugging experience in the design system. Proof allowed us to bring all of our usual testing practices into Storybook — such as accessibility scans and visual regression tests. We also use the size command to optimize for component download time.

We’ve reached a point where so much of our tooling is configured through the CLI, the scripts for our packages look like this:

"scripts": {
  "clean": "ds clean",
  "build": "ds build",
  "dev": "ds dev",
  "storybook": "ds storybook start",
  "start": "ds build --watch",
  "test": "ds test",
  "lint": "ds lint",
  "size": "ds size"
}

Tools

Here are some of the amazing tools that made this project possible:

• 📕 Storybook: Develop and Document UI Components
• 🐟 Babel: Use next generation JavaScript language features
• 💅 PostCSS: A tool for transforming CSS with JavaScript
• 📐 ESLint: Linting utility for JavaScript
• 👓 Proof: Run automated tests against components in StoryBook
• 🔌 Tapable: A tool for adding plugins to JavaScript projects

Photo by Christopher Gower on Unsplash

Try It Out!

Head over to our documentation site to get started. From there you can set up a project using our default templates, and develop your first component!

If you have any issues or suggestions don’t hesitate to reach out on GitHub. We’re always open to contributions big or small.

Thanks

Development of this project was primarily led by Andrew Lisowski, with help from Adam Dierkens, Tyler Krupicka, and Kendall Gassner. In addition we had a lot of feedback, testing, and support from teams across Intuit who have been developing or designing components. We also appreciate all of the open source maintainers who built amazing tools and helped with our pull requests. Thank you to everyone who supported the project!