ISby Informeek Studio·Made with Claude·11 November 2026
LiveDrag the top card left or right, or use the buttons
The prompt
Claude · Claude Opus 5.5
Create a swipe cards UI for picking travel destinations on a warm sand background (#f3efe7). Title "Where to next?" and a hint line. A stack of four 440px tall cards with 26px corners: Lisbon (orange), Kanazawa (sky blue), Chefchaouen (indigo) and Lofoten (green). Each card shows a simple flat scene drawn in SVG: a vertical gradient sky in its colour, a pale sun with a soft halo, and two layers of darker hills, different for each card, with the country, city and one line of description at the bottom over a dark fade. Cards behind the top one sit 18px lower and 6% smaller per step. Drag the top card with the pointer: it follows the finger, tilts with the drag and shows a green "SAVE" stamp when dragged right or a red "SKIP" stamp when dragged left. Released past 100px, it flies off the screen; otherwise it springs back. Add round skip and save buttons below that do the same, and an empty state with a "Shuffle again" button.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
Copy the prompt with the button above.
Paste it into your tool, such as v0, Lovable, Bolt or Claude.
Make it yours by replacing the destinations with your products, people or ideas.
About this swipe cards UI
A swipe cards UI turns a list into a quick decision. Here four travel destinations sit in a stack, and dragging the top card makes it follow your finger, tilt as it moves and show a SAVE or SKIP stamp depending on the direction. Let go far enough and it flies off; stop short and it springs back to the pile.
Each card carries a small flat illustration drawn in SVG, a sun and two layers of hills in its own colour, so the deck looks finished without any photographs. The cards behind sit slightly lower and smaller, which makes the stack read as a pile at a glance.
Why the prompt works
It defines the threshold, 100 pixels, which decides how deliberate a swipe must be.
It gives buttons for the same actions, so the deck works with a keyboard or a mouse wheel user.
It designs the empty state, which many card decks forget.
It describes the artwork precisely enough to be drawn in code.
Where to use it
Product discovery, quizzes, recipe or travel pickers and onboarding preferences. Keep each card to one idea and one line of text.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.