A year ago, my team at Intuit released Design Systems CLI, a set of tools we use to build design systems. Over time we’ve made major upgrades and released documentation components, but we have never released a full design system built using all of the tools — until today!

Meet the Devtools Design System.

Devtools design system logo on intuit background
Devtools design system logo on intuit background

Introduction

Devtools DS is a design system for recreating the “devtools” panel from popular browsers. You can recreate the browser console, DOM inspector, network inspector and other common patterns for debugging websites.


In January of this year, my team at Intuit open-sourced our project Design Systems CLI. It’s a tool that simplifies every part of developing components and libraries in a design system. Since then, we’ve been hard at work scaling and improving the project for teams inside and outside of Intuit. I’m excited to announce that we recently released some new features to simplify CSS imports and enable multiple CSS builds for design systems.

Wire frame designs for a design system
Wire frame designs for a design system
Photo by Halacious on Unsplash

Building and publishing CSS can be complicated, which is why many developers choose to use a CSS-in-JS solution like Styled Components. This post is not focused on…


This project is going to be showcased at Developer Week in February. Stop by the Intuit booth to see demos and ask questions. Our team will also be doing a joint talk with Storybook on Thursday. See you there!

Introduction

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…


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 Logo
Design Systems CLI Logo
Design Systems CLI Graphic by Kelly Harrop

Features

Create: A…

Tyler Krupicka

Software Engineer in San Diego, CA

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store