Design for AI

Estilo Minimal japonés: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para minimal japonés. También llamado minimalismo japonés, diseño ma, web wabi-sabi, UI zen, estilo Muji, kanso. tradicional; uso web de 2015 en adelante (Muji, estudios japoneses, marcas de té y artesanía).

Rasgos

  • ma: el vacío es el elemento principal; el contenido ocupa una parte pequeña del lienzo
  • ritmo vertical y texto vertical (writing-mode) usados con intención
  • paleta natural y apagada: blanco washi, tinta sumi, un tono tierra o índigo
  • tipo fino, tamaños pequeños, tracking amplio; a menudo serif Mincho combinada con una gótica ligera
  • asimetría, colocación descentrada, una sola imagen con mucho espacio alrededor
  • texturas de papel y materiales naturales, apenas visibles
  • el movimiento es lento y silencioso: fundidos de 800ms o más, sin rebote

Paleta

#f4f1ea washi, #1c1c1c sumi, #8c8478 piedra, #2b3a55 índigo, #b7a58f arcilla, #dcd6cb línea

Tipografía

Noto Serif JP o Shippori Mincho para títulos (300-400 a 28-48px, tracking 0.08em), Noto Sans JP o Zen Kaku Gothic New para el cuerpo (300-400 a 15-16px, line-height 1.9); latino: Cormorant o EB Garamond con Geist light

Haz

  • deja vacío el 60% o más del viewport en el hero; coloca el titular descentrado
  • usa writing-mode: vertical-rl en una etiqueta o elemento de nav para señalar la referencia
  • mantén cada transición en 800-1200ms con ease-out; nada salta

Evita

  • no añadas tarjetas, sombras ni bordes gruesos; usa espacio en blanco y filetes finísimos
  • no uses pesos en negrita; solo 300-400, jerarquía por tamaño y espaciado
  • no rellenes el espacio vacío con decoración; el vacío es el diseño

Conocido por: Muji, sitio de Ryuichi Sakamoto, Nendo, Ippodo Tea, el trabajo de Kenya Hara

Semilla CSS
:root {
  --bg: #f4f1ea;
   --fg: #1c1c1c;
   --muted: #8c8478;
   --accent: #2b3a55;
   --line: #dcd6cb;
   --radius: 0;
   --tracking: 0.08em;
   --font: 'Noto Sans JP',sans-serif;
   --font-display: 'Shippori Mincho',serif
}
Prompt

Construye el sitio en estilo minimal japonés (ma). Fondo #f4f1ea, texto #1c1c1c, apagado #8c8478, un solo acento índigo #2b3a55, filetes #dcd6cb. Fuentes: Shippori Mincho 400 para títulos a 40/28/20px con letter-spacing 0.08em y line-height 1.4; Noto Sans JP 300 a 15px, line-height 1.9, para el cuerpo, max-width 34em. Hero: altura del viewport, un titular colocado al 15% desde la izquierda y al 60% desde arriba, una sola imagen pequeña (máximo 360px de ancho) colocada arriba a la derecha; al menos el 60% del hero se queda vacío. Una etiqueta de nav o el índice de sección en writing-mode: vertical-rl, posicionado en el borde derecho. Secciones separadas por 160px de espacio y un único filete 1px #dcd6cb de 80px de ancho, alineado a la izquierda. Sin tarjetas, sin sombras, sin radio, sin negrita. Los botones son texto con subrayado de 1px y tracking 0.1em. Las imágenes no llevan borde y aparecen con un fundido de 1000ms ease-out al hacer scroll. Todas las transiciones a 800ms.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo minimal japonés (ma). Fondo #f4f1ea, texto #1c1c1c, apagado #8c8478, un solo acento índigo #2b3a55, filetes #dcd6cb. Fuentes: Shippori Mincho 400 para títulos a 40/28/20px con letter-spacing 0.08em y line-height 1.4; Noto Sans JP 300 a 15px, line-height 1.9, para el cuerpo, max-width 34em. Hero: altura del viewport, un titular colocado al 15% desde la izquierda y al 60% desde arriba, una sola imagen pequeña (máximo 360px de ancho) colocada arriba a la derecha; al menos el 60% del hero se queda vacío. Una etiqueta de nav o el índice de sección en writing-mode: vertical-rl, posicionado en el borde derecho. Secciones separadas por 160px de espacio y un único filete 1px #dcd6cb de 80px de ancho, alineado a la izquierda. Sin tarjetas, sin sombras, sin radio, sin negrita. Los botones son texto con subrayado de 1px y tracking 0.1em. Las imágenes no llevan borde y aparecen con un fundido de 1000ms ease-out al hacer scroll. Todas las transiciones a 800ms.

## Tokens
:root { --bg:#f4f1ea; --fg:#1c1c1c; --muted:#8c8478; --accent:#2b3a55; --line:#dcd6cb; --radius:0; --tracking:0.08em; --font:'Noto Sans JP',sans-serif; --font-display:'Shippori Mincho',serif }

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