← Back to Skills / Marketplace / cyberpunk
SKL · 12PRO

Cyberpunk.

Neon light, dark interfaces, and information overload as atmosphere. The aesthetic of Blade Runner terminals and Cyberpunk 2077 for gaming and creative tools.

UNLOCK WITH PRO →
● Live preview · Cyberpunk demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Cyberpunk design is what the future looked like before the future arrived — neon light bleeding through rain-wet streets, corporate interfaces crammed with data that nobody but the operator understands, holographic displays flickering in dark rooms. Blade Runner. Ghost in the Shell. Akira. Cyberpunk 2077. The aesthetic is maximalist in the best sense — it fills every corner of the screen with texture, light, and information, and makes you feel like you're operating something powerful. When built well, a cyberpunk interface makes using mundane software feel like hacking into a corporate mainframe.

● Looks Like
Blade Runner terminalsCyberpunk 2077's UIGhost in the Shell interface screensNight City data overlaysHardcore gamer dashboard softwareHUD displays in every near-future sci-fi filmHacknet
02 · Best For / Avoid If
＋ Best For
+Gaming apps, esports platforms, and game companion tools
+Creative tools targeting a younger, design-savvy audience
+Music production software and DJ tools
+Security and developer tools that want an aggressive visual identity
+Side projects and personal tools where personality matters more than convention
+Anything targeting an audience that grew up with cyberpunk aesthetics in media
× Avoid If
×Your product needs to convey trustworthiness, approachability, or safety
×You have non-technical users who would find the aesthetic overwhelming
×Legibility is a top priority — the high-contrast neon-on-dark aesthetic can be hard on the eyes for long sessions
×You're operating in a professional or regulated industry
03 · Design Philosophy
01

Light as substance

In cyberpunk design, light doesn't just illuminate — it glows, bleeds, and contaminates. A neon edge doesn't just have a color; it casts that color onto the surfaces around it. Text doesn't just appear on a background; it pulses with a subtle luminous quality. This treatment of light as a physical material rather than a visual property is what gives cyberpunk interfaces their depth. Everything is slightly lit from within.

02

Information overload is intentional

Where most design removes information to create clarity, cyberpunk adds information to create atmosphere. Secondary data readouts, status tickers, coordinate displays, progress bars that serve no functional purpose — all of these are aesthetic choices that signal the complexity and power of the system. The information doesn't all need to be read. It needs to be felt.

03

The grid is breaking down

Cyberpunk layouts are grids in decay — elements that almost align, borders that are cut at angles rather than meeting at corners, panels that overlap slightly rather than sitting flush. This controlled imperfection communicates a world where systems are under pressure, where the clean lines of corporate design have been hacked and modified and pushed past their original parameters. Precise imprecision is the technique.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Eye strain from pure neon on black
Full-brightness neon on pure black is hard to look at for more than a few minutes. Reduce neon accent opacity to 70–85% and use a very dark navy or charcoal background instead of pure black.
! WARNING
Too many glowing things
Glow is powerful because it's rare. If every element glows, nothing does. Reserve the glow effect for primary interactive elements and key data points — three or four glowing things per screen maximum.
! WARNING
Decorative data that confuses users
Fake data readouts as decoration are great until a user thinks they mean something and acts on them. Make sure decorative UI elements are visually distinct from functional ones — different opacity, different placement, clearly secondary.
! WARNING
Illegible small text
Cyberpunk UIs cram in a lot of small text. Make sure body copy and labels are large enough to read — at least 13px for secondary text. The aesthetic shouldn't compromise core usability.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →