LLM UI Challenge

How well can LLMs replicate UIs from screenshots? Each model below was given a screenshot of a popular application and asked to recreate it in HTML, CSS, and JavaScript.

View source on GitHub

Microsoft Word

Generate this Microsoft Word interface in HTML, CSS and JavaScript. Return a single HTML file with embedded CSS and JavaScript.

Reference Screenshot

Microsoft Word reference screenshot
Claude Sonnet 4.5
Claude Sonnet 4.5 output
Claude Opus 4.5
Claude Opus 4.5 output
Grok 4 Fast
Grok 4 Fast output
Gemini 2.5 Pro
Gemini 2.5 Pro output
Qwen3 VL 235B
Qwen3 VL output
GPT-5.1
GPT-5.1 output
GPT-5.1 Codex
GPT-5.1 Codex output
Gemini 3 Pro Preview
Gemini 3 Pro Preview output

Jira

Generate this Jira interface in HTML, CSS and JavaScript. Return a single HTML file with embedded CSS and JavaScript.

Reference Screenshot

Jira reference screenshot
Claude Sonnet 4.5
Claude Sonnet 4.5 output
Claude Opus 4.5
Claude Opus 4.5 output
Grok 4 Fast
Grok 4 Fast output
Gemini 2.5 Pro
Gemini 2.5 Pro output
Qwen3 VL 235B
Qwen3 VL output
GPT-5.1
GPT-5.1 output
GPT-5.1 Codex
GPT-5.1 Codex output
Gemini 3 Pro Preview
Gemini 3 Pro Preview output

Spotify

Generate this Spotify interface in HTML, CSS and JavaScript. Return a single HTML file with embedded CSS and JavaScript.

Reference Screenshot

Spotify reference screenshot
Claude Sonnet 4.5
Claude Sonnet 4.5 output
Claude Opus 4.5
Claude Opus 4.5 output
Grok 4 Fast
Grok 4 Fast output
Gemini 2.5 Pro
Gemini 2.5 Pro output
Qwen3 VL 235B
Qwen3 VL output
GPT-5.1
GPT-5.1 output
GPT-5.1 Codex
GPT-5.1 Codex output
Gemini 3 Pro Preview
Gemini 3 Pro Preview output

VS Code

Generate this VS Code interface in HTML, CSS and JavaScript. Return a single HTML file with embedded CSS and JavaScript.

Reference Screenshot

VS Code reference screenshot
Claude Sonnet 4.5
Claude Sonnet 4.5 output
Claude Opus 4.5
Claude Opus 4.5 output
Grok 4 Fast
Grok 4 Fast output
Gemini 2.5 Pro
Gemini 2.5 Pro output
Qwen3 VL 235B
Qwen3 VL output
GPT-5.1
GPT-5.1 output
GPT-5.1 Codex
GPT-5.1 Codex output
Gemini 3 Pro Preview
Gemini 3 Pro Preview output

Google Sheets

Generate this Google Sheets interface in HTML, CSS and JavaScript. Return a single HTML file with embedded CSS and JavaScript.

Reference Screenshot

Google Sheets reference screenshot
Claude Sonnet 4.5
Claude Sonnet 4.5 output
Claude Opus 4.5
Claude Opus 4.5 output
Grok 4 Fast
Grok 4 Fast output
Gemini 2.5 Pro
Gemini 2.5 Pro output
Qwen3 VL 235B
Qwen3 VL output
GPT-5.1
GPT-5.1 output
GPT-5.1 Codex
GPT-5.1 Codex output
Gemini 3 Pro Preview
Gemini 3 Pro Preview output