Files

Cloud Bot 21e3da573e docs: 添加PRD需求文档、任务计划和设计系统

2026-03-21 08:16:51 +00:00

10 KiB

Raw Permalink Blame History

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

CSS Import:

@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

/* 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

.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

.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

.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
失败弹窗：完全仿钉钉退群通知，灰白配色反差

关键页面交互设计

主游戏页面：
- 点击地图格子 → 弹出塔选择浮层（若 HC 不足则提示）
- 点击已部署的塔 → 显示精力条 + 购买咖啡按钮
- 波次开始前 3 秒倒计时提示
- BOSS 出现时全屏红色闪光 + 警报音效
周报结算弹窗：
- 全屏遮罩（不可点击背景关闭）
- 10 秒倒计时进度条（顶部）
- 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 波后正确触发

10 KiB Raw Permalink Blame History Unescape Escape