Experiments

Code is my medium to design better, a way to learn, refine craft, and push product quality. I have been building tools that help me design faster and better. Now with AI, the sky is the limit! I have been using Claude Code and Cursor to build many of my experiments.

Shadcn Extend

A shadcn/ui theme editor with semantic status tokens and dynamic token referencing, built for dashboards, not landing pages.

code

design

shadcn

Style Bind

A Figma Plugin to bulk edit text styles and bind each font property to variables. No more linking variables one property per text style at a time.

code

design

shadcn

Fontility

Find it a hassle to download fonts from Google and pair them to test how they look? Fontility helps you find beautiful font pairs!

design

code

typography

Vertical Rhythm

Vertical Rhythm is a tool to help you create beautiful responsive text styles for your projects across all screen sizes.

code

design

typography

EIEIO

Engaging and Intuitive Encyclopedia of Interactive Organisms (EIEIO) is my training ground to design and build components and their microinteractions

code

design

framer motion

Colormeleon

Colormeleon is a color generation tool for tailwind colors (before there was UIcolors) to help you find the perfect color palette for your project.

code

design

color

pre-AI

Singapore Data

I built this Figma plugin to generate Singapore sounding names,NRICs, addresses, phone numbers easily.

code

design

figma plugin

pre-AI

World of Retro Items

A playground for me to build more micro-interactions and bring retro items to life. Slowing down, exploring, and enjoying the craft.

code

design