UI-Bench

Gallery

Original vs. rebuild

Each card is a rebuild rendered on the iOS simulator. Hover a card to cross-fade to the original it was scored against. Open a card for per-criterion sub-scores, cost breakdown, and the exact text the harness was given.

language practice

6 / 6 rebuilds
Vision
Coding model
original language_practice
original
codex rebuild original overlay
77 hover ↔ original
codex
gpt-5.5
via claude-opus-4.5
Scores, cost & description
judge
layout 8
components 8
content 10
colour 7
gestalt 7
objective
SSIM 70
colour 78
layout IoU 52
OCR text 87
cost
vision
harness
judge
total
text the harness received
# Screen Description

## Overall Layout and Structure

The screen has a light periwinkle/lavender blue background (approximately #C5CAF5) with a vertical layout consisting of three main sections: a header area at the top, a large white content card in the middle taking up most of the screen, and two answer buttons at the bottom. The system status bar is visible at the very top.

## Components in Reading Order

### Status Bar
At the very top, the system status bar displays the time "19:02" on the left in black text, a person/user icon next to it, and on the right side shows cellular signal strength, WiFi indicator, and battery level showing "86" with a charging indicator.

### Header Section
Below the status bar is a header container with rounded corners (approximately 16px radius), featuring a light mint/sage green tint on the left portion that transitions to a very light lavender on the right. The header spans nearly the full width with horizontal margins of approximately 16px.

Inside the header, on the left side, there are two lines of text: "Step 2/4" in smaller gray text (approximately 14px) on the first line, and "Practice" in bold black text (approximately 20px) directly below it. These are left-aligned with padding of about 16px from the left edge.

On the right side of the header is a close button displaying a black "X" icon, positioned with right padding of approximately 16px. The X icon is medium weight, approximately 24px in size.

### Main Content Card
A large white card with rounded corners (approximately 20px radius) occupies the majority of the screen. It has horizontal margins of approximately 16px from screen edges and vertical spacing of about 12px from the header above.

At the top of the card, left-aligned with padding of approximately 20px, is the instruction text "Choose the correct word" in medium gray color (approximately #888888), font size around 18px.

Below the instruction, centered horizontally within the card, is a large illustration. The illustration shows a woman with long, wavy dark brown curly hair, closed eyes with visible eyelashes, and a content/pleased expression. She is wearing a purple/lavender colored top. She is holding and eating what appears to be a chocolate cupcake or dessert with white cream/frosting on top. The background of the illustration is a soft pink blob shape (approximately #F8D7E8). The illustration takes up roughly 50-60% of the card's height and is centered both horizontally and vertically within the available space.

### Answer Buttons
At the bottom of the screen, below the white card, are two side-by-side buttons with equal width, separated by a gap of approximately 12px. Both buttons have horizontal margins of approximately 16px from screen edges.

The left button has a white background with a light gray border (approximately 1-2px), rounded corners (approximately 24px radius full pill shape), and contains the text "amargo" centered in black, medium weight, approximately 18px font size.

The right button has identical styling: white background, light gray border, rounded corners, containing the text "dulce" centered in black, same font specifications.

Both buttons have vertical padding of approximately 16-20px.

### Home Indicator
At the very bottom center of the screen is a black horizontal home indicator bar, approximately 134px wide and 5px tall, with rounded ends.

## Colors Summary
- Screen background: Light periwinkle blue (#C5CAF5 approximately)
- Header left tint: Light mint/sage green
- Header right: Very light lavender
- Card background: White (#FFFFFF)
- Instruction text: Medium gray (#888888)
- Button background: White
- Button border: Light gray (#E0E0E0)
- Button text: Black
- Step text: Gray
- Practice text: Black
- Illustration background blob: Soft pink (#F8D7E8)

## Spacing and Alignment
- Horizontal screen margins: 16px
- Header internal padding: 16px
- Card internal padding: 20px
- Gap between header and card: 12px
- Gap between buttons: 12px
- Buttons are bottom-aligned with approximately 16px margin from the home indicator area
- All text in header is left-aligned
- Instruction text is left-aligned
- Illustration is center-aligned
- Button text is center-aligned
claude-code rebuild original overlay
75 hover ↔ original
claude-code
sonnet
via claude-opus-4.5
Scores, cost & description
judge
layout 8
components 8
content 10
colour 6
gestalt 7
objective
SSIM 73
colour 77
layout IoU 49
OCR text 75
cost
vision
harness
judge
total
text the harness received
# Screen Description

## Overall Layout and Structure

The screen has a light periwinkle/lavender blue background (approximately #C5CAF5) with a vertical layout consisting of three main sections: a header area at the top, a large white content card in the middle taking up most of the screen, and two answer buttons at the bottom. The system status bar is visible at the very top.

## Components in Reading Order

### Status Bar
At the very top, the system status bar displays the time "19:02" on the left in black text, a person/user icon next to it, and on the right side shows cellular signal strength, WiFi indicator, and battery level showing "86" with a charging indicator.

### Header Section
Below the status bar is a header container with rounded corners (approximately 16px radius), featuring a light mint/sage green tint on the left portion that transitions to a very light lavender on the right. The header spans nearly the full width with horizontal margins of approximately 16px.

Inside the header, on the left side, there are two lines of text: "Step 2/4" in smaller gray text (approximately 14px) on the first line, and "Practice" in bold black text (approximately 20px) directly below it. These are left-aligned with padding of about 16px from the left edge.

On the right side of the header is a close button displaying a black "X" icon, positioned with right padding of approximately 16px. The X icon is medium weight, approximately 24px in size.

### Main Content Card
A large white card with rounded corners (approximately 20px radius) occupies the majority of the screen. It has horizontal margins of approximately 16px from screen edges and vertical spacing of about 12px from the header above.

At the top of the card, left-aligned with padding of approximately 20px, is the instruction text "Choose the correct word" in medium gray color (approximately #888888), font size around 18px.

Below the instruction, centered horizontally within the card, is a large illustration. The illustration shows a woman with long, wavy dark brown curly hair, closed eyes with visible eyelashes, and a content/pleased expression. She is wearing a purple/lavender colored top. She is holding and eating what appears to be a chocolate cupcake or dessert with white cream/frosting on top. The background of the illustration is a soft pink blob shape (approximately #F8D7E8). The illustration takes up roughly 50-60% of the card's height and is centered both horizontally and vertically within the available space.

### Answer Buttons
At the bottom of the screen, below the white card, are two side-by-side buttons with equal width, separated by a gap of approximately 12px. Both buttons have horizontal margins of approximately 16px from screen edges.

The left button has a white background with a light gray border (approximately 1-2px), rounded corners (approximately 24px radius full pill shape), and contains the text "amargo" centered in black, medium weight, approximately 18px font size.

The right button has identical styling: white background, light gray border, rounded corners, containing the text "dulce" centered in black, same font specifications.

Both buttons have vertical padding of approximately 16-20px.

### Home Indicator
At the very bottom center of the screen is a black horizontal home indicator bar, approximately 134px wide and 5px tall, with rounded ends.

## Colors Summary
- Screen background: Light periwinkle blue (#C5CAF5 approximately)
- Header left tint: Light mint/sage green
- Header right: Very light lavender
- Card background: White (#FFFFFF)
- Instruction text: Medium gray (#888888)
- Button background: White
- Button border: Light gray (#E0E0E0)
- Button text: Black
- Step text: Gray
- Practice text: Black
- Illustration background blob: Soft pink (#F8D7E8)

## Spacing and Alignment
- Horizontal screen margins: 16px
- Header internal padding: 16px
- Card internal padding: 20px
- Gap between header and card: 12px
- Gap between buttons: 12px
- Buttons are bottom-aligned with approximately 16px margin from the home indicator area
- All text in header is left-aligned
- Instruction text is left-aligned
- Illustration is center-aligned
- Button text is center-aligned
opencode rebuild original overlay
71 hover ↔ original
opencode
deepseek-v4-pro
via gemini-2.5-pro
Scores, cost & description
judge
layout 8
components 7
content 8
colour 7
gestalt 7
objective
SSIM 72
colour 73
layout IoU 43
OCR text 69
cost
vision
harness
judge
total
text the harness received
This is a mobile app screen for a practice exercise. The overall background color is a light lavender (approximately #D8D8F8).

At the top of the screen is a standard iOS status bar with a light lavender background. On the left, it displays the time "19:02" and a black person icon. On the right, it shows black icons for cellular signal, Wi-Fi, and a battery indicator with the number "86".

Below the status bar is the header section. It consists of two elements arranged horizontally. On the left is a white, horizontally elongated container with rounded corners. Inside, text is left-aligned on two lines. The top line reads "Step 2/4" in a medium-weight gray font. Below it, the word "Practice" is displayed in a larger, bold, black font. A subtle, light green circular gradient is visible behind the text, positioned in the top-left corner of the container. To the right of this text container, separated by a small gap, is a white, square-shaped button with rounded corners. It contains a centered, black "X" icon for closing the screen.

The main body of the screen is dominated by a large, white content card with highly rounded corners. It is centered horizontally with padding on the left and right. At the top of this card, left-aligned, is the instruction text "Choose the correct word" in a light gray font.

Centered within the card, below the instruction text, is a large illustration. The illustration depicts the head and shoulders of a person with light brown skin and wavy, dark brown hair. They are wearing a light purple shirt and are shown with their eyes closed in enjoyment while eating a cupcake. The cupcake is brown with pink and white frosting, and there is a smear of frosting on the person's face. The entire illustration is set against a light pink, amorphous, circular background shape. This can be represented by a placeholder image named `photo.png`.

At the bottom of the screen, below the main card, is a footer area containing two choice buttons arranged side-by-side in a horizontal row. They are separated by a small gap and have equal padding from the left and right screen edges. Both buttons are white, have a pill shape with highly rounded corners, and contain centered black text. The left button's text is "amargo". The right button's text is "dulce".

At the very bottom of the screen, centered, is the black horizontal line of the iOS home indicator.
opencode rebuild original overlay
70 hover ↔ original
opencode
deepseek-v4-pro
via claude-opus-4.5
Scores, cost & description
judge
layout 7
components 7
content 9
colour 6
gestalt 6
objective
SSIM 73
colour 74
layout IoU 49
OCR text 90
cost
vision
harness
judge
total
text the harness received
# Screen Description

## Overall Layout and Structure

The screen has a light periwinkle/lavender blue background (approximately #C5CAF5) with a vertical layout consisting of three main sections: a header area at the top, a large white content card in the middle taking up most of the screen, and two answer buttons at the bottom. The system status bar is visible at the very top.

## Components in Reading Order

### Status Bar
At the very top, the system status bar displays the time "19:02" on the left in black text, a person/user icon next to it, and on the right side shows cellular signal strength, WiFi indicator, and battery level showing "86" with a charging indicator.

### Header Section
Below the status bar is a header container with rounded corners (approximately 16px radius), featuring a light mint/sage green tint on the left portion that transitions to a very light lavender on the right. The header spans nearly the full width with horizontal margins of approximately 16px.

Inside the header, on the left side, there are two lines of text: "Step 2/4" in smaller gray text (approximately 14px) on the first line, and "Practice" in bold black text (approximately 20px) directly below it. These are left-aligned with padding of about 16px from the left edge.

On the right side of the header is a close button displaying a black "X" icon, positioned with right padding of approximately 16px. The X icon is medium weight, approximately 24px in size.

### Main Content Card
A large white card with rounded corners (approximately 20px radius) occupies the majority of the screen. It has horizontal margins of approximately 16px from screen edges and vertical spacing of about 12px from the header above.

At the top of the card, left-aligned with padding of approximately 20px, is the instruction text "Choose the correct word" in medium gray color (approximately #888888), font size around 18px.

Below the instruction, centered horizontally within the card, is a large illustration. The illustration shows a woman with long, wavy dark brown curly hair, closed eyes with visible eyelashes, and a content/pleased expression. She is wearing a purple/lavender colored top. She is holding and eating what appears to be a chocolate cupcake or dessert with white cream/frosting on top. The background of the illustration is a soft pink blob shape (approximately #F8D7E8). The illustration takes up roughly 50-60% of the card's height and is centered both horizontally and vertically within the available space.

### Answer Buttons
At the bottom of the screen, below the white card, are two side-by-side buttons with equal width, separated by a gap of approximately 12px. Both buttons have horizontal margins of approximately 16px from screen edges.

The left button has a white background with a light gray border (approximately 1-2px), rounded corners (approximately 24px radius full pill shape), and contains the text "amargo" centered in black, medium weight, approximately 18px font size.

The right button has identical styling: white background, light gray border, rounded corners, containing the text "dulce" centered in black, same font specifications.

Both buttons have vertical padding of approximately 16-20px.

### Home Indicator
At the very bottom center of the screen is a black horizontal home indicator bar, approximately 134px wide and 5px tall, with rounded ends.

## Colors Summary
- Screen background: Light periwinkle blue (#C5CAF5 approximately)
- Header left tint: Light mint/sage green
- Header right: Very light lavender
- Card background: White (#FFFFFF)
- Instruction text: Medium gray (#888888)
- Button background: White
- Button border: Light gray (#E0E0E0)
- Button text: Black
- Step text: Gray
- Practice text: Black
- Illustration background blob: Soft pink (#F8D7E8)

## Spacing and Alignment
- Horizontal screen margins: 16px
- Header internal padding: 16px
- Card internal padding: 20px
- Gap between header and card: 12px
- Gap between buttons: 12px
- Buttons are bottom-aligned with approximately 16px margin from the home indicator area
- All text in header is left-aligned
- Instruction text is left-aligned
- Illustration is center-aligned
- Button text is center-aligned
claude-code rebuild original overlay
70 hover ↔ original
claude-code
sonnet
via gemini-2.5-pro
Scores, cost & description
judge
layout 8
components 7
content 6
colour 7
gestalt 7
objective
SSIM 72
colour 73
layout IoU 49
OCR text 86
cost
vision
harness
judge
total
text the harness received
This is a mobile app screen for a practice exercise. The overall background color is a light lavender (approximately #D8D8F8).

At the top of the screen is a standard iOS status bar with a light lavender background. On the left, it displays the time "19:02" and a black person icon. On the right, it shows black icons for cellular signal, Wi-Fi, and a battery indicator with the number "86".

Below the status bar is the header section. It consists of two elements arranged horizontally. On the left is a white, horizontally elongated container with rounded corners. Inside, text is left-aligned on two lines. The top line reads "Step 2/4" in a medium-weight gray font. Below it, the word "Practice" is displayed in a larger, bold, black font. A subtle, light green circular gradient is visible behind the text, positioned in the top-left corner of the container. To the right of this text container, separated by a small gap, is a white, square-shaped button with rounded corners. It contains a centered, black "X" icon for closing the screen.

The main body of the screen is dominated by a large, white content card with highly rounded corners. It is centered horizontally with padding on the left and right. At the top of this card, left-aligned, is the instruction text "Choose the correct word" in a light gray font.

Centered within the card, below the instruction text, is a large illustration. The illustration depicts the head and shoulders of a person with light brown skin and wavy, dark brown hair. They are wearing a light purple shirt and are shown with their eyes closed in enjoyment while eating a cupcake. The cupcake is brown with pink and white frosting, and there is a smear of frosting on the person's face. The entire illustration is set against a light pink, amorphous, circular background shape. This can be represented by a placeholder image named `photo.png`.

At the bottom of the screen, below the main card, is a footer area containing two choice buttons arranged side-by-side in a horizontal row. They are separated by a small gap and have equal padding from the left and right screen edges. Both buttons are white, have a pill shape with highly rounded corners, and contain centered black text. The left button's text is "amargo". The right button's text is "dulce".

At the very bottom of the screen, centered, is the black horizontal line of the iOS home indicator.
codex rebuild original overlay
69 hover ↔ original
codex
gpt-5.5
via gemini-2.5-pro
Scores, cost & description
judge
layout 8
components 7
content 7
colour 7
gestalt 7
objective
SSIM 71
colour 73
layout IoU 44
OCR text 56
cost
vision
harness
judge
total
text the harness received
This is a mobile app screen for a practice exercise. The overall background color is a light lavender (approximately #D8D8F8).

At the top of the screen is a standard iOS status bar with a light lavender background. On the left, it displays the time "19:02" and a black person icon. On the right, it shows black icons for cellular signal, Wi-Fi, and a battery indicator with the number "86".

Below the status bar is the header section. It consists of two elements arranged horizontally. On the left is a white, horizontally elongated container with rounded corners. Inside, text is left-aligned on two lines. The top line reads "Step 2/4" in a medium-weight gray font. Below it, the word "Practice" is displayed in a larger, bold, black font. A subtle, light green circular gradient is visible behind the text, positioned in the top-left corner of the container. To the right of this text container, separated by a small gap, is a white, square-shaped button with rounded corners. It contains a centered, black "X" icon for closing the screen.

The main body of the screen is dominated by a large, white content card with highly rounded corners. It is centered horizontally with padding on the left and right. At the top of this card, left-aligned, is the instruction text "Choose the correct word" in a light gray font.

Centered within the card, below the instruction text, is a large illustration. The illustration depicts the head and shoulders of a person with light brown skin and wavy, dark brown hair. They are wearing a light purple shirt and are shown with their eyes closed in enjoyment while eating a cupcake. The cupcake is brown with pink and white frosting, and there is a smear of frosting on the person's face. The entire illustration is set against a light pink, amorphous, circular background shape. This can be represented by a placeholder image named `photo.png`.

At the bottom of the screen, below the main card, is a footer area containing two choice buttons arranged side-by-side in a horizontal row. They are separated by a small gap and have equal padding from the left and right screen edges. Both buttons are white, have a pill shape with highly rounded corners, and contain centered black text. The left button's text is "amargo". The right button's text is "dulce".

At the very bottom of the screen, centered, is the black horizontal line of the iOS home indicator.

audible home

6 / 6 rebuilds
Vision
Coding model
original audible_home
original
claude-code rebuild original overlay
74 hover ↔ original
claude-code
sonnet
via gemini-2.5-pro
Scores, cost & description
judge
layout 9
components 8
content 7
colour 9
gestalt 8
objective
SSIM 38
colour 69
layout IoU 88
OCR text 22
cost
vision
harness
judge
total
text the harness received
This is a mobile app screen with a dark theme. The overall background color is a very dark blue, almost black. The layout consists of a status bar, a header, a vertically scrollable body with content carousels, a persistent mini-player, and a bottom navigation tab bar.

At the top of the screen is a standard iOS status bar with white icons. On the left, the time is "18:58". On the right are icons for cellular signal strength, Wi-Fi, and battery, with the battery level shown as "88".

Below the status bar is a header. On the far left is the "audible" logo in white lowercase letters, preceded by a stylized orange soundwave icon. On the far right is a white magnifying glass icon for search. The content of the page appears to scroll behind this header.

The main body of the screen begins with a large, bold, white heading, "Next up in your series," which is left-aligned. Below this is a horizontally scrolling carousel of audiobook covers. Two items are fully visible.

The first item on the left has a square, teal-colored cover with rounded corners. The cover art displays the text "DOUGLAS ADAMS," followed by smaller text "AUTHOR OF THE HITCHHIKER'S GUIDE TO THE GALAXY," and the title "LIFE, THE UNIVERSE AND EVERYTHING." An illustration shows a red cricket ball with Saturn-like rings. Below the title is "READ BY MARTIN FREEMAN." Underneath the cover image, the title "Life, the Universe, and Everything" is written in bold white text. To the right of this title is a horizontal ellipsis icon (...). Below the title is the author's name, "Por: Douglas Adams," in a smaller, light gray font. Below the author is a small, rectangular tag with a thin white border and rounded corners, containing the white text "1 CREDIT".

The second item to the right has a square, orange-colored cover with rounded corners. The cover art displays "DOUGLAS ADAMS," "AUTHOR OF THE HITCHHIKER'S GUIDE TO THE GALAXY," and the title "SO LONG, AND THANKS FOR ALL THE FISH." An illustration shows the Earth inside a fishbowl. Below the title is "READ BY MARTIN FREEMAN." Underneath the cover image, the title "So Long and Thanks for All the Fish" is in bold white text. Below the title is "Por: Douglas Adams" in light gray. Below that is a rectangular tag with a white border and the text "1 CREDIT".

Further down the screen is another section, starting with the bold white heading "Only from Audible," which is left-aligned. Below it is a subheading in light gray text: "Explore new Audible Originals and exclusives." This is followed by another horizontally scrolling carousel. The covers in this carousel are rectangular and wider than they are tall, with rounded corners.

The first visible cover on the left has a dark magenta background. It has "audible ORIGINAL" at the top and the title "THE COURTESAN AND THE MERCENARY" in a stylized light green font, along with various character illustrations. The second cover to its right is a photograph of a broken wine glass containing red wine against a light blue background, with the word "THE" visible at the bottom.

At the bottom of the screen, above the navigation bar, is a persistent mini-player for the currently playing audiobook. It is separated from the navigation bar by a thin, faint horizontal line. On the left side of the mini-player is a small, square cover image for "The Restaurant at the End of the Universe." To its right, the title "The Restaurant at the End of t..." is displayed in bold white text, followed on the line below by "3 h 43 min restante" in smaller, light gray text. On the right side of the mini-player are two controls: a white circular icon with a counter-clockwise arrow and the number "30" inside, and a larger, solid white circular play button with a black right-pointing triangle icon.

At the very bottom is a four-tab navigation bar. From left to right:
1.  A solid white house icon labeled "Inicio" in white text. This is the selected tab.
2.  An outlined icon of four vertical bars labeled "Biblioteca" in light gray text.
3.  An outlined icon of a play symbol inside a rectangle labeled "Descubrir" in light gray text.
4.  An outlined icon of a person's bust labeled "Perfil" in light gray text.

Below the tab bar, at the center bottom of the screen, is a short, thick white horizontal line, indicating the home gesture area for the device.
codex rebuild original overlay
73 hover ↔ original
codex
gpt-5.5
via gemini-2.5-pro
Scores, cost & description
judge
layout 8
components 9
content 7
colour 8
gestalt 8
objective
SSIM 38
colour 78
layout IoU 87
OCR text 26
cost
vision
harness
judge
total
text the harness received
This is a mobile app screen with a dark theme. The overall background color is a very dark blue, almost black. The layout consists of a status bar, a header, a vertically scrollable body with content carousels, a persistent mini-player, and a bottom navigation tab bar.

At the top of the screen is a standard iOS status bar with white icons. On the left, the time is "18:58". On the right are icons for cellular signal strength, Wi-Fi, and battery, with the battery level shown as "88".

Below the status bar is a header. On the far left is the "audible" logo in white lowercase letters, preceded by a stylized orange soundwave icon. On the far right is a white magnifying glass icon for search. The content of the page appears to scroll behind this header.

The main body of the screen begins with a large, bold, white heading, "Next up in your series," which is left-aligned. Below this is a horizontally scrolling carousel of audiobook covers. Two items are fully visible.

The first item on the left has a square, teal-colored cover with rounded corners. The cover art displays the text "DOUGLAS ADAMS," followed by smaller text "AUTHOR OF THE HITCHHIKER'S GUIDE TO THE GALAXY," and the title "LIFE, THE UNIVERSE AND EVERYTHING." An illustration shows a red cricket ball with Saturn-like rings. Below the title is "READ BY MARTIN FREEMAN." Underneath the cover image, the title "Life, the Universe, and Everything" is written in bold white text. To the right of this title is a horizontal ellipsis icon (...). Below the title is the author's name, "Por: Douglas Adams," in a smaller, light gray font. Below the author is a small, rectangular tag with a thin white border and rounded corners, containing the white text "1 CREDIT".

The second item to the right has a square, orange-colored cover with rounded corners. The cover art displays "DOUGLAS ADAMS," "AUTHOR OF THE HITCHHIKER'S GUIDE TO THE GALAXY," and the title "SO LONG, AND THANKS FOR ALL THE FISH." An illustration shows the Earth inside a fishbowl. Below the title is "READ BY MARTIN FREEMAN." Underneath the cover image, the title "So Long and Thanks for All the Fish" is in bold white text. Below the title is "Por: Douglas Adams" in light gray. Below that is a rectangular tag with a white border and the text "1 CREDIT".

Further down the screen is another section, starting with the bold white heading "Only from Audible," which is left-aligned. Below it is a subheading in light gray text: "Explore new Audible Originals and exclusives." This is followed by another horizontally scrolling carousel. The covers in this carousel are rectangular and wider than they are tall, with rounded corners.

The first visible cover on the left has a dark magenta background. It has "audible ORIGINAL" at the top and the title "THE COURTESAN AND THE MERCENARY" in a stylized light green font, along with various character illustrations. The second cover to its right is a photograph of a broken wine glass containing red wine against a light blue background, with the word "THE" visible at the bottom.

At the bottom of the screen, above the navigation bar, is a persistent mini-player for the currently playing audiobook. It is separated from the navigation bar by a thin, faint horizontal line. On the left side of the mini-player is a small, square cover image for "The Restaurant at the End of the Universe." To its right, the title "The Restaurant at the End of t..." is displayed in bold white text, followed on the line below by "3 h 43 min restante" in smaller, light gray text. On the right side of the mini-player are two controls: a white circular icon with a counter-clockwise arrow and the number "30" inside, and a larger, solid white circular play button with a black right-pointing triangle icon.

At the very bottom is a four-tab navigation bar. From left to right:
1.  A solid white house icon labeled "Inicio" in white text. This is the selected tab.
2.  An outlined icon of four vertical bars labeled "Biblioteca" in light gray text.
3.  An outlined icon of a play symbol inside a rectangle labeled "Descubrir" in light gray text.
4.  An outlined icon of a person's bust labeled "Perfil" in light gray text.

Below the tab bar, at the center bottom of the screen, is a short, thick white horizontal line, indicating the home gesture area for the device.
opencode rebuild original overlay
62 hover ↔ original
opencode
deepseek-v4-pro
via gemini-2.5-pro
Scores, cost & description
judge
layout 7
components 7
content 6
colour 6
gestalt 6
objective
SSIM 35
colour 84
layout IoU 88
OCR text 29
cost
vision
harness
judge
total
text the harness received
This is a mobile app screen with a dark theme. The overall background color is a very dark blue, almost black. The layout consists of a status bar, a header, a vertically scrollable body with content carousels, a persistent mini-player, and a bottom navigation tab bar.

At the top of the screen is a standard iOS status bar with white icons. On the left, the time is "18:58". On the right are icons for cellular signal strength, Wi-Fi, and battery, with the battery level shown as "88".

Below the status bar is a header. On the far left is the "audible" logo in white lowercase letters, preceded by a stylized orange soundwave icon. On the far right is a white magnifying glass icon for search. The content of the page appears to scroll behind this header.

The main body of the screen begins with a large, bold, white heading, "Next up in your series," which is left-aligned. Below this is a horizontally scrolling carousel of audiobook covers. Two items are fully visible.

The first item on the left has a square, teal-colored cover with rounded corners. The cover art displays the text "DOUGLAS ADAMS," followed by smaller text "AUTHOR OF THE HITCHHIKER'S GUIDE TO THE GALAXY," and the title "LIFE, THE UNIVERSE AND EVERYTHING." An illustration shows a red cricket ball with Saturn-like rings. Below the title is "READ BY MARTIN FREEMAN." Underneath the cover image, the title "Life, the Universe, and Everything" is written in bold white text. To the right of this title is a horizontal ellipsis icon (...). Below the title is the author's name, "Por: Douglas Adams," in a smaller, light gray font. Below the author is a small, rectangular tag with a thin white border and rounded corners, containing the white text "1 CREDIT".

The second item to the right has a square, orange-colored cover with rounded corners. The cover art displays "DOUGLAS ADAMS," "AUTHOR OF THE HITCHHIKER'S GUIDE TO THE GALAXY," and the title "SO LONG, AND THANKS FOR ALL THE FISH." An illustration shows the Earth inside a fishbowl. Below the title is "READ BY MARTIN FREEMAN." Underneath the cover image, the title "So Long and Thanks for All the Fish" is in bold white text. Below the title is "Por: Douglas Adams" in light gray. Below that is a rectangular tag with a white border and the text "1 CREDIT".

Further down the screen is another section, starting with the bold white heading "Only from Audible," which is left-aligned. Below it is a subheading in light gray text: "Explore new Audible Originals and exclusives." This is followed by another horizontally scrolling carousel. The covers in this carousel are rectangular and wider than they are tall, with rounded corners.

The first visible cover on the left has a dark magenta background. It has "audible ORIGINAL" at the top and the title "THE COURTESAN AND THE MERCENARY" in a stylized light green font, along with various character illustrations. The second cover to its right is a photograph of a broken wine glass containing red wine against a light blue background, with the word "THE" visible at the bottom.

At the bottom of the screen, above the navigation bar, is a persistent mini-player for the currently playing audiobook. It is separated from the navigation bar by a thin, faint horizontal line. On the left side of the mini-player is a small, square cover image for "The Restaurant at the End of the Universe." To its right, the title "The Restaurant at the End of t..." is displayed in bold white text, followed on the line below by "3 h 43 min restante" in smaller, light gray text. On the right side of the mini-player are two controls: a white circular icon with a counter-clockwise arrow and the number "30" inside, and a larger, solid white circular play button with a black right-pointing triangle icon.

At the very bottom is a four-tab navigation bar. From left to right:
1.  A solid white house icon labeled "Inicio" in white text. This is the selected tab.
2.  An outlined icon of four vertical bars labeled "Biblioteca" in light gray text.
3.  An outlined icon of a play symbol inside a rectangle labeled "Descubrir" in light gray text.
4.  An outlined icon of a person's bust labeled "Perfil" in light gray text.

Below the tab bar, at the center bottom of the screen, is a short, thick white horizontal line, indicating the home gesture area for the device.
opencode rebuild original overlay
60 hover ↔ original
opencode
deepseek-v4-pro
via claude-opus-4.5
Scores, cost & description
judge
layout 8
components 7
content 6
colour 5
gestalt 7
objective
SSIM 15
colour 69
layout IoU 89
OCR text 26
cost
vision
harness
judge
total
text the harness received
# Mobile App Screenshot Description: Audible Home Screen

## Overall Layout and Structure

The screen follows a standard mobile app layout with a header area at the top, a scrollable body containing content sections, a persistent mini-player near the bottom, and a fixed bottom navigation bar. The entire background is black or near-black (#000000 or very dark gray).

## Header Area

At the very top is the device status bar showing time "18:58" on the left with a person/profile icon, and on the right are cellular signal bars, WiFi indicator, and battery at 88%.

Below the status bar, partially visible, are remnants of a previous content section showing truncated text "The Silmarillion" on the left with "Por: J. R. R. Tolkien y Christo..." and a "1 CREDIT" badge, and "Jurassic Park" on the right with "Por: Michael Crichton" and "1 CREDIT" badge. A three-dot overflow menu icon appears between them.

The Audible logo appears left-aligned, consisting of the word "audible" in white lowercase text with an orange curved swoosh/wave icon to its right. On the far right of this row is a white magnifying glass search icon.

## Body Content - First Section: "Next up in your series"

A section header reads "Next up in your series" in white bold text, left-aligned with generous top margin.

Below this is a horizontal scrollable row containing book cover cards:

**First Card (fully visible):**
- Large square book cover image showing "Life, the Universe, and Everything" by Douglas Adams. The cover has a teal/cyan background with the author name "DOUGLAS ADAMS" at top in white, subtitle "AUTHOR OF THE HITCHHIKER'S GUIDE TO THE GALAXY" in smaller text. The title "LIFE, THE UNIVERSE AND EVERYTHING" appears in large yellow/gold stylized text. A cricket ball with Saturn-like rings is illustrated. At bottom: "READ BY MARTIN FREEMAN" in white.
- Below the cover: title "Life, the Universe, and Everything" in white text across two lines
- A three-dot horizontal overflow menu icon to the right of the title
- "Por: Douglas Adams" in gray text below the title
- A small rounded rectangular badge with teal/cyan border containing "1 CREDIT" in teal text

**Second Card (partially visible, cut off on right):**
- Book cover for "So Long, and Thanks for All the Fish" by Douglas Adams. Similar teal background, author name at top, title in yellow/pink gradient text, Earth illustration visible, "READ BY MARTIN FREEMAN" at bottom
- Title text "So Long and Thanks for All the Fish" in white below
- "Por: Douglas Adams" in gray
- "1 CREDIT" badge in teal

## Body Content - Second Section: "Only from Audible"

Section header "Only from Audible" in white bold text, left-aligned.

Subheader text "Explore new Audible Originals and exclusives" in gray, smaller font, directly below.

Another horizontal scrollable row of book covers:

**First Card (fully visible):**
- Cover shows "audible ORIGINAL" badge at top in white and orange text
- Title "THE COURTESAN AND THE MERCENARY" in large cream/gold serif text
- Subtitle "THE JESTER" visible at bottom
- Illustration of a bird (possibly a crow or raven) in muted colors
- Background appears to be warm tan/beige tones

**Second Card (partially visible):**
- Shows a wine glass with red wine and what appears to be a cracked or broken glass effect
- Earth or globe visible in background
- "THE" visible at bottom in white text
- Dark/moody color palette

## Mini-Player Bar

A persistent playback bar spans the width above the navigation. It contains:
- Left: Small square thumbnail of "The Restaurant at the End of the Universe" book cover (showing Earth and space imagery with Douglas Adams branding)
- Center: Title "The Restaurant at the End of t..." (truncated with ellipsis) in white text, with "3 h 43 min restante" in gray smaller text below
- Right side: A circular "30" rewind icon (white outline with "30" inside and a counterclockwise arrow), followed by a teal/cyan filled circular play button with white play triangle icon

## Bottom Navigation Bar

Fixed at bottom, dark background matching the app. Four equally-spaced tab items, each with an icon above a label:

1. **Inicio** (Home): House/home icon, currently active - icon and text appear in white/highlighted
2. **Biblioteca** (Library): Three vertical lines of varying heights (equalizer/books icon) in gray
3. **Descubrir** (Discover): Square with plus sign icon in gray
4. **Perfil** (Profile): Person/user silhouette icon in gray

A white horizontal home indicator bar appears at the very bottom (iOS style).

## Colors Summary
- Background: Black (#000000)
- Primary text: White (#FFFFFF)
- Secondary text: Gray (approximately #888888)
- Accent color: Teal/Cyan (#00B5AD or similar)
- Audible logo accent: Orange (#FF9900)
- Badge borders: Teal
- Inactive navigation: Gray
- Active navigation: White

## Spacing and Alignment
- Consistent left margin of approximately 16-20 pixels for section headers
- Book cover cards have small gaps between them (approximately 12-16 pixels)
- Section headers have generous vertical spacing above (approximately 24-32 pixels)
- Navigation items are evenly distributed across the bottom bar width
claude-code rebuild original overlay
59 hover ↔ original
claude-code
sonnet
via claude-opus-4.5
Scores, cost & description
judge
layout 8
components 8
content 7
colour 4
gestalt 6
objective
SSIM 13
colour 69
layout IoU 88
OCR text 6
cost
vision
harness
judge
total
text the harness received
# Mobile App Screenshot Description: Audible Home Screen

## Overall Layout and Structure

The screen follows a standard mobile app layout with a header area at the top, a scrollable body containing content sections, a persistent mini-player near the bottom, and a fixed bottom navigation bar. The entire background is black or near-black (#000000 or very dark gray).

## Header Area

At the very top is the device status bar showing time "18:58" on the left with a person/profile icon, and on the right are cellular signal bars, WiFi indicator, and battery at 88%.

Below the status bar, partially visible, are remnants of a previous content section showing truncated text "The Silmarillion" on the left with "Por: J. R. R. Tolkien y Christo..." and a "1 CREDIT" badge, and "Jurassic Park" on the right with "Por: Michael Crichton" and "1 CREDIT" badge. A three-dot overflow menu icon appears between them.

The Audible logo appears left-aligned, consisting of the word "audible" in white lowercase text with an orange curved swoosh/wave icon to its right. On the far right of this row is a white magnifying glass search icon.

## Body Content - First Section: "Next up in your series"

A section header reads "Next up in your series" in white bold text, left-aligned with generous top margin.

Below this is a horizontal scrollable row containing book cover cards:

**First Card (fully visible):**
- Large square book cover image showing "Life, the Universe, and Everything" by Douglas Adams. The cover has a teal/cyan background with the author name "DOUGLAS ADAMS" at top in white, subtitle "AUTHOR OF THE HITCHHIKER'S GUIDE TO THE GALAXY" in smaller text. The title "LIFE, THE UNIVERSE AND EVERYTHING" appears in large yellow/gold stylized text. A cricket ball with Saturn-like rings is illustrated. At bottom: "READ BY MARTIN FREEMAN" in white.
- Below the cover: title "Life, the Universe, and Everything" in white text across two lines
- A three-dot horizontal overflow menu icon to the right of the title
- "Por: Douglas Adams" in gray text below the title
- A small rounded rectangular badge with teal/cyan border containing "1 CREDIT" in teal text

**Second Card (partially visible, cut off on right):**
- Book cover for "So Long, and Thanks for All the Fish" by Douglas Adams. Similar teal background, author name at top, title in yellow/pink gradient text, Earth illustration visible, "READ BY MARTIN FREEMAN" at bottom
- Title text "So Long and Thanks for All the Fish" in white below
- "Por: Douglas Adams" in gray
- "1 CREDIT" badge in teal

## Body Content - Second Section: "Only from Audible"

Section header "Only from Audible" in white bold text, left-aligned.

Subheader text "Explore new Audible Originals and exclusives" in gray, smaller font, directly below.

Another horizontal scrollable row of book covers:

**First Card (fully visible):**
- Cover shows "audible ORIGINAL" badge at top in white and orange text
- Title "THE COURTESAN AND THE MERCENARY" in large cream/gold serif text
- Subtitle "THE JESTER" visible at bottom
- Illustration of a bird (possibly a crow or raven) in muted colors
- Background appears to be warm tan/beige tones

**Second Card (partially visible):**
- Shows a wine glass with red wine and what appears to be a cracked or broken glass effect
- Earth or globe visible in background
- "THE" visible at bottom in white text
- Dark/moody color palette

## Mini-Player Bar

A persistent playback bar spans the width above the navigation. It contains:
- Left: Small square thumbnail of "The Restaurant at the End of the Universe" book cover (showing Earth and space imagery with Douglas Adams branding)
- Center: Title "The Restaurant at the End of t..." (truncated with ellipsis) in white text, with "3 h 43 min restante" in gray smaller text below
- Right side: A circular "30" rewind icon (white outline with "30" inside and a counterclockwise arrow), followed by a teal/cyan filled circular play button with white play triangle icon

## Bottom Navigation Bar

Fixed at bottom, dark background matching the app. Four equally-spaced tab items, each with an icon above a label:

1. **Inicio** (Home): House/home icon, currently active - icon and text appear in white/highlighted
2. **Biblioteca** (Library): Three vertical lines of varying heights (equalizer/books icon) in gray
3. **Descubrir** (Discover): Square with plus sign icon in gray
4. **Perfil** (Profile): Person/user silhouette icon in gray

A white horizontal home indicator bar appears at the very bottom (iOS style).

## Colors Summary
- Background: Black (#000000)
- Primary text: White (#FFFFFF)
- Secondary text: Gray (approximately #888888)
- Accent color: Teal/Cyan (#00B5AD or similar)
- Audible logo accent: Orange (#FF9900)
- Badge borders: Teal
- Inactive navigation: Gray
- Active navigation: White

## Spacing and Alignment
- Consistent left margin of approximately 16-20 pixels for section headers
- Book cover cards have small gaps between them (approximately 12-16 pixels)
- Section headers have generous vertical spacing above (approximately 24-32 pixels)
- Navigation items are evenly distributed across the bottom bar width
codex rebuild original overlay
58 hover ↔ original
codex
gpt-5.5
via claude-opus-4.5
Scores, cost & description
judge
layout 7
components 8
content 6
colour 5
gestalt 6
objective
SSIM 12
colour 79
layout IoU 87
OCR text 18
cost
vision
harness
judge
total
text the harness received
# Mobile App Screenshot Description: Audible Home Screen

## Overall Layout and Structure

The screen follows a standard mobile app layout with a header area at the top, a scrollable body containing content sections, a persistent mini-player near the bottom, and a fixed bottom navigation bar. The entire background is black or near-black (#000000 or very dark gray).

## Header Area

At the very top is the device status bar showing time "18:58" on the left with a person/profile icon, and on the right are cellular signal bars, WiFi indicator, and battery at 88%.

Below the status bar, partially visible, are remnants of a previous content section showing truncated text "The Silmarillion" on the left with "Por: J. R. R. Tolkien y Christo..." and a "1 CREDIT" badge, and "Jurassic Park" on the right with "Por: Michael Crichton" and "1 CREDIT" badge. A three-dot overflow menu icon appears between them.

The Audible logo appears left-aligned, consisting of the word "audible" in white lowercase text with an orange curved swoosh/wave icon to its right. On the far right of this row is a white magnifying glass search icon.

## Body Content - First Section: "Next up in your series"

A section header reads "Next up in your series" in white bold text, left-aligned with generous top margin.

Below this is a horizontal scrollable row containing book cover cards:

**First Card (fully visible):**
- Large square book cover image showing "Life, the Universe, and Everything" by Douglas Adams. The cover has a teal/cyan background with the author name "DOUGLAS ADAMS" at top in white, subtitle "AUTHOR OF THE HITCHHIKER'S GUIDE TO THE GALAXY" in smaller text. The title "LIFE, THE UNIVERSE AND EVERYTHING" appears in large yellow/gold stylized text. A cricket ball with Saturn-like rings is illustrated. At bottom: "READ BY MARTIN FREEMAN" in white.
- Below the cover: title "Life, the Universe, and Everything" in white text across two lines
- A three-dot horizontal overflow menu icon to the right of the title
- "Por: Douglas Adams" in gray text below the title
- A small rounded rectangular badge with teal/cyan border containing "1 CREDIT" in teal text

**Second Card (partially visible, cut off on right):**
- Book cover for "So Long, and Thanks for All the Fish" by Douglas Adams. Similar teal background, author name at top, title in yellow/pink gradient text, Earth illustration visible, "READ BY MARTIN FREEMAN" at bottom
- Title text "So Long and Thanks for All the Fish" in white below
- "Por: Douglas Adams" in gray
- "1 CREDIT" badge in teal

## Body Content - Second Section: "Only from Audible"

Section header "Only from Audible" in white bold text, left-aligned.

Subheader text "Explore new Audible Originals and exclusives" in gray, smaller font, directly below.

Another horizontal scrollable row of book covers:

**First Card (fully visible):**
- Cover shows "audible ORIGINAL" badge at top in white and orange text
- Title "THE COURTESAN AND THE MERCENARY" in large cream/gold serif text
- Subtitle "THE JESTER" visible at bottom
- Illustration of a bird (possibly a crow or raven) in muted colors
- Background appears to be warm tan/beige tones

**Second Card (partially visible):**
- Shows a wine glass with red wine and what appears to be a cracked or broken glass effect
- Earth or globe visible in background
- "THE" visible at bottom in white text
- Dark/moody color palette

## Mini-Player Bar

A persistent playback bar spans the width above the navigation. It contains:
- Left: Small square thumbnail of "The Restaurant at the End of the Universe" book cover (showing Earth and space imagery with Douglas Adams branding)
- Center: Title "The Restaurant at the End of t..." (truncated with ellipsis) in white text, with "3 h 43 min restante" in gray smaller text below
- Right side: A circular "30" rewind icon (white outline with "30" inside and a counterclockwise arrow), followed by a teal/cyan filled circular play button with white play triangle icon

## Bottom Navigation Bar

Fixed at bottom, dark background matching the app. Four equally-spaced tab items, each with an icon above a label:

1. **Inicio** (Home): House/home icon, currently active - icon and text appear in white/highlighted
2. **Biblioteca** (Library): Three vertical lines of varying heights (equalizer/books icon) in gray
3. **Descubrir** (Discover): Square with plus sign icon in gray
4. **Perfil** (Profile): Person/user silhouette icon in gray

A white horizontal home indicator bar appears at the very bottom (iOS style).

## Colors Summary
- Background: Black (#000000)
- Primary text: White (#FFFFFF)
- Secondary text: Gray (approximately #888888)
- Accent color: Teal/Cyan (#00B5AD or similar)
- Audible logo accent: Orange (#FF9900)
- Badge borders: Teal
- Inactive navigation: Gray
- Active navigation: White

## Spacing and Alignment
- Consistent left margin of approximately 16-20 pixels for section headers
- Book cover cards have small gaps between them (approximately 12-16 pixels)
- Section headers have generous vertical spacing above (approximately 24-32 pixels)
- Navigation items are evenly distributed across the bottom bar width