Why I Built a Benchmark for AI-Generated Frontend Code (and Unmasked a Mystery Model 🕵️)

Sami — Sun, 23 Aug 2026 16:46:38 +0000

We’ve all seen benchmark charts showing AI models beating human developers on coding exams. But as any frontend engineer knows, passing a LeetCode algorithm test is very different from building a production-ready Web Audio Sequencer or a Dark Analytics Dashboard that actually renders and works in a real browser.

That’s why I built OpenVibeEval an open-source, community-driven benchmark that evaluates LLMs on how they build single-file frontend web interfaces.

🏗️ The Problem: Standard Benchmarks Don't Render

Most coding benchmarks (like HumanEval) evaluate raw Python scripts or terminal logic. They completely miss real-world frontend realities:

Visual Integrity: Does the layout actually render, or does CSS overflow and break on mobile viewports?
Accessibility Compliance: Is the generated code usable by screen readers, with valid semantic landmarks and WCAG 2.1 contrast (measured via automated axe-core scoring)?
Agent Harness Variance: How much does the system prompt wrapper (e.g. Claude Code, Cline, ZCode, OpenCode) alter the final output?

At OpenVibeEval, every model runs through a standardized zero-shot pipeline. The output is rendered in a sandboxed iframe and audited for both visual fidelity and accessibility compliance.

🕵️ The 0x-Alpha Investigation

To see the power of this dataset, we recently ran a forensic audit on 0x-Alpha, an anonymous mystery model that appeared on OpenCode.

By comparing its frontend code patterns and API behavior against our database of 200+ runs, we unmasked its lineage:

44/44 Tokenizer Match: Identical token boundary behavior.
Error 1210 Signature: Unique infrastructure error codes matching Zhipu AI's API.
Conclusion: 0x-Alpha is almost certainly a variant of the GLM-5 model family.

👉 Read the full forensic audit here: OpenVibeEval Model Report

🚀 Key Features of OpenVibeEval

OpenVibeEval isn't just a static table of scores. It’s an interactive sandbox for developers:

1. The Blind Arena (Pairwise Taste Test)

Think of it as the "LMSYS Chatbot Arena for Frontend". You inspect two rendered UI builds side-by-side, test their live interactions, and vote by slamming the "AI SLOP" stamp on the weaker output before model identities are revealed.

2. The Controlled Harness Comparator

One of our most surprising discoveries: the agent harness matters as much as the underlying model. We have seen a model's accessibility score swing from 0% to 98% on the exact same prompt simply by changing the harness wrapper instructions.

3. Interactive Live Sandboxes

Every single run in our dataset is viewable in a live desktop/mobile preview. No more guessing what an abstract "Score: 85" actually looks like.

🛠️ How You Can Participate

We are just getting started and want the community's help mapping the AI frontend landscape:

🥊 Vote in the Arena: Help us reach the 30-vote threshold to unlock community win-rate leaderboards for every prompt.
⚙️ Submit a Harness: Have a custom system prompt or agent wrapper that makes models output cleaner Tailwind or React code? Submit it to the benchmark!
🔍 Audit the Data: All evaluation runs and methodology formulas are 100% open and transparent.

Check out the Leaderboard and Cast a Vote ➔

ONEMARKET: A price comparaison system

Sami — Thu, 10 Dec 2020 18:40:54 +0000

Hi there!
I've been looking for a new laptop to buy for a long time, and I found it hard to jump from a website to another and compare prices of the same model, so I decided to make a website that does just that.
It only contains my country-specific sellers.
This is the URL: https://one-market-sami.web.app/home
I made it using the mean-stack and scraped the data with Scrapy.
Free free to comment and give me advice :)

DEV Community: Sami