Skip to content
Get packs

Two-Colour Brush Illustrations

Draws hand-made marker-style SVG illustrations in black and mint on cream paper

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

What it does

When installed, the agent can create original illustration cards as SVG files in a specific look: thick, wobbly black marker lines, flat mint-green blocks slightly off-register, and chunky characters coding, thinking or resting on cream paper. It uses bundled toolkit scripts to generate the drawings consistently and to check and render the output as PNG images. It is meant for playful header art, empty states, error pages and marketing cards.

Great for

  • Designers who want a bold, hand-made illustration style for empty states, onboarding or 404 pages
  • Front-end developers who need on-brand SVG artwork without a designer
  • Marketers making blog headers or feature cards with a riso or zine feel

Skip it if

  • Photorealistic or full-colour imagery, since the style is limited to two inks and paper (the skill forbids other colours and gradients)
  • Projects needing a different illustration look such as thin line art or halftone, which the skill's own boundary notes point to sibling skills for
  • Anyone expecting a plain drop-in tool without setup, since rendering needs Node, Playwright and a Chromium browser

Try asking

  • “Draw a two-colour brush illustration of a person debugging code at a laptop for our empty-state page”
  • “Make a 480x360 mint-and-black marker card of someone resting with a mug for a blog header”
  • “Create a zine-style 404 illustration with a chunky character carrying a laptop”
  • “Render the card to PNG so I can compare it against our other cards in the set”
Step-by-step guide: how to use Two-Colour Brush 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-two-colour-brush.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip illustration-two-colour-brush.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip illustration-two-colour-brush.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 a specific scene and a character action, for example someone coding or carrying a laptop, since the style is built around one readable action per card
  • Run the bundled lint script on the SVG before using it on a page, to catch off-contract elements like external links or style tags
  • Review the rendered PNG against the style notes; the skill itself says lines must stay wobbly and mint must stay slightly off-register to remain on-style

What's inside

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