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
Decision gist · record as of 2026-07-22
Pixel Art generates custom SVG illustrations sized for README headers and documentation. 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.
Use it when
- Yes, pixel-art specializes in generating pixel art SVG illustrations specifically for README headers and documentation.
- Pixel-art lets you create cute pixel characters with configurable colors and compose multi-character scenes complete with chat bubbles.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
wanshuiyin/Auto-claude-code-research-in-sleep/pixel-art · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/pixel-art/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Generate pixel art SVG illustrations for README headers and documentation”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Create pixel art SVG graphics tailored for documentation and presentations. Build characters, dialogue scenes, and group compositions on a 7-pixel grid with configurable color palettes and layout templates. Perfect for README hero images and visual storytelling.
Galaxy Workflow Viz generates static SVG diagrams that visualize workflow structure and dependencies in Galaxy's native editor style. It produces simplified, branded visualizations with color-coded nodes (gold for inputs, blue for processing, orange for outputs, green for QC) and smooth bezier connections—ideal for documentation, landing pages, and workflow overviews.
Svg Diagram creates polished structural diagrams—flowcharts, architecture charts, sequence diagrams, hierarchies, and more—by outputting HTML blocks containing SVG. The skill renders output directly in a sandboxed iframe, offering more refined aesthetics and flexible layout control than comparable tools.
This skill teaches best practices for HackMD, a collaborative markdown platform supporting live editing, presentation mode with customizable themes, and embedded SVG diagrams. Learn proper SVG techniques—direct coordinates, simple markers, and opacity—while avoiding unsupported features like filters and transforms that break rendering.
Concept Diagrams produces production-quality SVG visuals with a unified flat, minimal design system—ideal for physics setups, anatomy, floor plans, and process flows. Output renders as a single self-contained HTML file with automatic light and dark mode support in any modern browser, requiring no server or dependencies.
Concept to Image transforms design ideas into polished visuals by rendering HTML and CSS through an intermediate artifact layer, then exporting to PNG or SVG. Refine colors, layout, and content directly in the HTML before finalizing the image output.
More skills baoyu-diagram (MIT) · Diagram Design (NOASSERTION)