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

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 glows, bleeds, and contaminates. A neon edge casts its color onto the surfaces around it. Text pulses with a subtle luminous quality. This treatment of light as a physical material is what gives cyberpunk interfaces their depth. Everything is slightly lit from within.

02

Information overload is intentional

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 is meant to be felt.

03

The grid is breaking down

Cyberpunk layouts are grids in decay — elements that almost align, borders cut at angles, panels that overlap slightly. 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
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
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 — mention the skill name to invoke it automatically
★ 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

Beautiful designs in minutes.

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

UNLOCK WITH PRO →