DesignBench
A benchmark for evaluating multimodal large language models on front-end code generation, covering React, Vue, Angular and plain HTML and CSS across generation, editing and bug-repair tasks on nine hundred real webpage samples.
DesignBench evaluates multimodal large language models on automated front-end engineering, going beyond generating UI code from a visual design to also test editing and repairing existing code across three mainstream frameworks and vanilla HTML and CSS. It contains 900 webpage samples spanning eleven topics, nine edit types and six issue categories, letting results be broken down by framework, task type and other factors rather than reported as one overall score.
Running an evaluation requires setting up a conda environment from the provided specification, downloading the associated dataset, and installing supporting browser tooling including Chrome, Firefox and a single-file capture tool used to render generated pages for comparison. The benchmark targets three tasks in real development workflows: initial code generation from a design, targeted editing, and repairing a known issue in existing code.