Pixel-Faithful Web UI Clone from Screenshot or URL
Rebuild any web app screen from a screenshot or URL to within a pixel or two, using a measurement ledger and an overlay or diff loop.
Before & after
Same prompt, same agent — the only difference is the skill.
I can help you recreate a dashboard design from a screenshot. You'd need to identify the main layout, colors, typography, and components. It's probably best to start with the overall structure and then fill in details like buttons and forms. I could look at the screenshot and describe what I see, but the exact implementation depends on what framework you want to use. How precise does the match need to be?
CLONE WORKFLOW: Dashboard Design Extraction
STEP 1: LAYOUT BLUEPRINT (10 min)
Identify grid structure:
• Header (60px height, dark background)
• Sidebar (280px left, collapsible to 60px icon-only)
• Main content area (responsive remainder)
• Footer (optional, 40px)
Measure: Gutter spacing 16px, column count 12-column grid
Output: SVG wireframe showing zones
STEP 2: COMPONENT INVENTORY (15 min)
Parse interactive elements:
• 4 primary buttons (states: default, hover, active, disabled)
• 2 input field types (text, select dropdown)
• 1 table pattern (header row, 8 data columns, paginate or scroll)
• 3 card layouts (metric card, list card, chart card)
• Tooltips on 6 data points (hover reveals detail)
Note: Capture exact text, if visible
STEP 3: COLOR & TYPOGRAPHY EXTRACTION (5 min)
Sampling from screenshot:
• Primary: Hex value (e.g., #2563eb, tested in 2 locations for consistency)
• Secondary, Neutral grays (usually 4-6 tones)
• Text: Font stack (system fallback: -apple-system, Segoe UI, sans-serif)
• Sizes: 12px labels, 14px body, 18px headings, 28px hero metric
Output: CSS custom properties file
STEP 4: INTERACTIVE SPEC (10 min)
Document expected behaviors NOT visible in static screenshot:
• Hover state: Button color shift (usually 10% darker)
• Focus state: Outline on tab, focus ring 2px
• Dropdown open: List appears below (or above if near viewport bottom)
• Table sort: Click header → arrow direction toggles, rows re-sort
• Responsive: Sidebar hides <768px width (hamburger menu toggle)
STEP 5: BUILD (in your framework)
React component tree:
Dashboard → (Header + Sidebar + MainContent)
MainContent → (MetricCards + Table + Chart)
MetricCard → (Icon + Value + Label + Tooltip)
Table → (TableHeader + TableRows + Pagination)
HTML/CSS (no-framework):
<!-- Use semantic HTML5 -->
<div class="dashboard-grid">
<header class="header">...</header>
<aside class="sidebar">...</aside>
<main class="content">...</main>
</div>
QUALITY GATE
✓ Pixel diff <2% variance from reference (colors, sizing, spacing)
✓ Interactive states documented (hover, focus, disabled all present)
✓ Responsive tested at 320px, 768px, 1920px viewport widths
✓ Accessibility: Tab order logical, alt text on images, ARIA labels on interactive regions
ESTIMATED TIME: 60 min for complete clone (including code)
About this skill
Your clone looks almost right, but the header is a few pixels too tall, the font feels off, and nothing lines up when you flip between it and the reference. This skill rebuilds web UI from a screenshot or URL with a measure-first method, so every value traces back to the reference and the remaining gaps get closed with a real comparison instead of guessing.
What it does
- Converts screenshot pixels to CSS pixels by detecting the device pixel ratio, so a retina capture doesn't produce a double-sized clone
- Builds a measurement ledger (element, value, source, confidence) from computed styles or careful screenshot measurement
- Builds outside-in: page frame, then regions, then components, so small errors don't pile up down the page
- Matches typography by glyph identification, baseline-to-baseline line-height, and metric-adjusted fallbacks when the font is proprietary
- Catches the usual causes of 1-2px drift: box-sizing, borders eating space, translucent borders read as solid grays, and rounding to framework defaults
- Gives you an overlay toggle and, on request, an inline Playwright + pixelmatch diff script to find what is still off
What you get
A ledger of the key measurements, clone code in your stack (plain HTML/CSS, React, or Tailwind), a verification snippet, and a plain list of known gaps such as unseen hover states or substituted fonts.
Best for
Frontend developers and designers recreating a reference screen for a prototype, a redesign baseline, a learning exercise, or a model and agent fidelity benchmark.
SKILL.md preview
---
name: pixel-faithful-web-ui-clone
description: Rebuilds a web app screen from a screenshot or URL as a faithful HTML/CSS, React, or Tailwind clone. Uses a measure-first method: DPR-corrected measurement ledger, outside-in layout, typography and color matching, then an overlay or pixel-diff loop to close the gaps. Use when the user says "clone this UI pixel for pixel", "recreate this screen from the screenshot", "rebuild this app's design from scratch", "make my page match this mockup exactly", "copy this layout in Tailwind", "my clone looks close but something is off", "the spacing never matches the reference".
---
# Pixel-Faithful Web UI Clone from Screenshot or URL
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.