WebDev Arena: AI Web Programming Capabilities Comparison Tool Released by LMArena

General Introduction

WebDev Arena is a program developed by LMArena A real-time AI programming competition platform developed by a team focused on completing web development challenges by pitting Artificial Intelligence Language Models (LLMs) against each other. Users can enter specific web design tasks, such as "create a Twitter homepage" or "develop an interactive game," and the platform will call on multiple AI models to generate code and present the results, followed by user voting to determine the best work. The platform is not only a technical arena, but also closely interacts with the community, welcoming user suggestions and creative contributions. Currently, WebDev Arena is working with E2B to optimize LLM programming reviews, and is supported by UC Berkeley Sky Lab, OpenAI, Anthropic, Google DeepMind, and other organizations, providing users with an innovative space to explore AI coding capabilities.

Function List

• AI real-time matchmaking generates web pages: User inputs task instructions, multiple AI models simultaneously generate HTML, CSS, JavaScript code and display it in real time.
• User voting selection mechanism: Comparison of AI-generated results by means of a blind test, user voting for the best web page, and displaying the model identity after the vote.
• Diverse Programming Challenges: Support for web development tasks ranging from simple page layouts to complex interactive applications.
• Code Run Preview: Generate code that runs directly in the browser, allowing users to instantly view and manipulate web page results.
• Community Collaboration Functions: Encourage users to submit task ideas or participate in platform improvements and open up contribution channels.
• Model Evaluation Support: Integrate a variety of leading LLMs (e.g., OpenAI, Anthropic models) to demonstrate the programming strength of different models.

Using Help

How to access and use WebDev Arena

1. Access to the website

• Open a modern browser that supports HTML5 (e.g. Chrome, Safari, Edge).
• Enter the URL https://web.lmarena.ai/ and press enter to go to the home page.
• The home page displays a clean interface, including task entry boxes and basic instructions.

2. Input web development tasks

• Enter your development requirements in the text box at the bottom of the page, for example:
  • "Generating a Twitter Personal Home Page Layout."
  • "Create a tic-tac-toe game that supports two-player matches."
  • "Designing a clean e-commerce homepage"
• When you are finished, click the "Send" button or press the "Enter" key to submit.

3. View AI matchmaking results

• After submitting a task, the platform calls multiple AI models (e.g., OpenAI's GPT family or Anthropic's Claude) to generate code.
• Wait for about 10-30 seconds (depending on the complexity of the task), and the screen will be divided into two or more columns, displaying web pages generated by different models.
• Each page will run in real time:
  • For static pages, you can see the full layout and style.
  • For interactive applications, direct manipulation is possible, such as clicking and playing chess in a game.
• If a model fails to be generated (e.g. the code reports an error), refresh the page and try again.

4. Participation in voting

• Voting options such as "Better on the left", "Better on the right" or "Tie" are displayed below the generated results.
• Look closely at the functionality, aesthetics and utility of each column of the page:
  • Check that the layout meets the requirements.
  • Test that the interaction function works correctly.
  • Evaluate the elegance of the code implementation.
• Select the option you think is better and submit your vote.
• After voting, the platform reveals the name of the AI model corresponding to each result, e.g. "Left: Claude-3.5, Right: GPT-4o".

5. Exploration and contribution

• Mission Inspiration: The home page may provide sample tasks, such as "Clone Notion Home Page" or "Generate Calculator", which you can try by clicking on them directly.
• View Code: Although the platform does not have a direct download function for the time being, the generated HTML/CSS/JS code can be viewed and copied through the browser developer tools (right-click-inspect).
• Community involvement: If you have new mission ideas or suggestions for improvement, you can contact the LMArena team through official channels (website or social media) to participate in the development of the platform.

Example of action: Generate a Twitter homepage

1. Visit https://web.lmarena.ai/.
2. Type "Generate a Twitter profile layout" and click "Send".
3. After about 20 seconds, the page displays two results:
   • Left: Blue theme with avatar, profile, and list of tweets.
   • Right: gray theme with dynamic loading animation.
4. Check the details on both sides (font, spacing, alignment) and test the click interaction effect.
5. By choosing "left is better" and voting, we learned that the left side was generated by Claude and the right side by the OpenAI model.

Core Functions Explained

• AI real-time matchmaking generates web pages
  When the user enters a natural language command, the platform calls multiple LLMs to generate code and render the result simultaneously. For example, if you type "create a calculator", you may see an interface with buttons for adding, subtracting, multiplying, and dividing. The whole process is done in real-time, without the need to manually configure the environment.
• User voting selection mechanism
  Blind voting is used to ensure fairness. User ratings affect the internal ranking of models (e.g., Elo scores), providing data support for developers. The identity of the model is revealed after voting to add interest.
• Code Run Preview
  The generated code runs directly in the browser without additional tools. You can instantly experience web effects such as dragging elements, filling out forms or playing games, greatly reducing the barrier to use.
• Community Collaboration Functions
  WebDev Arena encourages user participation, such as submitting new tasks (e.g., "Generate a music player") or providing feedback on bugs, and welcomes community contributions, which can be obtained through the website or on Twitter (@LMArenaAI).

Tips for use

• Be clear in your task description: Entering "Generate a page with login function" is more likely to produce satisfactory results than "Generate a page".
• More attempts at complex tasks: If the result is not as expected, adjust the description and try again, e.g. add words like "simple" and "modern".
• Focus on Supporter Dynamics: The platform cooperates with E2B, OpenAI, etc. More models or features may be added in the future, so you can learn about the updates through the official channels.

With these steps, users can quickly get started with WebDev Arena and experience how AI generates web pages in real-time competitions while participating in community co-creation!