skills.rest
erichowens
erichowensCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

windows-3-1-web-designer

Convert modern web interfaces into Windows 3.1 aesthetics with beveled borders and system-gray palettes.

181|30|Updated Nov 16, 2025
Search Tags:#retro#beveled-borders#win31#pixel-font#windows-3-1
One-click install
npx skills add https://github.com/erichowens/some_claude_skills --skill windows-3-1-web-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: windows-3-1-web-designer
Source: https://github.com/erichowens/some_claude_skills/tree/main/.claude/skills/windows-3-1-web-designer
Command: npx skills add https://github.com/erichowens/some_claude_skills --skill windows-3-1-web-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Recreates the Windows 3.1 aesthetic for modern web apps with authentic beveled borders, system-gray palettes, and pixel-perfect UI patterns.

Core Features & Use Cases

  • Beveled borders (outset/inset) for depth
  • System gray-based UI with classic title bars
  • Pixel fonts and retro component patterns
  • Windows 3.1 visual system integration into modern pages
  • Quick transformation of modern UI into Win31 style

Quick Start

Apply the Win31 styling to a simple card component using the provided design-system references.

Frequently Asked Questions about windows-3-1-web-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Windows 3.1 styling to modern web interfaces?▼

Windows 3.1 styling converts modern UI into authentic retro aesthetics using beveled borders, system-gray palettes, pixel fonts, and classic titlebars. Apply the provided design-system assets and CSS snippets to transform components into Win31 patterns without rebuilding from scratch.

What are beveled borders and how do they create the Windows 3.1 look?▼

Beveled borders use outset and inset CSS properties to create 3D depth effects characteristic of Win31 UI. Combining beveled borders with system-gray colors and pixel-perfect typography produces the authentic raised-button and inset-panel appearance.

Can I use Windows 3.1 design on landing pages and documentation sites?▼

Yes. Windows 3.1 aesthetics work for retro-themed applications, landing pages, documentation sites, and game interfaces. The design system includes responsive rules and complete UI component patterns (windows, buttons, inputs, panels) applicable to various modern web contexts.

Do I need to convert vaporwave designs to Windows 3.1 style?▼

Conversion from vaporwave to Win31 is supported. The Skill handles transformations between retro aesthetic frameworks, providing design-system assets and reference files to adapt vaporwave palettes and typography into authentic Windows 3.1 visual patterns.

What design assets does Windows 3.1 styling provide?▼

The Skill delivers color palettes, typography specifications, beveled border rules, complete UI component patterns, CSS snippets, reference files, responsive design rules, and MCP integration guidance for building Win31-styled interfaces.

How do I integrate Windows 3.1 styling into existing modern web projects?▼

Apply the provided CSS snippets and component patterns to existing interfaces. The design system includes MCP integration guidance, reference files, and responsive rules that layer Win31 aesthetics onto modern frameworks without requiring structural changes.

Related Skills

Explore More Design & Creative Skills→
efekrbasefekrbas
41

vaporwave

Transform modern UI designs into vaporwave aesthetics with 90s OS motifs.

Community
Intermediate
nguyenthienthanhnguyenthienthanh
24

design-expert

Provides expert guidance on UI/UX design, design systems, and responsive layouts.

Community
Basic
TheOrcDevTheOrcDev
2.0k

8-bit-pixel-art-patterns

Generate 8-bit pixel art borders, shadows, and decorative effects for retro UI components.

Community
Basic
guideopsguideops

vintage

Apply vintage design tokens, color palettes, and typography scales to projects.

Community
Intermediate