Design for AI

Stil Handgezeichnet / Skizze: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für handgezeichnet / skizze. Auch bekannt als Sketchy UI, Doodle-Design, handgezeichnete Website, wackeliges UI, Excalidraw-Stil. 2010 (Balsamiq-Wireframes), ab 2020 (Excalidraw, tldraw, Notion-Doodles).

Merkmale

  • Linien, die wackeln: SVG-Pfade mit leichter Rauheit, doppelt gezeichnete Ränder
  • Handschriften für Überschriften und Labels; eine klare Sans für langen Text
  • Marker- oder Bleistifttexturen, Schraffuren statt solider Farbe
  • Pfeile, Kreise, Unterstreichungen und Sternchen von Hand um Inhalte gezeichnet
  • papierweißer oder hellgrauer Hintergrund, tintenschwarze oder dunkelblaue Linien
  • ein paar Markerfarben: Rot, Blau, gelber Textmarker
  • Motion: Linien zeichnen sich selbst (stroke-dashoffset), Elemente wackeln leicht bei Hover

Palette

#fffdf7 Papier, #1e1e1e Tinte, #1971c2 Markerblau, #e03131 Markerrot, #ffec99 Textmarker, #868e96 Bleistiftgrau

Schrift

Virgil (Excalidraw-Schrift, frei), Caveat, Patrick Hand, Architects Daughter oder Gochi Hand für Überschriften und Labels bei 24-48px; Nunito oder Karla bei 16-17px für Fließtext

Do

  • zeichne Ränder als Inline-SVG-Rechtecke mit einem Rauheitsfilter (feTurbulence + feDisplacementMap, scale 2-3) oder nutze rough.js-artige Pfade
  • nutze Schraffur (diagonaler repeating-linear-gradient bei 45deg, 2px Linien) als Füllung für hervorgehobene Bereiche
  • animiere stroke-dashoffset, damit wichtige Linien sich über 600-900ms zeichnen

Don't

  • setze keine Absätze in einer Handschrift
  • nutze keine perfekt geraden CSS-Ränder neben skizzenhaften Elementen; das bricht die Illusion
  • füge keine Drop-Shadows hinzu; nutze stattdessen einen zweiten versetzten Strich

Bekannt dafür: Excalidraw, tldraw, Balsamiq, Notion-Marketing-Doodles, XKCD

CSS-Seed
:root {
  --bg: #fffdf7;
   --fg: #1e1e1e;
   --accent: #1971c2;
   --accent2: #e03131;
   --highlight: #ffec99;
   --radius: 8px;
   --stroke: 2px;
   --font: 'Nunito',sans-serif;
   --font-hand: 'Caveat',cursive
}
Prompt

Baue die Seite im handgezeichneten Skizzenstil. Hintergrund #fffdf7, Tinte #1e1e1e, Markerblau #1971c2, Markerrot #e03131, Textmarker #ffec99, Bleistiftgrau #868e96. Schriften: Caveat 700 für Überschriften bei 48/34/24px und für alle Labels und Buttons, Nunito 400 bei 17px line-height 1.6 für Fließtext. Ränder auf Karten und Buttons sind Inline-SVG-Rechtecke mit 2px Tintenstrich, leicht gerundet (rx 8), durch einen SVG-Filter geschickt (feTurbulence baseFrequency 0.02 plus feDisplacementMap scale 3), damit die Kanten wackeln; zeichne einen zweiten Strich 2px versetzt bei 50 % Opacity für die Bleistift-Doppellinie. Hebe Schlüsselphrasen mit einer handgezeichneten #ffec99 Unterstreichung hervor (SVG-Pfad, 8px dick, leicht uneben). Ergänze handgezeichnete Pfeile und eingekreiste Anmerkungen in #e03131, die auf den Call-to-Action zeigen. Füllungen nutzen 45deg Schraffur (repeating-linear-gradient, 2px #1e1e1e Linien bei 20 % Opacity). Kein box-shadow, keine Verläufe. Motion: Linien zeichnen sich beim Scrollen über 800ms per stroke-dashoffset; Buttons wackeln bei Hover um 1deg.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im handgezeichneten Skizzenstil. Hintergrund #fffdf7, Tinte #1e1e1e, Markerblau #1971c2, Markerrot #e03131, Textmarker #ffec99, Bleistiftgrau #868e96. Schriften: Caveat 700 für Überschriften bei 48/34/24px und für alle Labels und Buttons, Nunito 400 bei 17px line-height 1.6 für Fließtext. Ränder auf Karten und Buttons sind Inline-SVG-Rechtecke mit 2px Tintenstrich, leicht gerundet (rx 8), durch einen SVG-Filter geschickt (feTurbulence baseFrequency 0.02 plus feDisplacementMap scale 3), damit die Kanten wackeln; zeichne einen zweiten Strich 2px versetzt bei 50 % Opacity für die Bleistift-Doppellinie. Hebe Schlüsselphrasen mit einer handgezeichneten #ffec99 Unterstreichung hervor (SVG-Pfad, 8px dick, leicht uneben). Ergänze handgezeichnete Pfeile und eingekreiste Anmerkungen in #e03131, die auf den Call-to-Action zeigen. Füllungen nutzen 45deg Schraffur (repeating-linear-gradient, 2px #1e1e1e Linien bei 20 % Opacity). Kein box-shadow, keine Verläufe. Motion: Linien zeichnen sich beim Scrollen über 800ms per stroke-dashoffset; Buttons wackeln bei Hover um 1deg.

## Tokens
:root { --bg:#fffdf7; --fg:#1e1e1e; --accent:#1971c2; --accent2:#e03131; --highlight:#ffec99; --radius:8px; --stroke:2px; --font:'Nunito',sans-serif; --font-hand:'Caveat',cursive }

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