Design for AI

Hand-drawn / sketch: UI design prompt

Palette, type rules and a pasteable prompt for hand-drawn / sketch. Also called sketchy UI, doodle design, hand-drawn website, wobbly UI, Excalidraw style. 2010 (Balsamiq wireframes), 2020 onward (Excalidraw, tldraw, Notion doodles).

Traits

  • lines that wobble: SVG paths with slight roughness, double-stroked borders
  • handwriting fonts for headings and labels; a clean sans for long text
  • marker or pencil textures, hatching fills instead of solid colour
  • arrows, circles, underlines and asterisks drawn by hand around content
  • paper white or light grey background, ink black or dark blue lines
  • a few marker colours: red, blue, yellow highlighter
  • motion: lines draw themselves in (stroke-dashoffset), elements wiggle slightly on hover

Palette

#fffdf7 paper, #1e1e1e ink, #1971c2 marker blue, #e03131 marker red, #ffec99 highlighter, #868e96 pencil grey

Type

Virgil (Excalidraw font, free), Caveat, Patrick Hand, Architects Daughter or Gochi Hand for headings and labels at 24-48px; Nunito or Karla at 16-17px for body

Do

  • draw borders as inline SVG rects with a rough filter (feTurbulence + feDisplacementMap, scale 2-3) or use rough.js-style paths
  • use hatching (diagonal repeating-linear-gradient at 45deg, 2px lines) as the fill for highlighted areas
  • animate stroke-dashoffset so key lines draw in over 600-900ms

Don't

  • do not set paragraphs in a handwriting font
  • do not use perfectly straight CSS borders next to sketchy elements; it breaks the illusion
  • do not add drop shadows; use a second offset stroke instead

Known for it: 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

Build the site in hand-drawn sketch style. Background #fffdf7, ink #1e1e1e, marker blue #1971c2, marker red #e03131, highlighter #ffec99, pencil grey #868e96. Fonts: Caveat 700 for headings at 48/34/24px and for all labels and buttons, Nunito 400 at 17px line-height 1.6 for body. Borders on cards and buttons are inline SVG rectangles with a 2px ink stroke, slightly rounded (rx 8), passed through an SVG filter (feTurbulence baseFrequency 0.02 plus feDisplacementMap scale 3) so edges wobble; draw a second stroke offset 2px at 50% opacity for the pencil double-line. Highlight key phrases with a hand-drawn #ffec99 underline (SVG path, 8px thick, slightly uneven). Add hand-drawn arrows and circled annotations in #e03131 pointing at the call to action. Fills use 45deg hatching (repeating-linear-gradient, 2px #1e1e1e lines at 20% opacity). No box-shadow, no gradients. Motion: lines draw in via stroke-dashoffset over 800ms on scroll; buttons wiggle 1deg on hover.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in hand-drawn sketch style. Background #fffdf7, ink #1e1e1e, marker blue #1971c2, marker red #e03131, highlighter #ffec99, pencil grey #868e96. Fonts: Caveat 700 for headings at 48/34/24px and for all labels and buttons, Nunito 400 at 17px line-height 1.6 for body. Borders on cards and buttons are inline SVG rectangles with a 2px ink stroke, slightly rounded (rx 8), passed through an SVG filter (feTurbulence baseFrequency 0.02 plus feDisplacementMap scale 3) so edges wobble; draw a second stroke offset 2px at 50% opacity for the pencil double-line. Highlight key phrases with a hand-drawn #ffec99 underline (SVG path, 8px thick, slightly uneven). Add hand-drawn arrows and circled annotations in #e03131 pointing at the call to action. Fills use 45deg hatching (repeating-linear-gradient, 2px #1e1e1e lines at 20% opacity). No box-shadow, no gradients. Motion: lines draw in via stroke-dashoffset over 800ms on scroll; buttons wiggle 1deg on hover.

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

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.