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 earned power-up system, state-tracked undo, and an auto-complete modal that triggers when the game becomes solvable.

The theme selector was the first surprise. Rather than standard red-and-black playing cards, the AI generated three fully themed card decks: Animals (forest creatures and nature suits), Magic (mystical symbols in purple and indigo), and Space (cosmic imagery — stars, planets, alien suits). Each theme renders the entire deck differently — it's not a skin on top of standard suits, it's a different visual language for all 52 cards.

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 programmatically: suit icons, card values, and rank labels are drawn using HTML Canvas or SVG 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 Assets folder stays small. 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. Unlike the themes and basic mechanics, it's a power-up that has to be earned rather than started with — you accumulate X-Ray charges by successfully clearing cards to the foundation piles. Once activated, it temporarily reveals face-down cards in the tableau columns, letting you see what's buried beneath stacks you can't yet access.

The earned 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-3 Decision

The initial output used Draw-1 — click the stock pile, reveal one card. We changed this to Draw-3 and it was the only significant design change we initiated rather than accepted from the initial output.

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 chose Draw-3 because it's what experienced solitaire players expect, and because the planning layer it adds — tracking card positions across draw cycles — is the thing that separates good solitaire play from mechanical play. Draw-1 can feel like a waiting game; Draw-3 requires active thinking.

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 automatically when all tableau cards are 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 brief delay before a drag activates — if the initial touch moves predominantly in a scroll direction within the first few milliseconds, it's treated as a scroll; if it moves toward another card target, it's treated as a drag. Getting that threshold 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-3 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