Build a retro 80s-style landing page with AI in 7 minutes
A ready-made HTML/CSS page with neon palette, pixel font, and CRT effect - right in your browser, no software to install
- 1.Open Claude.ai and sign in (free email registration). If the service is unavailable in your region, use any alternative chatbot with code generation - ChatGPT or Gemini will work fine.
Claude's free plan gives access to the base model; that's enough for generating HTML/CSS.
Claude ↗About this tool - 2.Start a new chat and paste the prompt below. Replace [TEMA] with your page theme (for example, «photographer portfolio», «coffee shop landing», «podcast announcement»), and [ZAGOLOVOK] with the main page headline.
The more specific your theme and content description, the less manual editing you'll need.
Claude ↗About this toolPromptCreate a single-page retro website in 1980s arcade style. Theme: [TEMA]. Main headline: [ZAGOLOVOK]. Include: hero section with neon headline, about section, and a footer with contact info. Style requirements: background #0A0A0F, neon orange accent #FE9901, acid turquoise accent #00F0FF, warm white text. Use 'Press Start 2P' from Google Fonts for headlines, monospace for body text. Add CRT scanline effect using CSS, pixelated button styles with inset shadow, and ASCII-style borders around sections. Output as a single self-contained HTML file with inline CSS. Include the Google Fonts link. The page must be fully responsive.
What this prompt doesThe prompt is in English so Claude understands the style requirements more accurately. Replace [TEMA] with your page theme (for example, «personal blog about retro games»), [ZAGOLOVOK] with your main headline. Leave the other parameters (palette, fonts, effects) as is. - 3.Wait for the code to generate (usually 30 - 60 seconds). Copy the entire HTML block - click the Copy button in the top-right corner of the code block.
If the code is split into multiple blocks, copy them one by one into a single file.
Claude ↗About this tool - 4.Open any text editor (Notepad on Windows, TextEdit on Mac in «Plain Text» mode). Paste the code. Save the file as retro.html - the .html extension is important, not .txt.
In Notepad, select «All Files» in the «Save as type» field when saving, otherwise it will save as .txt.
- 5.Double-click the saved retro.html file - it will open in your browser. You'll see a retro page with neon accents, CRT effect, and pixel font.
The file works offline, except for the Press Start 2P font - it loads from Google Fonts (internet needed on first open).
- 6.If you need to tweak something, go back to the Claude chat and type: «Change the background to dark purple and add a pixel-art star animation in the hero section». Claude will output updated code. Replace the contents of retro.html and save again.
Make one edit at a time - the results will be more predictable.
Claude ↗About this tool
- freeClaude FreeThe free plan gives a limited number of messages per day - that's enough for generating and making 1 - 2 HTML/CSS edits.
Why today
AI services change fast - interfaces and free limits may differ from what's described.