pixel-art
Pixel Art creates custom SVG illustrations on a 7-pixel grid, perfect for README headers and documentation visuals. Design characters with configurable colors, compose multi-character scenes with chat bubbles and arrows, and iterate quickly with live preview.
Pixel Art generates custom SVG illustrations sized for README headers and documentation.
AI-generated summary based on this skill's SKILL.md
Install
wanshuiyin/Auto-claude-code-research-in-sleep/pixel-art · repository language: Python
git clone https://github.com/wanshuiyin/Auto-claude-code-research-in-sleep
cp -r Auto-claude-code-research-in-sleep/skills/pixel-art ~/.claude/skills/pixel-artFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is pixel-art and what can I create with it?
Pixel-art is an SVG generator that creates custom pixel illustrations on a 7-pixel grid, ideal for README headers, documentation, and project visuals. You can design characters with configurable colors, compose multi-character scenes with chat bubbles and arrows, and preview your work in real time as you build.
Can I create pixel art SVG for readme headers and documentation?
Yes, pixel-art specializes in generating pixel art SVG illustrations specifically for README headers and documentation. The tool lets you design custom graphics on a 7-pixel grid with live preview, making it easy to create polished visual assets that enhance your project's presentation.
How do I make cute pixel characters and dialogue scenes?
Pixel-art lets you create cute pixel characters with configurable colors and compose multi-character scenes complete with chat bubbles and arrows. You can arrange multiple characters, add dialogue, and iterate quickly with the live preview feature to perfect your scene before exporting.
What license does pixel-art use?
Pixel-art is released under the MIT license, giving you freedom to use, modify, and distribute the tool and assets you create with it for personal and commercial projects.
Can pixel-art generate retro pixel graphics for slides?
Yes, pixel-art is designed to create retro-style pixel graphics perfect for presentations and slides. Build custom pixel art badges, decorative elements, and illustrations with configurable colors that match your brand or presentation theme.
Does pixel-art support custom colors for my brand?
Pixel-art features configurable colors, allowing you to generate pixel art illustrations that match your brand palette. Customize character and scene colors to align with your project's visual identity while working on the 7-pixel grid.
SKILL.md
rendered from the published skill — quoted content, verbatim
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)
Character Template (7px grid)
``` Row 0 (hair top): 4 pixels centered Row 1 (hair): 6 pixels wide Row 2
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/pixel-art/SKILL.md