Context
CaTarot is a tarot deck for designers: 78 cat cards about roadmaps, funnels, standups and shipping on Friday. It runs as the web game Mystic Tarot Cats. I wrote the deck, designed the screen and built it in React with AI support, then rebuilt the reading flow for accessibility.
Role: Product Designer and front-end builder — copy, interaction, UI, accessibility and React build
Stack: React 19, TypeScript, Vite and Tailwind
The problem
CaTarot began as an AI-assisted side project for colleagues. Keyboard and screen-reader checks exposed the real problem: the reading itself was unreachable. A tarot app that cannot tell you your fortune is only a handsome deck of cats.
1 screen, 78 cards
1 screen, no menu, no onboarding. The fan drags with inertia and steps with the arrow keys. Only the front card opens, so the game is clear without instructions.
The deck, face down
Soft and Spicy were written separately
Soft and Spicy are written separately, not run through a filter. Every card carries its own headline and 2 readings for each tone — Soft points at what to do next, while Spicy names what the dashboard is hiding. That makes 312 lines per language.
A reading in Soft
A reading in Spicy
About 7 in 100 draws ignore the card and tell you to close the laptop. The ending identifies itself as an easter egg in its first 2 words, so it does not look like a broken reading.
The touch-grass ending
Key decisions
The flip container came out of the button; the button now exists only while the card is face down. On open, the card stops being a control and becomes a labelled group that takes focus, with a live region announcing name, headline and reading as one sentence.
Reveal: reduced-motion mode now reveals the card instantly instead of playing a 3.5-second video. The reading matters more than the trailer.
Way out: “Pick another card” keeps the spread. The escape hatch and the re-roll used to be the same control, so leaving a reading meant losing it.
Tone: an unannounced “Toxic” mode and 7% easter egg became Spicy, with both surprises explained up front.
Drawing a card — the fan, the flip and the reading it turns up
Outcome
This was automated QA, not user testing. Playwright covers all 78 cards in both tones and languages, including text fit, keyboard access, language settings and visual regressions.
I built it solo with AI support. The model produced much of the first React draft; I wrote the deck and tone system, then rebuilt the reading flow for accessibility, added design tokens, a way to pick another card and the test suite.
0 likes · 1 view · Nov 9, 2026
A one-screen web tarot game where mystic cats read your design life — gently or with a roast.
