Retro Design System skill
A skill that picks and applies a retro UI style from a catalog of 53 historical systems: Windows 95, CRT, DOS, vaporwave
- 67 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill reads catalog files and runs only `jq`, `node` and `git rev-parse` from its allowed list
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/retro-design-systemDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill reads catalog files and runs only `jq`, `node` and `git rev-parse` from its allowed list
This is third-party code. Review the repository files before installing.
What it does
The repository holds 53 standalone HTML and CSS themes, each in its own `styles/<number-name>/index.html` folder: Mac System 7, Windows 95 and XP, Amiga Workbench, green-phosphor CRT, DOS CGA, IBM 3270, vaporwave, Commodore 64, Bauhaus, brutalism and more. A theme file carries its tokens, components and styling patterns, so an agent can reproduce the look without extra context. The `/retro-design` skill reads a compact style table from `references/styles-index.md`: slug, era, year, three palette colors and tags. `list` prints the whole table, a slug loads that style directly, and a mood description such as "80s green terminal" returns three candidates and waits for a pick. The skill opens the full HTML of the chosen style only after that, so context is not wasted. For scripts there is `manifest.json` with each system's palette and tags and a `tokens/` folder of CSS variables, rebuilt with `node scripts/build-manifest.mjs` and `node scripts/build-tokens.mjs`. A live viewer opens from `docs/index.html`.
Who it is for. Frontend developers and designers who build retro-styled sites, game landing pages and dashboards together with an AI agent.
Good fit when
- A page in the spirit of Windows 95, DOS or a green-phosphor terminal is needed and the agent needs an exact reference
- A game landing page or HUD calls for 8-bit or cassette futurism and a ready palette is wanted
- Color, font and shadow tokens must be lifted from a finished style into your own component system
- There is only a mood such as "pastel synthwave" and three concrete styles to choose from are needed
Not a fit when
- A modern minimalist interface is needed: the catalog is entirely about historical aesthetics
- The project already follows its own design system and a retro theme would clash with it
- Ready-made React components are required: the themes ship as HTML and CSS
Example request
/retro-design 80s green terminal, then build a sign-in page with a form and buttons in the chosen styleLimitations
The skill lives in `.claude/skills/retro-design/` inside the repository and finds the catalog root with `git rev-parse --show-toplevel`, so it works when the whole repository is open in Claude Code. To use the styles in another project, point the agent at a style folder and copy the skill together with the catalog. Each theme is a standalone file with demo markup, so adapting it to a framework is up to you. Accessibility (contrast, focus) in retro palettes depends on the theme, and the prompt template asks the agent to keep it in mind.
How to disable. Delete the `.claude/skills/retro-design/` folder or the whole repository clone. The files in `styles/` run nothing.
FAQ
How do I install Retro Design System in Claude Code?
Clone the repository and open it in Claude Code: the project skill from `.claude/skills/retro-design/` loads and the `/retro-design` command becomes available. For another project, copy the skill together with the style catalog.
How many styles are in the catalog and which eras do they cover?
There are 53 systems, from Mac System 7 and Windows 95 to vaporwave, Commodore 64, IBM 3270 and Bauhaus. A table with year and palette for each style is in `references/styles-index.md`.
Does the catalog work with Codex, Cursor or Gemini?
Yes, the styles are plain `styles/<slug>/index.html` files and any agent can read them from a given path. The `/retro-design` command is specific to Claude Code.
How do I get a style's colors and fonts on their own?
Take `tokens/<slug>.css` with the CSS variables or `manifest.json` with each system's palette. Both files are rebuilt by the scripts in `scripts/`.
Do I need to install dependencies?
A browser or `python -m http.server 8000` is enough for viewing. Node is only needed to rebuild the manifest and tokens.
Discussion
No questions or reviews yet.
Related
SkillsNothing Design
nothing-design
A skill for generating UI in the Nothing visual language: monochrome, Swiss typography, industrial rigor
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
A skill and CLI that pull colors, type, spacing, radius and shadows from a public site and save them as JSON and CSS tokens
Meta-skill that reads a brand from a URL, name or screenshot and turns it into a full design system as a new skill
The /taste skill turns a URL into design tokens and trade-off principles, with ready rules for Cursor and Claude Code
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Retro Design System (this card) | no | 67 | |
| UI UX Pro Max | no | 148,899 | a general database of palettes and styles for modern UI, without ties to historical systems |
| Frontend Design (Ilm-Alan) | no | 167 | general frontend aesthetic principles, whereas this offers ready references of specific retro systems |
README in short
The README presents the repository as a set of 53 retro themes for AI-assisted development. It shows previews, use cases, programmatic access through the manifest and tokens, a prompt template for agents and the list of styles.
README badge
Original SKILL.md
---
name: retro-design
description: Pick and apply a retro UI style from the local catalog of 53 historical systems (Windows 95, CRT phosphor, DOS CGA, vaporwave, Bauhaus, IBM 3270, etc). Use when the user wants a vintage/retro aesthetic, names a specific era ("80s terminal", "Y2K", "90s web"), references a specific old OS/terminal, or asks to generate styled HTML from a retro style reference. Different from frontend-design (general aesthetic guidance) — this one is keyed to specific historical systems stored on disk.
when_to_use: retro UI, vintage interface, Windows 95, CRT terminal, vaporwave, pixel art, brutalist, Bauhaus, Swiss style, pick a retro style, apply retro aesthetic, filter style catalog, manifest, 80s 90s Y2K aesthetic, specific old OS look
argument-hint: [slug | vibe | "list"]
allowed-tools: Read Glob Grep Bash(jq:*) Bash(git rev-parse:*) Bash(node:*)
---
# retro-design
Pick a retro UI style from this repo's 53-system catalog and apply it to the user's target component or page.
## Catalog root
This skill ships inside the `retro-design-system` repo, so RDS_ROOT is the repo root itself. Resolve it on load:
!`git rev-parse --show-toplevel`
Use the returned absolute path as `RDS_ROOT` for every path in the workflow below.
## Workflow
### Step 1 — Load the compact catalog
Read `${CLAUDE_SKILL_DIR}/references/styles-index.md`. It is a 53-row table (slug, name, era, year, top 3 palette colors, tags). Do not read `manifest.json` or individual `styles/*/index.html` yet — that happens only after a slug is picked.
### Step 2 — Interpret `$ARGUMENTS`
- `list` or empty → render the full table to the user and stop.
- A slug like `09-crt-phosphor` → skip Step 3, go straight to Step 4 with that slug.
- A vibe (`80s green terminal`, `playful 90s web`, `pastel synthwave`, `minimal Swiss`) → continue to Step 3.
- A specific named system the user mentions (`Windows 95`, `Game Boy`, `C64`) → map to the closest slug via the catalog, confirm with the user, continue.
### Step 3 — Recommend 3 candidates
From the table, pick 3 slugs that best match the vibe (weight era, palette, and tags). For each, output:
```
- `NN-slug` — Name (Era, Year). One sentence why it fits. Palette: `#aaa` `#bbb` `#ccc`.
```
Ask the user to pick one (or accept the first). Do not read full HTML references for all 3 — only the chosen one.
### Step 4 — Load reference and generate