Webdev-Bench

Webdev-Bench measures an agent's ability to carry real frontend development through an evolving application state: it builds an app from a natural-language product requirement, then keeps modifying that same codebase across several rounds of requirements.

This repository contains the 40 composite tasks used in WebCoder: Scaling General Frontend Development with Artifact-Grounded Agentic Reinforcement Learning.

What a task is

A composite task chains several operators (generate, restyle, interactionise, remove a section, wire up data) over one evolving project. Each task is defined by task.json:

{
  "task_id": "c41",
  "layer": "composite",
  "seed_type": "prd",                 // prd | brownfield | replicate
  "operators": ["generate", "restyle", "make interactive", "remove section", "wire up data"],
  "difficulty": "challenging",        // challenging | regular
  "domain": "content & news",
  "milestones": [                     // requirements injected in order, one per round
    {"operator": "generate", "request": "...natural-language request..."}
  ],
  "checklist": [                      // hidden acceptance items, not shown to the model
    {"id": "gen.channels.five",
     "m": 1,                          // 1-based index into milestones
     "dimension": "visual",          // functional | coverage | interaction | visual | data
     "w": 1.5,                        // item weight
     "description": "...what must be observably true..."}
  ],
  "inject": null,                     // defect description for repair tasks
  "repair": false                     // whether this task carries an injected defect
}

All task text in this release is in English. The tasks were authored and run in Chinese and are published here in English translation; requirements are written in a product manager's voice, and each checklist item states an observable property of the running application. The metric values reported in the paper were produced with the original Chinese task text. This translation preserves every task id, checklist item id, milestone index and item weight, so grades recorded under the original text line up with these files item by item; re-running the benchmark on a further retranslation may produce different numbers.

Composition

Tasks	40 (all composite layer)
Milestones (requirements)	188 (4–5 per task)
Checklist items	1125
Seed types	prd 20 · brownfield 11 · replicate 9
Difficulty	challenging 25 · regular 15
Item dimensions	functional 408 · visual 309 · interaction 299 · coverage 108 · data 1

Seeds:

• prd — start from nothing; the task specifies a product requirement.
• brownfield — start from an existing Vite + React project in repo/; the task modifies it.
• replicate — reproduce a reference design; these tasks need the corresponding reference image (see Reference images below).

Metrics

Each checklist item is graded 0–3 against the running application:

grade	meaning
3	fully satisfied: observable behaviour matches the item, no visible defect
2	mostly satisfied: core behaviour right, minor deviations in copy, styling or edge states
1	partially satisfied, or unstable
0	not implemented, or not usable

Scores are computed conjunctively per requirement: a requirement (milestone) counts as satisfied only when all checklist items under it reach grade 3. The main metric is

RS = (requirements fully satisfied) / (requirements)

with dimension slices computed the same way over the items of each dimension:

• FS — functional + coverage items
• IS — interaction items
• VS — visual items

DSR is the delivery success rate: the fraction of tasks whose ./start.sh starts an application that answers on port 3000. Undelivered tasks score 0 and stay in the denominator.

Grading is done by a model-based verifier that operates the running app through a browser, never by reading the candidate's source code. Item grades for individual runs are not included in this release.

Evaluation protocol

The reference protocol (v9_gated) is multi-round:

1. Inject requirement k and let the agent work in the same project state.
2. Run a mechanical health check, then a gate check that looks at the rendered page and decides whether the requirement is met.
3. On failure, return one short user-voice feedback line and retry that requirement, up to three times, within a per-task time pool.
4. At the end, perform a full acceptance pass over every checklist item of every milestone and compute the metrics from those final grades.

Because each requirement is a delta on the same evolving project, tasks cannot be decomposed into independent single-turn problems.

Files

SUBSET40.txt                 the 40 task ids
tasks/<id>/task.json         the task: milestones, checklist, metadata
tasks/<id>/repo/**           seed project (brownfield tasks only, 11 tasks)
tasks/<id>/prototypes/repo_state.jpg
                             before screenshot of the seed project (11 tasks)
tasks/<id>/prototypes/reference.jpg
                             reference design image (9 replicate tasks)

Reference images

Nine tasks, all of replicate seed type, depend on a reference design image. It is stored at tasks/<id>/prototypes/reference.jpg and referenced from task.json by the relative path seed_meta.ref_image_src.

These reference images are long screenshots of real third-party websites, captured for research on design reproduction. They are included so that the tasks can be run as intended, but they are not covered by the MIT license of this repository: the rights remain with the respective site owners, and the images are provided for research and benchmarking only, without any permission to reuse them commercially or in derivative works. If you are a rights holder and want an image removed, contact the authors and it will be taken down.

License

Task definitions (task.json), seed projects (repo/**) and the seed-project screenshots (repo_state.jpg) are released under the MIT License. The reference design images (reference.jpg) are third-party material and are excluded from that license, as described under Reference images.

The seed projects are small Vite + React applications assembled for these tasks and contain bundled image assets used as placeholder art.

Citation

@article{dou2026webcoder,
  title   = {WebCoder: Scaling General Frontend Development with Artifact-Grounded Agentic Reinforcement Learning},
  author  = {Dou, Zijun and Yang, Zhen and Liu, Xijun and Zhou, Dongzhuoran and Zeng, Aohan and Tang, Jie},
  journal = {arXiv preprint arXiv:2610.23104},
  year    = {2026}
}