Design for AI

Stil Kinder / Bilderbuch: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für kinder / bilderbuch. Auch bekannt als Kinder-Website-Design, Bilderbuch-UI, Picture-Book-Stil, Kinder-App-Design, verspielte Illustrationsseite. anhaltend; am stärksten ab 2015 (Kinder-Apps, Bildungsseiten, Familienmarken).

Merkmale

  • illustrierte Szenen als Hintergründe: Hügel, Wolken, Wälder, Figuren, die hereinlugen
  • warme, satte Palette mit mehr Sättigung als Pastell, aber weicher als Primärfarben
  • große runde Schrift, manchmal handgeletterte Überschriften
  • überdimensionierte Touch-Ziele und Icons; sehr wenig Text, viele Bilder
  • Papier-, Wachsmal- oder Aquarelltexturen auf Formen
  • Figuren leiten durch die Navigation; jeder Abschnitt ist eine Szene
  • Motion: schwebende Wolken, blinzelnde Augen, hüpfende Seitenübergänge, Sound optional

Palette

#fff7e6 Cremehimmel, #ffb84d Sonne, #6bcb77 Gras, #4d96ff Himmelblau, #ff6b6b Wangenrot, #4a3728 warmbrauner Text

Schrift

Baloo 2, Fredoka, Lilita One oder Chewy für Überschriften (700-800 bei 40-64px); Nunito oder Andika (für Leseanfänger entworfen) bei 18-20px für Fließtext

Do

  • gestalte jeden Abschnitt als Szene mit Horizontlinie, einer Hintergrundebene, einer Mittelebene und Figuren davor
  • mach alles Klickbare mindestens 56px groß und gib ihm ein Gesicht, eine Form oder einen Farbnamen
  • nutze Aquarell- oder Wachsmal-SVG-Texturen auf den großen Formen (feTurbulence mit niedriger Frequenz)

Don't

  • nutze keinen kleinen Text oder lange Absätze; Erwachsene lesen die Über-uns-Seite, Kinder lesen Bilder
  • nutze keinen Dark Mode, kein Neon, keine dünnen Linien
  • spiele keinen Sound automatisch ab; biete ihn als Toggle an

Bekannt dafür: Khan Academy Kids, PBS Kids, Toca Boca, Sago Mini, Lingokids

CSS-Seed
: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

Baue die Seite als Kinder-Bilderbuch. Himmelshintergrund #fff7e6 mit einem sanft geschwungenen grünen Hügel (#6bcb77, SVG-Pfad mit Wachsmal-Texturfilter) am unteren Rand des Hero, drei weichen Wolken (weiß, Stapel mit Radius 999px), die in 30s Loops driften, und einer Sonne #ffb84d mit 12 runden Strahlen. Text #4a3728. Schriften: Baloo 2 800 für Überschriften bei 60/40/28px, Nunito 600 bei 20px für Fließtext, line-height 1.6, maximal 3 Zeilen pro Block. Buttons: große Pillen, 64px hoch, #4d96ff oder #ff6b6b Füllung mit weißem Text und einer 4px dunkleren Unterkante, hüpfen bei Hover (scale 1.06, Spring-Easing 350ms). Karten sind "Wegweiser" oder "Fenster" mit 28px Radius, 3px #4a3728 Outlines und flachen illustrierten Icons bei 96px. Jeder Abschnitt ist eine Szene: Wald (#2d6a4f Bäume), Meer (#4d96ff Wellen), Nacht (#2b2d5c mit Sternen) in dieser Reihenfolge, mit einer Figur, die am Rand jeder Szene hervorlugt. Touch-Ziele mindestens 56px. Sound-Toggle standardmäßig aus.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite als Kinder-Bilderbuch. Himmelshintergrund #fff7e6 mit einem sanft geschwungenen grünen Hügel (#6bcb77, SVG-Pfad mit Wachsmal-Texturfilter) am unteren Rand des Hero, drei weichen Wolken (weiß, Stapel mit Radius 999px), die in 30s Loops driften, und einer Sonne #ffb84d mit 12 runden Strahlen. Text #4a3728. Schriften: Baloo 2 800 für Überschriften bei 60/40/28px, Nunito 600 bei 20px für Fließtext, line-height 1.6, maximal 3 Zeilen pro Block. Buttons: große Pillen, 64px hoch, #4d96ff oder #ff6b6b Füllung mit weißem Text und einer 4px dunkleren Unterkante, hüpfen bei Hover (scale 1.06, Spring-Easing 350ms). Karten sind "Wegweiser" oder "Fenster" mit 28px Radius, 3px #4a3728 Outlines und flachen illustrierten Icons bei 96px. Jeder Abschnitt ist eine Szene: Wald (#2d6a4f Bäume), Meer (#4d96ff Wellen), Nacht (#2b2d5c mit Sternen) in dieser Reihenfolge, mit einer Figur, die am Rand jeder Szene hervorlugt. Touch-Ziele mindestens 56px. Sound-Toggle standardmäßig aus.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.