Cyberpunk / Glitch 赛博朋克故障风设计系统

设计哲学

核心原则

"高科技，低生活。" 这种美学是数字反乌托邦与高科技黑色现实的碰撞。它捕捉了先进技术与社会衰败之间的张力——一个地下黑客、霓虹浸透的巨型城市和腐败数据流的世界。这不是一个干净、乌托邦式的未来；它是粗糙的、不完美的、明显危险的。每个像素都应该感觉像是在东京雨巷中故障的 CRT 显示器上渲染，或是在地下掩体中的流氓终端上显示。

氛围感

危险、带电、叛逆、激进的未来复古主义。它大量借鉴 80 年代科幻视觉语言（《银翼杀手》、《阿基拉》）和黑客文化（《黑客帝国》、《攻壳机动队》）。界面应该感觉活着且不稳定——充满数字能量的嗡嗡声、数据损坏的故障、原始力量的脉动。它不仅仅是一个网站；它是一个被黑掉的信号、一个被禁止的界面、一个通往城市蔓延的窗口。

触觉体验

不完美的技术：拥抱模拟到数字转换的产物。扫描线、色差（RGB 分离）和信号噪声不是 bug；它们是特性。UI 应该感觉像是在努力容纳它显示的数据。

虚空 vs 光明：背景不仅仅是黑暗；它是虚空。在这片绝对的黑暗中，霓虹光（青色、洋红、酸绿）不仅仅是给元素着色——它照亮了它们。光源应该感觉有形，投射出定义层次结构的光晕和阴影。

工业粗野主义：形状是硬朗的、有角度的、实用的。倒角（45 度切割）取代了友好的圆角矩形。边框是技术性的、精确的，类似于蓝图或 HUD（抬头显示器）示意图，而非装饰性框架。

令人难忘的视觉特征

• 色差：文本和元素上的 RGB 颜色分离（红/青色偏移阴影），模拟镜头畸变或信号干扰
• 扫描线：微妙的水平线覆盖层，模仿旧 CRT 显示器的刷新率，增加纹理并统一构图
• 故障效果：通过 clip-path 动画、倾斜变换和闪烁文本实现的故意"损坏"，暗示不稳定连接或被黑系统
• 霓虹光晕：文本和边框的字面发光，使用强烈的多层 box-shadow/text-shadow 堆叠，在暗背景上创造"光剑"或"霓虹灯"效果
• 切角：卡片和按钮上的倒角/切割角，创造军事化、科技面板美学
• 电路图案：类似 PCB 走线或数据高速公路的装饰性 SVG 背景，暗示底层硬件

设计 Token 系统（DNA）

颜色（深色模式 - 强制）

排版

字体栈：

• 标题："Orbitron", "Share Tech Mono", monospace — 几何、未来感、机械化
• 正文："JetBrains Mono", "Fira Code", "Consolas", monospace — 干净的等宽字体，带来终端感觉
• 强调/标签："Share Tech Mono", monospace — 用于 UI 标签、时间戳、徽章

比例与样式：

圆角与边框

radius.none:     0px        // 锐利切割是默认
radius.sm:       2px        // 最小柔化
radius.base:     4px        // 罕见，仅用于输入框
radius.chamfer:  使用 clip-path 实现切角而非 border-radius

边框宽度：1px 默认，2px 强调，边框通常使用渐变或光晕效果

倒角图案（通过 clip-path 应用）：

clip-path: polygon(
  0 10px, 10px 0,                           /* 左上切 */
  calc(100% - 10px) 0, 100% 10px,           /* 右上切 */
  100% calc(100% - 10px), calc(100% - 10px) 100%,  /* 右下切 */
  10px 100%, 0 calc(100% - 10px)            /* 左下切 */
);

阴影与效果

霓虹光晕（CSS 变量 Token）：

/* 主霓虹光晕 - 用于悬停状态、聚焦环、高亮元素 */
--box-shadow-neon: 0 0 5px #00ff88, 0 0 10px #00ff8840;

/* 小霓虹光晕 - 微妙强调 */
--box-shadow-neon-sm: 0 0 3px #00ff88, 0 0 6px #00ff8830;

/* 大霓虹光晕 - 强调状态、hero 元素 */
--box-shadow-neon-lg: 0 0 10px #00ff88, 0 0 20px #00ff8860, 0 0 40px #00ff8830;

/* 次霓虹（洋红） */
--box-shadow-neon-secondary: 0 0 5px #ff00ff, 0 0 20px #ff00ff60;

/* 第三霓虹（青色） */
--box-shadow-neon-tertiary: 0 0 5px #00d4ff, 0 0 20px #00d4ff60;

文本阴影深度：

/* 故障效果文本阴影（用于 hero 标题） */
drop-shadow: 0 0 10px rgba(0, 255, 136, 0.5);

/* 渐变文本光晕 */
drop-shadow: 0 0 20px rgba(0, 255, 136, 0.3);

色差（通过 .cyber-glitch 上的 CSS 动画实现）： 通过 ::before 和 ::after 伪元素实现：

• text-shadow: -1px 0 #ff00ff（洋红左）
• text-shadow: -1px 0 #00d4ff（青色右）
• clip-path 动画实现故障效果

纹理与图案（深度关键）

1. 扫描线覆盖层（CSS 伪元素）：

background: repeating-linear-gradient(
  0deg,
  transparent,
  transparent 2px,
  rgba(0, 0, 0, 0.3) 2px,
  rgba(0, 0, 0, 0.3) 4px
);
pointer-events: none;

2. 网格/电路图案（微妙背景）：

background-image:
  linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
background-size: 50px 50px;

3. 噪点纹理：应用微妙的 CSS 噪点滤镜或 5-10% 不透明度的 SVG 噪点覆盖层

4. 渐变网格：角落处极低不透明度的强调色径向渐变

组件样式

按钮

所有按钮使用：

• 字体：monospace
• 文本转换：uppercase
• 字间距：wider
• 过渡：all 实现平滑效果
• 聚焦环：2px 强调色

默认变体：

- 背景：transparent
- 边框：2px solid accent (#00ff88)
- 文本：accent 颜色
- Clip-path: .cyber-chamfer-sm（较小倒角）
- 悬停：背景填充 accent，文本变为背景色，霓虹光晕阴影

次要变体：

- 边框：2px solid accentSecondary (#ff00ff)
- 文本：accentSecondary
- 悬停：填充洋红，neon-secondary 光晕

轮廓变体：

- 边框：1px solid border (#2a2a3a)
- 背景：transparent
- 悬停：边框变为 accent，文本变为 accent，霓虹光晕出现

幽灵变体：

- 无边框
- 悬停：背景 accent/10 不透明度，文本变为 accent

故障变体（CTA）：

- 背景：solid accent (#00ff88)
- 文本：背景色（高对比度）
- 使用 .cyber-glitch 类实现色差效果
- 悬停：亮度增加（filter: brightness(1.1)）

卡片/容器

默认卡片变体：

- 背景：card (#12121a)
- 边框：1px solid border (#2a2a3a)
- Clip-path: 通过 .cyber-chamfer 类实现倒角
- 过渡：all 300ms 实现平滑交互
- 悬停：translateY(-1px)，边框变为 accent，霓虹光晕出现（如果 hoverEffect 属性）

终端变体 (variant="terminal")：

- 背景：background (#0a0a0f) 而非 card
- 边框：1px solid border
- 自动装饰标题栏带红绿灯点（红/黄/绿）
- 内容 padding-top 以容纳标题栏
- Clip-path: 倒角
- 用于：博客卡片、FAQ 项、某些定价层级

全息变体 (variant="holographic")：

- 背景：muted (#1c1c2e) 30% 不透明度
- 边框：1px solid accent 30% 不透明度
- Box-shadow: 霓虹光晕
- Backdrop-filter: blur 实现玻璃态效果
- 角落装饰：卡片边缘的 4 个小边框角使用绝对定位
- 用于：产品详情卡片、hero HUD 面板

输入框

- 包装器：相对定位用于前缀图标
- 前缀：">" 符号，强调色，绝对定位左侧
- 背景：input (#12121a)
- 边框：1px solid border (#2a2a3a)
- Clip-path: .cyber-chamfer-sm
- 文本：monospace，accent 颜色
- Padding-left: 8（容纳前缀）
- Placeholder：mutedForeground，样式化为终端提示符
- 聚焦：边框变为 accent，霓虹光晕阴影，outline 移除
- 过渡：all 200ms

布局策略

最大宽度：主内容 max-w-7xl，全出血区块内部内容受限

网格模式：

• 特性：grid-cols-1 md:grid-cols-2 lg:grid-cols-3，容器带 -skew-y-1
• 定价：grid-cols-1 md:grid-cols-3，中间卡片放大
• 统计：带 divide-x divide-border 的水平 flex

间距：8px 基础网格。宽裕的内边距（区块 py-24 到 py-32）。密集的内部组件间距。

不对称要求：

• Hero：最小 60/40 分割
• 至少一个区块有重叠元素（负边距）
• 区块容器使用 rotate-1 或 skew-y-1 变换
• 内容允许时网格中交错卡片高度

非通用性（大胆因素）

强制大胆选择：

1. 故障标题：Hero h1 必须有色差文本阴影和偶尔"故障"的 CSS 动画（随机倾斜/位移闪烁）
2. 扫描线覆盖层：整个页面有微妙的扫描线覆盖层（通过 body 或 main 上的 ::after）
3. 终端美学：至少一个区块必须感觉像终端（等宽、> 前缀、闪烁光标动画）
4. 真正发光的霓虹边框：不仅仅是彩色边框 - 堆叠的 box-shadows 创造真正的光晕效果
5. 切角：卡片使用 clip-path 实现倒角/切割角，而非圆角
6. 动画元素：
   • 闪烁光标（animation: blink 1s step-end infinite）
   • 微妙的悬停故障效果
   • 渐变边框动画（色相旋转）
7. 电路/网格背景：至少一个区块背景中可见科技图案
8. 打字/打字机效果：考虑在副标题上或至少样式为正在输入中（尾随光标）

效果与动画

运动感觉：锐利、数字化、略带机械感。快速弹跳而非平滑缓动。

过渡：

transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
/* 或更数字化的感觉： */
transition: all 100ms steps(4);

关键帧动画：

/* 闪烁光标 */
@keyframes blink {
  50% { opacity: 0; }
}

/* 故障效果 */
@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}

/* 扫描线滚动 */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* RGB 偏移/色差脉冲 */
@keyframes rgbShift {
  0%, 100% { text-shadow: -2px 0 #ff00ff, 2px 0 #00d4ff; }
  50% { text-shadow: 2px 0 #ff00ff, -2px 0 #00d4ff; }
}

图标

Lucide 图标配置：

• 描边宽度：1.5px（细、技术感）
• 大小：通常 h-5 w-5 或 h-6 w-6
• 颜色：继承文本（通常是 accent 或 foreground）
• 样式：悬停时通过 filter: drop-shadow(0 0 4px currentColor) 添加微妙光晕

图标容器：将图标放置在带光晕效果的边框正方形/六边形内

响应式策略

移动端适配（移动优先）：

排版缩放：

• Hero h1：text-5xl（移动端）→ text-7xl（md）→ text-8xl（lg）
• 副标题：text-base → text-lg → text-xl
• 区块标题：text-4xl → text-5xl
• 所有尺寸保持 uppercase 和 tracking

布局变化：

• 导航：< lg 隐藏导航链接，< sm 显示缩写 CTA 文本
• 统计：前 2 项仅顶部边框（移动端）→ 4 列垂直边框（桌面端）
• 所有特性/博客/推荐网格：单列 → 2 列（md）→ 3 列（lg）
• 定价：垂直堆叠 → 3 列网格，高亮卡片仅在 md+ 上缩放
• Hero HUD：移动端隐藏（lg:block）
• 页脚：堆叠为单列 → 4 列网格

保持元素：

• 扫描线覆盖层（整页）
• 所有卡片的倒角
• 霓虹光晕效果（移动端可降低强度以提升性能）
• 网格/电路背景
• 等宽排版
• 终端美学（>、$、前缀）
• 深色配色方案

触控目标：

• 所有交互元素最小 44px 高度
• 可点击项之间充足间距
• FAQ 手风琴全宽点击区域

无障碍

对比度：所有文本满足 WCAG AA（暗背景上的 accent 绿 = 7.5:1 比例 - 优秀）

聚焦状态：

focus-visible:outline-none
focus-visible:ring-2
focus-visible:ring-accent
focus-visible:ring-offset-2
focus-visible:ring-offset-background

外加匹配霓虹美学的光晕效果。

减少动画：尊重 prefers-reduced-motion - 禁用故障动画，保留静态色差

实现注意事项

• 大量使用 Tailwind 任意值 [...] 自定义阴影和 clip-path
• 颜色使用 CSS 变量便于主题切换
• 扫描线通过 CSS 实现，非图片
• 故障动画应微妙且不频繁（不分散注意力）
• 在不同屏幕上测试光晕效果（在低对比度显示器上可能看起来褪色）
• 考虑多 box-shadow 的 GPU 性能 - 谨慎使用 will-change: transform