Doodle design skill for AI agents

Overview

Hand Drawn is a playful, sketch-inspired design system skill file that tells your AI coding assistant to generate interfaces with the warmth and character of hand-drawn doodles. Instead of pixel-perfect precision, this skill leans into imperfect lines, handwritten typography, and a raw artistic energy that makes digital products feel human and approachable.

When you feed this skill file to an AI assistant, every generated component — from buttons to modals to pricing blocks — carries a consistent doodle aesthetic backed by real design tokens, spacing rules, and accessibility standards. It's creative without being chaotic.

Design Tokens

Color Palette

Hand Drawn pairs a vibrant sky blue primary with a deep navy secondary, grounding the playful aesthetic so it never feels unserious:

The blue-and-navy combination gives the doodle style a confident anchor. Every color maps to a semantic role, so AI-generated interfaces stay visually coherent even when the aesthetic is deliberately imperfect.

Typography

Hand Drawn uses a two-font system designed to feel like handwriting without sacrificing readability:

• Primary and display font: Delius Swash Caps — a handwritten typeface with swash capitals that gives headings and body text a sketched, personal quality
• Monospace font: JetBrains Mono — a clean developer font for code blocks and technical content, providing a deliberate contrast against the hand-drawn text

The type scale follows: 14 / 16 / 18 / 24 / 32 / 40px, with weights from 100 through 900. The handwritten font at larger sizes (32–40px) creates the feeling of marker-on-whiteboard headings, while smaller sizes (14–16px) stay legible for body content.

Spacing

All spacing uses a 4px base unit with a scale of 4 / 8 / 12 / 16 / 24 / 32px. Consistent spacing is especially important in a doodle-style system — without it, the deliberately imperfect aesthetic can tip into looking genuinely broken. The rigid spacing grid keeps the playful visuals grounded.

Component Coverage

Hand Drawn includes guidance for over 40 component families, each adapted to carry the sketch aesthetic while remaining fully functional:

• Inputs and forms — buttons, text inputs, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, tabs, command palette
• Overlays and feedback — modals, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators, skeletons
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component family defines states (default, hover, focus-visible, active, disabled, loading, error), interaction behavior for keyboard, pointer, and touch, and explicit token usage for spacing, typography, and color. The doodle personality comes through in border treatments, shadow styles, and illustration cues — not by breaking the underlying component structure.

Accessibility

Hand Drawn enforces WCAG 2.2 AA compliance as a non-negotiable baseline. A playful visual style does not mean compromised usability:

• Keyboard-first interaction patterns with visible focus states on every interactive element
• Sufficient color contrast ratios maintained between the primary blue (#49B6E5) and surface/text colors
• Semantic HTML structure and proper ARIA attributes throughout
• Testable acceptance criteria for every accessibility requirement

When the doodle aesthetic conflicts with accessibility — for example, if a decorative hand-drawn border would obscure a focus ring — the skill file explicitly prioritizes accessibility.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull doodle

2. The skill file will be saved as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context when generating code.

3. Start building — ask Cursor to create components, pages, or layouts, and the output will follow the Hand Drawn system's doodle-style tokens, handwritten typography, and component rules.

Claude (Anthropic)

Use Hand Drawn directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the beginning of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will apply the hand-drawn aesthetic, spacing rules, color tokens, and accessibility requirements automatically

Other AI Tools

The skill file is standard markdown and works with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — drop the file into your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and component rules as prompt context

Design Philosophy

Hand Drawn is built on the idea that digital interfaces can be expressive without being unprofessional. The skill file follows three principles:

1. Structure enables creativity — the rigid token system and spacing grid are what allow the doodle aesthetic to work at scale without becoming messy
2. Imperfection is intentional — hand-drawn borders, sketch-style illustrations, and handwritten fonts are deliberate design choices guided by specific rules, not random artifacts
3. Accessibility is non-negotiable — playful visuals must never compromise keyboard navigation, contrast ratios, or screen reader compatibility