Design for AI

Estilo Brutalismo clásico: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para brutalismo clásico. También llamado web cruda, sitios brutalistas, anti-diseño, estética de HTML por defecto, brutalismo web 1.0. pico 2014-2018 (la era de brutalistwebsites.com).

Rasgos

  • parece sin estilos a propósito: fuentes del sistema, enlaces azules por defecto, estructura visible
  • texto negro sobre blanco o un único color duro; sin sombreados, sin imágenes salvo que sean crudas
  • tablas, listas, enlaces subrayados, monospace, controles de formulario por defecto
  • denso, alineado a la izquierda, sin cortesías de max-width, a veces con elementos solapados
  • honesto con ser un documento; barras de scroll y bordes a la vista
  • de vez en cuando tipografía enorme o un solo color chillón como única decoración
  • sin movimiento, o con movimiento tosco (blink, marquee)

Paleta

#ffffff página, #000000 texto, #0000ee enlace, #551a8b visitado, #ff0000 un solo acento gritón, #c0c0c0 separadores

Tipografía

Times New Roman / Georgia (serif) o Courier New / Courier Prime (mono) o Arial; tamaños cercanos a los del navegador (16px cuerpo), títulos en negrita a 24-32px; sin webfonts personalizadas

Haz

  • conserva el estilo por defecto del navegador en enlaces, botones y controles de formulario
  • usa la estructura HTML como diseño: títulos, hr, tablas, listas ordenadas
  • elige un color estridente y úsalo para una sola cosa

Evita

  • no añadas esquinas redondeadas, sombras ni gradientes
  • no centres todo ni añadas secciones hero; eso es una plantilla, no brutalismo
  • no uses sets de iconos; etiquetas de texto plano o ASCII

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

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

Construye el sitio en brutalismo web clásico. Fondo de página #ffffff, texto #000000, enlaces #0000ee subrayados, visitados #551a8b. Fuentes: Times New Roman para el cuerpo a 16px y Courier New para código y etiquetas; títulos en negrita, sin trucos de letter-spacing, tamaños 32/24/18px. Sin border-radius, sin box-shadow, sin gradientes, sin webfonts, sin iconos. El layout es un documento plano: h1, párrafos, separadores hr, listas ul/ol y una tabla de verdad para cualquier dato. El contenido va alineado a la izquierda con max-width 720px y padding 16px; la nav es una fila de enlaces de texto subrayados separados por barras verticales. Botones e inputs conservan la apariencia por defecto del navegador con un borde 1px solid #000. Un acento #ff0000 usado solo para la única llamada a la acción más importante. Nada de animación. Cada elemento debería parecer escrito en 1996 y nunca rediseñado.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en brutalismo web clásico. Fondo de página #ffffff, texto #000000, enlaces #0000ee subrayados, visitados #551a8b. Fuentes: Times New Roman para el cuerpo a 16px y Courier New para código y etiquetas; títulos en negrita, sin trucos de letter-spacing, tamaños 32/24/18px. Sin border-radius, sin box-shadow, sin gradientes, sin webfonts, sin iconos. El layout es un documento plano: h1, párrafos, separadores hr, listas ul/ol y una tabla de verdad para cualquier dato. El contenido va alineado a la izquierda con max-width 720px y padding 16px; la nav es una fila de enlaces de texto subrayados separados por barras verticales. Botones e inputs conservan la apariencia por defecto del navegador con un borde 1px solid #000. Un acento #ff0000 usado solo para la única llamada a la acción más importante. Nada de animación. Cada elemento debería parecer escrito en 1996 y nunca rediseñado.

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

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.