Design for AI

Estilo Brutalismo clássico: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de brutalismo clássico. Também chamado de web crua, sites brutalistas, anti-design, estética de HTML padrão, brutalismo web 1.0. auge 2014-2018 (era do brutalistwebsites.com).

Traços

  • parece sem estilo de propósito: fontes do sistema, links azuis padrão, estrutura visível
  • texto preto sobre branco ou uma única cor dura; sem sombreamento, sem imagens a menos que cruas
  • tabelas, listas, links sublinhados, monospace, controles de formulário padrão
  • denso, alinhado à esquerda, sem mimos de max-width, às vezes elementos sobrepostos
  • honesto sobre ser um documento; barras de rolagem e bordas expostas
  • ocasionalmente tipografia enorme ou uma única cor berrante como única decoração
  • sem movimento, ou movimento tosco (blink, marquee)

Paleta

#ffffff página, #000000 texto, #0000ee link, #551a8b visitado, #ff0000 um acento gritante, #c0c0c0 divisores

Tipografia

Times New Roman / Georgia (serifa) ou Courier New / Courier Prime (mono) ou Arial; tamanhos perto dos padrões do navegador (corpo 16px), títulos bold a 24-32px; sem webfonts customizadas

Faça

  • mantenha o estilo padrão do navegador para links, botões e controles de formulário
  • use a estrutura HTML como design: títulos, hr, tabelas, listas ordenadas
  • escolha uma cor berrante e use-a para uma única coisa

Evite

  • não adicione cantos arredondados, sombras nem gradientes
  • não centralize tudo nem adicione seções hero; isso é template, não brutalismo
  • não use conjuntos de ícones; labels em texto puro ou ASCII

Conhecido por: Craigslist, Hacker News, Berkshire Hathaway, Drudge Report

Semente CSS
:root {
  --bg: #ffffff;
   --fg: #000000;
   --accent: #0000ee;
   --alert: #ff0000;
   --radius: 0;
   --border: 1px solid #000;
   --font: 'Times New Roman',serif
}
Prompt

Construa o site em brutalismo web clássico. Fundo da página #ffffff, texto #000000, links #0000ee sublinhados, visitados #551a8b. Fontes: Times New Roman para o corpo a 16px e Courier New para código e labels; títulos bold, sem truques de letter-spacing, tamanhos 32/24/18px. Sem border-radius, sem box-shadow, sem gradientes, sem webfonts, sem ícones. O layout é um documento simples: h1, parágrafos, divisores hr, listas ul/ol e uma tabela de verdade para qualquer dado. O conteúdo fica alinhado à esquerda com max-width 720px e padding 16px; a nav é uma linha de links de texto sublinhados separados por pipes. Botões e inputs mantêm a aparência padrão do navegador com borda 1px solid #000. Um acento #ff0000 usado só na única chamada para ação mais importante. Nenhuma animação. Cada elemento deve parecer escrito em 1996 e nunca redesenhado.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em brutalismo web clássico. Fundo da página #ffffff, texto #000000, links #0000ee sublinhados, visitados #551a8b. Fontes: Times New Roman para o corpo a 16px e Courier New para código e labels; títulos bold, sem truques de letter-spacing, tamanhos 32/24/18px. Sem border-radius, sem box-shadow, sem gradientes, sem webfonts, sem ícones. O layout é um documento simples: h1, parágrafos, divisores hr, listas ul/ol e uma tabela de verdade para qualquer dado. O conteúdo fica alinhado à esquerda com max-width 720px e padding 16px; a nav é uma linha de links de texto sublinhados separados por pipes. Botões e inputs mantêm a aparência padrão do navegador com borda 1px solid #000. Um acento #ff0000 usado só na única chamada para ação mais importante. Nenhuma animação. Cada elemento deve parecer escrito em 1996 e nunca redesenhado.

## Tokens
:root { --bg:#ffffff; --fg:#000000; --accent:#0000ee; --alert:#ff0000; --radius:0; --border:1px solid #000; --font:'Times New Roman',serif }

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