Cyberpunk Design Prompts

Design a cyberpunk-themed monitoring dashboard. Dark base (#0a0a0f) with neon accents: cyan (#00f0ff), magenta (#ff0080), and warning yellow (#ffe600). Use HUD-style corners on cards (triangular cut corners with neon borders). Monospace font (JetBrains Mono) for all text. Include: real-time data counters with flip-clock animation, hexagonal grid layout for status indicators, glitch effect on headings (CSS animation with clip-path), and scanline overlay on the entire page. Cards have angled/clipped corners using clip-path polygon.

Create a Neon Tokyo-themed event page with shadcn/ui. Ultra-dark background (#050510) with neon pink (#ff2d78) and electric blue (#2de2e6) accents. Include: a hero section with large glitched text and animated neon sign effect, event details in HUD-style cards with clip-path corners, a countdown timer with neon digit display, a speaker grid with cyberpunk-frame portraits, and a ticket purchase section with glowing CTA button. Add a subtle rain animation overlay using CSS.

Build a sci-fi HUD interface in Next.js. Design system: all elements use angular shapes (clip-path for diamond corners), cyan (#00f5ff) primary neon with dark navy (#0a1628) background. Create HUD components: TargetReticle, DataReadout (animated number counter), StatusBar (segmented progress), AlertPanel (blinking border), and RadarChart. Use CSS custom properties for neon glow: --neon-glow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color), 0 0 40px var(--neon-color). All text in monospace, uppercase with letter-spacing: 0.2em.

Generate React components with cyberpunk glitch aesthetics. Create: GlitchText (CSS animation that randomly shifts text-shadow in RGB channels), NeonButton (glowing border + text, pulse animation on hover), HUDCard (angular clip-path corners, animated border trace on mount), DataStream (scrolling text ticker with monospace font), and CyberInput (underline-only with blinking cursor and cyan accent). Include a useGlitch() hook that randomly triggers visual glitch effects at intervals. Use Tailwind CSS with custom animations.

Design a landing page for a cyberpunk video game. Base #05050a with a faint scanline overlay at 3% opacity. Hero: full-viewport keyart with the title in a stencil display font at 96px, cyan #00f0ff outer glow (text-shadow 0 0 20px), and a magenta #ff0080 glitch double-exposure that fires every 6 seconds. Nav: monospace uppercase, 13px, letter-spacing 0.25em, active link with an animated bracket [ ] wrapper. Sections: feature panels with clip-path cut corners and 1px cyan borders, a system-requirements table styled as a terminal readout, and a preorder CTA in solid #ff0080 with black text (7.2:1 contrast). Respect prefers-reduced-motion by disabling glitch and scanline animations.

Build a synthwave music player with shadcn/ui. Background: vertical gradient #0a0a14 to #1a0a2e with a perspective grid floor in #ff2d78 at 30% opacity. Player card: clip-path angled corners, 1px #2de2e6 border with 0 0 12px glow. Album art framed by animated corner brackets. Waveform visualizer: 48 bars in a cyan-to-magenta gradient reacting to a mock amplitude array. Controls: circular play button with pulsing neon ring, skip buttons as outlined triangles. Track title in monospace uppercase with a marquee scroll when overflowing. Progress bar: 4px track in #1f1f33, #2de2e6 fill, and a diamond-shaped thumb. Label every control with aria-label since icons are abstract.

Build a cyberpunk admin panel in Next.js with Tailwind. Shell: left rail 64px wide with icon-only nav, icons in #7dd3fc turning #00f5ff with glow when active; main area on #0a0f1e with an 8px grid. Data tables: monospace 13px, header row with 1px bottom border in #00f5ff at 40% opacity, row hover raising background to #101830. Status chips: ONLINE #39ff14, DEGRADED #ffe600, OFFLINE #ff3b3b — each chip also shows its text label, never color alone. Charts use the neon palette on transparent backgrounds with 1px grid lines at 10% white. Modals slide in as HUD panels with an animated border trace over 400ms. Keep body text #d6e4ff at 14px for 4.5:1 contrast against the navy base.

Generate a React portfolio site styled as a hacker terminal. Boot sequence: three lines of monospace text typing out over 2 seconds, skippable with any key press. Layout: max-w-4xl on #050508, all text in JetBrains Mono. Section headers rendered as shell prompts ('> projects --list') in #39ff14. Project cards: 1px #1f2937 border that ignites to #00f5ff with 0 0 16px glow on hover, tags as bracketed tokens in #ffe600. About section as a fake 'whoami' output block. Contact form inputs styled as command-line fields with a blinking block cursor. Include a visible-focus state (2px #ff0080 outline) and a 'disable effects' toggle that turns off all glows and animations.