289 lines
10 KiB
Markdown
289 lines
10 KiB
Markdown
# Design System Master File
|
||
|
||
> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.
|
||
> If that file exists, its rules **override** this Master file.
|
||
> If not, strictly follow the rules below.
|
||
|
||
---
|
||
|
||
**Project:** 大厂保卫战
|
||
**Generated:** 2026-03-21 07:46:37
|
||
**Category:** Gaming
|
||
|
||
---
|
||
|
||
## Global Rules
|
||
|
||
### Color Palette
|
||
|
||
| Role | Hex | CSS Variable |
|
||
|------|-----|--------------|
|
||
| Primary | `#7C3AED` | `--color-primary` |
|
||
| Secondary | `#A78BFA` | `--color-secondary` |
|
||
| CTA/Accent | `#F43F5E` | `--color-cta` |
|
||
| Background | `#0F0F23` | `--color-background` |
|
||
| Text | `#E2E8F0` | `--color-text` |
|
||
|
||
**Color Notes:** Neon purple + rose action
|
||
|
||
### Typography
|
||
|
||
- **Heading Font:** Press Start 2P
|
||
- **Body Font:** VT323
|
||
- **Mood:** pixel, retro, gaming, 8-bit, nostalgic, arcade
|
||
- **Google Fonts:** [Press Start 2P + VT323](https://fonts.google.com/share?selection.family=Press+Start+2P|VT323)
|
||
|
||
**CSS Import:**
|
||
```css
|
||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
|
||
```
|
||
|
||
### Spacing Variables
|
||
|
||
| Token | Value | Usage |
|
||
|-------|-------|-------|
|
||
| `--space-xs` | `4px` / `0.25rem` | Tight gaps |
|
||
| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |
|
||
| `--space-md` | `16px` / `1rem` | Standard padding |
|
||
| `--space-lg` | `24px` / `1.5rem` | Section padding |
|
||
| `--space-xl` | `32px` / `2rem` | Large gaps |
|
||
| `--space-2xl` | `48px` / `3rem` | Section margins |
|
||
| `--space-3xl` | `64px` / `4rem` | Hero padding |
|
||
|
||
### Shadow Depths
|
||
|
||
| Level | Value | Usage |
|
||
|-------|-------|-------|
|
||
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |
|
||
| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |
|
||
| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |
|
||
| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |
|
||
|
||
---
|
||
|
||
## Component Specs
|
||
|
||
### Buttons
|
||
|
||
```css
|
||
/* Primary Button */
|
||
.btn-primary {
|
||
background: #F43F5E;
|
||
color: white;
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
transition: all 200ms ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
opacity: 0.9;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Secondary Button */
|
||
.btn-secondary {
|
||
background: transparent;
|
||
color: #7C3AED;
|
||
border: 2px solid #7C3AED;
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
transition: all 200ms ease;
|
||
cursor: pointer;
|
||
}
|
||
```
|
||
|
||
### Cards
|
||
|
||
```css
|
||
.card {
|
||
background: #0F0F23;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
box-shadow: var(--shadow-md);
|
||
transition: all 200ms ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card:hover {
|
||
box-shadow: var(--shadow-lg);
|
||
transform: translateY(-2px);
|
||
}
|
||
```
|
||
|
||
### Inputs
|
||
|
||
```css
|
||
.input {
|
||
padding: 12px 16px;
|
||
border: 1px solid #E2E8F0;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
transition: border-color 200ms ease;
|
||
}
|
||
|
||
.input:focus {
|
||
border-color: #7C3AED;
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px #7C3AED20;
|
||
}
|
||
```
|
||
|
||
### Modals
|
||
|
||
```css
|
||
.modal-overlay {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.modal {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
box-shadow: var(--shadow-xl);
|
||
max-width: 500px;
|
||
width: 90%;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Style Guidelines
|
||
|
||
**Style:** Retro-Futurism
|
||
|
||
**Keywords:** Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave
|
||
|
||
**Best For:** Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk
|
||
|
||
**Key Effects:** CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)
|
||
|
||
### Page Pattern
|
||
|
||
**Pattern Name:** Horizontal Scroll Journey
|
||
|
||
- **Conversion Strategy:** Immersive product discovery. High engagement. Keep navigation visible.
|
||
28,Bento Grid Showcase,bento, grid, features, modular, apple-style, showcase", 1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA, Floating Action Button or Bottom of Grid, Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark., Hover card scale (1.02), video inside cards, tilt effect, staggered reveal, Scannable value props. High information density without clutter. Mobile stack.
|
||
29,Interactive 3D Configurator,3d, configurator, customizer, interactive, product", 1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase, Inside Configurator UI + Sticky Bottom Bar, Neutral studio background. Product: Realistic materials. UI: Minimal overlay., Real-time rendering, material swap animation, camera rotate/zoom, light reflection, Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart.
|
||
30,AI-Driven Dynamic Landing,ai, dynamic, personalized, adaptive, generative", 1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop, Input Field (Hero) + 'Try it' Buttons, Adaptive to user input. Dark mode for compute feel. Neon accents., Typing text effects, shimmering generation loaders, morphing layouts, Immediate value demonstration. 'Show, don't tell'. Low friction start.
|
||
- **CTA Placement:** Floating Sticky CTA or End of Horizontal Track
|
||
- **Section Order:** 1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer
|
||
|
||
---
|
||
|
||
## Anti-Patterns (Do NOT Use)
|
||
|
||
- ❌ Minimalist design
|
||
- ❌ Static assets
|
||
|
||
### Additional Forbidden Patterns
|
||
|
||
- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)
|
||
- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer
|
||
- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout
|
||
- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio
|
||
- ❌ **Instant state changes** — Always use transitions (150-300ms)
|
||
- ❌ **Invisible focus states** — Focus states must be visible for a11y
|
||
|
||
---
|
||
|
||
## 产品定位与目标用户分析
|
||
|
||
**产品定位：** 面向互联网从业者的2D讽刺类塔防小游戏，以"大厂职场文化"为世界观，用黑色幽默和荒诞策略玩法提供情绪出口。
|
||
|
||
**目标用户：** 25-35岁互联网从业者，对内卷/福报/绩效考核有亲身体验，游戏轻度玩家。
|
||
|
||
**差异化：** 游戏内所有数值、界面、怪物都是职场文化的隐喻，产生强烈共情与自嘲效果。
|
||
|
||
---
|
||
|
||
## 布局模式与结构（Layout Strategy）
|
||
|
||
**选定模式：** 模式 B — 内容展示型（游戏全屏内容为主）
|
||
|
||
**页面结构：**
|
||
- **主页 `/`**：全屏游戏入口，顶部 Navbar（游戏名+状态栏），中央游戏 Canvas，底部版权
|
||
- **游戏 Canvas 区域**：1280x720 基准，等比缩放适配不同分辨率
|
||
- **HUD（游戏内界面）**：叠加在 Canvas 上的 HTML 层（KPI 条、HC 显示、塔选择面板）
|
||
|
||
**页面区域划分：**
|
||
```
|
||
┌────────────────────────────────────────────────┐
|
||
│ [游戏名称] [KPI: 87%] [HC: 320] │ ← Navbar/HUD
|
||
├────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 游戏 Canvas │ ← Phaser.js Canvas (全屏)
|
||
│ （地图 + 防御塔 + 怪物 + 弹幕） │
|
||
│ │
|
||
├────────────────────────────────────────────────┤
|
||
│ [00后实习生 50HC] [P6开发 120HC] [PPT大师 100HC] │ ← 底部塔选择栏
|
||
└────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**移动端适配：** 优先PC（1024px+），移动端（768px以下）保持可玩性，使用触摸拖放部署塔
|
||
|
||
**Nova SDK 组件：** 本项目为纯游戏，不使用 Nova SDK 组件，改用 Phaser.js 引擎
|
||
|
||
---
|
||
|
||
## 游戏专属视觉设计
|
||
|
||
### 颜色覆盖（游戏内专属）
|
||
| 用途 | Hex | 说明 |
|
||
|------|-----|------|
|
||
| 地图格子（可建塔区） | `#1E3A5F` | 深蓝格子 |
|
||
| 地图格子（路径） | `#2D1B00` | 深褐走廊 |
|
||
| KPI 条（健康） | `#22C55E` | 绿色正常 |
|
||
| KPI 条（危险） | `#EF4444` | 红色告警 |
|
||
| 精力条 | `#F59E0B` | 橙黄活力 |
|
||
| HC 数值 | `#A78BFA` | 紫色资源 |
|
||
| BOSS 警告 | `#FF4E00` | 橙红警报 |
|
||
|
||
### 游戏 UI 组件设计（HUD）
|
||
- **KPI 进度条**：像素风格，带扫描线效果，颜色渐变（绿→黄→红）
|
||
- **HC 计数器**：仿钉钉/飞书通知badge样式，数字跳动动画
|
||
- **塔选择卡片**：飞书卡片质感，深色毛玻璃背景，霓虹边框
|
||
- **周报弹窗**：仿钉钉全屏通知，强制交互设计
|
||
- **语录飘字**：怪物头顶白色文字，淡入淡出，字体 VT323
|
||
- **失败弹窗**：完全仿钉钉退群通知，灰白配色反差
|
||
|
||
### 关键页面交互设计
|
||
1. **主游戏页面**：
|
||
- 点击地图格子 → 弹出塔选择浮层（若 HC 不足则提示）
|
||
- 点击已部署的塔 → 显示精力条 + 购买咖啡按钮
|
||
- 波次开始前 3 秒倒计时提示
|
||
- BOSS 出现时全屏红色闪光 + 警报音效
|
||
|
||
2. **周报结算弹窗**：
|
||
- 全屏遮罩（不可点击背景关闭）
|
||
- 10 秒倒计时进度条（顶部）
|
||
- 3 个黑话选项卡片，答错/超时变红闪烁
|
||
|
||
3. **胜利/失败结算**：
|
||
- 仿绩效系统界面（胜利）
|
||
- 仿钉钉退群通知（失败）
|
||
|
||
---
|
||
|
||
## Pre-Delivery Checklist
|
||
|
||
Before delivering any UI code, verify:
|
||
|
||
- [ ] No emojis used as icons (use SVG instead)
|
||
- [ ] All icons from consistent icon set (Heroicons/Lucide)
|
||
- [ ] `cursor-pointer` on all clickable elements
|
||
- [ ] Hover states with smooth transitions (150-300ms)
|
||
- [ ] Light mode: text contrast 4.5:1 minimum
|
||
- [ ] Focus states visible for keyboard navigation
|
||
- [ ] `prefers-reduced-motion` respected
|
||
- [ ] Responsive: 375px, 768px, 1024px, 1440px
|
||
- [ ] No content hidden behind fixed navbars
|
||
- [ ] No horizontal scroll on mobile
|
||
- [ ] 游戏 Canvas 在 1280x720 基准下布局正确
|
||
- [ ] 所有 HUD 元素覆盖在 Canvas 正确位置
|
||
- [ ] 波次系统正常触发，6 波全部可完成
|
||
- [ ] 周报结算系统在第 3 波后正确触发
|