Colour Scales

As part of my exploration of AI tooling, I wanted to experiment with skipping Figma entirely and jumping straight into code. In another passion project I worked on called TakeFive — a microbreak reminder and tracking app — I used AI to build it but I began in Figma Design before moving into Figma Make.

I started by building a "Create a colour scale" page — a simple text input with pill button suggestions to spark ideas, covering four different input types to show users they could start from anything.

Once I had the bare bones in place, I connected it to Supabase. From there, I set up instructions for each user prompt: the AI would generate a colour scale based on their input, producing 11 shades ranging from 50 to 950. Getting the output to look balanced took some prompt fine-tuning, but eventually I landed on something that consistently produced good results.

Finally, I tidied up the UI and published the experiment. It was a fun way to test out a concept I wouldn't have been able to explore before, but it wasn't without frustration. Simple UI tweaks, like getting the right cursor on hover states, often took two or three prompts to land correctly. Promising, but still rough around the edges.