Make pixel effects with Claude Code, Codex and other AI coding tools
Use the upstream pixelfx Claude Code skill for local effects, or VfxSmith’s MCP server and official skill to generate, refine and install custom game VFX.
What is the pixelfx Claude Code skill?
pixelfx is Patch’s open-source pixel art effects library. Its MIT-licensed Claude Code skill teaches an assistant to find existing effects, recolor them, export sprite sheets and author new JavaScript effects. It follows a draft, render, inspect and refine workflow. PixelFx.io showcases that library with free previews and PNG + JSON downloads.
Use pixelfx locally with Claude Code
In Claude Code, install the upstream plugin:
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfxAlternatively, copy the upstream skills/pixelfx folder into ~/.claude/skills/. Work in a pixelfx checkout with Node.js 18 or newer. Ask, for example: “Find a frost nova, match my game’s palette, render a contact sheet and export a sprite sheet.” The skill guides code and local rendering; it is not a hosted image generation service.
Use the library with Codex and other coding assistants
The library and rendering tools are ordinary JavaScript and Node.js files. Codex or another assistant with local file and terminal access can read the upstream skill and authoring documentation, edit an effect, render it and inspect the result. The plugin commands above are specific to Claude Code; follow your tool’s instructions for loading skills. Image inspection is needed for the visual refinement loop.
node tools/list.mjs frost
node tools/render.mjs ice/frost-nova
node tools/render.mjs ice/frost-nova --sheet
node tools/check.mjs ice/frost-novaGenerate and install custom effects with VfxSmith
VfxSmith is a separate service for custom effects and AI generation. Its MCP server lets compatible coding tools search effects, generate a new effect, refine it and export assets for installation into a game project. Start with VfxSmith’s MCP setup guide and load the official VfxSmith skill. Follow the setup page for your client and authorize the connection there.
Tell the assistant your engine, frame size, palette, timing and desired action. Search for an existing effect first. For custom generation, review the brief and any service credits before generating, inspect the preview, refine it and ask the assistant to install the exported files in your project. PixelFx itself has no sign-in, accounts or payments.
Formats and Godot
PixelFx downloads transparent PNG sprite sheets and Aseprite-style JSON with frame timing and pivots. The upstream render tool can create GIF previews with ffmpeg. Use a compatible importer for PNG + JSON in Godot, or use VfxSmith for dedicated Godot SpriteFrames exports. Keep the upstream MIT license and copyright notices with redistributed library effects.
Customize an existing effect or describe a new one
Each effect’s “Make it yours in VfxSmith” link opens that specific library effect for customization. A library search with no matches can send your search text to VfxSmith as a prefilled prompt; it does not automatically generate an effect. You review and start generation there.