Building Solitaire sounded like the simplest project we'd tackled — Klondike solitaire is one of the most-played card games in history, the rules are fully documented, and the AI has certainly seen a thousand implementations. What we didn't expect was how many interesting design decisions the AI would surface alongside the standard implementation.

The Brief and What Came Back

The prompt asked for a browser-based Klondike solitaire game — the classic version. Seven tableau columns, four foundation piles, a stock pile, standard rules. What came back included all of that plus a theme selector, an X-Ray Vision power-up, state-tracked undo, and an auto-complete modal that triggers once the outcome is already decided.

The theme selector was the first surprise. Rather than standard red-and-black playing cards, the AI generated three themed decks: Animals (tree, fish, butterfly, and chicken suits), Magic (the four elements — water, air, fire, earth — on purple and indigo card backs), and Space (stars, aliens, planets, and comets). A theme swaps the four suit glyphs, the card-back gradient, and the board background, so all 52 cards change with it, while the ranks and layout stay standard.

The practical implication: choosing a theme before each game is itself a small decision. Players who have a favorite return to it by habit. New players explore. The theme selector adds a minute of friction that players generally enjoy — it makes starting a new game feel like a small ritual rather than a mechanical reset.

Building a Custom Card Rendering System

Most browser card games use image assets — pre-drawn card faces as PNG files, loaded as images and positioned on screen. We expected the AI to do the same. Instead, it rendered each card as styled HTML: suit glyphs, card values, and rank labels are DOM elements positioned with CSS rather than loaded from files.

This approach has trade-offs. Programmatic rendering means the visual quality of each card is determined by the rendering code, not by a designer's asset — getting it right takes iteration. But it also means adding a new theme is a matter of writing new rendering parameters, not creating 52 new image files. The game ships with no card image assets at all. The theme variations scale without requiring a separate image set for each.

We spent several iterations on the card face details. The first output had suits that were too small relative to the card face, making the Cards look sparse. Scaling up the suit icons and adjusting the rank label positioning brought it to the right visual weight. On mobile, card legibility at smaller sizes required additional passes — the values needed to be larger than looked proportional on a desktop screen.

The X-Ray Vision Power-Up

X-Ray Vision is the most distinctive feature of the game. You start a deal with a single X-Ray charge and earn another for every ten cards you send to the foundation piles. Once activated, you tap one face-down tableau card and it stays revealed until your next move, letting you see the one thing buried beneath a stack you can't yet access.

The earn-by-playing structure was the AI's design, not something we specified. In most solitaire games, face-down cards are a permanent information blackout — you move forward without knowing what's below. X-Ray Vision changes the information structure of the game. Players who play well (clearing to foundation) earn the ability to see more of the board. It rewards skill with information, which is a more elegant incentive than rewards skill with speed or points.

The Draw-1 Decision

The initial output used Draw-1 — click the stock pile, reveal one card. Whether to switch it to Draw-3 was the design question we went back and forth on the longest.

The draw question is genuinely contested in solitaire design. Draw-1 is more accessible — every card in the stock is immediately visible and playable on the next cycle through. Draw-3 requires more planning — you can see the top card of a three-card draw but the other two are buried. Draw-3 also changes the solvability of the game: many Draw-1 deals are trivially solvable; Draw-3 creates more deals where planning ahead matters.

We kept Draw-1. Draw-3 is what many experienced players expect, and the planning layer it adds — tracking card positions across draw cycles — is real. But Draw-1 puts every stock card into the waste on each pass, so far fewer deals end in a dead stop, and for a game people drop into casually that mattered more.

State-Tracked Undo and Auto-Complete

The undo system stores the full game state at every move — every card position, every face-up/face-down status, the stock pile sequence. A single undo button reverses the last move completely. This is standard in modern solitaire but not trivial to implement correctly: the state capture has to be thorough enough that reversal produces an identical board to the pre-move position, including stock pile cycling.

Auto-complete appears once the stock and waste are empty and every tableau card is face-up — the point at which a solitaire game is mathematically won, requiring only mechanical execution to finish. An auto-finish modal appears and asks if you'd like the game to complete itself. This prevents the anti-climactic end sequence that many solitaire players know: a won game requiring fifty identical clicks to move all remaining cards to foundations one by one. Auto-complete skips that and jumps to the win screen.

The timing of the auto-complete trigger is important. It fires only when the game is actually won — every remaining move is determined and there's nothing left for the player to decide. Before that point, auto-complete isn't offered, because there are still meaningful choices to make.

Mobile Drag and Drop

Desktop solitaire uses mouse drag-and-drop for card movement. On mobile, that translates to touch drag — but browser touch events work differently from mouse events, and implementing a touch drag system that feels natural required a separate implementation pass.

The main challenge was distinguishing a card drag from a page scroll. On mobile, a downward swipe can mean either "I'm dragging this card to a stack below it" or "I'm scrolling the page." The solution was a short hold before a drag activates: a touch on a card has to stay down for 200ms before the card lifts, so a flick reads as a gesture on the page rather than a drag, and a second tap inside 300ms is read as a double-tap that sends the card straight to a foundation. Getting those thresholds right took a few sessions of testing on actual devices.

What Solitaire Revealed About Classic Game Ports

Classic games with long histories carry player expectations that are specific and sometimes invisible. Solitaire players know what "real" solitaire feels like — the timing of card placement, the visual confirmation of a valid move, the information gap of face-down cards. Building to those expectations requires understanding them first, and the AI surfaces them through choices like Draw-1 and state-tracked undo that reflect how the game has historically been played well.

The theme system is where the AI went beyond historical precedent. Standard solitaire doesn't have an Animals deck. The addition was a recognition that "classic mechanics, fresh visual context" is a viable design direction — and one that doesn't require touching the rules at all.

Related: Solitaire Tips: How to Win More Games and Use X-Ray Vision Effectively · Free Online Solitaire Guide · What Is Vibe Coding? · Vibe Coding Tools: From Chatbots to AI IDEs