Skip to content

Pixel Art SVG Generator

Draws pixel-art SVG illustrations and chat-style scenes for READMEs, docs and slides.

Stars
18,482
Licence
MIT
Files
1 file

What it does

When installed, the agent can create small pixel-art style pictures as SVG files, which are simple vector images made of coloured squares and text. It follows a set of rules for character shapes, colour palettes, chat bubbles and arrows, so the drawings stay consistent and readable. It writes the SVG file, can open it for a preview, and then adjusts the drawing based on your feedback.

Great for

  • Developers who want a cute hero image or character illustration for a GitHub README
  • Documentation authors who need a simple diagram-like scene with speech bubbles
  • People making slides who want a quick, lightweight illustration without an image editor

Skip it if

  • Photorealistic or detailed artwork, since the skill only produces grid-based pixel characters and simple scenes
  • Users who need a raster PNG or JPG file rather than SVG, because the output is SVG markup only
  • Environments where opening files with the system 'open' command is not allowed, because the skill is set up to call it for previews

Try asking

  • “Make a pixel art SVG of two developers chatting about a bug for my README hero image”
  • “Draw a single pixel character with a crown and a label underneath for the docs page”
  • “Create a group scene of three pixel characters on a ground line for our slides”
Step-by-step guide: how to use Pixel Art SVG GeneratorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    pixel-art.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip pixel-art.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip pixel-art.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 the characters, scene type (dialogue, single character, group) and brand colour up front so the first draft is closer
  • Ask for small changes with specific feedback, such as moving an arrow or widening a bubble, since the skill expects 2-4 iterations
  • Check the final SVG for personal information before committing it, as the skill itself recommends

What's inside

  • SKILL.md

Redistributed unmodified from wanshuiyin/Auto-claude-code-research-in-sleep 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.