Skills
▥NYC
skills/erichowens/some_claude_skills/win31-pixel-art-designer

win31-pixel-art-designer

SKILL.md

Win31 Pixel Art Designer

Expert in creating authentic Windows 3.1 era pixel art, icons, splash screens, and program banners. Masters 16-color and 256-color VGA palettes, dithering techniques, and the visual vocabulary of early 90s computing.

When to Use

Use for:

  • Program Manager-style application icons (32x32, 16x16)
  • Splash screens and "About" dialog graphics
  • Banner art for Win31-themed applications
  • Custom cursor and toolbar graphics
  • Converting modern art to authentic retro style
  • Understanding color limitations and dithering

Do NOT use for:

  • CSS/web styling → windows-3-1-web-designer
  • Modern flat icons → web-design-expert
  • Vaporwave aesthetic → vaporwave-glassomorphic-ui-designer
  • High-resolution illustrations → native-app-designer

The Win31 Visual Vocabulary

Icon Specifications

Icon Type Size Colors Purpose
Large Icon 32×32 16 colors Desktop, file manager
Small Icon 16×16 16 colors Title bar, taskbar
Shell Icon 48×48 256 colors Win3.11/early Win95
Cursor 32×32 2 colors (B/W) Mouse pointers

The 16-Color Windows Palette

This is the EXACT palette Windows 3.1 used. Deviation breaks authenticity.

┌──────────────────────────────────────────────────────┐
│  Standard 16-Color VGA Palette (Win31)               │
├──────────────────────────────────────────────────────┤
│  #000000  Black         #808080  Dark Gray           │
│  #800000  Dark Red      #FF0000  Red                 │
│  #008000  Dark Green    #00FF00  Green               │
│  #808000  Dark Yellow   #FFFF00  Yellow              │
│  #000080  Dark Blue     #0000FF  Blue                │
│  #800080  Dark Magenta  #FF00FF  Magenta             │
│  #008080  Dark Cyan     #00FFFF  Cyan                │
│  #C0C0C0  Light Gray    #FFFFFF  White               │
└──────────────────────────────────────────────────────┘

Key insight: #C0C0C0 (Light Gray) is THE system color. It appears everywhere.

The 256-Color VGA Palette

For richer graphics (splash screens, About dialogs), Win31 supported 256-color mode:

Range Purpose
0-15 Standard 16 colors (above)
16-31 System reserved
32-247 Application colors (color cube)
248-255 System reserved

The 6×6×6 Color Cube: For indexes 32-247, colors follow:

  • R: 0, 51, 102, 153, 204, 255 (6 levels)
  • G: 0, 51, 102, 153, 204, 255 (6 levels)
  • B: 0, 51, 102, 153, 204, 255 (6 levels)

Dithering Patterns

Dithering creates the illusion of more colors using patterns. Win31 used these heavily.

Common Dithering Patterns

50% Checkerboard:     25% Sparse:          75% Dense:
■ □ ■ □               □ □ □ □              ■ ■ ■ □
□ ■ □ ■               □ ■ □ □              ■ ■ □ ■
■ □ ■ □               □ □ □ □              ■ □ ■ ■
□ ■ □ ■               □ □ □ ■              □ ■ ■ ■

Diagonal:             Horizontal Lines:    Vertical Lines:
■ □ □ □               ■ ■ ■ ■              ■ □ ■ □
□ ■ □ □               □ □ □ □              ■ □ ■ □
□ □ ■ □               ■ ■ ■ ■              ■ □ ■ □
□ □ □ ■               □ □ □ □              ■ □ ■ □

When to Use Dithering

Scenario Pattern Colors
Smooth gradients Ordered dithering 16 colors
Shadow areas 50% checkerboard Black + Dark Gray
Highlights 25% sparse White + Light Gray
Sky/backgrounds Horizontal bands Blue tones
Metal surfaces Diagonal Gray tones

CSS Dithering Pattern

/* Classic Win31 checkerboard dither in CSS */
.win31-dither {
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23808080'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23808080'/%3E%3C/svg%3E");
  background-size: 4px 4px;
}

Icon Design Guidelines

Anatomy of a Win31 Icon

┌──────────────────────────────────────────┐
│          32×32 Icon Anatomy              │
├──────────────────────────────────────────┤
│                                          │
│  ┌─ Light source from top-left           │
│  │                                       │
│  │   ████████████████                    │
│  │   █ Highlight edge █░                 │
│  │   █                █░                 │
│  │   █   SUBJECT      █░ ← Shadow edge   │
│  │   █                █░                 │
│  │   █████████████████░                  │
│  │    ░░░░░░░░░░░░░░░░░                  │
│  │        ↑                              │
│  │    Drop shadow (optional)             │
│                                          │
└──────────────────────────────────────────┘

Icon Design Rules

  1. Light source: Always top-left (45°)
  2. Outline: 1px black outline on all edges
  3. Highlight: 1px white/light edge on top and left
  4. Shadow: 1px dark edge on bottom and right
  5. Drop shadow: Optional 1px offset shadow (50% gray)
  6. Hotspot: Center the visual mass (not geometric center)

Subject Matter Guidelines

Category Style Notes
Documents Folded corner, lined interior
Folders Tab on top, open or closed
Applications Tool/object representing function
Settings Gears, sliders, checkmarks
Hardware Simplified silhouette
People Bust view, simplified features

Splash Screens & Banners

Typical Win31 Splash Screen

┌──────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────┐ │
│ │ ███████████████████████████████████████████████ │ │
│ │ █                                             █ │ │
│ │ █    ╔═══════════════════════════════╗       █ │ │
│ │ █    ║    PROGRAM NAME v1.0          ║       █ │ │
│ │ █    ╚═══════════════════════════════╝       █ │ │
│ │ █                                             █ │ │
│ │ █         [   Large Icon 64×64   ]           █ │ │
│ │ █                                             █ │ │
│ │ █         Copyright © 1993                   █ │ │
│ │ █         Your Company Name                  █ │ │
│ │ █                                             █ │ │
│ │ ███████████████████████████████████████████████ │ │
│ └──────────────────────────────────────────────────┘ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────────────────────────┘

Banner Dimensions

Type Size Usage
Splash 400×300 or 320×240 Startup screen
About Box 300×200 Help > About
Setup Banner 480×60 Installer wizard
Toolbar Strip 16×(16×N) Button strip

Banner Color Guidelines

Zone Colors Notes
Background #C0C0C0 or Navy gradient System gray or branded
Text Black on gray, White on navy High contrast
Border Beveled (white TL, black BR) 3D effect
Logo area 256 colors max Central focus

Prompt Engineering for AI Image Generation

For Ideogram/Stability AI

Icon generation prompt template:

32x32 pixel art icon, Windows 3.1 style, [SUBJECT],
16-color VGA palette, 1px black outline,
beveled 3D effect with highlight top-left and shadow bottom-right,
#C0C0C0 system gray background, clean pixel edges,
no anti-aliasing, no gradients, retro 1990s computer aesthetic

Splash screen prompt template:

Windows 3.1 splash screen, 256-color VGA, [PROGRAM NAME],
centered composition, beveled 3D frame border,
navy blue title bar, system gray #C0C0C0 background,
pixel art style, corporate 1990s software aesthetic,
clean typography, no modern effects, authentic retro feel

Banner graphic prompt template:

Windows 3.1 program banner, 480x60 pixels, [PROGRAM NAME],
horizontal layout, beveled border frame,
16-color palette dominant with 256-color logo area,
retro pixel art typography, 1990s software aesthetic,
sharp pixel edges, no blur, no anti-aliasing

Negative prompts (what to AVOID)

modern, flat design, gradients, blur, glow effects,
rounded corners, anti-aliasing, smooth edges,
vaporwave, neon, photorealistic, 3D render,
high resolution, 4K, detailed, complex shading

Tool Recommendations

Image Generation

Tool Best For Notes
Ideogram Icons, logos Good at pixel art style
Stability AI Larger scenes Needs more prompting for retro
DALL-E Concepts May need post-processing

Post-Processing

Tool Purpose
ImageMagick Color reduction, dithering
Aseprite Pixel art editing (paid)
Piskel Free browser pixel editor
GIMP Index color conversion

ImageMagick Commands

# Convert to 16-color palette with dithering
convert input.png -colors 16 -dither FloydSteinberg output.png

# Convert to exact Win31 palette
convert input.png -remap win31-palette.png -dither FloydSteinberg output.png

# Scale up pixel art (nearest neighbor)
convert input.png -filter point -resize 200% output.png

# Add 1px black outline
convert input.png -bordercolor black -border 1 output.png

Anti-Patterns

Anti-Pattern: Smooth Gradients

What it looks like: CSS linear-gradient() or airbrushed shading Why wrong: Win31 has NO smooth gradients—only dithered patterns Instead: Use ordered dithering between two solid colors

Anti-Pattern: Anti-Aliasing

What it looks like: Smooth diagonal edges, blended pixels Why wrong: Win31 icons have SHARP stair-stepped edges Instead: Hard pixel edges, visible steps on diagonals

Anti-Pattern: Too Many Colors

What it looks like: Full RGB spectrum, subtle color variations Why wrong: 16-color limit means bold, distinct colors Instead: Stick to the VGA palette, use dithering for in-between

Anti-Pattern: High Resolution

What it looks like: 128×128 or larger "pixel art" Why wrong: Real Win31 icons are 32×32 max Instead: Work at native size, scale up with nearest-neighbor

Anti-Pattern: Drop Shadows with Blur

What it looks like: box-shadow: 4px 4px 8px rgba(0,0,0,0.3) Why wrong: Win31 shadows are HARD edge, 1-2px offset Instead: 1px solid #808080 offset by 1px right and down

Quick Reference Card

┌─────────────────────────────────────────────────────┐
│           Win31 Pixel Art Quick Reference           │
├─────────────────────────────────────────────────────┤
│                                                     │
│  COLORS                                             │
│  ├─ System Gray: #C0C0C0 (THE background)          │
│  ├─ Navy: #000080 (title bars, accents)            │
│  ├─ Teal: #008080 (links, highlights)              │
│  └─ 16-color VGA palette ONLY                      │
│                                                     │
│  ICONS                                              │
│  ├─ Large: 32×32, 16 colors                        │
│  ├─ Small: 16×16, 16 colors                        │
│  ├─ Light from top-left                            │
│  └─ 1px black outline required                     │
│                                                     │
│  TECHNIQUE                                          │
│  ├─ NO anti-aliasing                               │
│  ├─ NO gradients (use dithering)                   │
│  ├─ NO blur effects                                │
│  └─ Beveled borders for 3D depth                   │
│                                                     │
│  GENERATION                                         │
│  ├─ AI: "16-color, pixel art, no anti-aliasing"   │
│  ├─ Post: ImageMagick -colors 16 -dither Floyd    │
│  └─ Scale: nearest-neighbor only                   │
│                                                     │
└─────────────────────────────────────────────────────┘

Integrates With

  • windows-3-1-web-designer - CSS implementation of Win31 aesthetic
  • win31-audio-design - Audio to match visual style
  • pixel-art-infographic-creator - Educational diagrams
  • native-app-designer - When Win31 styling meets modern apps

Core insight: Win31 pixel art is about CONSTRAINTS creating character. The 16-color limit, hard edges, and dithering patterns define the aesthetic. Embrace these limits—don't fight them.

Remember: Every pixel counts at 32×32. Plan your composition carefully, and let dithering do the work of creating depth and gradients.

Weekly Installs
7
Repository
erichowens/some_claude_skills
First Seen
Feb 5, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass
Installed on
replit6
cursor6
gemini-cli5
antigravity5
claude-code5
github-copilot5