Guide · Agent skill
How to use the Pixel Art SVG Generator agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The pixel-art skill lets a SKILL.md-compatible coding agent, such as Claude Code, draw small pixel-art scenes and save them as SVG files. It is aimed at developers writing a README, documentation authors, and people making slides who want a simple cute illustration without opening an image editor. After this guide you will know what the skill does, how to install it, how to phrase a request that triggers it, and what to check before you rely on the output.
Pixel Art SVG Generatorwanshuiyin/Auto-claude-code-research-in-sleep · MIT Download the skill Quick start
- 1Download and unzip. Download the pixel-art ZIP from this page and unzip it so SKILL.md sits in a pixel-art folder.
- 2Place the skill folder. Move the folder to ~/.claude/skills/ for personal use, or to a project's .claude/skills/ folder to scope it to that project.
- 3Check the agent's tools. Make sure your agent has file write and edit access and shell access, and that running open <file.svg> is allowed.
- 4Ask for a drawing. Describe the scene, its size, and any brand colour, using a trigger phrase such as pixel art or README hero image.
- 5Review the preview. Open the generated SVG, note concrete problems such as overlap or arrow direction, and ask for changes.
- 6Finalise the file. Check for personal information, let the agent tighten the viewBox, then reference the file in your README with Markdown image syntax.
What is an agent skill, and what does pixel-art make the agent do?
An agent skill is a folder containing a SKILL.md file. The file gives an agent instructions for a specific kind of task, and the agent loads them when a request matches the skill's description. This skill is named pixel-art and is described as generating pixel art SVG illustrations for READMEs, docs, or slides.
When the skill is active, the agent builds each picture from grid cells. Each pixel is a 7px rect, characters are roughly 8 to 10 pixels wide and 8 to 12 pixels tall, and colours are limited to a small palette of 3 to 5 per character. The skill also includes recipes for chat bubbles and arrows, so simple dialogue scenes stay readable. The agent writes the SVG file, can open it for preview, and then edits the drawing based on your feedback.
- Output is SVG markup, not a PNG or JPG.
- Supported scene types named in the skill: chat dialogue, single character with a label, and group scenes.
- Typical refinement takes 2 to 4 rounds according to the skill's workflow notes.
How do you install the pixel-art skill?
Download the ZIP for the skill from this page and unzip it. The skill ships as a single file, SKILL.md. For a personal install, place the unzipped pixel-art folder inside ~/.claude/skills/. To scope it to one project, place it inside that project's .claude/skills/ folder instead.
If you use the Claude apps rather than a local agent, you can upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/pixel-art/
- Project install: .claude/skills/pixel-art/ inside your repository
- Claude apps: Settings → Capabilities → Skills, then upload the skill
What does the agent need to run this skill?
The skill requires Claude Code or another SKILL.md-compatible agent that has file write and edit access and shell access. Its allowed tools are Write, Edit, Read, and Bash limited to the open command.
The preview step calls open <file.svg>. That command is a macOS-style open. If your machine or policy does not allow it, the agent can still write the SVG, but you will need to view the file yourself.
- Agent with file write/edit and shell access
- Ability to run open <file.svg> for previews (macOS-style)
- No scripts bundled and no network use
open <file.svg>How do you trigger the skill with a natural request?
Ask for the picture in plain language and mention the kind of output you want. The skill's description lists trigger phrases such as "pixel art", "make an SVG illustration", "README hero image", and "画像素图". You can also just ask for a cute visual. The text after the skill name is passed in as the description of what to draw.
Good requests say what is in the scene, who is speaking, what size you need, and any brand colour to match. The skill's workflow asks the agent to clarify these points: characters or objects, scene type, colours or brand, and size (compact for a badge, wide for a README hero).
- "Make a pixel art SVG hero image for my README showing a developer chatting with a robot."
- "Draw a cute pixel art SVG of a cat with a label below it for our docs."
- "Create a wide pixel art SVG for slides: two characters trading messages, blue brand colour #4A9EDA."
What are good examples of pixel-art output?
The skill is suited to a few specific jobs. A chat-style hero image with two characters and alternating speech bubbles is the scene the skill describes most fully, including bubble tails and arrows that show who is speaking. A single labelled character works for a docs header or a section divider. A group scene with an evenly spaced cast and a ground line suits a slide.
After the first draft, describe what is wrong in concrete terms. Examples the skill itself names are overlap, arrow direction, spacing, and sizing. Small fixes are applied by editing the file, while major redesigns rewrite it.
- Chat hero image: two characters, bubbles and arrows between them
- Labelled character: centred figure with text beneath
- Group scene: evenly spaced characters on a ground line
- Feedback examples: "the arrow points the wrong way", "move the bubbles further apart"
What should you check before using the SVG?
The skill's finalise step asks the agent to confirm there is no personal information in the SVG, remove unused definitions, and tighten the viewBox so the canvas matches the content with about 10px of padding. When you are happy, the skill suggests adding the image to a README with Markdown image syntax.
Check text carefully, because the skill notes that monospace text at 13px is about 7.8px per character and emoji are about 14px wide, so long labels can overflow their bubbles.
- Confirm no personal or private details appear in the drawing text.
- Check that bubbles are wide enough for their text.
- Check that arrows point in the intended direction.
What people use it for
- A hero image for a GitHub README showing two characters exchanging messages.
- A labelled character illustration for a documentation page header.
- A simple group scene with speech bubbles for a slide deck.
- A quick, lightweight visual when you do not want to open an image editor.
Frequently asked questions
How do I install the pixel-art agent skill?
Download the ZIP from this page and unzip it. Put the pixel-art folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder for one repository. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
What do I need to run the pixel-art skill?
You need Claude Code or another SKILL.md-compatible agent with file write, edit, and shell access. The preview step calls open <file.svg>, which is a macOS-style command, so the environment must allow it.
Is the pixel-art skill free and what is its licence?
The item is listed under the MIT licence. The source does not state pricing, so check the directory listing for any cost details.
Can pixel-art produce PNG or JPG images?
No. The skill outputs SVG markup only. If you need a raster file, you will need to convert the SVG with a separate tool, which this skill does not cover.
Does pixel-art work for photorealistic or detailed artwork?
No. It produces grid-based pixel characters and simple scenes, so it is not suited to photorealistic or detailed artwork.
Does the skill run scripts or use the network?
According to the listing, it runs no scripts and uses no network. It works through the agent's file write, edit, and open commands.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use pixel-art if you want a quick, cute SVG hero image, labelled character, or simple chat-style scene for a README, docs page, or slide, and you have an agent with file and shell access. Pick a different tool if you need photorealistic art, raster PNG or JPG output, or your environment blocks the open command used for previews.
Download the skill