关于 win31-pixel-art-designer
面向复古图形创作的设计技能，指导制作符合 Windows 3.1 视觉规范的像素艺术。涵盖图标、启动画面和横幅，并强调调色板、抖动与硬边像素。
主要功能
- 01设计 Windows 3.1 风格图标
- 02制作启动画面与横幅
- 03运用 16 色和 256 色 VGA 调色板
- 04应用抖动图案与像素规范
- 05提供图像生成提示词及后期处理建议
适用场景
- 01为复古应用制作程序图标
- 02设计“关于”对话框和启动图形
- 03将现代图像转换为复古像素风格
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/win31-pixel-art-designer确认已加载。
附带文件.claude-plugin/plugin.json
详细介绍
Win31 像素艺术设计师
擅长创作原汁原味的 Windows 3.1 时代像素艺术、图标、启动画面和程序横幅。精通 16 色和 256 色 VGA 调色板、抖动技术，以及 90 年代初计算机的视觉语言。
适用场景
适用于：
- Program Manager 风格的应用图标（32x32、16x16）
- 启动画面和“关于”对话框图形
- Win31 主题应用的横幅艺术
- 自定义光标和工具栏图形
- 将现代艺术转换为原汁原味的复古风格
- 了解颜色限制和抖动技术
不适用于：
- CSS/网页样式 → windows-3-1-web-designer
- 现代扁平图标 → web-design-expert
- 蒸汽波美学 → vaporwave-glassomorphic-ui-designer
- 高分辨率插画 → native-app-designer
Win31 视觉语言
图标规格
| 图标类型 | 尺寸 | 颜色 | 用途 |
|---|---|---|---|
| 大图标 | 32×32 | 16 色 | 桌面、文件管理器 |
| 小图标 | 16×16 | 16 色 | 标题栏、任务栏 |
| Shell 图标 | 48×48 | 256 色 | Win3.11/早期 Win95 |
| 光标 | 32×32 | 2 色（黑/白） | 鼠标指针 |
Windows 16 色调色板
这是 Windows 3.1 使用的确切调色板。偏离它就会破坏真实感。
┌──────────────────────────────────────────────────────┐
│ 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 │
└──────────────────────────────────────────────────────┘
重要提示： #C0C0C0（浅灰色）是系统的核心颜色，随处可见。
256 色 VGA 调色板
对于更丰富的图形（启动画面、“关于”对话框），Win31 支持 256 色模式：
| 范围 | 用途 |
|---|---|
| 0-15 | 标准 16 色（如上） |
| 16-31 | 系统保留 |
| 32-247 | 应用颜色（色彩立方体） |
| 248-255 | 系统保留 |
6×6×6 色彩立方体： 索引 32-247 对应的颜色如下：
- R：0、51、102、153、204、255（6 个级别）
- G：0、51、102、153、204、255（6 个级别）
- B：0、51、102、153、204、255（6 个级别）
抖动图案
抖动通过图案营造出更多颜色的错觉。Win31 大量使用这些图案。
常见抖动图案
50% Checkerboard: 25% Sparse: 75% Dense:
■ □ ■ □ □ □ □ □ ■ ■ ■ □
□ ■ □ ■ □ ■ □ □ ■ ■ □ ■
■ □ ■ □ □ □ □ □ ■ □ ■ ■
□ ■ □ ■ □ □ □ ■ □ ■ ■ ■
Diagonal: Horizontal Lines: Vertical Lines:
■ □ □ □ ■ ■ ■ ■ ■ □ ■ □
□ ■ □ □ □ □ □ □ ■ □ ■ □
□ □ ■ □ ■ ■ ■ ■ ■ □ ■ □
□ □ □ ■ □ □ □ □ ■ □ ■ □
何时使用抖动
| 场景 | 图案 | 颜色 |
|---|---|---|
| 平滑渐变 | 有序抖动 | 16 色 |
| 阴影区域 | 50% 棋盘格 | 黑色 + 深灰色 |
| 高光 | 25% 稀疏图案 | 白色 + 浅灰色 |
| 天空/背景 | 水平色带 | 蓝色调 |
| 金属表面 | 对角线 | 灰色调 |
CSS 抖动图案
/* 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;
}
图标设计指南
Win31 图标的构成
┌──────────────────────────────────────────┐
│ 32×32 Icon Anatomy │
├──────────────────────────────────────────┤
│ │
│ ┌─ Light source from top-left │
│ │ │
│ │ ████████████████ │
│ │ █ Highlight edge █░ │
│ │ █ █░ │
│ │ █ SUBJECT █░ ← Shadow edge │
│ │ █ █░ │
│ │ █████████████████░ │
│ │ ░░░░░░░░░░░░░░░░░ │
│ │ ↑ │
│ │ Drop shadow (optional) │
│ │
└──────────────────────────────────────────┘
图标设计规则
- 光源：始终位于左上方（45°）
- 轮廓：所有边缘均使用 1px 黑色轮廓
- 高光：顶部和左侧边缘使用 1px 白色/浅色高光
- 阴影：底部和右侧边缘使用 1px 深色阴影
- 投影：可选，使用偏移 1px 的阴影（50% 灰色）
- 视觉重心：将视觉主体居中（而非几何中心）
主题内容指南
| 类别 | 风格说明 |
|---|---|
| 文档 | 折角、带横线的内部 |
| 文件夹 | 顶部带标签，可打开或关闭 |
| 应用程序 | 代表其功能的工具/物件 |
| 设置 | 齿轮、滑块、勾选标记 |
| 硬件 | 简化的轮廓 |
| 人物 | 半身像视图、简化的五官 |
启动画面与横幅
典型的 Win31 启动画面
┌──────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────┐ │
│ │ ███████████████████████████████████████████████ │ │
│ │ █ █ │ │
│ │ █ ╔═══════════════════════════════╗ █ │ │
│ │ █ ║ PROGRAM NAME v1.0 ║ █ │ │
│ │ █ ╚═══════════════════════════════╝ █ │ │
│ │ █ █ │ │
│ │ █ [ Large Icon 64×64 ] █ │ │
│ │ █ █ │ │
│ │ █ Copyright © 1993 █ │ │
│ │ █ Your Company Name █ │ │
│ │ █ █ │ │
│ │ ███████████████████████████████████████████████ │ │
│ └──────────────────────────────────────────────────┘ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────────────────────────┘
横幅尺寸
| 类型 | 尺寸 | 用途 |
|---|---|---|
| 启动画面 | 400×300 或 320×240 | 启动画面 |
| 关于框 | 300×200 | 帮助 > 关于 |
| 安装横幅 | 480×60 | 安装向导 |
| 工具栏条带 | 16×(16×N) | 按钮条带 |
横幅颜色指南
| 区域 | 颜色 | 说明 |
|---|---|---|
| 背景 | #C0C0C0 或海军蓝渐变 | 系统灰色或品牌色 |
| 文本 | 灰底黑字、蓝底白字 | 高对比度 |
| 边框 | 凸起效果（左上白色，右下黑色） | 3D 效果 |
| 徽标区域 | 最多 256 色 | 视觉焦点 |
AI 图像生成提示词工程
适用于 Ideogram/Stability AI
图标生成提示词模板：
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
启动画面提示词模板：
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
横幅图形提示词模板：
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
负面提示词（应避免的内容）
modern, flat design, gradients, blur, glow effects,
rounded corners, anti-aliasing, smooth edges,
vaporwave, neon, photorealistic, 3D render,
high resolution, 4K, detailed, complex shading
工具推荐
图像生成
| 工具 | 最适合 | 备注 |
|---|---|---|
| Ideogram | 图标、徽标 | 擅长像素艺术风格 |
| Stability AI | 较大的场景 | 需要更多提示词来呈现复古风格 |
| DALL-E | 概念图 | 可能需要后期处理 |
后期处理
| 工具 | 用途 |
|---|---|
| ImageMagick | 减少颜色、抖动 |
| Aseprite | 像素艺术编辑（付费） |
| Piskel | 免费的浏览器像素编辑器 |
| GIMP | 索引颜色转换 |
ImageMagick 命令
# 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
反模式
反模式：平滑渐变
表现形式：CSS linear-gradient() 或喷枪式阴影
错误原因：Win31 没有平滑渐变，只有抖动图案
建议做法：在两种纯色之间使用有序抖动
反模式：抗锯齿
表现形式：平滑的对角边缘、混合像素 错误原因：Win31 图标的边缘是锐利的阶梯状 建议做法：使用硬朗的像素边缘，让对角线上的阶梯清晰可见
反模式：颜色过多
表现形式：完整 RGB 色谱、细微的颜色变化 错误原因：16 色限制意味着必须使用鲜明、明确的颜色 建议做法：坚持使用 VGA 调色板，用抖动呈现中间色
反模式：高分辨率
表现形式：128×128 或更大的“像素艺术” 错误原因：真正的 Win31 图标最大只有 32×32 建议做法：以原始尺寸绘制，使用最近邻插值放大
反模式：带模糊效果的投影
表现形式：box-shadow: 4px 4px 8px rgba(0,0,0,0.3)
错误原因：Win31 阴影边缘锐利，偏移 1-2px
建议做法：使用 1px 的纯色 #808080 阴影，向右下方偏移 1px
快速参考卡
┌─────────────────────────────────────────────────────┐
│ 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 │
│ │
└─────────────────────────────────────────────────────┘
与以下项目集成
- windows-3-1-web-designer - 实现 Win31 美学的 CSS
- win31-audio-design - 与视觉风格匹配的音频
- pixel-art-infographic-creator - 教育类示意图
- native-app-designer - 将 Win31 风格应用于现代应用
核心见解：Win31 像素艺术的魅力在于用限制塑造个性。16 色限制、硬朗边缘和抖动图案共同定义了这种美学。拥抱这些限制，不要与之对抗。
请记住：在 32×32 的尺寸下，每个像素都至关重要。仔细规划构图，让抖动来营造深度和渐变效果。
评论
支持 Markdown