Cyberpunk 赛博朋克（Cyberpunk）
Cyberpunk is the visual language of 'high tech, low life': near-black interfaces lit by neon magenta, cyan, and electric yellow, like signage over a rain-soaked street. Luminous hairline borders, bloom halos, scanlines, and glitch tears turn panels into hacked terminals, while monospace type and HUD brackets supply the instrumentation. Born in 1980s science fiction and pushed into UI by films and games like Cyberpunk 2077, it treats darkness as the canvas — every accent must earn its glow.
赛博朋克是「高科技，低生活」（high tech, low life）的视觉语言：近黑的界面被霓虹品红、青、电黄点亮，像雨夜街道上方层层叠叠的招牌。发光的细描边、辉光、扫描线和故障撕裂把面板变成被黑的终端，等宽字体和 HUD 括线则提供仪器感。它诞生于 1980 年代科幻文学，经由《银翼杀手》式的电影和《赛博朋克 2077》这类游戏进入 UI——它把黑暗当作画布，每一笔亮色都得挣得自己的光。
Scope: The screen-interface expression of the genre — dark HUDs, terminals, neon signage, glitch artifacts — not its literary themes, and not simply 'dark mode with purple'. Bright pastel retro-futurism (synthwave sunsets, VHS nostalgia) belongs to the vaporwave family, not to this entry.
范围：这个类型在屏幕界面上的表达——深色 HUD、终端、霓虹招牌、故障伪影——不包括它的文学主题，也不是「深色模式加点紫」那么简单。明亮粉彩的复古未来主义（合成波落日、VHS 怀旧）属于蒸汽波家族，不在本条。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Neon on a near-black canvas近黑画布上的霓虹 color defining定义特征
Backgrounds live at #05070f–#0a0e17; magenta #ff2a6d, cyan #05d9e8, and electric yellow #f9f002 sit on top at full glow. A light background disqualifies the style on sight.
背景活在 #05070f–#0a0e17 区间；品红 #ff2a6d、青 #05d9e8、电黄 #f9f002 以全发光强度压在上面。浅色背景一眼就能判它出局。
-
Glowing hairline borders发光的细描边 surface defining定义特征
Panels and buttons wear 1px bright strokes with matching bloom — box-shadow: 0 0 8px plus 0 0 24px in the border color — so every edge reads as neon tubing or a hologram seam.
面板和按钮套着 1px 亮色描边，配同色的辉光——box-shadow: 0 0 8px 加 0 0 24px 的描边色——每条边都像霓虹灯管或全息投影的接缝。
-
HUD instrumentationHUD 仪表装饰 layout defining定义特征
Corner brackets, tick marks, crosshair rules, and tiny numeric readouts frame content like a cockpit overlay; corners are sharp or chamfered with clip-path cuts, never bubbly.
边角括线、刻度、十字准线和小号数字读数把内容框成驾驶舱 overlay；直角或用 clip-path 切出的斜角，绝不圆润。
-
Monospace terminal type等宽终端字体 typography defining定义特征
UI text is set in monospace or squared techno faces, often uppercase at 10–12px with .1–.2em letter-spacing, decorated with > _ :: // glyphs — the console is the voice of the interface.
界面文字用等宽或方正的科技字体，常常是 10–12px 的大写字母加 .1–.2em 字距，再点缀 > _ :: // 这类符号——控制台就是这个界面的嗓音。
-
Glitch and scanline artifacts故障与扫描线伪影 motion supporting辅助特征
RGB-split text shadows (magenta/cyan offsets), occasional slice-and-skew jitters, and a repeating 1px scanline overlay simulate a damaged feed — short bursts of seasoning, not constant noise.
RGB 分离的文字阴影（品红/青错位）、偶尔切条加倾斜的抖动，以及 1px 重复扫描线覆盖层，模拟一路受损的信号——短促的调味，不是持续的噪音。
-
CJK neon signage中日文霓虹招牌 imagery supporting辅助特征
Vertical Japanese kana or Chinese characters glowing as sign tubes quote the Tokyo/Hong Kong streetscape the genre's films were built from.
竖排的日文假名或汉字做成发光的灯管招牌，致敬这个类型的电影赖以成型的东京/香港街景。
-
Hazard stripes and corporate chrome警示条纹与企业涂装 imagery variable可变特征
Yellow-black diagonal warning bands, mega-corp logos, and barcode livery mark the world as dangerous and owned; density runs from a single striped edge to full industrial cladding.
黄黑斜纹警示带、巨型企业 logo、条码涂装，宣告这个世界既危险又已被瓜分；用量从一条镶边到全副工业装甲不等。
-
Bright pastel nostalgia明亮粉彩的怀旧 color avoid避免
Light grounds, soft pink/lavender palettes, marble busts, and VHS timestamps are vaporwave's retro consumerism — warmth and daylight are the giveaway that this isn't cyberpunk.
浅色底、柔粉/淡紫配色、大理石雕像和 VHS 时间戳是蒸汽波的复古消费主义——温暖和日光就是「这不是赛博朋克」的破绽。
Often confused with: Vaporwave最容易混淆：蒸汽波（Vaporwave）
Cyberpunk赛博朋克（Cyberpunk）
Vaporwave蒸汽波（Vaporwave）
This is Cyberpunk because the canvas is near-black and the light comes from neon — saturated magenta/cyan glow on a dark, high-contrast future city, framed by HUD furniture and monospace data. The mood is dystopian and forward-looking; the glitch reads as a hacked signal, not a worn tape.
这是赛博朋克，因为画布是近黑的，光全部来自霓虹——饱和的品红/青辉光打在黑暗、高对比的未来都市上，四周是 HUD 装饰件和等宽数据。气质是反乌托邦、朝未来看的；这里的故障读作被黑的信号，不是磨损的磁带。
It would become vaporwave if someone turned the lights on and the calendar back — bright pastel pink and teal on light grounds, 80s–90s consumer nostalgia (Greek busts, VHS date stamps, early-Windows chrome), dreamy irony instead of dystopia. Both share glitch effects, but vaporwave's is VHS decay in daylight while cyberpunk's is signal interference in the dark.
如果有人把灯打开、把日历拨回去——明亮粉彩的粉和青铺在浅色底上，80–90 年代的消费怀旧（希腊石膏像、VHS 日期戳、早期 Windows 视窗件），梦幻的反讽取代反乌托邦——它就变成蒸汽波了。两者都用故障效果，但蒸汽波的是日光下的 VHS 老化，赛博朋克的是黑夜里的信号干扰。
In code — optional starting points代码写法 —— 可选起点
Neon HUD panel
background: #0a0e17; border: 1px solid #05d9e8; border-radius: 2px; box-shadow: 0 0 8px rgba(5,217,232,.55), 0 0 24px rgba(5,217,232,.22), inset 0 0 12px rgba(5,217,232,.12); color: #d1f7ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;Glitch headline — RGB split with intermittent jitter
.glitch { color: #f9f002; text-shadow: -2px 0 #ff2a6d, 2px 0 #05d9e8; animation: glitch 3s infinite steps(1); } @keyframes glitch { 0%, 90%, 100% { transform: none; } 92% { transform: translateX(-2px) skewX(-8deg); } 94% { transform: translateX(2px); } 96% { transform: translateX(-1px); } }Scanline overlay + hazard stripes
.scanlines { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); } .hazard { background: repeating-linear-gradient(45deg, #f9f002 0 12px, #0a0a0a 12px 24px); }Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Build a cyberpunk HUD. Canvas: near-black with a blue cast — page #05070f, panels #0a0e17. Signal colors: magenta #ff2a6d and cyan #05d9e8; yellow #f9f002 for warnings/primary actions only. Text: off-white #d1f7ff, secondary #7f9bb3, monospace (ui-monospace / JetBrains Mono); micro-labels uppercase at 10–11px, letter-spacing .15em, prefixed with >_ or //. Every panel and button wears a 1px neon border with bloom — box-shadow: 0 0 8px rgba(5,217,232,.5), 0 0 24px rgba(5,217,232,.2), inset 0 0 12px rgba(5,217,232,.12) — corners sharp (2px) or 8–12px clip-path chamfers. Add HUD furniture: corner brackets, tick marks, tiny numeric readouts. Season with glitch: RGB-split headings (text-shadow: -2px 0 #ff2a6d, 2px 0 #05d9e8), rare 100–200ms skew/translate stutters, plus scanlines (1px rgba(255,255,255,.05) every 3px). Hazard stripes (45deg #f9f002/#0a0a0a, 12px steps) for danger zones only; CJK neon signage optional. Avoid light backgrounds, pastels, soft white shadows, bubbly radii, and VHS nostalgia — that's vaporwave. Keep motion intermittent: a hacked signal stutters, never floats.
搭一个赛博朋克 HUD。画布：带蓝调的近黑——页面 #05070f，面板 #0a0e17。信号色：品红 #ff2a6d 和青 #05d9e8；黄 #f9f002 只给警告和主操作。文字：米白 #d1f7ff，次要 #7f9bb3，全部等宽（ui-monospace / JetBrains Mono）；小标签 10–11px 大写、letter-spacing .15em，前面加 >_ 或 //。每个面板和按钮套 1px 霓虹描边带辉光——box-shadow: 0 0 8px rgba(5,217,232,.5)、0 0 24px rgba(5,217,232,.2)、inset 0 0 12px rgba(5,217,232,.12)——圆角要锐利（2px）或用 clip-path 切 8–12px 斜角。加 HUD 装饰件：边角括线、刻度、小号数字读数。用故障做调味：标题 RGB 分离（text-shadow: -2px 0 #ff2a6d, 2px 0 #05d9e8），偶发 100–200ms 的 skew/translate 顿挫，再加扫描线（每 3px 一条 1px rgba(255,255,255,.05)）。警示条纹（45deg #f9f002/#0a0a0a，12px 步进）只给危险区；中日文霓虹招牌可选。避免浅色背景、粉彩、柔和白阴影、圆润大圆角和 VHS 怀旧——那是蒸汽波。动效保持间歇：被黑的信号是顿挫，绝不漂浮。
Accessibility & misuse可访问性与误用
Neon on dark is not automatically high-contrast: cyan #05d9e8 on #0a0e17 clears 4.5:1 comfortably, but magenta #ff2a6d at small sizes and yellow #f9f002 against glow halos can fall short — measure body text against the real background, keep glow out of the contrast equation, and never set long copy in the dimmest accent.
深色底上的霓虹不天然等于高对比：青 #05d9e8 配 #0a0e17 轻松过 4.5:1，但小字号的品红 #ff2a6d、以及被辉光光晕包围的电黄 #f9f002 可能不达标——对着真实背景实测正文，别把辉光算进对比度，长文更别用最暗的那种强调色。
Glitch flicker, RGB-split flashes, and sweeping scanlines are exactly the motion that bothers vestibular and photosensitive users: keep flashes under 3 per second, make glitches rare and short, and honor prefers-reduced-motion by freezing jitter, blink, and rain effects entirely.
故障闪烁、RGB 分离的闪动和扫过的扫描线，正是会让前庭敏感和光敏用户不适的动效：闪烁压在每秒 3 次以下，故障要稀有且短促，并响应 prefers-reduced-motion，把抖动、眨眼、雨效全部冻结。
HUD decoration is cognitive noise: brackets, tickers, and blinking readouts compete with content, and uppercase wide-tracked monospace reads slowly at length. Mark decorative readouts aria-hidden, keep body copy in a comfortable size and face, and give focus a visible state that is more than a glow-color change (an offset outline in a reserved color works).
HUD 装饰是认知噪音：括线、滚动条、闪烁读数都在和内容抢注意力，大写宽字距的等宽字体长读也慢。装饰性读数标 aria-hidden，正文保持舒适的字号和字体，焦点状态要可见且不只是换个辉光颜色（用专属颜色的偏移 outline 就不错）。
Origin起源
The genre was named by Bruce Bethke's 1983 short story 'Cyberpunk' and defined as literature by William Gibson's 1984 novel Neuromancer, but its visual language was set by film: Ridley Scott's Blade Runner (1982) fused the neon signage of Asian megacities with rain, smog, and towering video billboards into the 'high tech, low life' metropolis, and Katsuhiro Otomo's Akira (1988) added Neo-Tokyo's holographic advertising. The look became an actual interface kit through 1990s sci-fi screen graphics and, most decisively, CD Projekt Red's Cyberpunk 2077 (2020), whose glitching yellow-and-black HUD turned cyberpunk into a literal UI style.
这个类型的名字来自 Bruce Bethke 1983 年的短篇小说《Cyberpunk》，文学上由 William Gibson 1984 年的小说《神经漫游者》（Neuromancer）定型，但它的视觉语言是电影定下的：Ridley Scott 的《银翼杀手》（Blade Runner，1982）把亚洲大都市的霓虹招牌与雨、烟雾、高耸的视频广告熔成「高科技，低生活」的都会，大友克洋的《阿基拉》（Akira，1988）又添上新东京的全息广告。这套语言经由 1990 年代科幻片屏幕图形、以及最关键的 CD Projekt Red《赛博朋克 2077》（2020）变成了真正的界面工具包——那套故障抖动的黄黑 HUD 让赛博朋克成了一种字面意义上的 UI 风格。