Designing a refined, lifestyle-led brand for a premium property developer. Logo system, material-inspired palette, layout principles, and brand book.

SneakerHues: AI Collab Experiment

SneakerHues: AI Collab Experiment

SneakerHues: AI Collab Experiment

From prompt to prototype. Testing how far AI can compress the product process.

Intro

Client

Client

SneakerHues Concept

Role

Role

Illustrator & Visual Designer

Industry

Industry

AI

Proptech

Timeline

10 Days

Team

Just Me!

The Brief

The Brief

Create an interactive sneaker customisation app using AI as a development tool — testing whether design could drive code, rather than the other way around.

I had vector sneaker designs from a past Instagram challenge and a vision: turn static layouts into an interactive web app where users could colour and download custom sneakers. The catch? I'd use AI to handle the development.

Create an interactive sneaker customisation app using AI as a development tool — testing whether design could drive code, rather than the other way around.

I had vector sneaker designs from a past Instagram challenge and a vision: turn static layouts into an interactive web app where users could colour and download custom sneakers. The catch? I'd use AI to handle the development.

Live Prototype: A working interface generated and iterated using AI-assisted workflows

Phase 1

Promts Mean Prizes

The Reality Check

The Reality Check

My first attempt with ChatGPT was converting vectors into interactive SVG assets. Initial results looked promising — until they didn't. Sections weren't cut correctly, interactions broke, and after countless prompts, I realised AI couldn't diagnose its own output.

My first attempt with ChatGPT was converting vectors into interactive SVG assets. Initial results looked promising — until they didn't. Sections weren't cut correctly, interactions broke, and after countless prompts, I realised AI couldn't diagnose its own output.

The fix: I compared working files against broken ones, identified the pattern (grouped folders vs. ungrouped), and restructured everything myself.
The fix: I compared working files against broken ones, identified the pattern (grouped folders vs. ungrouped), and restructured everything myself.
three desktop views of old homepage design
three desktop views of old homepage design

Phase 2

Sorting Out The Mess

Things Got Messier

Things Got Messier

When I moved to coding the full interaction, things got messier. ChatGPT's code worked partially, but layout tweaks consistently broke the site. Design wasn't its priority, and prompting my way to pixel-perfect wasn't working.

When I moved to coding the full interaction, things got messier. ChatGPT's code worked partially, but layout tweaks consistently broke the site. Design wasn't its priority, and prompting my way to pixel-perfect wasn't working.

The fix: I went back to the drawing board — literally. It was Figma's time to shine.
The fix: I went back to the drawing board — literally. It was Figma's time to shine.
three desktop views of old homepage design

Phase 3

Pulling Out The Big Guns

The Design Lead

The Design Lead

I shifted strategy. Instead of explaining design through prompts, I built a comprehensive Figma prototype with precise layouts, spacing, and interactions. This became my single source of truth.

The difference was immediate. With a visual reference, AI could execute accurately. I iterated on features, adding an eyedropper tool, restart button, and multiple sneaker options, each refinement informed by testing the prototype.

I shifted strategy. Instead of explaining design through prompts, I built a comprehensive Figma prototype with precise layouts, spacing, and interactions. This became my single source of truth.

The difference was immediate. With a visual reference, AI could execute accurately. I iterated on features, adding an eyedropper tool, restart button, and multiple sneaker options, each refinement informed by testing the prototype.

three desktop views of old homepage design

The Outcome

My Creation

SneakerHues Ready To Roll!

SneakerHues Ready To Roll!

Users select sneakers, customise colours by section, and download their designs.

Users select sneakers, customise colours by section, and download their designs.

Multi-sneaker selection

Section-based colour customisation

Eyedropper tool

One-click reset & download

Live Prototype: A working interface generated and iterated using AI-assisted workflows

Reflection

What I Learned

The Takeaways

The Takeaways

Using AI to rapidly generate and iterate UI directions

Turning prompts into functional front-end output

Skipping traditional Figma-first workflows in favour of build-first thinking wasn't the smartest option

Stress-testing how far AI can go without quick structured product definition

Where It Worked

Where AI excels

Where AI excels

Executing repetitive tasks

Generating boilerplate code

Rapid iteration once direction is clear

Where It Didn't Work

Where AI falls short

Where AI falls short

Catching contextual gaps

Making strategic UX decisions

Maintaining design systems & consistency

Menu