← Back to list
2026 Web app Card game designer Vibe-coded

Playing Card Studio: Travel Deal

3D mockup of the Travel Deal card game on a wooden table: box, deck and family photo cards
3D mockup on a dark table with the box, the deck and scattered property cards
The Playing Card Studio editor: trips in the sidebar, card thumbnails and a live card preview
Money cards in the classic style, each value with its own family drawing
The print and export dialog: card style, format, bleed and all export options

What it is

Playing Card Studio is a small web app to design a personalised version of the card game Monopoly Deal, based on our own family trips. We call our version Travel Deal. The rules, card counts, values and effects stay exactly the same as the original, so you can play it the same way; only the look and the content change.

Every colour set is one family trip (Salerno, Lago Maggiore, the Ardennes…), and every property card in that set is a moment from that trip, with its own photo, title and date. Action cards get our own names, like "Afgeleid door gsm!" instead of Sly Deal, and the money cards show family drawings.

All 110 cards

The full Monopoly Deal deck is defined in one place: 28 properties, 11 property wild cards, 13 rent cards, 34 action cards, 20 money cards and 4 rule cards. The editor shows them all as thumbnails, grouped per trip and category, with a progress counter for the 28 property cards that need a photo and a title. Click a card to edit it next to a large live preview: upload a photo, drag to reposition it, zoom, and change titles, descriptions, colours and dates.

There are two card styles: Classic, closely following the layout of the bilingual (Dutch/French) Belgian edition we play at home, with value diamonds in the corners, the scalloped banknote border and rent tables, and Modern, a cleaner photo-first design.

Print-ready export and a 3D mockup

Cards are drawn on a canvas in millimetres, so the same design is used for thumbnails, preview and 300 dpi print files with 3 mm bleed. Export options include all cards as PNGs in a ZIP, a print-ready PDF, A4 sheets with crop marks to print at home, an overview sheet, and a dieline for a tuck box that holds two stacks of 55 cards. The mockup view shows the box, the deck and a fan of your own cards on a table, built purely with CSS 3D transforms.

How it's made

Plain HTML, CSS and JavaScript, no build step and no backend. Projects and photos are stored locally in the browser with IndexedDB, and a project can be exported as a ZIP and imported on another device. JSZip and jsPDF are loaded from a CDN only when exporting. Vibe-coded with Claude Code, iterating from photos of the original cards.