Win31 Pixel Art Designer

Win31 Pixel Art Designer

Expert in creating authentic Windows 3.1 era pixel art with proper color constraints and dithering techniques.

Decision Points

Color Strategy Decision Tree

Is the artwork >32x32 and NOT an icon? ├─ YES → Use 256-color palette │ ├─ Splash screen/About dialog → Navy gradients + 216-color cube │ └─ Banner/header → System gray base + logo accent area └─ NO → Use 16-color VGA palette ├─ Icon (32x32 or 16x16) → Standard 16-color set ├─ Cursor → Black/white only └─ UI element → Match Windows chrome colors

Dithering vs. Flat Color Decision

Does the design need gradients or intermediate tones? ├─ YES → Apply dithering │ ├─ Smooth gradient needed → Floyd-Steinberg ordered dither │ ├─ Shadow/highlight → 50% checkerboard pattern │ └─ Texture effect → Diagonal or horizontal line patterns └─ NO → Use flat colors ├─ Simple icon shapes → Pure VGA colors ├─ Text areas → Solid system gray (#C0C0C0) └─ High contrast elements → Black/white/primary colors

Generation Method Decision

Starting from scratch or converting existing art? ├─ FROM SCRATCH → AI generation first │ ├─ Simple icon → Direct Ideogram with VGA palette prompt │ ├─ Complex scene → Stability AI then post-process │ └─ Logo/text heavy → Manual pixel art preferred └─ CONVERTING EXISTING → Post-processing pipeline ├─ High-res source → Scale down first, then reduce colors ├─ Modern gradient → Replace with dithering patterns └─ Anti-aliased edges → Posterize then sharpen

Quality Check Decision

Does it pass the authenticity test? ├─ Colors wrong → More than 16 colors used for icons? │ ├─ YES → Run ImageMagick color reduction │ └─ NO → Check if using exact VGA hex values ├─ Edges wrong → Smooth/blurred edges visible? │ ├─ YES → Apply nearest-neighbor scaling and sharpen │ └─ NO → Check for proper 1px black outlines └─ Style wrong → Looks modern or vaporwave? ├─ YES → Restart with stricter period-accurate prompts └─ NO → Final validation against reference icons

Failure Modes

"Gradient Soup" Anti-Pattern

Symptom: Smooth color transitions, multiple similar shades, CSS-style gradients Detection Rule: If you see >4 similar color values or smooth transitions, you've hit this Fix: Replace gradients with 2-color dithering patterns. Use checkerboard for 50% blend, sparse dots for 25%, dense for 75%

"Anti-Alias Blur" Anti-Pattern

Symptom: Soft edges on diagonal lines, blended pixels at shape boundaries Detection Rule: If diagonal edges look smooth instead of stair-stepped, you've hit this Fix: Apply convert -filter point scaling and -colors 16 -dither FloydSteinberg to restore hard pixel edges

"Palette Drift" Anti-Pattern

Symptom: Colors that are "close" to VGA but not exact (e.g., #7F7F7F instead of #808080) Detection Rule: If color picker shows hex values not in the standard VGA set, you've hit this
Fix: Create VGA palette reference image and use convert input.png -remap vga-palette.png output.png

"Scale Confusion" Anti-Pattern

Symptom: 64x64+ artwork passed off as Win31-era, or tiny details that disappear at native size Detection Rule: If design elements don't work at 32x32 viewing size, you've hit this Fix: Design at target size first. For icons, work at 32x32 or 16x16, never scale down from larger

"Shadow Overboard" Anti-Pattern

Symptom: Complex drop shadows, multiple shadow layers, blurred shadow effects Detection Rule: If shadows use more than 2 colors or have any blur, you've hit this Fix: Use single-pixel offset shadows in #808080 (dark gray) only. Max 1-2px offset

Worked Examples

Example 1: Converting Modern App Icon to Win31 Style

Input: Modern calendar app icon (128x128, full color, drop shadows) Goal: Authentic Win31 calendar icon (32x32, 16-color)

Step 1 - Color Analysis

Original colors: 47 unique colors including gradients
VGA mapping needed: Calendar → Red/White, Frame → Gray tones
Decision: Use #FF0000 (Red), #FFFFFF (White), #C0C0C0 (Light Gray), #808080 (Dark Gray), #000000 (Black)

Step 2 - Shape Simplification

128x128 details: Month grid visible, subtle date numbers, rounded corners
32x32 constraints: Grid becomes 3x3 suggestion, single large "15" date, sharp corners
Expert insight: Novice keeps too much detail; expert focuses on recognizable calendar shape

Step 3 - Dithering Application

Original shadow: Soft 8px blur with alpha transparency  
Win31 shadow: 1px offset in #808080, checkerboard dither for depth
Expert decision: Use diagonal dither pattern to suggest paper texture

Step 4 - Final Construction

Background: #C0C0C0 (system gray)
Calendar frame: Black outline + white highlight top-left
Date area: White with red "15" 
Shadow: #808080 offset 1px right, 1px down
Result: Instantly recognizable as Win31-era while maintaining calendar concept

Example 2: Creating Splash Screen from Brand Guidelines

Input: Company rebrand package (modern logo, Pantone colors, sans-serif fonts) Goal: Win31 program splash screen (400x300, 256-color)

Step 1 - Palette Strategy Decision

Brand colors: Pantone 286 (bright blue), Pantone 377 (bright green)  
VGA mapping: #0000FF (closest to 286), #00FF00 (closest to 377)
Decision: Use 16-color base + dithered logo area for brand recognition

Step 2 - Layout Composition

Modern layout: Centered logo, lots of whitespace, minimal text
Win31 adaptation: Beveled frame border, navy title bar, structured text blocks
Expert insight: Win31 users expect information density, not minimalism

Step 3 - Typography Handling

Brand font: Custom sans-serif, thin weights
Win31 constraints: System fonts only, bold weights for readability
Solution: Use bold system font, add company name in structured box layout

Step 4 - Logo Conversion Process

Original: Vector logo with gradients and 24-bit colors
Conversion: Rasterize to 64x64, reduce to 256-color, apply Floyd-Steinberg dither
Expert insight: Logo fidelity in center, strict 16-color for chrome/borders
Final: Recognizable brand mark that feels authentically 1993

Quality Gates

• Icon uses exactly 16 VGA colors (no additional shades)
• All diagonal lines show visible stair-step pixels (no anti-aliasing)
• 1px black outline present on all icon boundaries
• Light source consistently from top-left (white/light gray highlights)
• Shadow/depth uses only #808080 dark gray, max 2px offset
• Text uses system fonts (no custom typography)
• Dithering patterns use only adjacent VGA colors (no intermediate blends)
• 32x32 icons remain readable when viewed at actual size
• Color palette matches extracted VGA reference exactly
• No blur effects, glow effects, or modern CSS-style shadows present

Not-For Boundaries

Do NOT use this skill for:

• Modern flat icons → Use web-design-expert instead
• CSS/web implementation → Use windows-3-1-web-designer instead
• Vaporwave or synthwave aesthetics → Use vaporwave-glassomorphic-ui-designer instead
• High-resolution artwork (>128px) → Use native-app-designer instead
• Photorealistic graphics → Use photoshop-expert instead
• Vector graphics that need to stay vector → Use illustrator-expert instead

Delegate when:

• Client needs scalable icons → svg-icon-designer
• Animation required → css-animation-expert
• Modern accessibility compliance needed → web-design-expert