Behind the Mask
A personality archetype game I designed end-to-end and shipped solo, with AI as the engineering team.
Overview
We all act differently depending on the moment. Calm in a crisis, quick to go quiet in an argument. The first to step in, or the one who hangs back and watches. None of it is good or bad — it’s just how each of us moves through things. This game is a way to notice that, together. You look at small, real situations — someone drops their groceries, a plan falls apart, a hard conversation needs to happen — and think about who’d step into that moment, and how. Sometimes you’re guessing about a stranger. Sometimes how your friends would act. Sometimes how they’d describe you — which is usually where it gets interesting. There are no right answers about who you are. It’s the conversation after that’s worth playing for. You can play alone and just reflect, or with a group and let it get loud.
Play it now
Four modes — Solo, Team, Scenarios, and Quotes. Solo ends with an AI-generated personality read. Everything in the frame is live.
Background
Archetypes and personas sit at the center of how I design. They shape who I'm designing for, how I write user stories, how I think about edge cases, and which user I prioritize when two of them want opposite things.
That's true of any product designer at this level. What I kept running into is that the off-the-shelf systems were never quite right — too clinical, too generic, or too abstract to land in actual product decisions. So I kept my own notes. Behavioral patterns I kept seeing across products, users, and research sessions.
Behind the Mask is the result: 48 archetypes across 6 clusters, each with a virtue and a shadow expression. The clusters and the relationships between them are what makes the read honest instead of generic. That part took years.
- Momentum & Action
- Stability & Grounding
- Insight & Awareness
- Care & Support
- Structure & Direction
- Adaptation & Resilience
Six clusters group 48 archetypes. Each archetype carries both a virtue and a shadow.
Design decisions
A few of the harder calls underneath this build:
Reflective, not diagnostic. The biggest constraint was making a personality game that doesn't pretend to be therapy. No scores, no "you are this." Archetypes are situational tendencies, not identities — the game describes how someone showed up in a moment, not who they are. Every system decision downstream — language, results pages, the AI reading voice — flows from this.
Ambiguity as a feature. Most scenarios have multiple archetypes that plausibly fit. That's deliberate. The interesting gameplay isn't "guess the right answer" — it's the debate about which answer is most right. The system stores a plausible-fit set per scenario, not a single correct ID, and the reveal celebrates the discussion instead of picking a winner.
Four modes, one system. Solo (reflective and personal), Team (social and observational), Scenarios (interpretation under pressure), and Quotes (pattern recognition through language) are functionally different products. They share the archetype model but the results layer does completely different work in each. Designing for four modes forced clarity about what each one is actually for.
The fingerprint is the spine. Every mode resolves to a cluster radar — the same component, different data. Solo shows your shape. Team overlays multiple players to expose coverage and gaps. Scenarios shows the distribution of choices across a session. Building it once as a primitive — not as a Solo-specific feature — saved months of work and made later modes nearly free to add.
What AI made possible
I'm not an engineer. A year ago this would not have shipped. AI handled the implementation, but the more useful shift was using it as a thinking partner on the design — pushing back on my choices, finding the seams between screens, catching features that were actually two features pretending to be one.
The gap between what I can imagine and what I can ship used to be the whole problem. Now it isn't.
Stack
- React 18 + Vite 5 + TypeScript
- Anthropic Claude API — generates the personality reads
- Vercel — static frontend + serverless functions for the Claude calls
- Plain CSS with design tokens — no framework, no CSS-in-JS
- Claude Code — implementation, in a thread separate from the design conversations
- CSV content pipeline — archetypes, scenarios, and quotes live as CSVs the game reads at runtime
A few deliberate choices: no Tailwind, because the design language is quiet and I wanted control over the tokens. Vercel because one push deploys it. Serverless functions so the API key never touches the client.
What I'd do differently: separate the design thread from the engineering thread earlier. Mixing them slows both down.
What I learned
What surprised me was how often Team Mode debates outlasted the game itself.
The distance from insight to thing you can put in front of someone has collapsed. One designer can now ship a working version of a hypothesis, watch real people use it, and iterate the next morning.