Skip to main content

Kameleoon Promptathon

The Kameleoon Promptathon lets you use Kameleoon PBX to instantly reimagine, remix, and optimize any website—yes, any website on the internet.

This event is your chance to showcase your creativity to the world and compete for a share of a $100,000 cash prize pool. You can get started in minutes—this article provides tips and strategies to help you stand out and maximize your chances of winning!

What you need to get started​

Before joining the Promptathon, review the following to get started:

  • Kameleoon PBX only works if your ad blocker is disabled. For more information, refer to this FAQ entry.
  • Use a Chromium-based browser, like Chrome, Arc, Brave, or Edge.
  • Sign up for a PBX trial account. During the Promptathon, you receive a 90-day trial with unlimited prompts.
  • Go to the Chrome Web Store, install the Kameleoon PBX extension, and start using PBX directly in your browser.
note

No credits will be consumed for existing customers when creating submissions for the Promptathon (you have unlimited prompts). Additionally, if you already have a Kameleoon account, you don't have to create a new account to participate in the Promptathon—the signup process is only for new customers.

Access the Promptathon​

  1. In the Kameleoon app, click Promptathon in the left sidebar.
  2. Click New submission to start a new submission.

Create your Promptathon submission​

  1. Enter a descriptive name for your submission.
  2. Choose the URL of the website you want to change with prompts.
  3. Add tags (optional).
  4. Click Create to open the PBX interface.

Write your prompt​

In the right-hand text field, write a natural language instruction describing what you want to change on the site.

Here are some simple examples to get started:

  • "Add a snowfall animation to the homepage banner."
  • "Add a dark mode toggle to the top navigation bar."
  • "Add a playful cat mascot waving from the footer."
  • "Transform the homepage into a retro 90s-style web theme."

You can also:

  • Click the + icon and select Add mockup to upload a visual reference (for example, a banner or pop-up).
  • Click the + icon > Draw sketch to outline the element directly on the page.

Once you've written your prompt, click the send icon.

PBX then:

  • Identifies the relevant elements on the page.
  • Generates the required JavaScript and CSS updates.
  • Displays a summary of changes describing what was modified.

Write effective prompts​

Strong prompts help PBX deliver precise results. Use this structure:

  • Task/goal: What do you want to achieve?
  • Content/UX requirements: Layout, color, or design details.
  • Behavior or interaction: How the element should respond to users.
  • Constraints or edge cases: Technical limitations, responsive requirements, and what should not happen.
tip

Don't hesitate to refine your prompt using ChatGPT or other LLMs.

Here's an example that follows this structure:

Task/goal​

Add subtle Christmas-themed animations to the page to create a seasonal atmosphere.

Content/UX requirements​

  • Include light, non-intrusive animations such as gently falling snowflakes, twinkling stars, subtle sparkles in the header, or a slowly rotating snowflake icon.
  • Keep the animations smooth and performance friendly.
  • The color palette should match the existing design but include festive tones (silver, gold, deep red, and evergreen).

Behavior/interaction​

  • The animations should start automatically when the page loads and loop slowly.
  • Ensure they enhance the user experience without distracting from the main content or CTAs.

Constraints/edge cases​

  • Must not impact page loading speed or Core Web Vitals.
  • Must not obscure or overlap text, images, or clickable elements.
  • Keep the implementation accessible (no flashing or high-contrast motion that could trigger discomfort).
  • The feature should be easy to disable or remove after the holiday period.

Review your changes​

Click the Compare icon to view the original and modified versions of the page side by side. Use the slider to see how your prompt changed the page. Click Exit mode to return to the PBX prompt interface.

tip

If you're a developer, click the code icon (</>) to review and edit the generated JavaScript or CSS code. However, the Promptathon focuses on creativity through prompts, not coding.

When you're satisfied with the result, you can share or submit your creation.

Share your creation​

Click Share to showcase your work:

  • Select Share on LinkedIn to post your submission directly on LinkedIn.
  • Click Copy link to share it elsewhere.

Submit your creation​

When you're ready to enter your creation into the Promptathon:

  1. Click Submit.
  2. Enter your name (this will be public).
  3. Optionally, include your LinkedIn profile.
  4. Describe what prompted your creation in 200-400 characters—for example, explain the problem it solves, how it improves user experience, or what inspired you.

You can click Cancel at any time to return to the PBX interface.

FAQ​

What is the Promptathon?​

The Promptathon is a global competition that challenges users to create innovative web experiences using Kameleoon's PBX. It's designed to showcase the creativity and capabilities of PBX.

How long does the Promptathon run?​

The Promptathon runs until the end of February.

What can I win?​

The creator of the most impressive and impactful prompt-based experience will win a portion of the $100,000 cash prize. For more information on Promptathon prizes, click here.

How will submissions be judged?​

A panel of Kameleoon judges will review submissions based on originality, technical creativity, and impact. The winning project will be announced shortly after the competition closes.

Do I need coding experience to participate?​

No. The Promptathon is open to everyone—marketers, designers, and developers alike. PBX allows you to create complete, functional experiences just by describing what you want in natural language.

Can I submit more than one entry?​

Yes. You can submit multiple entries as long as each one represents a unique idea or use case. However, once you've submitted a creation, you can no longer apply additional changes to it.

Can I edit the code generated by Kameleoon?​

Yes. You can edit AI-generated code directly from the PBX interface. Kameleoon automatically creates a new version of your variant when you save your edits.

Can I prompt changes on elements that appear on hover?​

Yes, you can—as long as the HTML code for the hover-triggered element is already present in the page's DOM. If the element is dynamically generated only after the hover interaction (for example, injected by JavaScript at runtime), Kameleoon's AI may not be able to detect or modify it accurately.

For best results, ensure that:

  • The hover element exists in the initial HTML (even if hidden).
  • The structure is stable and not created asynchronously.

Can I use my own design mockup to create a variant?​

Yes. You can upload a mockup by clicking + > Add mockup. For best results, combine your mockup with detailed instructions about what should change, colors, spacing, and any interactive behavior.

Can I use an image or file in PBX?​

Yes. You can use externally hosted image links in your prompts. Describe your idea and indicate in the prompt which image you'd like to use ([link-to-image]).

Can I submit follow-up prompts to refine my result?​

Yes, you can submit follow-up prompts to refine the output. However, it's important to understand how prompt history works.

What PBX remembers:

  • The code it previously generated (used as context for your next prompt)

What PBX doesn't remember:

  • Your previous prompt instruction
  • The full conversation history
  • Mockups or sketches that were added in previous prompts

Why this matters: Vague follow-up prompts like "Fix the issue with X and Y" may not work well because PBX doesn't have the full context of what you originally asked for.

Best practices for follow-up prompts:

  • Less effective: "Browse between images using arrows does not work."
  • More effective: "In the carousel that was added, the browse between images using arrows feature does not work as expected. Fix it by taking into account the code that was generated with my previous prompt. The arrows should appear on the left and right sides of the carousel and advance one image at a time when clicked."

When submitting a follow-up prompt, be specific about:

  • Which element or feature needs fixing.
  • What the expected behavior should be.
  • Reference the previously generated code explicitly.
  • Include any relevant technical details.
tip

Treat follow-up prompts like debugging instructions.

Can I prompt PBX to copy a feature from another website?​

Short answer: no.

PBX only uses context available on the page you are currently working on. You cannot prompt PBX with something like "Copy the sliding product carousel you see on this Amazon URL" and expect it to work—PBX does not browse other pages to retrieve features or content.

Instead, you must describe what you want PBX to create. For example, rather than saying "Copy the sliding product carousel you see on this Amazon URL," you would say "Create a horizontal product carousel with left/right navigation arrows, showing four products at a time with product images, titles, and prices."

For more information on creating effective prompts, refer to this question.

Can I use PBX on any website?​

PBX works on most websites, including single-page applications. However, it can't always access content inside iframes or shadow DOMs. If you run into issues, feel free to contact support.