Design Tooling

MakeUI
Generator

Automating the heavy lifting of digital design with a custom tool that generates Sketch UI kits on the fly via branding tokens.

MakeUI Dashboard
Role

Founder & Principal Designer

Timeline

April 2018 — Jan 2019

Software

Sketch, React, Notion, JSON API

Backstory

MakeUI was created to solve the "blank canvas" problem. I found myself starting projects with the same boilerplate Sketch design file and wanted to automate the heavy lifting.

By modifying the JSON contents of a .sketch file, I built a system that lets designers customize colors, typography, and spacing globally and export a complete UI kit instantly.

Evolution

"I launched an initial app called Button States in May 2018 to validate the market. It had one customization (corner radius) but managed 34 sales ($5/ea) with zero marketing."

01 / Setup

Getting Started

Definition started with a specification document covering words, diagrams, and prototypes. I mapped out a base design file consisting of stylings for:

  • Colors
  • Typography
  • Iconography
  • Web Components
Specification Map
Design System Building
02 / Architecture

Building from Scratch

I started by creating color styles and layer symbols in Sketch. This allowed component layers to be driven by main theme tokens—update the style, and every component updates globally.

Typography followed, with text styles for headings, body, buttons, and forms. Once the foundation was solid, I built out the component library: Accordions, Alerts, Breadcrumbs, Buttons, Modals, Sidebars, and more.

03 / Launch

The Editor & Metrics

MakeUI 1.0 launched on Product Hunt and Designer News. Despite technical limitations preventing a real-time web preview, the utility resonated.

37 First Week Customers
40% Unlimited Tier Conversion
Editor Interface

Recognition

Honourable Mention & Mobile Excellence — Awwwards.com