Open menu
Switch to Darkhello@product.inc

Vibe-code

A Pathfinder 2e character builder with AI portraits that restyle every time you re-equip

Vibe-codeReact + AIImage genTTRPG
Pathfinder — cover

Pathfinder is a character builder for Pathfinder 2e that treats the character sheet as something alive. You pick ancestry, background, and class the usual way and describe your hero in a sentence, and the app paints a portrait. The twist is that the portrait is loadout-aware: swap a weapon or a piece of armor and the full figure regenerates to match, so the picture always reflects what the character is actually carrying.

The interesting problem here wasn't the rules engine — it was making AI portraits feel stable. Generative models will happily redraw a different person every time the prompt changes; most of the build is the scaffolding that keeps one character looking like themselves across dozens of equipment states, fast enough that re-equipping feels responsive rather than like rolling a new character.

Role

Solo build — designed and vibe-coded end to end with AI pair-programming. React 19 + Vite front end, Flux image generation via fal.ai, state in Zustand, blobs cached in IndexedDB.

What shipped

  • Rules-aware PF2e creation: ancestry, background, and class drive ability boosts, skill proficiencies, and derived HP automatically.
  • Prompt-driven portraits composed from the character's traits and a chosen art style, generated through Flux.
  • Seed-locked identity so a character keeps the same face and build as their gear changes.
  • Every (character, loadout) combination cached as an IndexedDB blob — repeat looks load instantly, new ones regenerate once.
  • Four quality/cost tiers from fast draft to high fidelity, with a mock generator fallback when no API key is set.

Selected decisions

  • Locked the base portrait seed and varied only the equipment in the prompt — the core trick that makes a swap read as the same character changing clothes, not a new roll.
  • Keyed the cache on the full loadout so the app pays to generate each distinct look exactly once.
  • Wrote targeted negative prompts (no extra fingers, no melted weapons, no armor when unequipped) to tame Flux's most common failure modes.
  • Built a small token-driven component kit (Button, Card, Modal, Stepper, Field) so the multi-step builder stayed consistent as it grew.

Walkthrough

A closer look

Build by the rules, not against them

Creation walks ancestry, background, and class, and does the math behind the scenes — boosts, proficiencies, and HP fall out of the choices rather than being entered by hand. The goal was to make building a character feel like deciding who they are, not filling in a spreadsheet.

Describe a hero, get a portrait

A sentence of free description plus the character's mechanical traits compose the image prompt. Pick an art style — painterly, illustration, and so on — and Flux renders the portrait against a dark studio frame at a 9:16 crop made for the sheet.

Re-equip and watch it update

Because the identity seed is locked and the cache is keyed on the loadout, changing gear either resolves instantly from cache or triggers a single regeneration behind a clean loading state. The character stays recognizably themselves while the sword, cloak, or armor changes around them.

Cheap to run, graceful without a key

The four model tiers trade cost for fidelity, and a mock SVG generator stands in when no fal.ai key is present — so the whole thing is demoable and developable without spending anything, then dialed up to real portraits when you want them.