Skip to content

Ink Sketch Illustrations

Draws hand-inked, googly-eyed cartoon critters as SVG cards for playful product moments

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

What it does

Once installed, the agent can create hand-drawn style illustrations as SVG images, 480 by 360 pixels. The style features thick black brush-pen outlines, loose coloured fills, diagonal hatching, and cartoon critters or objects with huge googly eyes, each acting out a coding or design idea. It also includes a seeded drawing library, linting and rendering scripts to check and preview the output.

Great for

  • Product teams who want playful empty states, error pages, loading screens or onboarding art
  • Developers building marketing cards or blog headers who want a consistent hand-drawn look
  • Designers who want a starting style that follows a documented palette and line recipe

Skip it if

  • Projects needing photographic or realistic imagery, since this style is deliberately sketchy and cartoonish
  • Teams running scripts in sensitive environments: the skill ships scripts the agent executes and a renderer that launches a headless Chromium browser

Try asking

  • “Draw a googly-eyed snail holding a loading spinner for our page loading state”
  • “Make a sketchy 404 error card with a potted cactus that has a lost cable”
  • “Create a blog header showing two worms as git branches with commit dots”
  • “Generate an onboarding card with a critter at a desk with a coffee mug”
Step-by-step guide: how to use Ink Sketch 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-ink-sketch.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip illustration-ink-sketch.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip illustration-ink-sketch.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

  • Ask for one subject and one coding metaphor per card so the composition stays readable
  • Run the included lint script on generated SVGs to check the viewBox and remove external references before publishing
  • Review the rendered output yourself, since the style guide describes proportions and the agent may still produce off-model details

What's inside

  • agents/openai.yaml
  • demo/PROMPT.md
  • references/craft.md
  • scripts/ink-kit.mjs
  • scripts/lint.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.