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
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.
Size: Generate statistics about the bundle size of your components. This command also includes tools for debugging and diffing changes.
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.
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.
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:
"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"
Here are some of the amazing tools that made this project possible:
- 📕 Storybook: Develop and Document UI Components
- 👓 Proof: Run automated tests against components in StoryBook
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.
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!