windows-3-1-web-designer

Windows 3.1 Web Designer

以原汁原味的 Windows 3.1 美学创建现代 2026 Web 应用。不是重现 1992 年——而是将 Win31 延伸到现代场景：把 AI 助手设计成提示卡系统，把移动设备设计成袖珍整理器，把响应式布局设计成平铺式 MDI 窗口。

适用场景

适用于：

• 具有 Win31 原汁原味风格的 Web 应用（文档网站、复古仪表板）
• AI 聊天机器人界面（提示卡风格的助手、向导对话框）
• 移动端响应式 Win31 UI（袖珍计算范式）
• Program Manager 导航模式
• 平铺式／级联式窗口布局
• MDI（多文档界面）应用
• Hotdog Stand 模式彩蛋

不适用于：

• Windows 95 美学 → 使用 windows-95-web-designer（渐变、开始菜单、任务栏）
• Vaporwave／Synthwave 风格 → 使用 vaporwave-glassomorphic-ui-designer（霓虹色、渐变）
• macOS／iOS 风格 → 使用 native-app-designer
• 扁平化／Material Design → 使用 web-design-expert

Win31 与 Win95：关键区别

特性	Windows 3.1	Windows 95
标题栏	纯海军蓝（#000080）	渐变（深蓝→浅蓝）
窗口控件	单个菜单按钮	三个按钮（−、□、×）
导航	Program Manager	开始菜单 + 任务栏
字体	位图／VT323	MS Sans Serif、Tahoma
图标	32×32 扁平图标	32×32 带投影
立体效果	仅凹凸边框	凹凸边框 + 微妙渐变
AI 风格	提示卡、向导	Clippy 角色

---

核心设计系统

调色板

颜色	Hex	CSS 变量	用途
系统灰	#c0c0c0	--win31-gray	主要背景
深灰	#808080	--win31-dark-gray	阴影、按下状态
浅灰	#dfdfdf	--win31-light-gray	高亮
海军蓝	#000080	--win31-navy	标题栏（纯色，无渐变）
蓝绿色	#008080	--win31-teal	桌面、链接、高亮
白色	#ffffff	--win31-white	凹凸边框高亮、输入框
黑色	#000000	--win31-black	凹凸边框阴影、边框

Win31 标题栏（纯色）

Win31 的标志性元素——纯海军蓝，无渐变：

.win31-titlebar {
  background: #000080; /* SOLID - never a gradient! */
  color: white;
  font-family: 'VT323', 'Courier New', monospace;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.win31-titlebar-inactive {
  background: #808080; /* Solid dark gray when inactive */
}

窗口控制按钮（单个）

Win31 只有一个控件按钮（而非 Win95 的三个）：

.win31-control-btn {
  width: 18px;
  height: 14px;
  background: var(--win31-gray);
  border: none;
  font-size: 8px;
  font-family: var(--font-pixel);

  /* 3D bevel - outset */
  box-shadow:
    inset -1px -1px 0 var(--win31-black),
    inset 1px 1px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray),
    inset 2px 2px 0 var(--win31-light-gray);
}

.win31-control-btn:active {
  box-shadow:
    inset 1px 1px 0 var(--win31-black),
    inset -1px -1px 0 var(--win31-white);
}

神圣规则：凹凸边框

凸起——按钮、工具栏：

• 上／左边框：白色
• 下／右边框：黑色
• 内侧：左上浅灰，右下深灰

凹陷——文本字段、内容区域：

• 上／左边框：深灰
• 下／右边框：白色
• 内侧：左上黑色，右下浅灰

排版

用途	字体	后备字体	大小
UI 标签	VT323	Courier New	12px
标题栏	VT323 Bold	Courier New Bold	11px
标题	Press Start 2P	VT323	14px
代码	IBM Plex Mono	Courier Prime	12px

Web 字体栈：

:root {
  --font-win31-ui: 'VT323', 'Courier New', monospace;
  --font-win31-pixel: 'Press Start 2P', 'VT323', monospace;
  --font-win31-code: 'IBM Plex Mono', 'Courier Prime', monospace;
}

---

现代延伸

AI 聊天机器人：提示卡范式

Win31 会将 AI 呈现为模态向导系统，而非动画角色：

┌─ AI Assistant ──────────────────────[─]─┐
│                                          │
│  ┌────────────────────────────────────┐  │
│  │  What would you like help with?    │  │
│  │                                    │  │
│  │  ○ Writing a document              │  │
│  │  ○ Working with files              │  │
│  │  ○ Setting up your system          │  │
│  │  ○ Learning Windows basics         │  │
│  └────────────────────────────────────┘  │
│                                          │
│         [  OK  ]  [ Cancel ]  [ Help ]   │
└──────────────────────────────────────────┘

关键模式：

• 不使用动画角色（早于 Clippy）
• 一次只问一个问题（模态）
• 单选按钮／编号选项
• 分步向导指示器
• 与应用并排浮动的提示卡

移动设备：袖珍计算范式

将 Win31 延伸到移动设备，可设计为带有 Program Manager 的袖珍整理器：

┌────────────────────────────┐
│ ■ Program Manager ─ 10:45  │  ← Title bar with time
├────────────────────────────┤
│ ╔════════════════════════╗ │
│ ║ Main                  ║ │
│ ╠════════════════════════╣ │
│ ║  ┌───┐   ┌───┐        ║ │
│ ║  │📁│   │📝│        ║ │  ← Program group
│ ║  │Mgr│   │Wrt│        ║ │
│ ║  └───┘   └───┘        ║ │
│ ╚════════════════════════╝ │
├────────────────────────────┤
│ [ Window ]  [ Help ]       │  ← Menu bar bottom
└────────────────────────────┘

关键模式：

• Program Manager 用作导航（而非开始菜单）
• 一次显示一个窗口（模态堆栈）
• 对话框堆栈模式（叠加层级联）
• 底部菜单栏，便于触控
• 向左滑动 = 关闭窗口

响应式设计：以 MDI 作为断点

Win31 使用多文档界面。可采用以下设计：

断点	Win31 隐喻	布局
移动端（<640px）	袖珍计算	单个窗口、模态对话框
平板（640-1024px）	笔记本电脑	级联窗口
桌面端（>1024px）	完整桌面	平铺式 MDI 窗口

主题：Hotdog Stand 及更多

Windows 3.1 的主题有限，却令人难忘：

/* Hotdog Stand (the infamous red/yellow) */
[data-theme="hotdog-stand"] {
  --win31-gray: #ff0000;
  --win31-dark-gray: #800000;
  --win31-light-gray: #ff8080;
  --win31-navy: #ffff00;
  --win31-title-text: #ff0000;
}

/* Monochrome (high contrast) */
[data-theme="monochrome"] {
  --win31-gray: #ffffff;
  --win31-dark-gray: #000000;
  --win31-light-gray: #ffffff;
  --win31-navy: #000000;
  --win31-teal: #000000;
}

---

组件模式

程序管理器窗口

.win31-program-manager {
  position: fixed;
  inset: 0;
  background: var(--win31-teal);
  display: flex;
  flex-direction: column;
}

.win31-program-group {
  background: var(--win31-gray);
  border: 3px solid var(--win31-black);
  box-shadow:
    inset 2px 2px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray);
  margin: 8px;
  min-width: 200px;
}

.win31-program-group-titlebar {
  background: var(--win31-navy);
  color: var(--win31-white);
  padding: 2px 6px;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: bold;
}

.win31-program-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  gap: 8px;
  padding: 12px;
}

对话框

.win31-dialog {
  min-width: 300px;
  background: var(--win31-gray);
  border: 3px solid var(--win31-black);
  box-shadow:
    inset 2px 2px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray),
    4px 4px 0 var(--win31-black);
}

.win31-dialog-content {
  padding: 16px;
  display: flex;
  gap: 16px;
}

.win31-dialog-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.win31-dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px 16px;
}

菜单栏

.win31-menubar {
  background: var(--win31-gray);
  border-bottom: 2px solid var(--win31-dark-gray);
  padding: 2px;
  display: flex;
  gap: 0;
}

.win31-menu-item {
  padding: 4px 12px;
  font-family: var(--font-pixel);
  font-size: 11px;
  cursor: pointer;
}

.win31-menu-item:hover,
.win31-menu-item--active {
  background: var(--win31-navy);
  color: var(--win31-white);
}

.win31-menu-dropdown {
  position: absolute;
  background: var(--win31-gray);
  border: 2px solid;
  border-color: var(--win31-white) var(--win31-black)
               var(--win31-black) var(--win31-white);
  min-width: 150px;
  z-index: 100;
}

状态栏

.win31-statusbar {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--win31-gray);
  border-top: 2px solid var(--win31-dark-gray);
}

.win31-statusbar-panel {
  flex: 1;
  padding: 2px 8px;
  font-family: var(--font-pixel);
  font-size: 10px;
  border: 1px solid;
  border-color: var(--win31-dark-gray) var(--win31-white)
               var(--win31-white) var(--win31-dark-gray);
}

---

反模式

反模式：标题栏渐变

新手想法：“Win31 有像 Win95 那样的蓝色标题栏” 实际情况：Win31 的标题栏是纯海军蓝。渐变仅见于 Win95。 正确做法：background: #000080（绝不使用 linear-gradient）

反模式：三个窗口按钮

新手想法：“Windows 有最小化、最大化和关闭按钮” 实际情况：Win31 只有一个菜单按钮（−）。三个按钮的模式属于 Win95。 正确做法：使用一个可打开系统菜单的按钮

反模式：开始菜单/任务栏

新手想法：“Windows 导航 = 开始按钮” 实际情况：Win31 使用程序管理器。没有任务栏，也没有开始菜单。 正确做法：使用程序组和级联/平铺窗口

反模式：霓虹色

新手想法：用 #00d4ff、#ff00ff 营造复古感 实际情况：这是蒸汽波风格，不是 Win31 风格。 正确做法：使用柔和的配色：青色（#008080）、海军蓝（#000080）、灰色（#c0c0c0）

反模式：圆角

新手想法：使用 border-radius: 8px 打造友好的 UI 实际情况：Win31 的所有边角都是锐利的 90° 角。 正确做法：不使用 border-radius（或设为 0）

反模式：模糊效果

新手想法：使用 backdrop-filter: blur(10px) 和柔和阴影 实际情况：Win31 没有模糊效果，只有硬边斜面。 正确做法：使用锐利的斜面阴影：box-shadow: 4px 4px 0 #000

反模式：深色背景

新手想法：深色模式 = #1a1a2e 背景 实际情况：Win31 是浅色风格。系统灰（#c0c0c0）无处不在。 正确做法：以浅灰色为基底，搭配青色桌面

反模式：Clippy 风格的角色

新手想法：Win31 有助手角色 实际情况：Clippy 随 Office 97 推出（属于 Win95 时代）。Win31 使用的是提示卡。 正确做法：使用模态对话框、分步向导和浮动帮助卡片

---

快速决策树

Is it a window chrome element?
├── Title bar? → SOLID navy (no gradient!)
├── Control button? → SINGLE button (not three)
├── Button? → 3D bevel (white TL, black BR)
├── Input? → Inset bevel (dark TL, white BR)
└── Content area? → White or gray, flat

Is it navigation?
├── Primary nav? → Program Manager groups
├── Section nav? → Menu bar with dropdowns
├── Page nav? → List box or tree control
└── Actions? → Toolbar buttons (beveled)

Is it AI/help?
├── Onboarding? → Setup Wizard (Step X of Y)
├── Inline help? → Cue Cards (floating tips)
├── Questions? → Modal dialog with options
└── Feedback? → Message box with icon

Is it responsive?
├── Mobile? → Single window, modal stack
├── Tablet? → Cascading windows
└── Desktop? → Tiled MDI layout

---

CSS 变量模板

:root {
  /* Core palette */
  --win31-white: #ffffff;
  --win31-black: #000000;
  --win31-gray: #c0c0c0;
  --win31-dark-gray: #808080;
  --win31-light-gray: #dfdfdf;
  --win31-navy: #000080;
  --win31-teal: #008080;

  /* Semantic */
  --win31-error: #ff0000;
  --win31-warning: #ffff00;
  --win31-success: #00ff00;
  --win31-info: #0000ff;

  /* Typography */
  --font-win31-ui: 'VT323', 'Courier New', monospace;
  --font-win31-pixel: 'Press Start 2P', 'VT323', monospace;
  --font-win31-code: 'IBM Plex Mono', 'Courier Prime', monospace;

  /* Spacing (4px grid) */
  --win31-spacing-xs: 2px;
  --win31-spacing-sm: 4px;
  --win31-spacing-md: 8px;
  --win31-spacing-lg: 16px;
  --win31-spacing-xl: 24px;
}

---

快速测试

如果你的组件具有以下特征：

• ❌ 任意渐变标题栏 → 不是 Win31（那是 Win95）
• ❌ 三个窗口按钮 → 不是 Win31（那是 Win95）
• ❌ 开始菜单或任务栏 → 不是 Win31（那是 Win95）
• ❌ 任意霓虹色 → 不是 Win31（那是蒸汽波风格）
• ❌ 任意圆角 → 不是 Win31
• ❌ 任意模糊效果 → 不是 Win31
• ❌ 动画助手角色 → 不是 Win31（那是 Clippy/Win95）

它应该具有以下特征：

• ✅ 纯海军蓝（#000080）标题栏
• ✅ 单个窗口控制按钮
• ✅ 程序管理器导航
• ✅ 系统灰（#c0c0c0）基底
• ✅ 斜面边框（左上白色，右下黑色）
• ✅ 所有边角都保持锐利
• ✅ 像素字体（VT323、Press Start 2P）
• ✅ 仅使用硬边框阴影
• ✅ 使用提示卡提供帮助（而非角色）

---

文件命名约定

营造真实的 Win31 观感：

• 全部大写：README.TXT、INSTALL.EXE
• 8.3 格式：PROGRAM.EXE、CONFIG.SYS
• 扩展名很重要：.WRI、.BMP、.INI

---

参考资料

• /references/design-system.md - 完整的配色方案、排版和斜面边框模式
• /references/component-patterns.md - 窗口、按钮、表单和面板的完整 CSS
• /references/anti-patterns.md - 蒸汽波风格对比、决策树和转换示例
• /references/ai-assistant-patterns.md - 提示卡风格的 AI UX 模式
• /references/mobile-pocket-computing.md - 适用于移动设备的响应式 Win31

---

可搭配使用

• windows-95-web-designer - 采用渐变/任务栏 Win95 美学
• vaporwave-glassomorphic-ui-designer - 不同的复古美学（霓虹色）
• web-design-expert - 将品牌方向与复古风格相结合
• design-system-creator - 生成完整的设计令牌系统