Live demo — an original page built in the Doodle style. Open in new tab
Doodle
A hand-drawn, sketchy interface full of wobbly lines and playful imperfection that makes products feel friendly, human, and creative.
Install via CLI
$ npx staqd add doodleInside this skill
Doodle is the interface equivalent of a sketchbook margin: wobbly ink lines, hand-lettered headings, and cheerful imperfection that says "made by people, for people." It lowers the stakes and invites play, which makes it perfect for creative tools, learning products, and anything that wants to feel warm rather than corporate. Reach for it when polish would feel cold and a little mess would feel honest.
Design principles
- Embrace imperfection. Borders wobble, corners vary, and nothing is pixel-perfect on purpose.
- Ink over gradients. Use flat fills and hard offset shadows that mimic pen on paper.
- Hand-lettered personality. Headings feel drawn, not typeset.
- Warmth first. Cream paper background and friendly rounded body type set a low-pressure tone.
- Decorate sparingly with doodles. Stars, squiggles, and arrows add charm without clutter.
- Keep it legible. Playful never means hard to read; structure stays clear underneath the sketch.
Doodle is a Pro skill
Unlock the full Doodle spec — design tokens, component coverage, motion, and accessibility — plus the entire library of design skills and Pro prompts.
- Every design skill, growing weekly
- Full Pro prompt library + unlimited MCP
- Commercial-use rights on output
Use it with these prompts
Sketchy card
FreeBuild a Doodle-style feature card with a wobbly hand-drawn border, a hard 3px offset ink shadow, a marker-pink heading, and a friendly rounded body font on a warm cream background.
Playful form
ProHand-drawn dashboard
ProMore editorial skills
Paper
editorialA clean, tactile interface inspired by real sheets of paper—soft shadows, gentle layering, and generous whitespace that make screens feel calm and physical.
Cafe
editorialA warm, handcrafted aesthetic of roasted earth tones, soft paper textures, and relaxed serif type that makes an interface feel like a favorite corner table.
Publication
editorialEditorial typography, structured grids, and measured spacing put the words first for clear, confident long-form reading.