Create a Treasure Map with Claude Code
Claude Code can turn any sequence of related images into an interactive treasure map with minimal effort.
Here's how.
Step 1: Gather some related images that tell a story.
Yesterday I tried to cancel an auto-renewal of an old unused GoDaddy domain. In doing this I learned that Godaddy has a very unique automated customer service flow for doing this.
So I took a series of screenshots to document the process; my failed attempt to traverse their amazing process.
Step 2: Use Claude Code to create a treasure map layout
Once you have your images, use a prompt like this to generate the treasure map. You'll iterate a few times adjusting spacing and layout.
Take the 5 images in the
/public/images/godaddydirectory and create a treasure map connecting image 1 to image 2, image 2 to image 3, and so on. Use a dark background and red dashed lines with arrows to connect the images in order. Place a "Start Here" flag near image 1 and an "X Marks the Spot" near image 5. Make sure the images are large enough to see details but arranged in a fun, winding path. Add some subtle shadows and highlights to give it depth. Include a lightbox effect so clicking on an image enlarges it. Make it visually appealing and easy to follow.
Step 3: The result
Note this 'treasure map' aesthetic only makes sense on desktop, since you want zig-zagging paths / arrows connecting images. On mobile you can just stack the images vertically.
View standalone treasure map → (easier to share!)
