Design for AIEstilo Minimalismo: prompt de diseño UI
Paleta, reglas tipográficas y un prompt pegable para minimalismo. También llamado diseño web minimalista, menos es más, UI limpia, diseño de espacio en blanco. atemporal; oleadas web en 2008 (Apple), 2013 (flat), 2019 (Linear/Notion), y sigue.
Rasgos
- muy pocos elementos; cada uno tiene un trabajo
- una tipografía, dos tamaños, dos pesos, un color de acento
- el espacio en blanco lleva la jerarquía; sin cajas, sin separadores salvo que sean imprescindibles
- casi siempre negro sobre blanco o casi blanco, filetes finísimos
- radio pequeño y preciso (4-8px) o ninguno; sombras casi invisibles
- las imágenes son escasas y grandes cuando aparecen
- el movimiento es sutil: opacidad y translate de 4px, 150-250ms
Paleta
#ffffff página, #111111 texto, #6b7280 secundario, #e5e7eb filete, #2563eb único acento
Tipografía
Geist, Helvetica Neue o system-ui; títulos 600 a 32-56px con -0.02em, cuerpo 400 a 16-17px, line-height 1.6; no más de 4 tamaños en todo el sitio
Haz
- elimina cualquier cosa que no cambie lo que el usuario hace a continuación
- alinea a una retícula de 8px y a un ancho de lectura de 640-720px
- deja que el tamaño de tipo y el espaciado marquen la jerarquía en vez del color y las cajas
Evita
- no pongas iconos junto a cada título
- no uses tarjetas ni bordes para agrupar; usa espacio
- no uses más de un color de acento ni un gradiente
Conocido por: Apple.com, Notion, Linear (modo claro), Muji
Semilla CSS
:root {
--bg: #ffffff;
--fg: #111111;
--muted: #6b7280;
--accent: #2563eb;
--line: #e5e7eb;
--radius: 6px;
--shadow: none;
--font: 'Geist',system-ui,sans-serif
}
Prompt
Construye el sitio en minimalismo estricto. Fondo #ffffff, texto #111111, secundario #6b7280, filete #e5e7eb, un acento #2563eb usado solo para enlaces y el botón primario. Fuente Geist: exactamente cuatro tamaños: 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (cuerpo, line-height 1.6), 13px 400 (meta). Columna de contenido de 680px, padding de página 24px, secciones separadas por 96px de espacio y nada más (sin filetes, sin fondos). Sin tarjetas, sin iconos, sin sombras, sin gradientes. Botones: 40px de alto, radio 6px, #111111 sólido con texto blanco; los botones secundarios son enlaces de texto plano. Las imágenes, cuando se usen, ocupan todo el ancho de la columna con radio 8px y sin borde. La nav es el logo a la izquierda y tres enlaces de texto a la derecha. Movimiento: 150ms de opacidad en hover; nada se anima al hacer scroll.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en minimalismo estricto. Fondo #ffffff, texto #111111, secundario #6b7280, filete #e5e7eb, un acento #2563eb usado solo para enlaces y el botón primario. Fuente Geist: exactamente cuatro tamaños: 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (cuerpo, line-height 1.6), 13px 400 (meta). Columna de contenido de 680px, padding de página 24px, secciones separadas por 96px de espacio y nada más (sin filetes, sin fondos). Sin tarjetas, sin iconos, sin sombras, sin gradientes. Botones: 40px de alto, radio 6px, #111111 sólido con texto blanco; los botones secundarios son enlaces de texto plano. Las imágenes, cuando se usen, ocupan todo el ancho de la columna con radio 8px y sin borde. La nav es el logo a la izquierda y tres enlaces de texto a la derecha. Movimiento: 150ms de opacidad en hover; nada se anima al hacer scroll.
## Tokens
:root { --bg:#ffffff; --fg:#111111; --muted:#6b7280; --accent:#2563eb; --line:#e5e7eb; --radius:6px; --shadow:none; --font:'Geist',system-ui,sans-serif }
Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.