YoYoPixel is for a focused workflow: you already use a text coding agent such as Claude Code and want to sketch a pixel icon, character, or tile set with a prompt, then inspect it immediately in a browser. It is not a conventional drawing app and does not call a GPU image model. Instead, it packages drawing rules as a Claude Code Skill and asks a text model to generate a standalone HTML/CSS/JavaScript canvas. That is quick to iterate on and useful for prototypes or web demos. The key limitation is that the default output is HTML, not a PNG you can drop straight into Godot or Unity. Start with the official YoYoPixel repository and its examples below.
Install the Skill in a Claude Code project
Install Claude Code and open the project directory where you want to keep the artwork. Clone YoYoPixel, then copy .claude/skills/pixelart into that project’s own .claude/skills/ directory. Project-level installation keeps the rules with that project instead of applying them everywhere. The repository provides a Skill and examples, not a standalone desktop drawing app.
git clone https://github.com/SbName/yoyopixel.git
New-Item -ItemType Directory -Force .\.claude\skills | Out-Null
Copy-Item -Recurse .\yoyopixel\.claude\skills\pixelart .\.claude\skills\The last two commands are for PowerShell. On macOS or Linux, use the cp -r commands in the README. A user-level installation is also documented if you want the Skill available in other projects. Before generating anything, browse the online YoYoPixel showcase to see what its HTML pixel art looks like.
Your first image: choose a size and write a useful prompt
In Claude Code, call /pixelart and describe the dimensions, subject, and style. For example: /pixelart 16x16, a red potion with a cork stopper, centered, dark outline, transparent background. A similarly clear Chinese prompt could be: “24×24 orange fox portrait, front view, dark brown outline, no more than eight colors, centered, transparent background.” Specific constraints make the output easier to control; “draw a nice character” leaves too many decisions open.
The project’s size guidance is useful as a starting point: 8×8 for very simple symbols; 12–16 pixels for tiny icons and minimal characters; 24–32 for more recognizable people; 48–96 for procedural textures; and 96–256 for small landscapes. A larger canvas allows more structure but is not automatically more polished. For a complicated subject, separate the main subject from the background instead of forcing every detail into a tiny grid.
Make an icon, a character, or a themed set
Small icon: Specify the object, view, color limit, outline, and negative space, such as “16×16 blue crystal, front view, light on the upper left, dark blue outline, transparent background.” Check for broken outlines and whether the subject fills the frame. Character prototype: Try 24×24 or 32×32 and state the view, pose, main color, and one identifying feature: “32×32 side-view explorer wearing a yellow scarf, standing, clear backpack silhouette.” For a run cycle, describe the body tilt, leg positions, and arm swing per frame instead of simply asking for “an animation.” Texture or scene: With a larger canvas, try “nighttime stone floor, blue-gray palette, a little moss, consistent lighting across every stone.”
To request related assets, prefix the prompt with tileset,, as in /pixelart tileset, medieval village. The project aims to organize a set around the village theme; its example shows dozens of related assets. Inspect each tile’s edges, palette, and scale, and separate floor, wall, and decoration layers. Do not import a whole presentation sheet as if it were one game tile.
How it draws and how to refine a result
YoYoPixel uses the dimensions and prompt to choose a drawing strategy, then writes the pixel grid and palette into a self-contained HTML file. Small canvases prioritize silhouettes; larger ones have room for procedural texture. Theme words such as “night” or “fire” can lead to stars or sparks. Ask Claude Code to inspect the generated file and make a focused edit: “keep the silhouette, change the main color to teal, and use fewer shadow steps” or “make the four village floor tiles share the same edge texture.” Say what must stay fixed so a small edit does not trigger a full redraw.
Preview the HTML and move it into a game project
The Skill produces a standalone HTML file that opens in a browser and can also be used on a webpage, portfolio, or interactive prototype. It is not a standard PNG exporter. If your engine requires a PNG sprite, inspect the pixel grid in the browser, then use a converter/export path if the current version provides one or capture the canvas yourself. Check the alpha channel, exact dimensions, and cell boundaries. A browser screenshot is not automatically a lossless game asset: page zoom, device pixel ratio, and antialiasing can alter the pixels.
Inspect the image at 100% size and then at integer zoom levels. Verify transparent areas, aligned pixels, and seamless joins between neighboring tiles. In Godot, Unity, or another engine, disable smooth filtering or select nearest-neighbor sampling, then test the result in a small scene. The repository includes a converter and static examples.
Where it fits—and where another tool is better
YoYoPixel works well for fast concept sketches, web pixel art, icon drafts, themed tile set prototypes, and developers who already use Claude Code to edit HTML/CSS/JS. It does not replace a dedicated pixel editor such as Aseprite when you need layers, a full animation timeline, and standard sprite-sheet export. It also does not guarantee that every result meets a strict game art spec. Treat it as an iterative, text-driven drawing prototype, then review and export the asset with care.
The repository lists the MIT License. Read the license text before using it in a commercial project, and keep source files and version history with your work. Installation instructions are in the official README.