skills.rest
duypham2801
duypham2801COMMUNITY
Explore all skills by this author →
GitHub

pixel-art

Generate pixel art SVG illustrations on a strict 7px grid.

Updated May 25, 2026
Search Tags:#documentation#design system#readme#svg#illustration#pixel art#hero image
One-click install
npx skills add https://github.com/duypham2801/ThS_LLM --skill pixel-art-duypham2801
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixel-art
Source: https://github.com/duypham2801/ThS_LLM/tree/main/.claude/skills/pixel-art
Command: npx skills add https://github.com/duypham2801/ThS_LLM --skill pixel-art-duypham2801

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate clear, consistent pixel-art SVG illustrations quickly, so you can enhance README files, documentation, or slides without spending time hand-drawing graphics.

Core Features & Use Cases

  • Pixel-perfect SVG generation: Builds artwork on a 7px grid using simple <rect> and <g transform="translate(x,y)"> composition.
  • Reusable character and scene layouts: Supports chat-dialogue, single-character portraits with labels, and multi-character group scenes with tight viewBox framing.
  • Brandable styling and palette control: Uses a small, curated color palette and allows project “brand color” substitution for clothes/accessories.
  • Directional UI elements: Draws speech bubbles with tails and diagram arrows using SVG markers with correct arrow orientation.

Quick Start

Create an SVG pixel-art hero illustration featuring two characters exchanging messages about “dataset setup” with matching chat bubbles and arrows.

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 SVG illustrations for a README hero image?▼

To generate pixel art SVG illustrations for a README hero image, you specify character scenes and dialogue on a strict 7px grid, producing valid SVG output with tight viewBox bounds for immediate documentation use.

Can I use custom brand colors for SVG pixel art characters?▼

You can apply custom brand colors to SVG pixel art characters by substituting the project brand color for clothes and accessories, while the base artwork retains a small curated palette for consistency.

What is the best way to create chat dialogue graphics in SVG for documentation?▼

The best way to create chat dialogue graphics in SVG for documentation is generating structured compositions with directional speech bubbles, tails, and arrow markers for clear, labeled character scenes.

Does this pixel art generator support multi-character scenes with arrows and labels?▼

This pixel art generator supports multi-character scenes with arrows and labels by drawing directional UI elements using SVG markers with correct orientation and applying tight viewBox framing to the grouped artwork.

Are there limitations to using 7px rect-based pixels for slide assets?▼

A limitation of using 7px rect-based pixels for slide assets is that the strict grid restricts freehand scaling, requiring precise coordinate transforms to maintain artwork proportions across different viewBox bounds.

Related Skills

Explore More Design & Creative Skills→
chenghaoYangchenghaoYang
2

pixel-art

Generate pixel-art SVG illustrations on a fixed 7px grid with group transforms.

Community
Intermediate
raja21068raja21068
2

pixel-art

Generate pixel-art SVG illustrations using a 7px rect-based grid.

Community
Basic
lix965996-artlix965996-art

pixel-art

Generate pixel-art SVG illustrations from natural-language drawing prompts.

Community
Intermediate
LingrongyeLingrongye
1

pixel-art

Generate compact pixel-art SVG scenes from text prompts using a 7px grid and color palettes.

Community
Intermediate