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.

Built by

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;
  ...
}

Using familiar web technologies

Others coming soon...

Go on, give it a try

Run this to start a new project

npm init mechanic@latest my-project

Mechanic’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.

Please visit our documentation for a thorough walk-through of the ins and outs of using the Mechanic API.

Go to documentation