npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@netoum/designex

v1.0.2

Published

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.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

karim.skarim.s

Keywords

oclif

Readme

Designex Version oclif Downloads/week

Designex

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:

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

Usage

$ npm install -g @netoum/designex
$ designex COMMAND
running command...
$ designex (--version)
@netoum/designex/1.0.2 linux-x64 node-v22.9.0
$ designex --help [COMMAND]
USAGE
  $ designex COMMAND
...

Commands

designex build

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
  $ 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
  $ designex build

See code: src/commands/build.ts

designex help [COMMAND]

Display help for designex.

USAGE
  $ 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

designex setup

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
  $ 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

Templates:

Tailwind v4

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

Tailwind v3

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

Shadcn

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")
    }
Shadcn Css

// CSS Import


@import "../build/css/shadcn.css";
@import "../build/css/shadcn/modes/light.css";

Material

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

Mozilla

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