Design for AIEstilo Cyberpunk / neon: prompt de design de UI
Paleta, regras de tipografia e um prompt pronto para colar de cyberpunk / neon. Também chamado de UI cyberpunk, UI neon, synthwave, design glitch, night city. visuais de Blade Runner de 1982; ondas na web em 2017 (synthwave) e 2020 (marketing de Cyberpunk 2077).
Traços
- fundos quase pretos com neon saturado: magenta, ciano, amarelo, verde ácido
- brilho via text-shadows e box-shadows em camadas no mesmo matiz neon
- cantos cortados (polígonos clip-path), cortes diagonais, listras de aviso
- efeitos glitch: separação RGB, tremor com skew, linhas de varredura
- tipografia monospace ou condensada em caixa alta com tracking largo, códigos numéricos em todo lugar
- elementos de HUD: colchetes, miras, leituras de status
- movimento rápido e cortante com flicker ocasional
Paleta
#050507 página, #f0f0f0 texto, #ff2a6d magenta, #05d9e8 ciano, #f9f002 amarelo, #d1f7ff ciano pálido para o tom do brilho
Tipografia
Orbitron ou Rajdhani para títulos (700, caixa alta, tracking 0.1em), Share Tech Mono ou JetBrains Mono para dados, Barlow Condensed para o corpo; títulos 40-80px
Faça
- limite o neon a dois matizes mais um amarelo de aviso; no máximo três brilhos na tela
- construa o brilho com 3 sombras empilhadas (2px, 8px, 24px) na mesma cor com alpha decrescente
- corte um canto dos cards com clip-path: polygon() para a forma assinatura
Evite
- não coloque brilho no texto de corpo; o brilho é só para títulos, bordas e botões
- não rode animações glitch continuamente; dispare no hover ou uma vez no load
- não use cantos arredondados; só ângulos e cortes
Conhecido por: Cyberpunk 2077, Razer, tie-ins de Ghost in the Shell, Corsair iCUE
Semente CSS
:root {
--bg: #050507;
--fg: #f0f0f0;
--accent: #ff2a6d;
--accent2: #05d9e8;
--warn: #f9f002;
--radius: 0;
--glow: 0 0 2px #05d9e8,0 0 8px #05d9e8,0 0 24px rgba(5,217,232,0.6);
--font: 'Orbitron',sans-serif
}
Prompt
Construa o site em estilo cyberpunk neon. Fundo #050507 com uma grade tênue de 48px (linhas rgba(5,217,232,0.06)). Texto #f0f0f0, magenta neon #ff2a6d, ciano neon #05d9e8, amarelo de aviso #f9f002. Fontes: Orbitron 700 em caixa alta com tracking 0.1em para títulos a 64/40/24px, Barlow Condensed 400 a 18px para o corpo, Share Tech Mono 13px para códigos, timestamps e labels. Cards: background #0b0b12, borda 1px #05d9e8, um canto cortado com clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%), box-shadow 0 0 2px #05d9e8, 0 0 8px #05d9e8, 0 0 24px rgba(5,217,232,0.5). Botão primário #ff2a6d com a mesma receita de brilho em magenta e uma listra diagonal de aviso amarela e preta na borda esquerda. Os títulos recebem text-shadow 0 0 8px currentColor. O título do hero roda um glitch único de 600ms no load (tremor skewX e separação RGB de 2px via pseudo-elementos) e repete no hover. Sem border-radius em lugar nenhum. Movimento rápido: transições de 120ms.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo cyberpunk neon. Fundo #050507 com uma grade tênue de 48px (linhas rgba(5,217,232,0.06)). Texto #f0f0f0, magenta neon #ff2a6d, ciano neon #05d9e8, amarelo de aviso #f9f002. Fontes: Orbitron 700 em caixa alta com tracking 0.1em para títulos a 64/40/24px, Barlow Condensed 400 a 18px para o corpo, Share Tech Mono 13px para códigos, timestamps e labels. Cards: background #0b0b12, borda 1px #05d9e8, um canto cortado com clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%), box-shadow 0 0 2px #05d9e8, 0 0 8px #05d9e8, 0 0 24px rgba(5,217,232,0.5). Botão primário #ff2a6d com a mesma receita de brilho em magenta e uma listra diagonal de aviso amarela e preta na borda esquerda. Os títulos recebem text-shadow 0 0 8px currentColor. O título do hero roda um glitch único de 600ms no load (tremor skewX e separação RGB de 2px via pseudo-elementos) e repete no hover. Sem border-radius em lugar nenhum. Movimento rápido: transições de 120ms.
## Tokens
:root { --bg:#050507; --fg:#f0f0f0; --accent:#ff2a6d; --accent2:#05d9e8; --warn:#f9f002; --radius:0; --glow:0 0 2px #05d9e8,0 0 8px #05d9e8,0 0 24px rgba(5,217,232,0.6); --font:'Orbitron',sans-serif }
Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.