Clone App Pro Skill
A Claude skill that pixel-for-pixel clones any web app design from a reference, used to rebuild a design tool from scratch as a benchmark test.
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro
Before & after
Same prompt, same agent — the only difference is the skill.
Prompt“Clone the design of a competitor's dashboard from a screenshot I'll provide”
Beforegeneric AI agent
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?
Afterwith Clone App Pro Skill
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
name: clone-app-pat-pro description: Use when A Claude skill that pixel-for-pixel clones any web app design from a reference, used to rebuild a design tool from scratch as a benchmark test.
Clone App Pro Skill
the original author built this clone app skill to test Fable 5 and GPT-5.6 head to head on an identical task, feeding it a reference app (shots.so) and having it reproduce the UI pixel for pixel.
What you get
- Public GitHub repo with the skill file, ready to install and point at any reference app screenshot or URL.
Customize your output
- Point it at any web app you want cloned
- adjust tolerance for how exact the visual match needs to be.
Example output
A working pixel-perfect clone of shots.so built live in the video.
Best for
Developers and designers who want to rapidly recreate existing app UIs.
SKILL.md preview
SKILL.md
---
name: clone-app-pat-pro
description: Use this skill to pixel-for-pixel clone a web app's design from a reference, rebuilding its interface from scratch as a design fidelity benchmark.
version: 1.0.0
category: Development / App Cloning
author: AgentVolt
license: proprietary
tags:
- development
- app-cloning
- standard
---
# Clone App Pro Skill
Reproduces a reference web app's UI pixel for pixel, rebuilding the interface from scratch as a fidelity benchmark rather than a rough approximation.
## When to use
… (sign up to view the full skill)Sign up to view, copy, and install the full skill
More development skills
View all Development skills →Business Automation Stack
A connected set of agents that handle the repetitive ops work — follow-ups, summaries, and handoffs.
Development
Generate
Scaffold code, tests, and boilerplate from a short spec.
Development
Performance Profiler
Systematic performance profiling for Node.js, Python, and Go applications.
Development
Chaos Engineer
Designs controlled failure experiments — from a single fault injection to a full game day — and produces the runbook, rollback plan.
Development