Skip to content
Get packs

Outlined Cartoon Illustrations

Draws hand-inked, outlined cartoon SVG spot illustrations for empty states, errors and success pages.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
8 files

What it does

Teaches an AI agent a specific illustration style: a friendly, big-headed cartoon character with a thick near-black ink outline, flat colour fills and a single large prop, delivered as a hand-written SVG file. Once installed, asking the agent for a cartoon mascot or spot illustration produces art in this consistent look instead of generic clip art. It also ships helper scripts that check the SVG file meets the style rules and render it to a PNG preview.

Great for

  • Product designers who need matching spot illustrations for empty states, onboarding or 404 pages
  • Developers building a marketing page or app who want a friendly mascot without hiring an illustrator
  • Teams that want several illustrations to look like one consistent set

Skip it if

  • Photorealistic images or detailed artwork, since the style is deliberately simple and flat (it is not a general image generator)
  • Projects that need a different look such as thin line art or no outlines; the skill itself points to sibling styles for those
  • Use in a way that copies a specific real person or brand mascot, since the skill only defines a generic style

Try asking

  • “Draw a cartoon character celebrating a successful payment, with a trophy, in the outlined cartoon style”
  • “Make a 404 page illustration of a person looking confused next to a broken laptop”
  • “Create an onboarding spot illustration of someone gripping a large phone for a feature card”
Step-by-step guide: how to use Outlined Cartoon IllustrationsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 8 original files, the MIT licence and an attribution note.

    illustration-outlined-cartoon.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip illustration-outlined-cartoon.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip illustration-outlined-cartoon.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Describe one character, one hero prop and the mood or context (e.g. success, error) so the pose and prop read clearly
  • Ask the agent to run the lint script on the SVG before using it on a page, to catch off-palette colours or invalid references
  • Review the generated SVG and PNG preview by eye; the rules are strict but the drawing quality still depends on the agent

What's inside

  • agents/openai.yaml
  • demo/PROMPT.md
  • references/craft.md
  • scripts/lint.mjs
  • scripts/outline-kit.mjs
  • scripts/render.mjs
  • SKILL.md
  • style.json

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.