pxl: Pixel Art as Code
/pxl-pixel-art
An Agent Skill and zero-dependency CLI: the agent writes a compact .px.js file and gets PNGs, sprite sheets with JSON, animated GIFs and a live viewer.
- GitHub 星数
- 374 (GitHub 星数，统计于 2026-10-23)
- 许可证
- MIT
- 最近提交
- 2026/10/15
- 作者
- crsolver
信息来自作者的 README。 GameSkill 还没完整跑过。支持的 Agent 和安装步骤以作者文档为准。
安装
git clone https://github.com/crsolver/claude-pxl.git ~/.claude/skills/pxl-pixel-artFor one project only, clone into .claude/skills/pxl-pixel-art instead.
npx github:crsolver/claude-pxl build art.px.jsPoint the agent at SKILL.md and tell it the CLI is node <path to pxl>/bin/pxl.js, or use the npx form.
命令照搬项目 README。在本机运行前，请先看一眼仓库。
包含内容
- A DSL with palettes and ramps, text-grid sprites, mirroring, auto-outline and palette-swap variants
- Primitives and brushes: rects, lines, circles, gradients, dithering, noise, tilemaps and a pixel font
- Animation as frame patches over a base sprite, exported as strips, JSON tags and GIFs
- Sprite sheets with TexturePacker-style JSON
- pxl serve: a live browser viewer that replays the painting step by step on every save
- Optional lighting: lamps, glow and normal-based relief
适合
- Game sprites, tiles, icons and small animated scenes that need to stay editable as code
- Recolors and variants: one line per palette swap
不适合
- Painting by hand: art is written as code, not drawn
试试这条提示词
Draw a 16x16 slime sprite with a red recolor and a 4-frame idle animation, then put both in a sprite sheet.关于这个 Skill
pxl turns pixel art into code an agent can write and fix. A .px.js file defines a palette with one-character color keys and draws sprites as text grids. The CLI renders them to PNGs, sprite sheets with JSON and animated GIFs. With mirroring, auto-outline and palette swaps, an agent can draw half a sprite and get the full sprite plus its recolors.
The repository is itself the skill. SKILL.md describes the workflow, reference.md has the full API, and lighting.md is only loaded when needed. Errors point at file:line:col with "did you mean" hints, so the agent can fix its own mistakes. Ask it to start pxl serve to watch the art being painted in your browser.
Related
- Aseprite AI Artist drives Aseprite itself, for editing
.asepritefiles and layers. - Aseprite Draw and Aseprite Animate cover the same tasks inside Aseprite.
环境要求
- Node.js 22.18 or newer
相关主题
常见问题
搭配使用
作者标注的相关 Skills，或更适合相邻任务的 Skills。
Aseprite AI Artist
Your coding agent paints pixel art in the Aseprite window you already have open: draws, checks its work, animates and exports.
Aseprite Draw
Draw a sprite from silhouette to finished pixels, in the order that catches mistakes while they are still cheap — block in, check the silhouette, shade, outline, verify.
Aseprite Animate
Build an idle, walk, run or attack cycle from key poses, set timing that reads as motion rather than a metronome, tag it, and review it as a filmstrip.
相似 skills
Universal Modder
Skills, tools and a fal MCP that let Claude Code mod PC games you own: recon, reverse engineering, generated assets, in-game testing.
sprite-gen
Generate clean 2D game sprites and animation atlases: state rows, alpha cleanup, frame extraction, runtime atlases.
Create Game Assets
Plan, generate, source, normalize, and validate cohesive visual game assets.
Shader Programming
Write game shaders from cross-engine fundamentals — the vertex→fragment pipeline, coordinate spaces, UV math, and common 2D/3D effects (tint, UV scroll, dissolve, outline, fresnel rim, vignette) in GLSL with HLSL equivalents.