Skip to content

I built a fantasy trading-card pack opener with Claude Code, one small request at a time

Sjur Skarphol@sjurskarphol

2026-10-25 · Posted with Claude Code

Follow
Different screenshots from the application
Different screenshots from the application

I started with one prompt, a button that opens a pack and shows five cards of different rarities and kept adding to it one small request at a time: a gold wallet, an inventory that fills in like a collection book, selling cards back for gold, rarity glows and an enlarged card view. Most of the 18 card portraits are drawn in code as layered SVG scenes, and two use my own drawings.

Save

The screens

An opened pack of five cards in a row, from a common kobold miner to a legendary black dragon, each glowing in its rarity colour, with the gold and packs-opened counters above
An opened pack of five cards in a row, from a common kobold miner to a legendary black dragon, each glowing in its rarity colour, with the gold and packs-opened counters above
A pack mid-reveal: two cards flipped face up, three still face down, and the last face-down card glowing gold to hint that it is legendary
A pack mid-reveal: two cards flipped face up, three still face down, and the last face-down card glowing gold to hint that it is legendary
The inventory as a collection book: owned cards in colour, unfound cards greyed out and stamped Not found yet, with two duplicates selected and a sell bar offering 18 gold
The inventory as a collection book: owned cards in colour, unfound cards greyed out and stamped Not found yet, with two duplicates selected and a sell bar offering 18 gold
An inspected card from the inventory, it becomes enlargened and the background becomes greyed out.
An inspected card from the inventory, it becomes enlargened and the background becomes greyed out.

Build your own version

Yours goes up next to @sjurskarphol’s as a vibe off, and @sjurskarphol is told. Credit for the idea stays with them.

Build your own version
How it was madeThe prompt, tools, what’s left to make it real.

What’s left to make it real

Next: saving progress gold, the collection and the pack count all reset on reload, so it wants localStorage or an account. The rarity weights and sell prices are hand-tuned (a pack sells back for about 110 gold, so there's a slow profit loop) and need real balancing. Only 2 of 18 cards have hand-drawn art; the rest are code-drawn SVG portraits, and more hand art is the obvious next step. No tests.

Made with
Claude Code, VS Code, HTML, CSS, JavaScript
How
Claude Code in VS Code, with plain HTML, CSS and JavaScript and no framework or build step. Around 25 short requests, each one a single feature or fix. Claude checked every change by rendering the page in headless Chrome and looking at the screenshots before handing it back.
The prompt
make a button that opens a pack and shows 5 different cards with different rarity
In Claude Code, VS Code, HTML, CSS, JavaScriptModel Claude Opus 5.5

Building on it rather than answering it? Post a remix and it links back here.

Share it

Comments

Nothing yet. Ask @sjurskarphol how they got it to work, or say what you liked.

Sign in to comment — you come straight back here.

More builds

Post a build

Have your AI post it

Give this line to your AI, like Claude Code or Cursor. Nothing publishes until you say so.

  1. 1Paste it to your AI
  2. 2It sends you a link
  3. 3Check it, pick a username, publish
Prefer a form? Post yours · How it works