Design for AI

Estilo Infantil / livro de histórias: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de infantil / livro de histórias. Também chamado de web design infantil, UI de livro de histórias, estilo de livro ilustrado, design de app infantil, site de ilustração lúdica. contínuo; mais forte de 2015 em diante (apps infantis, sites educativos, marcas para famílias).

Traços

  • cenas ilustradas como fundos: colinas, nuvens, florestas, personagens espiando
  • paleta quente e rica com mais saturação que o pastel mas mais suave que as primárias
  • tipografia grande e arredondada, às vezes títulos com lettering manual
  • alvos de toque e ícones superdimensionados; pouquíssimo texto, muitas imagens
  • texturas de papel, giz de cera ou aquarela nas formas
  • os personagens guiam a navegação; cada seção é uma cena
  • movimento: nuvens flutuando, olhos piscando, transições de página saltitantes, som opcional

Paleta

#fff7e6 céu creme, #ffb84d sol, #6bcb77 grama, #4d96ff azul-céu, #ff6b6b vermelho bochecha, #4a3728 texto marrom quente

Tipografia

Baloo 2, Fredoka, Lilita One ou Chewy para títulos (700-800 a 40-64px); Nunito ou Andika (projetada para leitores iniciantes) a 18-20px para o corpo

Faça

  • projete cada seção como uma cena com linha do horizonte, uma camada de fundo, uma camada intermediária e personagens na frente
  • faça cada coisa clicável ter pelo menos 56px e dê a ela um rosto, uma forma ou um nome de cor
  • use texturas SVG de aquarela ou giz de cera nas formas grandes (feTurbulence com frequência baixa)

Evite

  • não use texto pequeno nem parágrafos longos; os adultos leem a página Sobre, as crianças leem imagens
  • não use dark mode, neon nem linhas finas
  • não toque som automaticamente; ofereça como um toggle

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

Semente 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

Construa o site como um livro de histórias infantil. Fundo de céu #fff7e6 com uma colina verde ondulada (#6bcb77, path SVG com filtro de textura de giz de cera) na base do hero, três nuvens macias (brancas, pilhas com raio 999px) derivando em loops de 30s, e um sol #ffb84d com 12 raios arredondados. Texto #4a3728. Fontes: Baloo 2 800 para títulos a 60/40/28px, Nunito 600 a 20px para o corpo, line-height 1.6, no máximo 3 linhas por bloco. Botões: pílulas grandes, 64px de altura, preenchimento #4d96ff ou #ff6b6b com texto branco e uma borda inferior 4px mais escura, quicam no hover (scale 1.06, easing de mola 350ms). Os cards são "placas" ou "janelas" com raio de 28px, contornos 3px #4a3728 e ícones ilustrados flat a 96px. Cada seção é uma cena: floresta (árvores #2d6a4f), mar (ondas #4d96ff), noite (#2b2d5c com estrelas) nessa ordem, com um personagem espiando pela borda de cada uma. Alvos de toque de 56px no mínimo. Toggle de som desligado por padrão.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site como um livro de histórias infantil. Fundo de céu #fff7e6 com uma colina verde ondulada (#6bcb77, path SVG com filtro de textura de giz de cera) na base do hero, três nuvens macias (brancas, pilhas com raio 999px) derivando em loops de 30s, e um sol #ffb84d com 12 raios arredondados. Texto #4a3728. Fontes: Baloo 2 800 para títulos a 60/40/28px, Nunito 600 a 20px para o corpo, line-height 1.6, no máximo 3 linhas por bloco. Botões: pílulas grandes, 64px de altura, preenchimento #4d96ff ou #ff6b6b com texto branco e uma borda inferior 4px mais escura, quicam no hover (scale 1.06, easing de mola 350ms). Os cards são "placas" ou "janelas" com raio de 28px, contornos 3px #4a3728 e ícones ilustrados flat a 96px. Cada seção é uma cena: floresta (árvores #2d6a4f), mar (ondas #4d96ff), noite (#2b2d5c com estrelas) nessa ordem, com um personagem espiando pela borda de cada uma. Alvos de toque de 56px no mínimo. Toggle de som desligado por padrão.

## 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 }

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