# Format
The designer feedback dataset consists of about 1,460 synthetic UI screenshots generated from 100,000 text descriptions and annotated by 21 professional designers through ranking, commenting, sketching, and direct revision tasks. Each interaction captured designers’ preferences and improvements across realistic interface mockups, producing paired examples of better and worse designs. These annotations could be used to linking visual UI quality to expert design judgments.

This repo contains this dataset split into four Hugging Face datasets for each of the feedback modalities.

# Collection Process

We started with a large pool of synthetic UI input data: about 100,000 natural-language UI descriptions, each fed into a code-LLM Qwen2.5‑Coder to generate multiple HTML/Tailwind/Font-Awesome webpages, which we rendered into screenshots. We recruited 21 designers to work through four feedback tasks - pairwise ranking, commenting, sketching annotations, and direct revision (via downloading and re-uploading a Sketch file) to critique or improve the generated UIs through a one-hour session per person. Participants were assigned a non-identifying ID. From these workflows we collected roughly 1,460 annotated screens and converted their responses into preference pairs (e.g., “improved” version preferred over the original) for model training.

# Image Specifications

All images in the datasets share the following specifications:
- **Format:** JPEG (quality 95)
- **Dimensions:** 512 × 1108 pixels
- **Color Mode:** RGB

# Datasets

**1. Designer Comments of Synthetic UIs `comment_improved_dataset_hf`:**
- **Number of Rows:** 152
- **Column Names:** `userid`, `screenid`, `image`, `description`, `annotation`, `html_code`, `improvement_prompt`, `improved_html`, `improved_image`
    - `userid` is the participant number
    - `screenid` is the rendered UI screenshot that was labelled
    - `image` - Screenshot image of the original UI
    - `description` - Natural language description used to generate the synthetic screenshot.
    - `annotation` - Post-processed annotation from JSON file
    - `html_code` - HTML code used to generate the original UI screenshot.
    - `improvement_prompt` - Prompt for improving the original UI derived from the designer's comments.
    - `improved_html` - LLM-revised HTML code using the original HTML and improvement prompt.
    - `improved_image` - Rendered improved HTML

**2. Designer Rankings of Synthetic UIs `ranking_training_dataset_hf`:**
- **Number of Rows:** 1098
- **Column Names:** `userid`, `screenid`, `description`, `chosen_image`, `rejected_image`, `chosen_html`, `rejected_html`
    - `userid` is the participant number
    - `screenid` is the rendered UI screenshot that was labelled
    - `description` - Natural language description used to generate the synthetic screenshot.
    - `chosen_image` - From the pair of UI screenshots presented to the designer, this is the one the designer preferred.
    - `rejected_image` - From the pair of UI screenshots presented to the designer, this is the one that the designer did not choose.
    - `chosen_html` - HTML source code of the chosen image.
    - `rejected_html` - HTML source code of the rejected image.

**3. Designer Revisions of Synthetic UIs `revision_training_dataset_hf`:**
- **Number of Rows:** 68
- **Column Names:** `userid`, `description`, `chosen_image`, `rejected_image`
    - `userid` is the participant number
    - `description` - Natural language description used to generate the synthetic screenshot.
    - `chosen_image` - Rendered screenshot from designer's tweaked .sketch file.
    - `rejected_image` - Rendered screenshot from original .sketch file.

**4. Designer Comments (grounded w/ bounding boxes) of Synthetic UIs `sketch_improved_dataset_hf`:**
- **Number of Rows:** 181
- **Column Names:** `userid`, `screenid`, `image`, `description`, `annotation`, `html_code`, `improvement_prompt`, `improved_html`, `improved_image`
    - `userid` is the participant number
    - `screenid` is the rendered UI screenshot that was labelled
    - `image` - Screenshot image of the original UI
    - `description` - Natural language description used to generate the synthetic screenshot.
    - `annotation` - Post-processed annotation from JSON file
    - `html_code` - HTML code used to generate the original UI screenshot.
    - `improvement_prompt` - Prompt for improving the original UI derived from the designer's comments.
    - `improved_html` - LLM-revised HTML code using the original HTML and improvement prompt.
    - `improved_image` - Rendered improved HTML
