Dot

Generate pixel art sprites, tilesets, and animations as SVG, Canvas, Phaser 3, Pillow, or CSS code.

68|14|Updated Jan 7, 2026
One-click install
npx skills add https://github.com/simota/agent-skills --skill dot
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Dot
Source: https://github.com/simota/agent-skills/tree/main/dot
Command: npx skills add https://github.com/simota/agent-skills --skill dot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of pixel art assets, transforming design concepts into reproducible code-based graphics.

Core Features & Use Cases

  • Code-based Generation: Creates pixel art sprites, icons, and tilesets directly as SVG, Canvas, Phaser 3, Pillow, or CSS code.
  • Palette & Animation: Designs constrained color palettes and generates frame animations.
  • Use Case: You need a set of 16x16 pixel art character sprites for a retro game. This Skill can generate the SVG or Phaser 3 code for these sprites based on your description and color palette.

Quick Start

Use the Dot skill to generate a 16x16 pixel art sword icon using the Sweetie 16 palette.

Frequently Asked Questions about Dot

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

FAQPage Schema
How do I generate pixel art sprites using code instead of drawing manually?

You can generate pixel art sprites via code by defining constrained color palettes and rendering rules to output graphics directly as SVG, Canvas, Phaser 3, Pillow, or CSS formats. This approach automates asset creation and ensures reproducible, pixel-perfect rendering for retro game assets.

Can I create Phaser 3 game assets and tilesets directly from SVG code?

Yes, you can create Phaser 3 game assets and tilesets by generating SVG or Canvas code that integrates with your engine. This process supports batch export and AI-assisted sprite generation while maintaining strict pixel-perfect rendering rules and constrained color palettes.

What is the best way to animate pixel art sprites using a constrained color palette?

The best way to animate pixel art sprites is by generating frame animations through code-based formats like SVG or Canvas. By applying strict pixel-perfect rendering rules and using a predefined constrained color palette, you ensure consistent visual style across all animation frames.

Does this pixel art generation method support batch export for 16x16 retro game icons?

Yes, this pixel art generation method supports batch export for 16x16 retro game icons. It operates with strict pixel-perfect rendering rules and constrained color palettes, allowing you to automate the creation of multiple sprites, icons, and tilesets simultaneously.

How do I use CSS or Pillow to generate pixel-perfect pixel art graphics?

You can use CSS or Pillow to generate pixel-perfect pixel art graphics by writing code that defines pixels and applies a constrained color palette. This code-based generation method transforms design concepts into reproducible graphics without manual drawing.

Why should I use code-based generation for pixel art instead of traditional image editors?

Code-based generation for pixel art ensures reproducible assets, strict pixel-perfect rendering, and easy engine integration. Unlike traditional image editors, it automates batch export and AI-assisted sprite generation while maintaining consistent constrained color palettes across all game assets.