Playfulsystem
Hand-Drawn Sketch
This prompt produces genuinely distinct output
Generates UI that feels hand-drawn — wobbly borders using CSS filters, marker-pen colors, notebook-paper backgrounds, and elements that look like they were sketched on a whiteboard during a brainstorm.
sketchwobblenotebookcreative
Added February 5, 2026 by unslop.dev
Example output
Sketch card with annotations
← new idea!
Feature
Smart notifications
Only send alerts when they actually matter. Learns from your behavior and filters out the noise.
v2.0
priority
→ details
View code
<div style="padding: 2rem; background: #fdfcfa;">
<div style="border: 2px solid #333; border-radius: 12px 4px 16px 8px; padding: 1.5rem; max-width: 22rem; background: white; transform: rotate(-0.5deg); position: relative;">
<div style="position: absolute; top: -0.625rem; left: 1rem; background: rgba(255,243,160,0.85); padding: 0.125rem 0.625rem; font-family: 'Caveat', 'Comic Neue', cursive; font-size: 0.8125rem; color: #333; transform: rotate(-2deg);">← new idea!</div>
<div style="background: rgba(160,212,255,0.4); display: inline-block; padding: 0.125rem 0.75rem; border-radius: 8px 4px 12px 6px; margin-bottom: 0.75rem;">
<span style="font-family: 'Caveat', cursive; font-size: 0.875rem; font-weight: 600; color: #333;">Feature</span>
</div>
<h3 style="font-family: 'Caveat', 'Comic Neue', cursive; font-size: 1.5rem; font-weight: 700; color: #333; margin: 0 0 0.5rem 0;">Smart notifications</h3>
<p style="font-family: 'Comic Neue', 'Segoe UI', sans-serif; font-size: 0.875rem; color: #555; line-height: 1.6; margin: 0 0 1rem 0;">Only send alerts when they actually matter. Learns from your behavior and filters out the noise.</p>
<div style="border-top: 2px dashed #ccc; padding-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; gap: 0.375rem;">
<span style="background: rgba(255,179,198,0.5); padding: 0.125rem 0.5rem; border-radius: 6px 4px 8px 4px; font-family: 'Caveat', cursive; font-size: 0.75rem; color: #333;">v2.0</span>
<span style="background: rgba(184,240,184,0.5); padding: 0.125rem 0.5rem; border-radius: 4px 8px 4px 6px; font-family: 'Caveat', cursive; font-size: 0.75rem; color: #333;">priority</span>
</div>
<span style="font-family: 'Caveat', cursive; font-size: 0.875rem; color: #888;">→ details</span>
</div>
</div>
</div>To-do list
Today's tasks
✓
Design homepage layout
✓
Review color palette
☐
Build card component
important!
☐
Write documentation
☐
Test mobile responsiveness
View code
<div style="padding: 2rem; background: #fdfcfa; background-image: repeating-linear-gradient(transparent, transparent 29px, #e8e4df 29px, #e8e4df 30px); background-position: 0 0.5rem;">
<div style="max-width: 22rem; padding-left: 2.5rem; border-left: 2px solid #e0b0b0; position: relative;">
<h3 style="font-family: 'Caveat', cursive; font-size: 1.5rem; font-weight: 700; color: #333; margin: 0 0 1rem 0; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: rgba(255,179,198,0.6); text-underline-offset: 4px;">Today's tasks</h3>
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
<div style="display: flex; align-items: center; gap: 0.625rem;">
<span style="font-family: 'Caveat', cursive; font-size: 1.125rem; color: #22c55e;">✓</span>
<span style="font-family: 'Comic Neue', sans-serif; font-size: 0.9375rem; color: #999; text-decoration: line-through;">Design homepage layout</span>
</div>
<div style="display: flex; align-items: center; gap: 0.625rem;">
<span style="font-family: 'Caveat', cursive; font-size: 1.125rem; color: #22c55e;">✓</span>
<span style="font-family: 'Comic Neue', sans-serif; font-size: 0.9375rem; color: #999; text-decoration: line-through;">Review color palette</span>
</div>
<div style="display: flex; align-items: center; gap: 0.625rem;">
<span style="font-size: 1rem; color: #333;">☐</span>
<span style="font-family: 'Comic Neue', sans-serif; font-size: 0.9375rem; color: #333;">Build card component</span>
<span style="background: rgba(255,243,160,0.7); padding: 0 0.375rem; font-family: 'Caveat', cursive; font-size: 0.75rem; color: #666; border-radius: 4px; transform: rotate(1deg); display: inline-block;">important!</span>
</div>
<div style="display: flex; align-items: center; gap: 0.625rem;">
<span style="font-size: 1rem; color: #333;">☐</span>
<span style="font-family: 'Comic Neue', sans-serif; font-size: 0.9375rem; color: #333;">Write documentation</span>
</div>
<div style="display: flex; align-items: center; gap: 0.625rem;">
<span style="font-size: 1rem; color: #333;">☐</span>
<span style="font-family: 'Comic Neue', sans-serif; font-size: 0.9375rem; color: #333;">Test mobile responsiveness</span>
</div>
</div>
</div>
</div>Wireframe button set
View code
<div style="padding: 2rem; background: #fdfcfa;">
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
<button style="background: rgba(160,212,255,0.4); border: 2px solid #333; border-radius: 8px 4px 12px 6px; padding: 0.5rem 1.5rem; font-family: 'Caveat', cursive; font-size: 1rem; font-weight: 700; color: #333; cursor: pointer; transform: rotate(-1deg);">Save draft</button>
<button style="background: rgba(255,243,160,0.5); border: 2px solid #333; border-radius: 4px 10px 6px 14px; padding: 0.5rem 1.5rem; font-family: 'Caveat', cursive; font-size: 1rem; font-weight: 700; color: #333; cursor: pointer; transform: rotate(0.5deg);">Preview</button>
<button style="background: white; border: 2px dashed #999; border-radius: 10px 6px 8px 4px; padding: 0.5rem 1.5rem; font-family: 'Caveat', cursive; font-size: 1rem; font-weight: 700; color: #999; cursor: pointer;">Cancel</button>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a hand-drawn sketch style — components that look like they were wireframed on a whiteboard or scribbled in a Moleskine notebook. Wobbly borders, imperfect shapes, marker-weight strokes, and a casual confidence that says "this is a work in progress, and that's the point." Professional sketchiness.
VISUAL RULES:
- Background: Notebook paper. Off-white (#fdfcfa) or very slight cream (#f9f7f3). May include faint ruled lines (via repeating-linear-gradient in light gray, ~30px apart).
- Borders: The KEY to this aesthetic. Use `border: 2px solid #333` with `border-radius` values that feel imperfect — like 8px 4px 12px 6px (different values per corner). OR use CSS filter: `filter: url('#sketch')` with an SVG turbulence filter for wobbly effect.
- Colors: Marker/highlighter colors. Yellow highlight (#fff3a0), pink highlight (#ffb3c6), blue highlight (#a0d4ff), green highlight (#b8f0b8), orange highlight (#ffd4a0). Used as fills behind text or as accent backgrounds. Semi-transparent (80% opacity) to look like actual highlighter.
- Text: Dark charcoal (#333333) that looks like pen. Slightly heavier than typical (font-weight: 500-600). `font-family: 'Caveat', 'Patrick Hand', 'Comic Neue', cursive` for labels and headings. Sans-serif for body readability.
- Shadows: Hand-drawn style. Instead of box-shadow, use a slightly offset duplicate border or a thick bottom/right border (3px) in lighter gray to simulate pencil shadow.
- Border radius: Irregular. Never uniform. Asymmetric corner radii: `border-radius: 12px 4px 16px 8px` or similar. Each element should feel slightly different.
- Spacing: Casual, slightly loose. p-4 to p-6. Not perfectly aligned — a slight visual offset (1-2px margin variations) adds to the hand-drawn feel.
- Line elements: Wavy underlines (using text-decoration-style: wavy), dashed borders (border-style: dashed), hand-drawn arrows using → or ← characters.
SPECIFIC PATTERNS:
- Cards: Off-white bg, 2px dark border with irregular radius, p-5. May have a highlighter strip across the top or side. Slight rotation (transform: rotate(-0.5deg)) for casual feel.
- Buttons: 2px dark border, irregular radius, fill with highlighter color. Text in cursive/handwriting font. Hover: slightly more rotation + larger "shadow" border.
- Annotations: Small text with arrows pointing to elements. Yellow highlight behind text. Looks like someone annotated the wireframe.
- Checkboxes/lists: Hand-drawn check marks (✓ or ✗ in cursive font). Strikethrough for completed items.
- Dividers: Wavy or dashed lines. Not straight. May include a small doodle (★, ○, ~) at the center.
ANTI-PATTERNS:
- No perfectly straight lines or uniform border-radius. Imperfection is the point.
- No dark backgrounds. This lives on paper.
- No gradient fills. Solid highlighter colors only.
- No precise shadows (box-shadow). Fake it with borders.
- No system fonts for display text. Use handwriting/cursive fonts.
- No professional/corporate feel. Keep it casual and creative.Related prompts
Playful
Acid Rave
system
Generates UI pulsing with 90s rave energy — acid green on black, warped typography, smiley faces, repetitive grid patterns, and the frenetic joy of underground dance culture. 303 bassline as a design system.
Features
Everything you need to grow
Simple tools for complex problems. Built for teams of all sizes.
⚡
Lightning Fast
Deploy in seconds, not hours. Speed is our obsession.
🔒
Secure by Default
Enterprise-grade security without the enterprise headaches.
📊
Smart Analytics
Insights that actually help. No vanity metrics here.
Playful
Corporate Memphis / Alegria
system
Generates UI in the Corporate Memphis / Alegria style — the flat illustration-driven aesthetic of big tech: oversized rounded shapes, muted-but-cheerful pastels, generous whitespace, and the friendly-corporate vibe of every SaaS landing page from 2018-2023.
847
Users
23
Issues
99%
Uptime
Playful
Isometric / Low-Poly 3D
system
Generates UI with isometric perspective and low-poly 3D aesthetics — CSS-transformed parallelograms, 30-degree angles, layered depth planes, faceted geometric shapes, and the charming dimensionality of a game world rendered in HTML.