doodle

Standardize hand-drawn UI components with token-based styling and WCAG 2.2 AA accessibility.

Updated May 13, 2026
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill doodle-superpollo02
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: doodle
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/doodle
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill doodle-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides consistent, implementation-ready guidance for building a playful, hand-drawn interface so teams avoid guesswork and style drift while staying usable.

Core Features & Use Cases

  • Playful visual direction using a sketch-like, imperfect aesthetic with doodles and handwritten typography
  • Tokenized design foundations for typography, spacing, and a defined color palette (including explicit text/surface/neutral handling)
  • Accessibility-first interaction guidance aligned to WCAG 2.2 AA with keyboard-first behavior and visible focus states
  • Do/Don’t and QA quality gates that translate style intent into testable acceptance criteria for engineering and design review

Quick Start

Use the doodle skill to generate UI components that follow the Delius Swash Caps + JetBrains Mono typography, the specified color tokens, and WCAG 2.2 AA interaction requirements for a hand-drawn themed interface.

Frequently Asked Questions about doodle

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

FAQPage Schema
How do I implement a hand-drawn UI design system without style drift?

Standardize hand-drawn UI implementation using token-based styling, explicit do/don't guidance, and WCAG 2.2 AA quality gates. This ensures consistent sketch-like aesthetics across buttons, inputs, and cards while maintaining usability and preventing style drift across teams.

What is a doodle-style design system and how does it handle accessibility?

A doodle-style design system applies a playful, sketch-like aesthetic to UI components while enforcing WCAG 2.2 AA keyboard-first accessibility. It defines explicit interaction states and testable acceptance criteria to ensure hand-drawn interfaces remain fully accessible.

How do I build playful UI components that pass engineering QA review?

Translate hand-drawn style intent into testable QA quality gates using explicit do/don't guidance and acceptance criteria. This approach标准izes sketch-like components with tokenized typography and color palettes, ensuring playful interfaces pass rigorous engineering and design reviews.

Can I use handwritten typography in an accessible web interface?

Yes, you can use handwritten typography like Delius Swash Caps paired with JetBrains Mono in accessible interfaces. The doodle approach enforces WCAG 2.2 AA keyboard-first behavior and visible focus states, ensuring sketch-like typography doesn't compromise interaction usability.

Does this sketch-like UI approach work for complex interaction states?

Yes, the doodle approach standardizes interaction states for complex components like modals and inputs. It applies token-based styling and explicit accessibility guidance to ensure playful hand-drawn aesthetics maintain consistent behavior across all product interface interactions.

What are the limitations of using a hand-drawn aesthetic for product interfaces?

A hand-drawn aesthetic requires strict token-based styling and explicit do/don't guidance to avoid usability issues. While the doodle approach enforces WCAG 2.2 AA accessibility, teams must carefully manage sketch-like visual elements to prevent style drift in complex product interfaces.