Turn your design rules into design tools
Mechanic is an open source framework that makes it easy to create custom, web-based design tools that export design assets right in your browser.
Current design tools are still modeled on manual processes which despite technological advances continue to demand repetitive work from designers.
Mechanic allows you to automate this endless cycle by encoding your decisions into design functions.
Mechanic will auto-generate a beautiful user interface, so you can concentrate on writing the code to produce your designs.
This makes it excellent at making tools for anything that requires a high volume of rich, consistent assets from business cards to highly flexible visual systems.
Adding Mechanic to your toolkit enables you to turn your ideas into actionable tools and turbocharge your design process.
Mechanic makes it fast and easy to make project–specific design tools
export const handler = (sketch, params, mechanic) => {
const { width, height } = params;
let x = 0;
const y = height / 2;
...
}write a single function that generates your design inputs
export images and videos as SVG, PNG and WEBM
preview your live designs in the canvas area
Using familiar web technologies
Go on, give it a try
Run this to start a new project
npm init mechanic@latest my-projectMechanic’s open source command-line client makes it easy to quickly get started making your own personalized web-based design tool that will allow you to generate assets right in your browser.
If you would like to stay up to date on the development of this tool and get beta access, please subscribe below: