Datasets:
screenshot imagewidth (px) 1.44k 1.92k | description stringlengths 3.41k 11.7k | response stringlengths 4.39k 34.3k |
|---|---|---|
### Detailed UI Breakdown
#### 1. Header Bar
* **Left Control Group**:
* **Save Button**: Primary filled black button (`#000000`) with rounded corners and white text ("Save").
* **Cancel Button**: Plain text action link ("Cancel") in dark grey text.
* **Undo Icon**: Curved arrow pointing counter-clockwise (activ... | import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Sliders, Undo2, Redo2 } from "lucide-react";
/* Filter preset data drives the repeated two-column thumbnail grid. */
const filterPresets = [
{ name: "GRAMERCY", color: "#e5e5df" },
{ name: "FACET", color: "#fafaf7" ... | |
Here is a detailed, structured analysis of the provided scheduling interface, followed by animation suggestions.
---
### UI Breakdown & Detailed Structure
#### **General Page Structure & Theme**
* **Layout**: Centered mobile-style card widget on a clean, light gray background.
* **Color Palette**:
* Primary Accen... | import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Calendar, Globe, Info, Pencil } from "lucide-react";
/* Date options are mapped to keep the selector consistent and reusable. */
const dates = [
{ id: "wed", day: "Wed", date: "Apr 15", heading: "Wednesday, April 15" ... | |
Here is a detailed UI breakdown of the provided product design project management timeline interface, followed by motion and animation recommendations.
---
### UI Breakdown
#### 1. Left Sidebar Navigation
* **Container & Theme:** Light peach/warm nude background (`#FBE8DE`), vertical layout.
* **Workspace Header:**
... | import { useState } from "react";
import { motion } from "framer-motion";
import {
Briefcase,
Building,
ChevronDown,
ChevronLeft,
ChevronRight,
ChevronsUpDown,
Coffee,
List,
Menu,
MoreHorizontal,
Search,
Share2,
X,
} from "lucide-react";
/* Calendar data is mapped to keep the axis evenly alig... | |
Here is a detailed, structured UI breakdown of the provided screenshot from the **Komoot** web application, followed by animation suggestions.
---
# UI Breakdown & Structural Analysis
## 1. Overall Theme & Layout Structure
* **Color Theme:** Clean, minimal, nature-inspired palette. Background is a soft off-white (`#... | import { useState } from "react";
import { motion } from "framer-motion";
import {
Bell,
ChevronDown,
MapPin,
Menu,
Minus,
Navigation,
Plus,
Search,
X,
} from "lucide-react";
export default function CreateHighlightPage() {
const [name, setName] = useState("Batu Belig Beach");
const [tip, setTip] ... | |
Here is a detailed, structured UI breakdown of the provided Deputy application screenshot, followed by a set of recommended web animations.
---
# UI Structural Breakdown
## 1. Top Trial Banner (Notification Bar)
* **Container:** Full-width top bar with a light cyan/teal background (`#EBF8FF`).
* **Text Contents:**
... | import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
AlertCircle,
Bell,
Calendar,
Check,
ChevronDown,
Clock,
DollarSign,
HelpCircle,
Lock,
Menu,
MessageCircle,
Minus,
Pencil,
Plus,
Settings,
Sliders,
Sparkles,
Square,
Sun,
Trash2,
... | |
Here is a detailed, structured UI description of the provided screenshot, followed by tailored animation suggestions.
---
### **UI Description**
#### **1. Overall Layout & Visual Theme**
* **Structure:** Single-page web layout featuring a main host profile page blurred/dimmed by a dark translucent overlay (`rgba(0, ... | import { useMemo, useState } from "react";
import {
Calendar,
Check,
ChevronDown,
Copy,
Download,
Menu,
Pencil,
Search,
Sparkles,
Star,
X,
} from "lucide-react";
import { AnimatePresence, motion } from "framer-motion";
/* Shared Turo wordmark treatment used in the navigation and QR card. */
funct... | |
Here is a detailed structured breakdown of the user interface shown in the screenshot, followed by suggested motion animations for the component.
---
### UI Breakdown & Visual Structure
#### 1. Color Palette & Global Layout Structure
* **Theme**: Modern minimal SaaS layout in light gray mode (`#F9F9F9` background ba... | import { useState } from "react";
import {
Bell,
ChevronDown,
Copy,
Grid3x3,
HelpCircle,
Mail,
MoreHorizontal,
Search,
Settings,
} from "lucide-react";
import { AnimatePresence, motion } from "framer-motion";
/* Primary sidebar navigation content. */
const primaryNavigation = [
"Home",
"Website",... | |
"Here is a detailed, structured UI breakdown of the provided screenshot, followed by recommended ani(...TRUNCATED) | "import { useState } from \"react\";\nimport ReactPlayer from \"react-player\";\nimport { AnimatePre(...TRUNCATED) | |
"Here is the detailed UI analysis and structured breakdown of the **Zoho CRM - Documents** interface(...TRUNCATED) | "import { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nim(...TRUNCATED) | |
"Here is a detailed UI analysis and structured animation guide for the screen provided.\n\n---\n\n# (...TRUNCATED) | "import { useState } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nim(...TRUNCATED) |
End of preview. Expand in Data Studio
Frontend React Dataset
This dataset contains 1,000 matched examples for training and evaluating multimodal screenshot-to-code systems.
Dataset structure
The dataset has one train split and exactly three columns:
screenshot: the source webpage screenshot as an embedded PNG imagedescription: a detailed, section-by-section visual description generated with Gemini 3.6 Flashresponse: React/TSX implementation generated with GPT-5.6 Sol
The response field contains extracted source code without surrounding Markdown
code fences.
Quality checks
- All 1,000 source images were matched to their corresponding description and code response.
- Image SHA-256 hashes were checked while packaging the dataset.
- Every response passed static TSX syntax validation with esbuild.
- API generation status was successful for all 1,000 examples.
Static syntax validation does not guarantee pixel-perfect visual similarity or that every example runs without its expected React dependencies.
Intended use
This dataset is intended for research and development involving:
- screenshot-to-React generation
- multimodal code generation
- UI reconstruction
- supervised fine-tuning and evaluation
Review the source screenshots and generated code for licensing, privacy, and redistribution requirements before making the dataset public or using it commercially.
- Downloads last month
- 50