Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
erichowens avatar

Windows 3 1 Web Designer

erichowens/some_claude_skills

  • 121 installs
  • 178 repo stars
  • Updated July 14, 2026
  • erichowens/some_claude_skills

Build nostalgic Windows 3.1-style web UIs with period-accurate chrome, beveled buttons, system fonts, and retro window metaphors for demos or themed experiences.

About

Specializes in faithfully recreating Windows 3.1 desktop aesthetics for the web, including beveled buttons, system-style window frames, period typography, and nostalgic interaction patterns for themed sites, demos, and playful product experiences.

  • retro UI
  • Windows 3.1 chrome
  • beveled controls
  • nostalgic branding
  • themed demos

Windows 3 1 Web Designer by the numbers

  • 121 all-time installs (skills.sh)
  • Ranked #1,062 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/erichowens/some_claude_skills --skill windows-3-1-web-designer

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs121
repo stars★ 178
Last updatedJuly 14, 2026
Repositoryerichowens/some_claude_skills ↗

What it does

Build nostalgic Windows 3.1-style web UIs with period-accurate chrome, beveled buttons, system fonts, and retro window metaphors for demos or themed experiences.

Files

SKILL.mdMarkdownGitHub ↗

Windows 3.1 Web Designer

Creates modern 2026 web applications with authentic Windows 3.1 aesthetic. Not recreating 1992—extrapolating Win31 to modern contexts: AI assistants as Cue Card systems, mobile as pocket organizers, responsive as tiled MDI windows.

When to Use

Use for:

  • Web apps with Win31 authenticity (documentation sites, retro dashboards)
  • AI chatbot interfaces (Cue Card-style assistants, wizard dialogs)
  • Mobile-responsive Win31 UIs (pocket computing paradigm)
  • Program Manager navigation patterns
  • Tiled/cascading window layouts
  • MDI (Multiple Document Interface) applications
  • Hotdog Stand mode easter eggs

Do NOT use for:

  • Windows 95 aesthetic → use windows-95-web-designer (gradients, Start menu, taskbar)
  • Vaporwave/synthwave → use vaporwave-glassomorphic-ui-designer (neons, gradients)
  • macOS/iOS styling → use native-app-designer
  • Flat/Material design → use web-design-expert

Win31 vs Win95: Critical Differences

FeatureWindows 3.1Windows 95
Title barSolid navy (#000080)Gradient (dark→light blue)
Window controlsSingle menu buttonThree buttons (−, □, ×)
NavigationProgram ManagerStart Menu + Taskbar
FontsBitmap/VT323MS Sans Serif, Tahoma
Icons32×32 flat32×32 with drop shadow
DepthBevels onlyBevels + subtle gradients
AI styleCue Cards, WizardsClippy character

---

Core Design System

Color Palette

ColorHexCSS VariableUsage
System Gray#c0c0c0--win31-grayTHE primary background
Dark Gray#808080--win31-dark-grayShadows, pressed states
Light Gray#dfdfdf--win31-light-grayHighlights
Navy#000080--win31-navyTitle bar (SOLID, no gradient)
Teal#008080--win31-tealDesktop, links, highlights
White#ffffff--win31-whiteBeveled highlights, inputs
Black#000000--win31-blackBeveled shadows, borders

The Win31 Title Bar (SOLID)

THE signature Win31 element - solid navy, no gradient:

.win31-titlebar {
  background: #000080; /* SOLID - never a gradient! */
  color: white;
  font-family: 'VT323', 'Courier New', monospace;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.win31-titlebar-inactive {
  background: #808080; /* Solid dark gray when inactive */
}

Window Control Button (Single)

Win31 has ONE control button (not Win95's three):

.win31-control-btn {
  width: 18px;
  height: 14px;
  background: var(--win31-gray);
  border: none;
  font-size: 8px;
  font-family: var(--font-pixel);

  /* 3D bevel - outset */
  box-shadow:
    inset -1px -1px 0 var(--win31-black),
    inset 1px 1px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray),
    inset 2px 2px 0 var(--win31-light-gray);
}

.win31-control-btn:active {
  box-shadow:
    inset 1px 1px 0 var(--win31-black),
    inset -1px -1px 0 var(--win31-white);
}

The Sacred Rule: Beveled Borders

OUTSET (Raised) - Buttons, toolbars:

  • Top/Left border: WHITE
  • Bottom/Right border: BLACK
  • Inner: light-gray TL, dark-gray BR

INSET (Sunken) - Text fields, content areas:

  • Top/Left border: DARK GRAY
  • Bottom/Right border: WHITE
  • Inner: black TL, light-gray BR

Typography

UseFontFallbackSize
UI LabelsVT323Courier New12px
Title barsVT323 BoldCourier New Bold11px
HeadingsPress Start 2PVT32314px
CodeIBM Plex MonoCourier Prime12px

Web font stack:

:root {
  --font-win31-ui: 'VT323', 'Courier New', monospace;
  --font-win31-pixel: 'Press Start 2P', 'VT323', monospace;
  --font-win31-code: 'IBM Plex Mono', 'Courier Prime', monospace;
}

---

Modern Extrapolations

AI Chatbots: The Cue Card Paradigm

Win31 would present AI as a modal wizard system, not an animated character:

┌─ AI Assistant ──────────────────────[─]─┐
│                                          │
│  ┌────────────────────────────────────┐  │
│  │  What would you like help with?    │  │
│  │                                    │  │
│  │  ○ Writing a document              │  │
│  │  ○ Working with files              │  │
│  │  ○ Setting up your system          │  │
│  │  ○ Learning Windows basics         │  │
│  └────────────────────────────────────┘  │
│                                          │
│         [  OK  ]  [ Cancel ]  [ Help ]   │
└──────────────────────────────────────────┘

Key patterns:

  • No animated characters (pre-Clippy)
  • One question at a time (modal)
  • Radio button/numbered choices
  • Step-by-step wizard indicators
  • Cue Cards floating alongside app

Mobile: The Pocket Computing Paradigm

Win31 on mobile extrapolates to pocket organizer with Program Manager:

┌────────────────────────────┐
│ ■ Program Manager ─ 10:45  │  ← Title bar with time
├────────────────────────────┤
│ ╔════════════════════════╗ │
│ ║ Main                  ║ │
│ ╠════════════════════════╣ │
│ ║  ┌───┐   ┌───┐        ║ │
│ ║  │📁│   │📝│        ║ │  ← Program group
│ ║  │Mgr│   │Wrt│        ║ │
│ ║  └───┘   └───┘        ║ │
│ ╚════════════════════════╝ │
├────────────────────────────┤
│ [ Window ]  [ Help ]       │  ← Menu bar bottom
└────────────────────────────┘

Key patterns:

  • Program Manager is navigation (not Start menu)
  • One window at a time (modal stack)
  • Dialog stack pattern (overlays cascade)
  • Menu bar at bottom for touch
  • Swipe left = close window

Responsive: MDI as Breakpoints

Win31 used Multiple Document Interface. Apply this:

BreakpointWin31 MetaphorLayout
Mobile (<640px)Pocket computingSingle window, modal dialogs
Tablet (640-1024px)LaptopCascading windows
Desktop (>1024px)Full desktopTiled MDI windows

Theming: Hotdog Stand and Beyond

Windows 3.1 had limited but memorable themes:

/* Hotdog Stand (the infamous red/yellow) */
[data-theme="hotdog-stand"] {
  --win31-gray: #ff0000;
  --win31-dark-gray: #800000;
  --win31-light-gray: #ff8080;
  --win31-navy: #ffff00;
  --win31-title-text: #ff0000;
}

/* Monochrome (high contrast) */
[data-theme="monochrome"] {
  --win31-gray: #ffffff;
  --win31-dark-gray: #000000;
  --win31-light-gray: #ffffff;
  --win31-navy: #000000;
  --win31-teal: #000000;
}

---

Component Patterns

Program Manager Window

.win31-program-manager {
  position: fixed;
  inset: 0;
  background: var(--win31-teal);
  display: flex;
  flex-direction: column;
}

.win31-program-group {
  background: var(--win31-gray);
  border: 3px solid var(--win31-black);
  box-shadow:
    inset 2px 2px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray);
  margin: 8px;
  min-width: 200px;
}

.win31-program-group-titlebar {
  background: var(--win31-navy);
  color: var(--win31-white);
  padding: 2px 6px;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: bold;
}

.win31-program-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  gap: 8px;
  padding: 12px;
}

Dialog Box

.win31-dialog {
  min-width: 300px;
  background: var(--win31-gray);
  border: 3px solid var(--win31-black);
  box-shadow:
    inset 2px 2px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray),
    4px 4px 0 var(--win31-black);
}

.win31-dialog-content {
  padding: 16px;
  display: flex;
  gap: 16px;
}

.win31-dialog-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.win31-dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px 16px;
}

Menu Bar

.win31-menubar {
  background: var(--win31-gray);
  border-bottom: 2px solid var(--win31-dark-gray);
  padding: 2px;
  display: flex;
  gap: 0;
}

.win31-menu-item {
  padding: 4px 12px;
  font-family: var(--font-pixel);
  font-size: 11px;
  cursor: pointer;
}

.win31-menu-item:hover,
.win31-menu-item--active {
  background: var(--win31-navy);
  color: var(--win31-white);
}

.win31-menu-dropdown {
  position: absolute;
  background: var(--win31-gray);
  border: 2px solid;
  border-color: var(--win31-white) var(--win31-black)
               var(--win31-black) var(--win31-white);
  min-width: 150px;
  z-index: 100;
}

Status Bar

.win31-statusbar {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--win31-gray);
  border-top: 2px solid var(--win31-dark-gray);
}

.win31-statusbar-panel {
  flex: 1;
  padding: 2px 8px;
  font-family: var(--font-pixel);
  font-size: 10px;
  border: 1px solid;
  border-color: var(--win31-dark-gray) var(--win31-white)
               var(--win31-white) var(--win31-dark-gray);
}

---

Anti-Patterns

Anti-Pattern: Title Bar Gradients

Novice thinking: "Win31 has blue title bars like Win95" Reality: Win31 has SOLID navy. Gradient is Win95 only. Instead: background: #000080 (never linear-gradient)

Anti-Pattern: Three Window Buttons

Novice thinking: "Windows has minimize, maximize, close" Reality: Win31 has a SINGLE menu button (−). The three-button pattern is Win95. Instead: One button that opens a system menu

Anti-Pattern: Start Menu/Taskbar

Novice thinking: "Windows navigation = Start button" Reality: Win31 uses Program Manager. No taskbar, no Start. Instead: Program groups with cascading/tiled windows

Anti-Pattern: Neon Colors

Novice thinking: #00d4ff, #ff00ff for retro feel Reality: This is vaporwave, not Win31 Instead: Muted palette: teal (#008080), navy (#000080), gray (#c0c0c0)

Anti-Pattern: Rounded Corners

Novice thinking: border-radius: 8px for friendly UI Reality: Win31 has sharp 90° corners everywhere Instead: No border-radius (or 0)

Anti-Pattern: Blur Effects

Novice thinking: backdrop-filter: blur(10px), soft shadows Reality: Win31 has no blur—only hard-edge bevels Instead: Sharp bevel shadows: box-shadow: 4px 4px 0 #000

Anti-Pattern: Dark Backgrounds

Novice thinking: Dark mode = #1a1a2e backgrounds Reality: Win31 is LIGHT. System gray (#c0c0c0) everywhere. Instead: Light gray base with teal desktop

Anti-Pattern: Clippy-Style Characters

Novice thinking: Win31 had assistant characters Reality: Clippy came with Office 97 (Win95 era). Win31 used Cue Cards. Instead: Modal dialogs, step-by-step wizards, floating help cards

---

Quick Decision Tree

Is it a window chrome element?
├── Title bar? → SOLID navy (no gradient!)
├── Control button? → SINGLE button (not three)
├── Button? → 3D bevel (white TL, black BR)
├── Input? → Inset bevel (dark TL, white BR)
└── Content area? → White or gray, flat

Is it navigation?
├── Primary nav? → Program Manager groups
├── Section nav? → Menu bar with dropdowns
├── Page nav? → List box or tree control
└── Actions? → Toolbar buttons (beveled)

Is it AI/help?
├── Onboarding? → Setup Wizard (Step X of Y)
├── Inline help? → Cue Cards (floating tips)
├── Questions? → Modal dialog with options
└── Feedback? → Message box with icon

Is it responsive?
├── Mobile? → Single window, modal stack
├── Tablet? → Cascading windows
└── Desktop? → Tiled MDI layout

---

CSS Variables Template

:root {
  /* Core palette */
  --win31-white: #ffffff;
  --win31-black: #000000;
  --win31-gray: #c0c0c0;
  --win31-dark-gray: #808080;
  --win31-light-gray: #dfdfdf;
  --win31-navy: #000080;
  --win31-teal: #008080;

  /* Semantic */
  --win31-error: #ff0000;
  --win31-warning: #ffff00;
  --win31-success: #00ff00;
  --win31-info: #0000ff;

  /* Typography */
  --font-win31-ui: 'VT323', 'Courier New', monospace;
  --font-win31-pixel: 'Press Start 2P', 'VT323', monospace;
  --font-win31-code: 'IBM Plex Mono', 'Courier Prime', monospace;

  /* Spacing (4px grid) */
  --win31-spacing-xs: 2px;
  --win31-spacing-sm: 4px;
  --win31-spacing-md: 8px;
  --win31-spacing-lg: 16px;
  --win31-spacing-xl: 24px;
}

---

The Quick Test

If your component has:

  • ❌ Any gradient title bars → NOT Win31 (that's Win95)
  • ❌ Three window buttons → NOT Win31 (that's Win95)
  • ❌ Start menu or taskbar → NOT Win31 (that's Win95)
  • ❌ Any neon colors → NOT Win31 (that's vaporwave)
  • ❌ Any rounded corners → NOT Win31
  • ❌ Any blur effects → NOT Win31
  • ❌ Animated assistant character → NOT Win31 (that's Clippy/Win95)

It should have:

  • ✅ Solid navy (#000080) title bar
  • ✅ Single window control button
  • ✅ Program Manager navigation
  • ✅ System gray (#c0c0c0) base
  • ✅ Beveled borders (white TL, black BR)
  • ✅ Sharp corners everywhere
  • ✅ Pixel fonts (VT323, Press Start 2P)
  • ✅ Hard-edge box shadows only
  • ✅ Cue Cards for help (not characters)

---

File Naming Conventions

For authentic Win31 feel:

  • All caps: README.TXT, INSTALL.EXE
  • 8.3 format: PROGRAM.EXE, CONFIG.SYS
  • Extensions matter: .WRI, .BMP, .INI

---

References

  • /references/design-system.md - Complete color palette, typography, beveled border patterns
  • /references/component-patterns.md - Full CSS for windows, buttons, forms, panels
  • /references/anti-patterns.md - Vaporwave comparison, decision tree, conversion examples
  • /references/ai-assistant-patterns.md - Cue Card-style AI UX patterns
  • /references/mobile-pocket-computing.md - Responsive Win31 for mobile

---

Pairs With

  • windows-95-web-designer - For gradient/taskbar Win95 aesthetic
  • vaporwave-glassomorphic-ui-designer - Different retro aesthetic (neons)
  • web-design-expert - For brand direction alongside retro style
  • design-system-creator - For generating full design token systems

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k
Design & UI/UXuibranding
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.