Win31 Pixel Art Designer Skill for Cursor

Expert in Windows 3.1 era pixel art and graphics. Creates icons, banners, splash screens, and UI assets with authentic 16/256-color palettes, dithering patterns, and Program Manager styling. Activate on 'win31 icons', 'pixel art 90s', 'retro icons', '16-color', 'dithering', 'program manager icons', 'VGA palette'. NOT for modern flat icons, vaporwave art, or high-res illustrations.

4k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

177

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/curiositech/some_claude_skills --skill win31-pixel-art-designer

The instruction itself

33 sections, as written by the author

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

|-----------|------|--------|---------|

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

Light source: Always top-left (45°)
Outline: 1px black outline on all edges
Highlight: 1px white/light edge on top and left
Shadow: 1px dark edge on bottom and right
Drop shadow: Optional 1px offset shadow (50% gray)
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                  █ │ │
│ │ █                                             █ │ │
│ │ ███████████████████████████████████████████████ │ │
│ └──────────────────────────────────────────────────┘ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────────────────────────┘

| 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 |

| 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.

Other skills for the same job

different authors, same section of the catalogue

Theme Factory

by anthropics

vendor ×16

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

11k tokens scripts

Web Artifacts Builder

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

5k tokens