pixel-art

Generate pixel-art SVG illustrations from textual prompts for documentation.

1|1|Updated May 19, 2026
One-click install
npx skills add https://github.com/zhuyingqin/ARIS-WEB --skill pixel-art-zhuyingqin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixel-art
Source: https://github.com/zhuyingqin/ARIS-WEB/tree/main/crates/runtime/assets/skills/pixel-art
Command: npx skills add https://github.com/zhuyingqin/ARIS-WEB --skill pixel-art-zhuyingqin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

It eliminates the time-consuming work of designing simple pixel illustrations by generating ready-to-use SVG pixel art from a clear prompt.

Core Features & Use Cases

  • Pixel-grid SVG generation: produces scalable SVGs built from a consistent 7px rect grid for clean, predictable pixel output.
  • Scene types for documentation: supports dialogue/hero-style layouts for READMEs, portraits with labels, and compact group compositions.
  • Brandable color control: lets you match character clothes to a project color palette while keeping skin, hair, and accessories coherent.
  • Practical workflow for iteration: guides you to preview locally, then refine spacing, arrow direction, and sizing for fast convergence.

Quick Start

Use the pixel-art skill to generate a README hero image SVG with two cute characters and a short alternating chat about "auto research in sleep".

Frequently Asked Questions about pixel-art

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate pixel art SVGs for my README hero image?

To generate pixel art SVGs for a README hero image, input a textual prompt describing your scene and characters. The skill outputs clean, scalable SVGs built on a strict 7px rect pixel grid, ready for direct embedding into documentation.

Can I match pixel art character colors to my project's brand palette?

Yes, you can match pixel art character colors to your brand palette. The generation process lets you specify project colors for character clothes while keeping skin, hair, and accessories visually coherent within the limited color palette.

What is the best way to create documentation illustrations with dialogue or labels?

The best way to create documentation illustrations with dialogue is by generating dialogue-style layouts featuring chat bubbles and labels. This approach supports compact character diagrams and README scenes with short alternating chats about specific topics.

Does the generated SVG output follow a specific pixel grid structure?

Yes, the generated SVG output strictly follows a 7px rect pixel grid structure. This ensures clean, predictable pixel output and tight SVG structure, making the illustrations scalable and suitable for direct embedding in presentations.

How do I refine spacing and sizing after generating a pixel art scene?

To refine spacing and sizing after generating a pixel art scene, preview the SVG locally first. Then iterate by adjusting spacing, arrow direction, and character sizing in your prompt to achieve fast visual convergence.

What scene types are supported for documentation illustrations?

Supported scene types for documentation illustrations include dialogue and hero-style layouts for READMEs, portraits with attached labels, and compact group compositions. These formats are designed specifically for presentation visuals and doc illustrations.