How to Build a Fictional 1980s Retro Travel Agency Portal Using Claude 3.5 Sonnet and Midjourney

There is something wonderfully romantic about how the 1980s imagined the far-flung future. It was a world of chunky beige terminals, glowing green phosphorous screens, and blocky monospaced fonts advertising luxury solar cruises to the rings of Saturn. If you are tired of building yet another clean, corporate SaaS dashboard, this project is the perfect antidote.

In this guide, we will build a fully interactive, browser-based portal for "Starlight Cruises"—a fictional 1980s travel agency offering commercial flights to Mars, Venus, and the outer asteroid belt. We will use /platforms/claude to write our interactive terminal application and /platforms/midjourney to generate the gorgeous, low-fi retro-futurist travel posters that bring our interface to life.

The Aesthetic: Green Phosphorus and Solar Cruises

To make this portal feel authentic, we have to reject modern UI patterns. We are not aiming for responsive flat design. Instead, we want an interface that mimics a CRT monitor, complete with a flickering scanline effect, a subtle screen curve, and monospaced command-line navigation.

Our travel portal will feature: * An interactive "Terminal Terminal" where users can type simple commands to book flights. * An "Expeditions" catalog displaying retro-futuristic travel posters with gritty 1980s sci-fi styling. * A fictional ticket-printing interface that generates a downloadable boarding pass.

To make sure our styling ticks all the right boxes, we need to balance the cold retro terminal code with the vibrant, textured artwork of the era.

Step 1: Generating the Retro-Futuristic Copy with Claude

Before we touch any code, we need the raw content that will inhabit our portal. Claude is brilliant at capturing specific historical and stylistic tones. Start by asking Claude to generate the fictional database of space flights using our custom /prompts approach, or use this direct prompt:

`text Act as a copywriter from 1984 who is incredibly excited about the upcoming commercialisation of space. Write three itinerary descriptions for "Starlight Cruises": 1. A weekend escape to the high-pressure cloud cities of Venus. 2. A rugged mining-colony tour of Ceres in the asteroid belt. 3. A luxury solar-sail cruise around the rings of Saturn. Keep the language delightfully analog, referencing "magnetic tape registration," "synthetic gravity deck dining," and "CRT display booking confirmation." `

Claude will give you incredibly rich, thematic text. Save this copy; we will feed it back into Claude later when we ask it to construct our interactive HTML page.

Step 2: Crafting the Vintage Travel Assets in Midjourney

To complement our green-screen UI, we need gorgeous visual assets. We want our travel posters to look like they were printed on matte paper in 1981, featuring bold typography, airbrushed textures, and a distinct analog grain.

Open up Midjourney and run the following prompts to get your travel illustrations:

• Saturn Cruise Poster: /imagine prompt:A retro-futurist travel poster for a luxury cruise to Saturn's rings, in the style of 1980s airbrush sci-fi book cover art, vibrant pastel tones of pink, gold, and deep blue, analog film grain, screenprinted texture, retro typography "SATURN SUNSET" at the bottom --ar 3:4 --v 6.0
• Venus Cloud Resort: /imagine prompt:A vintage 1980s sci-fi travel advertisement for a floating resort in the orange clouds of Venus, blocky graphic design, retro illustration style, faded warm colours, 35mm film photo grain, airbrushed detailing --ar 3:4 --v 6.0

Take your time upscaling and variations. If you run into weird artifacts or need to troubleshoot Midjourney's text rendering quirkiness, you can check out our dedicated troubleshooting guide at /platforms/midjourney/articles for quick fixes.

Once you have your posters, host them online or save them to your local project directory. If you want to see live examples of how these styles look in action, check out the official Midjourney community gallery to study how other creators leverage vintage grain parameters.

Step 3: Assembling the Portal in the Browser

Now, we will ask Claude to build the actual application. Claude 3.5 Sonnet's Artifacts feature is perfect for this. Copy the prompt below and paste it into Claude:

`text Create a single-file interactive HTML, CSS, and JS application that acts as a 1980s CRT travel portal for "Starlight Cruises".

Requirements: 1. CSS Styling: Black background, glowing green text (#39FF14), and a retro monospaced font like "Courier New" or "Share Tech Mono". Add a subtle CRT scanline overlay effect using a repeating linear gradient, and an optional screen-flicker animation. 2. Layout: A split-screen layout. On the left is an interactive "Command Line Console". On the right is a "Visual Previewer" which displays the travel posters we generated (use placeholder images from Unsplash or local files like 'venus.jpg' and 'saturn.jpg' that I can swap out). 3. Interactivity: The user can type commands into the terminal. - Type 'HELP' to list options. - Type 'LIST' to view available space cruises. - Type 'VIEW [ID]' to display the corresponding travel poster on the right and load the itinerary text. - Type 'BOOK [ID]' to trigger a simulated ticket-printing sequence that reveals an ASCI-art boarding pass. `

Claude will output a self-contained code file. You can run this directly in your browser. The terminal input works by capturing keyboard events, printing character-by-character to simulate an ancient disk drive reading data, and rendering beautiful, nostalgic ASCII-art spaceship dividers.

Customising the CRT Scanline Effect

To make the terminal look incredibly realistic, play around with the CSS scanline effect. Claude will likely generate a basic overlay, but you can elevate it by adding this precise CSS block to your styling:

`css .terminal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 4px, 6px 100%; z-index: 2; pointer-events: none; } `

This simple CSS hack introduces a simulated red-green-blue subpixel mask alongside the horizontal scanlines, turning your flat monitor screen into a convincing 14-inch cathode-ray tube from a defunct observatory.

Taking It Further

Once your base portal is functional, the possibilities for expanding this micro-universe are endless. You could integrate a web audio synthesizer that plays low-pitch system beeps when a user types, or design a mini-game where users must adjust magnetic shield frequencies before booking a trip.

Building interfaces like this forces you to think about user experience from a completely different era, reminding us that sometimes, the most engaging interfaces are the ones that are intentionally, beautifully limited.