top of page
Vibe Coding
Developing AI literacy through prototyping interaction design using AI
The problem
The challenge is to create animating items on screen where the parameters extend beyond placement and positioning, into time, trajectory and inertia. Developing and implementing this in a UX space was technically complex and required hands-on collaboration with developers.
The Solution
I defined start and end parameters and defined a system on Figma to help translate speed, rotation and positional indices easily. The result was defined interaction design which used the screen as a full canvas for exploration.
After Effects | Figma
Poker Spins
The problem
Most poker clients use slots machines to present this mechanic. We wanted to position ourselves away from this, but also present the other multiplier figures to increase anticipation of winning a large prize pool
The Solution
Using the facets of a hexagon you can see adjacent multiplier figures while keeping the winning facet highlighted and in view. The table colour was configured to correspond with winning prize pool. Adding a unique colour scheme each time you play.
Strategize ways of presenting a spins mechanic without relying on generic or typical representations
AntiGravity Experiment
Lately, I have actively been using AI to strengthen my AI literacy and integrate it meaningfully into my workflow. As part of this, I’ve chosen to use AntiGravity to prototype my website, treating it as both a practical project and a learning opportunity. I have been working on my website alot lately, so already have a clear vision and able to explore how AI can support interaction design, motion, and rapid prototyping. This approach allows me to develop a more informed, hands-on understanding of AI as a creative and technical tool, rather than using it passively.
Initial Prompt
Iteration Prompt 2
Iteration Prompt 3
Iteration Prompt 4
bottom of page