8-step reverse-engineering process for any website into implementation-grade specs. Use when analyzing a reference site, cloning a design, extracting design tokens, or turning a visual reference into a build-ready specification.
Reference this skill when reverse-engineering any website or design reference into implementation-grade specs. Follow all 8 steps in order.
Capture the overall vibe in one sentence. Examples:
Then note the tech stack:
Tech: React + [framework] + TypeScript + Tailwind + [UI library] + [animation library]
Fonts: [heading font] + [body font] + [mono font if present]
Pull exact values using browser DevTools (Computed Styles panel).
Minimum extraction:
--bg: /* Page background */
--surface: /* Card/panel background */
--elevated: /* Raised elements */
--border: /* Dividers, borders */
--muted: /* Lowest text */
--secondary: /* Supporting text */
--primary: /* Main text */
--accent: /* Brand/action color */
Plus any gradients:
--accent-gradient: linear-gradient(90deg, #start, #end);
Never write "dark gray" or "light blue" — always hex, rgba, or HSL.
For every text element on the page, extract:
| Element | Font Family | Weight | Size (Desktop) | Size (Mobile) | Tracking | Leading | Color |
|---|
Common elements to capture:
Check font-feature-settings and font-variant-numeric for tabular numbers.
For every section:
Section: [name]
Container: [max-width] [padding]
Grid: [columns per breakpoint] [gap]
Section spacing: [padding-top/bottom]
Capture:
For every visual effect:
| Effect | Element | Complete CSS |
|---|
Look for:
backdrop-filter, background-blend-mode)Extract the FULL CSS — including pseudo-elements, mask properties, and animation keyframes.
For every animation:
| Animation | Trigger | From | To | Duration | Easing | Delay |
|---|
Check for:
Inspect the element's transition, animation, and computed transform during interaction.
From DevTools, inspect z-index on all positioned elements:
z-0: Background, video
z-[1-3]: Overlays, dividers
z-10: Content
z-20: Sticky elements
z-30: Dropdowns
z-40-50: Navigation, modals
z-[100]: Lightbox
z-[9999]: Loading screen
Assemble into implementation-grade format:
# [Reference Name] — Design Analysis
## Aesthetic
[One-sentence vibe + tech stack + fonts]
## Design System
[Color variables as CSS custom properties]
## Typography
[Full type scale table]
## Layout
[Section-by-section breakdown with exact Tailwind]
## Effects
[Complete CSS for every visual effect]
## Animations
[Framer Motion or GSAP code for every animation]
## Z-Index Map
[Layer stack]
## Responsive
[What changes at sm/md/lg/xl]
Before submitting any reference analysis, verify:
#0F0F0F, rgba(255,255,255,0.01), text-white/60. Never "dark" or "muted" without a value.px-5 py-4 md:px-12 md:py-6, gap-12, mb-8. Never "some padding."text-[2.75rem] md:text-[5.5rem]. State exactly what changes.Run on every completed analysis:
If any question can't be answered from the spec, the analysis isn't done.
background-color, color, border-colorfont-family, font-size, font-weight, letter-spacing, line-heightpadding, margin, gap (or inspect the box model diagram)backdrop-filter, box-shadow, background-image, filtertransition, animation, transform in Stylesz-index (check parent stacking contexts too)design-specs/references/ for future reuse.