Custom App Avatars

1. 1

   Step 1

   Build the avatar

   Open avatars.bible-strong.app. The studio builds procedural 2D avatars in SVG, so everything stays sharp at any size and weighs almost nothing.

   

   Three things to set up before you export:

   1. The body. Compose the face from the surfaces and primitives in the editor.
   2. The expressions. These are named presets with their own color and eye overrides. Name them for the states you actually need, not for emotions. idle, typing, error, success will serve you better than happy and sad.
   3. The animations. Sequences of expressions with your own timing and transitions.

   Export as a .avatar.json file. That single file drives both renderers, so the avatar cannot look different in React than it does in the studio.

   🎯

   Name your expressions after interface states. This is the whole trick. Claude wires the avatar to your form by matching expression names to events, so an expression called error gets connected correctly on the first try. An expression called grumpy needs you to explain what it means.

   Mark as done
2. 2

   Step 2

   Hand it to Claude Code

   Copy the repo link, paste it into Claude Code, and describe what you want to build with it. Here is the prompt I used for the reactive sign up page:

   PromptCopy

   Read this repo: https://github.com/smontlouis/bible-strong-avatar-lab
   
   It is a procedural 2D avatar system. Avatars are defined in .avatar.json files
   and rendered with @bible-strong/avatar-react. Expressions are named presets and
   animations are sequences of expressions.
   
   Build me a single-page sign up form that uses this avatar as the centerpiece,
   and make the avatar react to the user in real time:
   
   - Idle when nothing is focused
   - Looks toward the field that is currently focused
   - Covers its eyes while the password field has focus
   - Plays the error expression when a field fails validation on blur
   - Plays the success expression when the form submits cleanly
   
   The form has: name, email, password, and a submit button.
   
   Use React with Tailwind. Centered layout, generous spacing, one accent color.
   Keep the avatar large - it is the hero of the page, not an icon.
   
   Wire the reactions through the avatar's expression API, do not fake them with
   CSS. Show me the component structure before you write the full implementation.

   🗣️

   Voice note it instead of typing it. I dictate prompts this long rather than typing them. You describe the interaction the way you would explain it to a person, and you end up giving Claude more context than you would have bothered to type out.

   Hit enter and let Claude cook. Read the component structure it proposes before you let it build everything, since fixing the structure later costs far more than fixing it now.

   Mark as done
3. 3

   Step 3

   Iterate, because the first result is never the good one

   The first pass works. It is also plain. That part is on you, not on the model.

   The two prompts that made the biggest difference:

   PromptCopy

   Add a soft glowing effect behind the avatar blob. It should pulse slowly while
   idle and get brighter for a moment on a successful submit. Use the accent color
   at low opacity, no hard edges.

   PromptCopy

   Make the avatar's eyes follow the mouse cursor across the whole page. Cap the
   rotation so the eyes never leave the face, and ease the movement so it feels
   alive rather than mechanical. Stop following while an input is focused - the
   avatar should look at the active field instead.

   🔁

   One change per prompt. Bundling four visual changes into one message is how you end up with a version that fixed two things and broke the other two, with no clean way back. Change one thing, look at it, keep it or revert it.

   Mark as done
4. 4

   Step 4

   Kill the generic look with Limora AI

   After the iterations, the interaction was right and the design still felt like every other AI-generated page. A flat background is what gives it away.

   

   1. Open Limora AI and install the MCP - it is one click from the integrations panel.
   2. Restart Claude Code so it picks up the new MCP server.
   3. Ask for the background directly in your Claude Code session:

   PromptCopy

   Using the Limora MCP, generate an on-brand hero background for this sign up
   page. Abstract, soft gradient mesh, built around my accent color, dark enough
   that white text stays readable on top of it. Then wire it into the page as the
   full-bleed background behind the avatar.

   Claude generates the image through Limora and drops it into the layout in the same pass. That single step is the difference between a demo and something you would actually ship.

   🎨

   Set your brand kit in Limora first. If your colors and fonts are already in the brand kit, the generated background comes back on-brand instead of on-trend, and you skip three rounds of regenerating.

   Mark as done

Where else this works

Troubleshooting

Tips