@planit/design-system Development Platform

Start your own Design System development platform in minutes!

As explained by the Nielsen Norman Group, a design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

There are various parts of a design system that are necessary:

1. Clearly documented design standards
2. The utilization of a design tooling platform like Figma or Sketch to provide assets to Designers
3. A component library to implement the system standards and abstract patterns to ensure consistency across applications
4. Development documentation with rich examples of component utilization within an application
5. A CSS framework that defines tokens utilized by the design tooling and component library

A design system is not purely technical, so this NPM package is not everything you need. It focues on numbers 3, 4, and 5. When a development platform is paired with an equally strong design platform, it's a recipe for success.

Prerequisites

Before you install, please make sure you are have a Node.js LTS Version installed on your machine.

Installation

Run npx @planit/design-system <your-project-name> to install the project.

If you do not pass a project name, a default name will be provided.

You may also provide an author name if you'd like:

npx @planit/design-system <your-project-name> <author-name>

Documentation

When the package is installed, a Get Started application will launch in your browser window with instructions on how to start building your design system platform.