Tree Feet

Design GUI

designgui.io

Make your Design System interactive

What

Design GUI is an internal project of TreeFeet. We're huge fans of Tailwind, Storybook and Figma, but we still found gaps in the current tooling around Designer / Developer collaboration. We wanted a "Design System on steroids", so we built one.

Design GUI surfaces values from your Design System which are editable via the Browser Extension. Make a change and see your site update live and in realtime.

Process

We went through a number of approaches before setteling on a Browser Extension as a lightweight and low-commitment solution.

It requires minimal changes to your application to use. Tailwind CSS is the only dependancy and there's no vender lock-in. If you stop using Deisgn GUI your app will work the same as before.

Outcome

Design GUI is great for:

It's a representation of our values as a design-obsessed studio who like to move quickly.

Download from the Chrome Web Store or try out the Live Demo

(Quote from user?)