windows-95-web-designer

Windows 95 网页设计师

以原汁原味的 Windows 95 美学打造现代 2026 年 Web 应用。这并非重现 1995 年——而是将 Win95 延伸至现代场景：将 AI 助手视为 Clippy 的后代，将移动设备视为袖珍 PC，将响应式设计视为多显示器布局。

适用场景

适用于：

• 追求原汁原味 Win95 风格的 Web 应用（windags.ai、复古仪表板）
• AI 聊天机器人界面（Clippy 风格的助手、向导对话框）
• 适配移动设备的 Win95 UI（袖珍 PC 范式）
• 开始菜单导航模式
• 基于任务栏的布局
• 桌面图标网格
• Win95 Plus! 主题变体

不适用于：

• Windows 3.1 风格 → 使用 windows-3-1-web-designer（更扁平，采用程序管理器风格）
• 蒸汽波／合成波风格 → 使用 vaporwave-glassomorphic-ui-designer（霓虹色、渐变）
• macOS／iOS 样式 → 使用 native-app-designer
• 扁平化／Material Design → 使用 web-design-expert

Win95 与 Win31：关键区别

特性	Windows 3.1	Windows 95
标题栏	纯藏青色（#000080）	渐变（由深蓝到浅蓝）
窗口控件	单个菜单按钮	三个按钮（−、□、×）
导航	程序管理器	开始菜单 + 任务栏
字体	位图／系统字体	MS Sans Serif、Tahoma
图标	32×32 扁平样式	32×32 带投影
立体效果	仅凸起效果	凸起效果 + 微妙渐变

---

核心设计系统

配色方案

颜色	Hex	CSS 变量	用途
桌面青色	#008080	--win95-desktop	桌面背景
系统灰色	#c0c0c0	--win95-gray	窗口边框、按钮
标题栏蓝色（深）	#000080	--win95-title-dark	标题渐变起始色
标题栏蓝色（浅）	#1084d0	--win95-title-light	标题渐变结束色
按钮表面色	#dfdfdf	--win95-button-face	按钮表面
按钮高光色	#ffffff	--win95-highlight	顶部／左侧凸起边缘
按钮阴影色	#808080	--win95-shadow	底部／右侧凸起边缘
按钮深阴影色	#000000	--win95-dark-shadow	外侧阴影边缘
窗口背景	#ffffff	--win95-window-bg	内容区域
选中项蓝色	#000080	--win95-selection	选中项
选中项文字	#ffffff	--win95-selection-text	选中项上的文字

Win95 标题栏渐变

Win95 的标志性元素——从深蓝到浅蓝的水平渐变：

.win95-titlebar {
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  color: white;
  font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.win95-titlebar-inactive {
  background: linear-gradient(90deg, #808080 0%, #b5b5b5 100%);
}

窗口控制按钮

Win95 有三个不同的按钮（而 Win31 只有一个菜单按钮）：

.win95-controls {
  display: flex;
  gap: 2px;
}

.win95-control-btn {
  width: 16px;
  height: 14px;
  background: var(--win95-gray);
  border: none;
  font-size: 9px;
  font-family: 'Marlett', sans-serif; /* Win95 symbol font */

  /* 3D bevel */
  box-shadow:
    inset -1px -1px 0 var(--win95-dark-shadow),
    inset 1px 1px 0 var(--win95-highlight),
    inset -2px -2px 0 var(--win95-shadow),
    inset 2px 2px 0 var(--win95-button-face);
}

.win95-control-btn:active {
  box-shadow:
    inset 1px 1px 0 var(--win95-dark-shadow),
    inset -1px -1px 0 var(--win95-highlight);
}

排版

用途	字体	后备字体	大小
UI 标签	Tahoma	MS Sans Serif、Arial	11px
标题栏	Tahoma Bold	Arial Bold	11px
菜单	Tahoma	Arial	11px
代码	Fixedsys	Courier New	12px
像素风标题	MS Sans Serif	VT323（Web）	12-14px

Web 安全的近似字体：

:root {
  --font-win95-ui: 'Tahoma', 'Segoe UI', 'Arial', sans-serif;
  --font-win95-mono: 'Fixedsys Excelsior', 'Courier New', monospace;
  --font-win95-pixel: 'VT323', 'Courier New', monospace;
}

---

现代延伸设计

AI 聊天机器人：Clippy 范式

Win95 会在向导对话框中将 AI 呈现为乐于助人的助手角色：

┌─ AI Assistant ──────────────────────────[−][□][×]─┐
│ ┌────────────────────────────────────────────────┐│
│ │  ┌─────┐                                       ││
│ │  │ 📎  │  "It looks like you're writing a     ││
│ │  │     │   letter. Would you like help?"      ││
│ │  └─────┘                                       ││
│ │                                                ││
│ │  ○ Get help with writing                       ││
│ │  ○ Just type without help                      ││
│ │  ○ Don't show this tip again                   ││
│ │                                                ││
│ └────────────────────────────────────────────────┘│
│                              [  OK  ] [ Cancel ] │
└──────────────────────────────────────────────────┘

关键模式：

• 角色头像（而不只是聊天气泡）
• 单选按钮选项（而不是自由输入）
• 向导步骤指示器
• “每日提示”样式
• 用于建议的黄色便笺背景

移动设备：袖珍 PC 范式

将 Win95 延伸至移动设备，打造袖珍尺寸的桌面：

┌────────────────────────┐
│ Start │ 📶 🔋 3:45 PM  │  ← Status bar as taskbar
├────────────────────────┤
│ ┌──────┐ ┌──────┐     │
│ │ 📁   │ │ 🌐   │     │  ← Desktop icon grid
│ │Files │ │Browse│     │
│ └──────┘ └──────┘     │
│ ┌──────┐ ┌──────┐     │
│ │ 💬   │ │ ⚙️   │     │
│ │Chat  │ │Setup │     │
│ └──────┘ └──────┘     │
├────────────────────────┤
│ [Start] [📧2] [💬] [📁]│  ← Taskbar with open apps
└────────────────────────┘

关键模式：

• 开始按钮位于左下角（汉堡菜单并非 Win95 风格）
• 任务栏以按钮形式显示已打开的应用
• 桌面采用图标网格（而不是应用抽屉）
• 状态栏模仿系统托盘
• 向上滑动 = 打开开始菜单（不是手势操作）

响应式设计：以多显示器作为断点

Win95 在设计理念上考虑了多台显示器。可按以下方式应用：

断点	Win95 隐喻	布局
移动设备（<640px）	袖珍 PC	单个窗口，任务栏位于底部
平板电脑（640-1024px）	笔记本电脑	层叠窗口、任务栏
桌面设备（>1024px）	完整桌面	多个窗口、桌面图标

暗色模式：Plus! 主题

Windows 95 Plus! 有主题包。暗色模式的延伸：

/* Plus! "Mystery" theme (dark) */
[data-theme="dark"] {
  --win95-desktop: #1a1a2e;
  --win95-gray: #3d3d5c;
  --win95-title-dark: #16213e;
  --win95-title-light: #1a1a4e;
  --win95-button-face: #4a4a6a;
  --win95-highlight: #5a5a7a;
  --win95-shadow: #2a2a4a;
  --win95-window-bg: #2d2d4d;
}

/* Plus! "Golden Era" theme */
[data-theme="golden"] {
  --win95-title-dark: #8b4513;
  --win95-title-light: #daa520;
  --win95-desktop: #2e1a0d;
}

---

组件模式

开始菜单

.win95-start-menu {
  position: fixed;
  bottom: 28px; /* Above taskbar */
  left: 0;
  width: 200px;
  background: var(--win95-gray);
  border: 2px solid;
  border-color: var(--win95-highlight) var(--win95-dark-shadow)
               var(--win95-dark-shadow) var(--win95-highlight);
  box-shadow: 2px 2px 0 var(--win95-dark-shadow);
}

.win95-start-menu-sidebar {
  width: 24px;
  background: linear-gradient(0deg, #000080 0%, #1084d0 100%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  color: white;
  font-weight: bold;
  padding: 4px;
}

.win95-start-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

.win95-start-menu-item:hover {
  background: var(--win95-selection);
  color: var(--win95-selection-text);
}

任务栏

.win95-taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: var(--win95-gray);
  border-top: 2px solid var(--win95-highlight);
  display: flex;
  align-items: center;
  padding: 2px 4px;
  gap: 4px;
}

.win95-start-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-weight: bold;
  font-size: 11px;
  /* 3D button styling */
}

.win95-taskbar-button {
  min-width: 140px;
  max-width: 160px;
  height: 22px;
  font-size: 11px;
  text-align: left;
  padding: 0 8px;
  /* Pressed = active window */
}

.win95-system-tray {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 2px solid var(--win95-shadow);
  padding-left: 8px;
}

对话框（用于 AI）

.win95-dialog {
  min-width: 340px;
  background: var(--win95-gray);
  border: 2px solid;
  border-color: var(--win95-highlight) var(--win95-dark-shadow)
               var(--win95-dark-shadow) var(--win95-highlight);
}

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

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

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

.win95-button-primary {
  min-width: 75px;
  padding: 4px 12px;
  /* Add dotted focus ring for default button */
  outline: 1px dotted var(--win95-dark-shadow);
  outline-offset: -4px;
}

---

反模式

反模式：汉堡菜单

新手想法：“用三条线表示移动端导航” 现实：Win95 从没有汉堡菜单——它有“开始”按钮 建议做法：使用带有标签按钮的开始菜单模式

反模式：悬浮操作按钮

新手想法：“用 FAB 表示主要操作” 现实：Win95 的操作位于工具栏和菜单中 建议做法：使用工具栏按钮或上下文菜单

反模式：卡片式布局

新手想法：“使用带圆角和阴影的卡片” 现实：Win95 使用窗口和列表视图 建议做法：使用列表视图、详细信息视图或平铺图标

反模式：到处使用渐变背景

新手想法：“Win95 有渐变，所以我要在所有地方都用渐变” 现实：只有标题栏有渐变。其他所有地方都是纯色。 建议做法：仅在活动标题栏使用渐变；其他地方使用纯色

反模式：柔和阴影

新手想法：box-shadow: 0 4px 6px rgba(0,0,0,0.1) 现实：Win95 只有硬朗的像素阴影 建议做法：box-shadow: 2px 2px 0 #000000（不模糊）

---

快速决策树

Is it a window chrome element?
├── Title bar? → Gradient (dark→light blue)
├── 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? → Start Menu pattern
├── Section nav? → Tab control
├── Page nav? → Tree view or list
└── Actions? → Toolbar buttons

Is it a notification?
├── Important? → Modal dialog with icon
├── Informational? → Balloon tooltip (system tray)
├── Progress? → Progress bar in status bar
└── Success? → Sound + brief dialog

---

CSS 变量模板

:root {
  /* Core palette */
  --win95-desktop: #008080;
  --win95-gray: #c0c0c0;
  --win95-title-dark: #000080;
  --win95-title-light: #1084d0;
  --win95-button-face: #dfdfdf;
  --win95-highlight: #ffffff;
  --win95-shadow: #808080;
  --win95-dark-shadow: #000000;
  --win95-window-bg: #ffffff;
  --win95-selection: #000080;
  --win95-selection-text: #ffffff;

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

  /* Typography */
  --font-win95-ui: 'Tahoma', 'Segoe UI', 'Arial', sans-serif;
  --font-win95-mono: 'Fixedsys Excelsior', 'Courier New', monospace;

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

---

参考资料

• /references/component-library.md - 所有 Win95 组件的完整 CSS
• /references/ai-assistant-patterns.md - Clippy 风格的 AI 用户体验模式
• /references/mobile-pocket-pc.md - 适用于移动设备的响应式 Win95
• /references/plus-themes.md - 暗色模式和主题变体
• /references/icon-system.md - Win95 图标设计和尺寸

---

配套使用

• windows-3-1-web-designer - 适用于更早期、更扁平的 Win31 美学风格
• web-design-expert - 在复古风格之外提供品牌方向
• design-system-creator - 用于生成完整的设计令牌系统
• frontend-architect - 用于部署到 Cloudflare 的 Win95 应用