DEV Community

PatilRB
PatilRB

Posted on Originally published at nixiefx.com AI-assisted

Building Agent-Ready VFX Workflows for Web Game Teams

#agentready #vfx

Visual effects are an awkward part of an AI-assisted development workflow.

A coding agent can modify TypeScript, update tests, and refactor a component because the inputs and outputs are visible in the repository. VFX work often looks different: editor state, binary assets, renderer-specific settings, and visual decisions that cannot be judged from a diff alone.

So simply giving an agent access to a particle editor is not enough.

For agent ready VFX tools to be genuinely useful, the workflow needs four things:

  1. source files an agent can inspect and edit;
  2. deterministic validation before anything reaches the game;
  3. an explicit build or export step;
  4. human visual review before the result is accepted.

Here is what that can look like in a PixiJS project.

1. Keep the authoring source in the repository

Start with a dedicated VFX project structure:

vfx/
├── vfx-editor.prj
├── particle-data/
│   └── effects/
├── assets/
└── out/
    └── vfx/
Enter fullscreen mode Exit fullscreen mode

The important separation is between authoring files and runtime files.

The effect source lives under particle-data/effects/. The game should consume the generated out/vfx bundle instead.

That gives an AI agent something concrete to modify while keeping a build boundary between authored content and what actually ships.

For NixieFX specifically, effects are stored as JSON and exported into a bundle containing a manifest, compiled effect definitions, and any referenced assets. The broader runtime and backend behavior is documented in the NixieFX editor and runtime reference.

2. Create a minimal project

Install the runtime alongside PixiJS:

npm install nixie-fx pixi.js
Enter fullscreen mode Exit fullscreen mode

Create a vfx directory:

mkdir -p vfx/particle-data/effects
mkdir -p vfx/assets
Enter fullscreen mode Exit fullscreen mode

Then add vfx/vfx-editor.prj:

{
  "app": "vfx-editor",
  "kind": "project",
  "version": 1,
  "id": "agent-vfx-demo",
  "name": "Agent VFX Demo",
  "settings": {
    "effectDataPath": "particle-data/effects",
    "assetRootPath": "assets",
    "outputPath": "out/vfx",
    "materialsFolder": "materials",
    "allowExternalOutput": false
  },
  "createdAt": "2026-10-02T00:00:00.000Z",
  "updatedAt": "2026-10-02T00:00:00.000Z"
}
Enter fullscreen mode Exit fullscreen mode

Now scaffold an effect for the PixiJS backend:

npx nixie-fx effect create \
  --project ./vfx \
  --name "Agent Burst" \
  --profile pixi-ui-2d
Enter fullscreen mode Exit fullscreen mode

This gives the workflow an important property: the agent does not need to invent an entire particle-effect schema from memory.

It starts from a valid effect and modifies a known source file.

3. Make validation part of the agent loop

The workflow should not be:

prompt -> edit -> ship
Enter fullscreen mode Exit fullscreen mode

It should be:

prompt
  ↓
edit effect JSON
  ↓
validate
  ↓
fix errors
  ↓
export
  ↓
visual review
  ↓
accept
Enter fullscreen mode Exit fullscreen mode

Run validation after each meaningful change:

npx nixie-fx validate ./vfx
Enter fullscreen mode Exit fullscreen mode

Validation is useful because it gives both humans and agents a machine-readable boundary.

A visual effect can still look bad while being technically valid, but basic structural and backend problems should not require somebody to discover them manually inside a running game.

You can also make validation part of the normal project scripts:


json
{
  "scripts": {
    "vfx:check": "nixie-fx validate ./vfx
Enter fullscreen mode Exit fullscreen mode

Top comments (0)