Pixel Art

wanshuiyin/auto-claude-code-research-in-sleep

Generates pixel art SVGs using a 7px grid system where each pixel is a rect element. Comes with recipes for chat dialogue scenes with bubble tails and arrows, single character portraits, and group compositions. Includes a ready-to-use color palette and character templates that make it easy to whip up README hero images or documentation illustrations without hunting down an asset. The workflow is iterative: it writes the SVG, opens it for preview, then you tweak based on what you see. Most useful when you need a cute visual fast and don't want to leave your editor or mess with design tools. Takes 2-4 iterations to get spacing and arrow directions right.

skills.sh installs: 582
GitHub stars: 18.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wanshuiyin/auto-claude-code-research-in-sleep --skill pixel-art --agent claude-code

Installs into .claude/skills of the current project.

Files

Pixel Art SVG Generator

Create a pixel art SVG illustration: $ARGUMENTS

Design Principles

Pixel Grid

Each "pixel" is a <rect> with width/height of 7px
Grid spacing: 7px (no gaps between pixels)
Characters are typically 8-10 pixels wide, 8-12 pixels tall
Use <g transform="translate(x,y)"> to position and reuse character groups

Color Palette

Keep it simple — 3-5 colors per character:

Skin: #FFDAB9 (light), #E8967A / #D4956A (blush/shadow)
Eyes: #333
Hair: #8B5E3C (brown), #2C2C2C (black), #FFD700 (blonde), #C0392B (red)
Clothes: use project's brand color (e.g. #4A9EDA for blue, #74AA63 for green)
Shoes/pants: #444
Accessories: #555 (glasses frames), #FFD700 (crown)