Design for AI

Estilo Infantil / libro de cuentos: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para infantil / libro de cuentos. También llamado diseño web para niños, UI de libro de cuentos, estilo de álbum ilustrado, diseño de apps infantiles, sitio de ilustración caprichosa. continuo; con más fuerza de 2015 en adelante (apps infantiles, sitios educativos, marcas familiares).

Rasgos

  • escenas ilustradas como fondos: colinas, nubes, bosques, personajes que se asoman
  • paleta cálida y rica con más saturación que el pastel pero más suave que los primarios
  • tipografía grande y redondeada, a veces títulos rotulados a mano
  • objetivos táctiles e iconos sobredimensionados; muy poco texto, muchas imágenes
  • texturas de papel, cera o acuarela en las formas
  • los personajes guían la navegación; cada sección es una escena
  • movimiento: nubes flotando, ojos que parpadean, transiciones de página saltarinas, sonido opcional

Paleta

#fff7e6 cielo crema, #ffb84d sol, #6bcb77 hierba, #4d96ff azul cielo, #ff6b6b rojo de mejillas, #4a3728 texto marrón cálido

Tipografía

Baloo 2, Fredoka, Lilita One o Chewy para títulos (700-800 a 40-64px); Nunito o Andika (diseñada para primeros lectores) a 18-20px para el cuerpo

Haz

  • diseña cada sección como una escena con una línea de horizonte, una capa de fondo, una capa media y personajes delante
  • haz que todo lo clicable mida al menos 56px y dale una cara, una forma o un nombre de color
  • usa texturas SVG de acuarela o cera en las formas grandes (feTurbulence con frecuencia baja)

Evita

  • no uses texto pequeño ni párrafos largos; los adultos leen la página Acerca de, los niños leen imágenes
  • no uses modo oscuro, neón ni líneas finas
  • no reproduzcas sonido automáticamente; ofrécelo como un interruptor

Conocido por: Khan Academy Kids, PBS Kids, Toca Boca, Sago Mini, Lingokids

Semilla CSS
:root {
  --bg: #fff7e6;
   --fg: #4a3728;
   --accent: #ffb84d;
   --accent2: #6bcb77;
   --accent3: #4d96ff;
   --accent4: #ff6b6b;
   --radius: 28px;
   --font: 'Nunito',sans-serif;
   --font-display: 'Baloo 2',cursive
}
Prompt

Construye el sitio como un libro de cuentos infantil. Fondo de cielo #fff7e6 con una colina verde ondulada (#6bcb77, path SVG con un filtro de textura de cera) en la parte inferior del hero, tres nubes suaves (blancas, pilas con radius 999px) a la deriva en bucles de 30s, y un sol #ffb84d con 12 rayos redondeados. Texto #4a3728. Fuentes: Baloo 2 800 para títulos a 60/40/28px, Nunito 600 a 20px para el cuerpo, line-height 1.6, máximo 3 líneas por bloque. Botones: píldoras grandes, 64px de alto, relleno #4d96ff o #ff6b6b con texto blanco y un canto inferior de 4px más oscuro, rebotan en hover (scale 1.06, easing elástico 350ms). Las tarjetas son "señales" o "ventanas" con radio 28px, contornos 3px #4a3728 e iconos ilustrados planos a 96px. Cada sección es una escena: bosque (árboles #2d6a4f), mar (olas #4d96ff), noche (#2b2d5c con estrellas) en ese orden, con un personaje asomándose por el borde de cada una. Objetivos táctiles de 56px como mínimo. Interruptor de sonido apagado por defecto.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio como un libro de cuentos infantil. Fondo de cielo #fff7e6 con una colina verde ondulada (#6bcb77, path SVG con un filtro de textura de cera) en la parte inferior del hero, tres nubes suaves (blancas, pilas con radius 999px) a la deriva en bucles de 30s, y un sol #ffb84d con 12 rayos redondeados. Texto #4a3728. Fuentes: Baloo 2 800 para títulos a 60/40/28px, Nunito 600 a 20px para el cuerpo, line-height 1.6, máximo 3 líneas por bloque. Botones: píldoras grandes, 64px de alto, relleno #4d96ff o #ff6b6b con texto blanco y un canto inferior de 4px más oscuro, rebotan en hover (scale 1.06, easing elástico 350ms). Las tarjetas son "señales" o "ventanas" con radio 28px, contornos 3px #4a3728 e iconos ilustrados planos a 96px. Cada sección es una escena: bosque (árboles #2d6a4f), mar (olas #4d96ff), noche (#2b2d5c con estrellas) en ese orden, con un personaje asomándose por el borde de cada una. Objetivos táctiles de 56px como mínimo. Interruptor de sonido apagado por defecto.

## Tokens
:root { --bg:#fff7e6; --fg:#4a3728; --accent:#ffb84d; --accent2:#6bcb77; --accent3:#4d96ff; --accent4:#ff6b6b; --radius:28px; --font:'Nunito',sans-serif; --font-display:'Baloo 2',cursive }

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