Retro Design System
53 standalone HTML/CSS UI themes spanning iconic computing and design eras. Built for AI-assisted frontend development, rapid prototyping, and nostalgic interface design.
53 retro UI design systems covering Windows 95, CRT terminals, DOS CGA, IBM mainframes, vaporwave, 8-bit arcade, Mac OS X Aqua, GeoCities, Commodore 64, Tron, VHS, Risograph, Bauhaus, and more. Each one drops into your own project or feeds directly to an AI coding agent.
Live Showcase
Quick Start
Open any folder's index.html directly in a browser, or run a local static server:
python -m http.server 8000
Then visit http://localhost:8000/.
Screenshot Preview
| Windows XP Luna | Mac OS X Aqua |
|---|
| |
| 8-Bit Arcade | Cassette Futurism |
|---|
| |
Use Cases
- AI-generated frontend themes: Use Claude, Codex, Gemini, or Cursor to generate pages and components that match a specific retro style.
- Retro dashboard UI kits: Build admin panels, launchers, and control rooms with vintage OS aesthetics.
- Game website design: Create game landing pages, overlays, and HUD-inspired interfaces using 8-bit and CRT motifs.
- Prompt-to-UI workflows: Feed a style reference to an AI agent and get reusable HTML/CSS output faster.
- Creative coding and portfolios: Give experimental web projects a nostalgic visual identity.
- Design token extraction: Lift palettes, borders, shadows, and typography rules into your own component systems.
How To Use In Your Own Project
- Pick the system you want from the list below.
- Import its tokens from
tokens/<slug>.css, or copy the token/style section from styles/<slug>/index.html.
- Reuse component markup patterns from the showcase to get the full look quickly.
Programmatic Access
Two generated files make the collection scriptable and agent-friendly:
manifest.json: every system with id, slug, name, era, year, tags, path, and extracted palette. Use it to build pickers, filters, or feed metadata to an agent.tokens/<slug>.css: the :root design tokens for each system, extracted so you can import the palette and typography without parsing the demo HTML.
Both are regenerated from the source styles, so they never drift:
node scripts/build-manifest.mjs # rewrites manifest.json
node scripts/build-tokens.mjs # rewrites tokens/*.css
Using With AI Coding Agents (Claude, Codex, Gemini, Cursor, etc.)
Point your agent at a style folder and ask it to generate UI in that visual language. Each system is one self-contained file: tokens, components, and patterns together. Agents can read and reproduce the style without extra context.
Claude Code users
This repo ships a project-level Claude Code skill at .claude/skills/retro-design/. Open this repo in Claude Code and the /retro-design command becomes available:
/retro-design list # browse all 53 styles
/retro-design 80s green terminal # get 3 recommendations
/retro-design 09-crt-phosphor # load a specific style reference
The skill filters the catalog by vibe, loads the chosen style's tokens and component patterns, and generates new HTML/CSS in that visual language. See .claude/skills/retro-design/SKILL.md for the full workflow.
Suggested workflow
- Point the agent to a specific system folder (e.g.
styles/11-8bit-arcade/index.html).
- Ask it to extract tokens (colors, typography, spacing, shadows, borders) into reusable variables.
- Ask it to build your target component or page in that same visual language.
- Ask it to avoid modern defaults that break the retro look.
Prompt template
Use `<your-project-path>/styles/11-8bit-arcade/index.html` as the style reference.
Create [component/page] in this same visual language.
Requirements:
- Reuse the same color palette, type style, border treatment, and spacing rhythm
- Match button/input/window styling patterns from the reference
- Keep accessibility in mind (contrast, keyboard focus states, semantic HTML)
- Output clean, production-ready HTML/CSS (or React + CSS)
Swap the reference path for any style in this repo. Popular picks:
以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗
