Get easily started with design tokens using Designex CLI. Features a wide range of templates, pre-built configurations, and live reloading for seamless design system integration.
- 🚀 Quick Start - Run Designex Setup to setup ready-to-use token templates and get your project running in seconds.
- 🔨 Easy Build - Use Designex Build to convert your tokens into platform-ready formats.
- 👀 Live Updates - Use Designex Build Watch to see changes instantly while you work.
The Cli is build with Oclif. A great and efficient Cli framework, check it out.
Depending on the template selected it will use the following dependencies:
- Style Dictionary v.4.3.0
- Tokens Studio v.1.2.9
- SD Tailwindcss Transformer v.2.0.0
You can choose any another version by adding the packages into your own package.json file under "dependencies". Some scripts from the templates may not work properly with some other versions
npm install -D @netoum/designex
npx designex setup --template=tailwind/v4/style-dictionary
npx designex build$ npm install -D @netoum/designex
$ npx designex COMMAND
running command...
$ npx designex --version
@netoum/designex/1.0.2 linux-x64 node-v22.9.0
$ npx designex --help [COMMAND]
USAGE
$ designex COMMAND
...Build and Watch your design tokens from the configured script into the configured build path. Depending on your scripts it is created the desired export format (js, css ...)
USAGE
$ npx designex build [--config <value>] [--dir <value>] [--script <value>] [--tokens <value>] [--tokensMulti
<value>] [--watch]
FLAGS
--config=<value> [default: designex.config.json] Path of the configuration file to use for build. If you modify
the setup section of the configuration file, you must run again designex setup to setup the new
template
--dir=<value> Path of the directory to build the design tokens
--script=<value> [default: build.mjs] Script file name to use to build the design tokens
--tokens=<value> [default: tokens] Tokens directory path to use to build the design tokens
--tokensMulti=<value> [default: tokens/multi] If using transform from single to multi files, select your generated
files to be ignored suring watch process. By defaul on all templates it is set to
`tokens/multi`
--watch Watch changes on the tokens directory and build design tokens on changes
DESCRIPTION
Build and Watch your design tokens from the configured script into the configured build path. Depending on your
scripts it is created the desired export format (js, css ...)
EXAMPLES
$ npx designex build
See code: src/commands/build.ts
Display help for designex.
USAGE
$ npx designex help [COMMAND...] [-n]
ARGUMENTS
COMMAND... Command to show help for.
FLAGS
-n, --nested-commands Include all nested commands in the output.
DESCRIPTION
Display help for designex.
See code: @oclif/plugin-help
Setup your design tokens from a selection of Designex templates. It will create the tokens and scripts files needed to build the design tokens.
USAGE
$ npx designex setup [--clean] [--config <value>] [--dir <value>] [--skipPreparse] [--template
shadcn/tokens-studio/single|shadcn/tokens-studio/multi|shadcn/style-dictionary|tailwind/v4/style-dictionary|tailwind
/v4/tokens-studio/single|tailwind/v4/tokens-studio/multi|tailwind/v3/tokens-studio/single|tailwind/v3/tokens-studio/
multi|mozilla/tokens-studio/single|mozilla/tokens-studio/multi|material/tokens-studio/single|material/tokens-studio/
multi|material/style-dictionary]
FLAGS
--[no-]clean
By default, it will delete previous tokens and scripts at the selected target location. Select --no-clean to keep
your previous files
--config=<value>
[default: designex.config.json] Path of the configuration file to use for setup. If you modify the setup section of
the configuration file, you must run again designex setup to setup the new template
--dir=<value>
Path of the directory to copy the template to.
--skipPreparse
--template=<option>
[default: shadcn/tokens-studio/single] Tokens and script template to use for setup
<options: shadcn/tokens-studio/single|shadcn/tokens-studio/multi|shadcn/style-dictionary|tailwind/v4/style-dictionar
y|tailwind/v4/tokens-studio/single|tailwind/v4/tokens-studio/multi|tailwind/v3/tokens-studio/single|tailwind/v3/toke
ns-studio/multi|mozilla/tokens-studio/single|mozilla/tokens-studio/multi|material/tokens-studio/single|material/toke
ns-studio/multi|material/style-dictionary>
DESCRIPTION
Setup your design tokens from a selection of Designex templates. It will create the tokens and scripts files needed to
build the design tokens.
EXAMPLES
setup
See code: src/commands/setup.ts
This templates follows the latest setup of [Tailwind v4] (https://tailwindcss.com). It will generate Tailwind v4 CSS files to import into your main css assets.
You can choose from style dictionary or tokens studio format. If you are using the free version of Tokens Studio you must select single file.
- tailwind/v4/tokens-studio/single
- tailwind/v4/tokens-studio/multi
- tailwind/v4/style-dictionary
This templates follows the legacy setup of [Tailwind v3] (https://tailwindcss.com). It will generate Tailwind v3 JS files to import into your Tailwind Config file. You can choose from tokens studio single and multi format. If you are using the free version of Tokens Studio you must select single file.
- tailwind/v3/tokens-studio/single
- tailwind/v3/tokens-studio/multi
This templates follows the latest setup of [Shadcn] (https://ui.shadcn.com/docs). It will generate Tailwind v3 JS files to import into your Tailwind Config file. You must also add the generate CSS files for the default and dark mode. The colors are converted to hsl as advised by Shadcn You can choose from style dictionary or tokens studio format. If you are using the free version of Tokens Studio you must select single file.
- shadcn/tokens-studio/single
- shadcn/tokens-studio/multi
- shadcn/style-dictionary
// Tailwind Config
theme: {
extend: {
textColor: require("./build/shadcn/textColor.js"),
colors: require("./build/shadcn/colors.js"),
backgroundColor: require("./build/shadcn/backgroundColor.js")
}// CSS Import
@import "../build/css/shadcn.css";
@import "../build/css/shadcn/modes/light.css";This templates is an export of the Material 3 Design Kit Figma file and the Material Theme Builder Figma Plugin You can choose from style dictionary or tokens studio format. If you are using the free version of Tokens Studio you must select single file.
- material/tokens-studio/single
- material/tokens-studio/multi
- material/style-dictionary
This templates is an export of the legacy Mozilla Design Tokens You can choose from tokens studio single and multi format. If you are using the free version of Tokens Studio you must select single file.
- mozilla/tokens-studio/single
- mozilla/tokens-studio/multi