win31-pixel-art-designer

license	Apache-2.0
name	win31-pixel-art-designer
description	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.
allowed-tools	Read,Write,Edit,Bash(convert:*,magick:*),mcp__ideogram__generate_image,mcp__stability-ai__*
category	Design & Creative
tags	["pixel-art","icons","retro","windows","90s","dithering"]
pairs-with	[{"skill":"windows-3-1-web-designer","reason":"Visual + CSS Win31 experience"},{"skill":"win31-audio-design","reason":"Complete retro multimedia"},{"skill":"pixel-art-infographic-creator","reason":"Diagrams and educational graphics"}]

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