When you ask a frontier model to "draw a quick napkin diagram" or "sketch a whiteboard architecture," you almost always receive one of two catastrophic failure modes:

1. Sterile Computer Geometry: Perfectly flat <rect> and <circle> elements with razor-sharp corners and bucket fills that look like 1995 clip art.
2. Bézier Spaghetti: Erratic spline control points oscillating wildly with unnatural cusps and pinch points.

Just as we discovered when building the Illustrated Room, models fail not because they lack vector syntax knowledge, but because autoregressive token prediction has no built-in kinematics of human motor control.

To solve this, we built doodle-svg-architect—an agent skill and dual-tier evaluation harness that enforces wrist-bowing physics, offset watercolor washes, and zero-JS GPU paper shaders.

1. The Physics of Human Inking

A human hand with a fountain pen does not emit Euclidean line segments. Authentic sketches exhibit four non-negotiable physical traits:

┌─────────────────────────────────────────────────────────────────────────────┐
│                          THE FOUR PHYSICAL LAWS                             │
│                                                                             │
│  1. Endpoint Overshoot   ──► Pen lands past the vertex (±2-3px)             │
│  2. Wrist Bowing         ──► Biomechanics create chord-normal arc curvature │
│  3. Dual-Pass Retracing  ──► Instinctive second pass creates sketchy depth  │
│  4. Offset Marker Wash   ──► Color wash bleeds and shifts outside contours  │
└─────────────────────────────────────────────────────────────────────────────┘

The Wood et al. Bowing Formulation

Based on the empirical visualization research of Wood, Isenberg, et al. (2012), our skill models segment bowing using chord-normal displacement:

For a line between $P_1(x_1, y_1)$ and $P_2(x_2, y_2)$ with length $L$:
$$\mathbf{u} = \left(\frac{\Delta x}{L}, \frac{\Delta y}{L}\right), \quad \mathbf{n} = \left(-\mathbf{u}_y, \mathbf{u}_x\right)$$

The midpoint target displaces along the normal:
$$d_{\text{bow}} = \text{bowing} \cdot \left(\frac{L}{200}\right) \cdot \mathcal{N}(0, 1)$$

Cubic Bézier control points at $1/3$ and $2/3$ intervals inherit this bowing with stochastic jitter:
$$CP_1 = P_1' + \frac{1}{3}(P_2' - P_1') + d_{\text{bow}}\cdot\mathbf{n} + \mathbf{J}1$$
$$CP_2 = P_1' + \frac{2}{3}(P_2' - P_1') + d{\text{bow}}\cdot\mathbf{n} + \mathbf{J}_2$$

2. Zero-JS GPU Paper Shaders

Rather than bundling heavy client-side JavaScript runtimes (like canvas libraries), the entire aesthetic is rendered natively by the browser's GPU using declarative SVG filter graphs:

<defs>
  <!-- Tactile Cotton-Rag Paper Texture -->
  <filter id="paper-texture" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="4" result="noise" />
    <feDiffuseLighting in="noise" lighting-color="#fef6e4" surfaceScale="2" diffuseConstant="1.1" result="light">
      <feDistantLight azimuth="55" elevation="45" />
    </feDiffuseLighting>
    <feBlend mode="multiply" in="SourceGraphic" in2="light" />
  </filter>

  <!-- Hand-Drawn Stroke Jitter -->
  <filter id="sketch-stroke" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence type="fractalNoise" baseFrequency="0.06 0.04" numOctaves="3" seed="42" result="noise" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="3.5" xChannelSelector="R" yChannelSelector="G" />
  </filter>
</defs>

3. The Dual-Tier Evaluation Loop

No illustration is shipped without running eval_doodle.py:

python3 scripts/eval_doodle.py <file>.html --render

1. Tier 1 (Deterministic AST Linter):
   • Strictly enforces the <!-- PALETTE: ... --> color contract (zero stray hex codes).
   • Verifies line weight hierarchy (at least 2 distinct stroke tiers: 3.5px bold contour, 1.5px fine detail).
   • Enforces DOM phase layering (semi-translucent washes MUST render in <g id="phase-2-washes"> behind ink strokes).
   • Rejects unstyled raw geometric shapes.
2. Tier 2 & 3 (Headless Pixel & LLM-as-Judge):
   • Captures headless Chrome render at 2x resolution.
   • Evaluates 3-second cognitive clarity, hand-drawn vitality, and visual metaphor wit.

4. Live Exemplar: Autonomous Agent Sketchnote

Below is an authentic, pure SVG sketchnote generated via the doodle-svg-architect pipeline:

What's Next

The complete skill, reference library, and evaluation tool are packaged in .agents/skills/doodle-svg-architect/. Any agent operating in this codebase can now activate the skill to generate whiteboard diagrams, system explainers, and interactive doodle components with zero geometric slop.