Design for AI

Estilo Terminal / hacker: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de terminal / hacker. Também chamado de estética hacker, UI de CLI, site de linha de comando, tela verde, estilo TUI. terminais dos anos 1970-80; revival na web de 2015 em diante (portfólios de desenvolvedores, ferramentas de segurança).

Traços

  • tipografia monospace para tudo, incluindo títulos
  • fundo preto ou muito escuro com texto verde fósforo ou âmbar
  • caracteres de prompt ($, >, ~) como marcadores de lista e títulos
  • caracteres box-drawing, logos em ASCII art, cursor de bloco piscando
  • efeito de texto digitado no hero, uma linha por vez
  • bordas em ASCII de linha simples ou 1px na cor do texto
  • tabelas alinhadas em colunas fixas como listagens de diretório

Paleta

#0c0c0c página, #33ff33 verde primário (ou #ffb000 âmbar), #1f7a1f verde apagado, #c8c8c8 secundário, #ff5555 vermelho de erro, #ffff55 aviso

Tipografia

JetBrains Mono, IBM Plex Mono, Fira Code ou Commit Mono; tamanho único 14-16px, títulos no mesmo tamanho em bold ou dentro de caixas, line-height 1.5

Faça

  • use um único tamanho de fonte e faça a hierarquia com prompts, caixa alta e filetes box-drawing
  • adicione um overlay de scanlines (repeating-linear-gradient, 2px, opacity 0.06) e um leve brilho no texto
  • torne o efeito de digitação pulável e desative-o sob prefers-reduced-motion

Evite

  • não misture uma sans-serif para "legibilidade"; quebra a ficção
  • não use cantos arredondados, gradientes nem sombras
  • não transforme num sistema operacional falso com janelas falsas; fique num único terminal

Conhecido por: Hack The Box, Hackaday (parcial), incontáveis portfólios de desenvolvedores, páginas de marketing do Warp e do Ghostty

Semente CSS
:root {
  --bg: #0c0c0c;
   --fg: #33ff33;
   --dim: #1f7a1f;
   --muted: #c8c8c8;
   --alert: #ff5555;
   --radius: 0;
   --glow: 0 0 6px rgba(51,255,51,0.5);
   --font: 'JetBrains Mono',monospace
}
Prompt

Construa o site como um terminal. Fundo #0c0c0c, texto #33ff33, texto apagado #1f7a1f, secundário #c8c8c8, erro #ff5555. Fonte JetBrains Mono 15px em tudo, line-height 1.5; os títulos têm o mesmo tamanho em bold, prefixados com "$ " ou envolvidos em caracteres box-drawing (┌─┐ │ └─┘). Largura máxima 88 caracteres, padding 24px, alinhado à esquerda. A nav é uma única linha de caminhos (~/home ~/work ~/about) com o ativo em vídeo inverso (background #33ff33, texto #0c0c0c). Hero: uma linha digitada com cursor de bloco piscando (animação steps(), piscada de 1s), digitando a 40ms por caractere, pulável com clique. Listas usam marcadores "> "; dados em colunas de largura fixa. Links sublinhados em #33ff33, o hover inverte as cores. Adicione text-shadow 0 0 6px rgba(51,255,51,0.5) e um overlay de scanlines de 2px a opacity 0.06. Sem raio, sem gradientes, sem imagens além de ASCII art. Sob prefers-reduced-motion, mostre todo o texto instantaneamente.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site como um terminal. Fundo #0c0c0c, texto #33ff33, texto apagado #1f7a1f, secundário #c8c8c8, erro #ff5555. Fonte JetBrains Mono 15px em tudo, line-height 1.5; os títulos têm o mesmo tamanho em bold, prefixados com "$ " ou envolvidos em caracteres box-drawing (┌─┐ │ └─┘). Largura máxima 88 caracteres, padding 24px, alinhado à esquerda. A nav é uma única linha de caminhos (~/home ~/work ~/about) com o ativo em vídeo inverso (background #33ff33, texto #0c0c0c). Hero: uma linha digitada com cursor de bloco piscando (animação steps(), piscada de 1s), digitando a 40ms por caractere, pulável com clique. Listas usam marcadores "> "; dados em colunas de largura fixa. Links sublinhados em #33ff33, o hover inverte as cores. Adicione text-shadow 0 0 6px rgba(51,255,51,0.5) e um overlay de scanlines de 2px a opacity 0.06. Sem raio, sem gradientes, sem imagens além de ASCII art. Sob prefers-reduced-motion, mostre todo o texto instantaneamente.

## Tokens
:root { --bg:#0c0c0c; --fg:#33ff33; --dim:#1f7a1f; --muted:#c8c8c8; --alert:#ff5555; --radius:0; --glow:0 0 6px rgba(51,255,51,0.5); --font:'JetBrains Mono',monospace }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.

Snippets neste estilo

B 094CRT âmbar