How to Create Superpowers for Your Avatar

Turn a few sentences into a living, draggable power that follows you around the web.

Your avatar is more than a mascot. It's a tiny hero that lives in your browser, and it can carry powers: little pieces of code that do something useful, funny, or beautiful on the page. A timer. A sticky note. A confetti cannon. A weather badge. You don't need to be a programmer to make one. You just need to describe what you want to an AI and let it send the code to your avatar.

This guide walks you through the whole thing, from first idea to a power that sticks around even after you refresh the page.

What is a power?

A power is a small piece of code that your avatar saves and keeps with him. Once a power is attached, you can:

• Drag it anywhere on the page.
• Resize it to the dimensions that suit you.
• Delete it when you're done with it.
• Show or hide it with a double click.

The best part: positions are remembered. Refresh the page and every power returns to exactly where you left it.

Step 1: Start with an idea

The best powers do one thing well. Before you ask the AI for anything, finish this sentence:

"Full html code for ______."

A few ideas to get you going:

• A Pomodoro timer that counts down 25 minutes and flashes when time is up.
• A sticky note where you can type reminders.
• A sparkle trail that follows your cursor.
• A quick calculator you can drag next to whatever you're working on.
• A mood tracker with five emoji buttons.
• A confetti button for celebrating small wins.

Step 2: Ask the AI to build it

Open a chat with your AI assistant and describe the power in plain language. Be specific about three things: what it does, how it looks, and how you interact with it.

Here's a prompt template you can copy and fill in:

Return the full html code. It should be a small floating widget that [what it does]. It should look [style: minimal, neon, cute, dark mode...]. When I [click / type / hover], it should [reaction]. Send me the code as a single piece of self-contained code, so my avatar can save it.

And here's a real example:

Create a power for my avatar. It should be a small floating Pomodoro timer that counts down from 25 minutes. It should look minimal with rounded corners and a soft purple background. When I click the timer, it should start or pause. When time runs out, it should pulse and play a short sound. Send me the code as a single piece of self-contained code, so my avatar can save it.

Tips for better results

• Ask for self-contained code. Everything (the look and the behavior) should live in one piece, so nothing breaks when it's saved.
• Describe size. Something like "about 200 by 120 pixels" gives you a sensible starting point. You can always resize it later.
• One power per request. Small, focused requests work better than "build me a whole dashboard."
• Iterate. If it's not quite right, say so: "Make the text bigger," "Change the color to green," "Add a reset button." The AI will send an improved version. Use the copy button to copy the prompt and adapt.

Step 3: Let your avatar save it

When the AI sends the code, your avatar saves it as a new power. It appears on the page, ready to use. There's nothing to install and no file to manage.

If something looks off, don't worry. Ask the AI to fix it, and the new version becomes your power.

Step 4: Make it yours

Once your power is on the page, arrange it the way you like:

1. Drag it to a spot where it's handy but not in the way.
2. Resize it until it feels right. A timer might be tiny; a notepad might be big.
3. Double click to hide it when you need a clean screen, and double click again to bring it back.
4. Copy the prompt and adapt the outcome.
5. Delete any power you no longer need.

Because your avatar remembers each power's position, you can build a personal layout once and it will be waiting for you every time you come back.

Step 5: Build a collection

Powers are even better together. Try combining a few:

• A timer + sticky note for focused work sessions.
• A mood tracker + confetti button for celebrating good days.
• A calculator + notepad for quick math and jotting down results.

Tuck the ones you rarely use out of sight with a double click, and summon them only when you need them. Your avatar becomes a pocket-sized toolbox.

Troubleshooting

My power doesn't look right. Tell the AI what you see: "The text is cut off" or "The buttons overlap." Specific feedback gives specific fixes.

My power isn't doing anything when I click. Ask the AI to double-check the click behavior and to make sure the code is self-contained.

I want to start over. Delete the power and ask the AI for a fresh version with a clearer description.

A note on staying safe

Powers are code, and code can do real things on a page. Only ask for powers from an AI you trust, keep your requests simple, and if you're ever unsure what a piece of code does, ask the AI to explain it in plain language before you save it. Powers that just display things or respond to clicks are the safest place to start.

Your first power in 60 seconds

Ready to try? Copy this into your AI chat:

Create a power for my avatar: a small floating card, about 180 by 100 pixels, with a big emoji face that changes between happy, neutral, and sad each time I click it. Soft pastel background, rounded corners. Send me the code as a single piece of self-contained code.

Save it, drag it somewhere nice, refresh the page, and watch it stay put. That's the whole magic.

Final thoughts

Every superhero starts with a single power. Yours might be a humble timer or a ridiculous confetti cannon, and that's the point. You describe it, the AI builds it, and your avatar carries it with you wherever you browse.

So what will your first power be?