赛博朋克Cyberpunk UI
近黑底 + 荧光绿/品红，扫描线、故障抖动、等宽字体与格栅叠加。氛围极强，需严格控制动效频率以免干扰信息读取。
典型场景游戏 HUD · 黑客主题 · 音乐产品
编号41
年代2020s Cyberpunk
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现（数据标注：浅色 不建议，深色 支持）。
风格描述
近黑底 + 荧光绿/品红，扫描线、故障抖动、等宽字体与格栅叠加。氛围极强，需严格控制动效频率以免干扰信息读取。
关键词
Neondark modeterminalHUDsci-figlitchdystopianfuturisticmatrixtech noir
效果与动效
Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts
设计系统变量
--bg-dark#0D0D0D--neon-green#00FF00--neon-magenta#FF00FF--neon-cyan#00FFFF--scanline-opacity0.1--glitch-duration0.3s配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
#00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)
辅色 / Secondary
Neon gradients, scanline overlays, glitch colors, terminal green accents
强调色在页面底色上的对比度约 14.2:1，可用于正文与图标。
适用场景
适合 / Best For
- Gaming platforms
- tech products
- crypto apps
- sci-fi applications
- developer tools
- entertainment
避开 / Do Not Use For
- Corporate enterprise
- healthcare
- family apps
- conservative brands
- elderly users
框架兼容
tailwindcss
能力矩阵
浅色模式不建议
深色模式支持
移动适配需额外处理
转化导向中Medium
渲染成本中animation / blur
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Dark background only,
- Neon accents visible,
- Glitch effect subtle,
- Scanlines optional,
- Monospace font,
- Terminal aesthetic
CSS / 技术关键词
background: #0D0D0D, color: #00FF00 or #FF00FF, font-family: monospace, text-shadow: 0 0 10px neon, animation: glitch (transform skew), ::before scanlines (repeating-linear-gradient)
AI 提示词
Design a cyberpunk interface. Use: neon colors on dark (#0D0D0D), terminal/HUD aesthetic, glitch effects, scanlines overlay, matrix green accents, monospace fonts, angular shapes, dystopian tech feel.