skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

doodle

Generate implementation-ready design guidance for hand-drawn doodle UI components.

2.3k|211|Updated Mar 9, 2026
Search Tags:#accessibility#tokens#design-system#ui-guidelines#component rules#handwritten typography#playful aesthetics
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill doodle-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: doodle
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/doodle
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill doodle-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Doodle helps teams create consistent, accessible interfaces that feel playful and hand-drawn without losing usability or coherence.

Core Features & Use Cases

Use it when you need design-system guidance for new components or a UI refresh that should feel sketch-like, with handwriting typography, imperfect lines, and a clear token-driven foundation for colors and spacing.

Quick Start

Use the doodle skill to generate implementation-ready design guidance for an application UI that should match the hand-drawn doodle aesthetic.

Frequently Asked Questions about doodle

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are hand-drawn UI design guidelines for maintaining accessibility?▼

Hand-drawn UI design guidelines for accessibility require WCAG 2.2 AA-friendly rules, explicit focus-visible interactions, and keyboard support. These standards ensure playful, sketch-like interfaces remain usable without losing coherence or compliance.

How do I standardize playful aesthetics using design tokens?▼

Standardize playful aesthetics using design tokens by applying a token-first foundation for colors and spacing rhythm. This ensures hand-drawn, doodle-inspired components maintain visual consistency across real product UIs.

Can I use handwritten typography in an accessible design system?▼

Handwritten typography can be used in an accessible design system when paired with explicit component rules and testable QA acceptance criteria. This maintains the playful aesthetic while ensuring readability and compliance.

What's the best way to build consistent sketch-like UI components?▼

The best way to build consistent sketch-like UI components is to apply standardized guidance for typography, color tokens, spacing rhythm, and interaction states. This creates a coherent hand-drawn aesthetic across the application.

Does doodle-inspired UI design work with WCAG 2.2 AA requirements?▼

Doodle-inspired UI design works with WCAG 2.2 AA requirements by enforcing token-first constraints, explicit focus-visible states, and keyboard interactions. These rules guarantee accessible outcomes for imperfect, hand-drawn visual elements.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
guideopsguideops

doodle

Apply doodle design tokens for color, typography, and spacing.

Community
Basic
bergsidebergside
2.3k

riso

Generate WCAG 2.2 AA-compliant UI guidance for risograph-inspired component libraries.

Official
Intermediate
hanamizukihanamizuki
127

taste-minimalist

Standardizes editorial UI design with warm monochrome palettes and bento-grid layouts.

Community
Intermediate