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 called TakeFive — a microbreak reminder and tracking app — I had used AI to build the prototype, but created all the designs as I normally would in Figma Design. This time I skipped Design altogether and went straight into 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 the basics were in place, I connected it to Supabase and configured the AI instructions. I tested across GPT-4o Mini, GPT-4.1 Mini, and GPT-4.1, refining the prompt several times. Two things took the most iteration. First, the saturation curve — in HSL, high lightness naturally kills vibrancy, so lighter shades need boosted saturation just to read as coloured, while darker shades need it pulled back to avoid feeling overwhelming. Second, hue rotation — subtly shifting the hue toward brighter values in lighter shades and darker values in darker shades enhances perceived depth across the scale. The two Mini models struggled with both, consistently producing flat results. GPT-4.1 produced the most consistent results.