John Dufresne's Portfolio — UX Games

UX Games

A series of UX-themed browser games built to sharpen prompt engineering skills and explore vibe coding. Each game — a quiz game, detective RPG, and space shooter — translates core design principles into interactive, playable experiences that make UX concepts tangible and entertaining.

UX Quiz Game

A browser-based quiz show where players match UX definitions to terms across 100 questions. Hosted by John Dufresne, the game tests design literacy through a sleek, cinematic Jeopardy-style format with one-strike elimination.

PLAY

UX Detective RPG

A 16-bit narrative detective game where players guide Uma Xing through a dark pattern conspiracy. Combines hidden object UX challenges, empathy interview mechanics, and choose-your-own-adventure storytelling across ten scripted scenes.

PLAY

UX Defenders

A space shooter where players defend good design against Hick's Law menus and incoming dark pattern threats. Growing navigation bars and manipulative UI elements rain down as your paper airplane ship fights back.

PLAY

How I Built These UX Games

Each game was built using prompt engineering in Claude to generate detailed game design documents, then vibe coded in Lovable using React. The process moved from concept to playable browser game without writing code manually. I did use Claude to write a few lines of code to insert in my Webflow page's custom code to allow the sites to live and be interactive on my portfolio.

UX Quiz Game

I wrote all 100 questions and answers across 12 UX categories, then engineered a prompt specifying the cinematic stage design, character behavior, randomization logic, and one-strike elimination rule. I made the rules and questions deliberately difficult to push players beyond surface-level UX knowledge.

Claude for prompt writing

Lovable for building

React, Framer Motion, Google Fonts, JSON question bank

UX Detective RPG

The most complex of the three. I wrote a full 10-scene game script with two original characters, three distinct gameplay mechanics, and a narrative arc built around dark pattern investigation. The prompt covered art direction, dialogue, interaction rules, and the empathy interview chatbot mechanic in detail.

Claude for prompt writing,

Lovable for building

React, pixel art SVGs, CSS animations, Press Start 2P font

UX Defenders

I started by defining the core mechanic around Hick's Law — a space shooter where growing nav menus and dark pattern modals rain down on a paper airplane ship. The prompt was written from the perspective of a senior game developer and PM, specifying everything from spawn rates to color palette to win conditions.

Claude for prompt writing,

Lovable for building

React, HTML5 Canvas, CSS animations