Mechanic is a powerful design toolchain that helps forward-looking organizations move away from a manual design workflow by automating their design operations. Built with love by your friends at Design Systems International.
v1.2.0 is out now! Try it and tell us what you think!
v2.0.0-beta.7 is also out and we're testing it! Feel free to test it out too!
To start using right away and create a new Mechanic project, run the following:
npm init mechanic@latest
This will build a new base Mechanic project, with one design function! Follow the CLI instructions to customize, install and start running.
Check the docs site.
The repo is managed via lerna.
|create-mechanic||Mechanic project skeleton creator.|
|@mechanic-design/cli||Command-line tool to generate new Mechanic projects, design functions and build app.|
|@mechanic-design/core||Core Mechanic functionalities. Used by Mechanic's design tools and defines |
|@mechanic-design/ui-components||React component library intended to be used as inputs for design function inputs.|
|@mechanic-design/engine-canvas||Engine function that extends base |
|@mechanic-design/engine-p5||Engine function that extends base |
|@mechanic-design/engine-react||Engine function that extends base |
|@mechanic-design/engine-svg||Engine function that extends base |
|@mechanic-design/utils||General purpose CLI definitions to be used by other Mechanic packages.|
|@mechanic-design/dsi-logo-maker||A design tool project made with Mechanic to build assets and animations that follows DSI's identity logo.|
To get started, clone this repo.
npm run bootstrap. This will symlink all the dependencies together and run
npm i inside each package. Running
npm i inside a package folder will not work.
That should be enough to test certain individual package functionality, but to test mechanic projects with local package versions, we use
npm link falls short to reproduce package dependencies resolution as projects would by installing from the npm registry.
yalc can locally publish packages as it would to the npm registry, to then use in local projects.
To do this, first install
To publish all packages in the repo, run
npm run publish:local. To publish an individual package, run
yalc push from its directory or
yalc push ./packages/[package]. Run any of these commands when you wish to update the published content.
Then in the project to test the package(s), before installing dependencies run
yalc add [package] for all packages you wish to test. Then install normally with
For any other needs, check
npm run publish