> Legal Notice: This skill is intended for cloning your own websites, building from design references you have rights to, or learning from public design patterns. Always ensure you have permission before reproducing third-party designs, assets, or branding. Respect copyright, trademarks, and terms of service.
When building a high-fidelity landing page clone, the biggest trap is relying purely on DOM trees and CSS dumps. Modern website builders (Framer, Webflow) generate deeply nested "div soup" and obfuscated CSS to create visual effects.
The Golden Rule: Trust your "eyes" (screenshots) first, but when an effect looks too complex to be pure CSS, use Deep DOM Interrogation to steal the exact asset.
To clone efficiently, you must divide your workflow into two distinct phases so you don't get bogged down pixel-pushing too early:
Navbar, Hero, Features), and apply basic Tailwind classes for layout (Flex/Grid) and spacing. Accept approximations here—use solid colors instead of complex gradients, standard CSS shadows, and static backgrounds. Move fast..webm videos, map massive multi-layer box-shadows, and implement Framer Motion spring physics.Before writing code, establish a scalable folder structure. Modern landing pages should be componentized.
src/components/layout/: Navbar.tsx, Footer.tsx (Global elements)src/components/sections/: Hero.tsx, Features.tsx, Testimonials.tsx (Page blocks)src/components/ui/: Button.tsx, GlassCard.tsx (Reusable micro-components)src/assets/media/: Local storage for extracted videos, noise overlays, and icons.Before looking at a single line of code, visually ground yourself in the reference site.
mcp_chrome-devtools_take_screenshot(filePath="/absolute/path/to/ref.png")
Best for: Getting the general layout semantic HTML structure (Nav, Hero, Bento Grid, Footer).
Best for: Extracting exact pixel-perfect design tokens during the 20% Polish.
Tool to use: mcp_chrome-devtools_evaluate_script
Do NOT query the full getComputedStyle object. It returns 500+ properties, overwhelms the context window, and creates hallucination/confusion. Instead, use targeted JS payloads to extract exactly what you need.
Script 1: Typography Tokens (Fonts, Spacing, Weights)
Why: To perfectly match headings. Used to discover that Calisto's H1 used -4.8px letter spacing and specific gray/blue hex colors.
() => {
const el = document.querySelector('h1');
const s = window.getComputedStyle(el);
return JSON.stringify({
color: s.color,
fontSize: s.fontSize,
fontWeight: s.fontWeight,
letterSpacing: s.letterSpacing,
lineHeight: s.lineHeight
}, null, 2);
}
Script 2: Bounding Box & Overflow (The Glow/Shadow Check)
Why: To find exact dimensions and see if glowing effects bleed outside the element. We used this to realize the Hero button was exactly 160x160px with overflow: visible, allowing inner conic gradients to blur outside the borders.
() => {
const btn = Array.from(document.querySelectorAll('a')).find(l => l.textContent.includes('Get Started'));
if (!btn) return "Not found";
const rect = btn.getBoundingClientRect();
const s = window.getComputedStyle(btn);
return JSON.stringify({
width: rect.width,
height: rect.height,
display: s.display,
borderRadius: s.borderRadius,
overflow: s.overflow,
boxShadow: s.boxShadow
}, null, 2);
}
Script 3: Glassmorphism & Backgrounds
Why: To grab exact transparency, blur, and gradient values for navbars or cards.
() => {
const el = document.querySelector('nav');
const s = window.getComputedStyle(el);
return JSON.stringify({
background: s.background,
backdropFilter: s.backdropFilter,
border: s.border
}, null, 2);
}
Script 4: Typography & Forced Line-Breaks
Why: A clone looks instantly fake if text wraps differently than the original. Don't let the browser decide fluidly. Extract exact container widths to force identical line breaks.
() => {
const el = document.querySelector('h1');
const r = el.getBoundingClientRect();
return JSON.stringify({
containerMaxWidth: r.width // Use this in Tailwind (e.g., max-w-[900px]) to force exact wraps!
}, null, 2);
}
Script 5: Abstract Glows & "Orbits" (The Glow Fallacy)
Why: A common trap is seeing a background aura and guessing it's a simple radial gradient with a massive blur(). High-end templates actually use hard shapes, multi-stop linear gradients, precise matrix transforms (rotations), and specific blend modes with a very tight blur. Eyeballing this turns a sharp "galaxy arm" into a muddy blob.
() => {
const el = document.querySelector('[data-framer-name="Big Circle"]');
if (!el) return "Not found";
const s = window.getComputedStyle(el);
return JSON.stringify({
background: s.background, // Captures complex multi-stop gradients
transform: s.transform, // Captures crucial rotation angles
filter: s.filter, // Captures the exact, often surprisingly small, blur
opacity: s.opacity
}, null, 2);
}
Best for: Replicating complex glows, overlapping animations, and fluid backgrounds.
When an effect (like a smooth background or a swirling button) is too complex, do not guess the math. Framer and Webflow hide these in layered divs, pseudo-elements, or literal / tags.
Script 1: Render Engine Identification (Video vs Canvas vs CSS)
If the background is moving fluidly, you must determine what is rendering it before trying to clone it. Find the full-screen background node:
() => {
const backgrounds = [];
document.querySelectorAll('*').forEach(el => {
const style = window.getComputedStyle(el);
const rect = el.getBoundingClientRect();
// Look for large elements spanning >80% of screen in the background
if ((style.position === 'fixed' || style.position === 'absolute') &&
(parseInt(style.zIndex) <= 0 || style.zIndex === 'auto') &&
rect.width >= window.innerWidth * 0.8 &&
rect.height >= window.innerHeight * 0.5 &&
el.tagName !== 'BODY' && el.tagName !== 'HTML') {
backgrounds.push({ tag: el.tagName, html: el.outerHTML.substring(0, 300) });
}
});
return JSON.stringify(backgrounds, null, 2);
}
Lesson: The DOM never lies. You might discover the "complex animation" is actually:
background-image: url(...noise.png)) at 5-10% opacity layered over the effect to prevent color banding.Script 2: Deep Extraction for UI Micro-Components (outerHTML)
To clone a complex modern button or pill badge, do not guess the CSS. Builders use massive multi-layered box-shadow strings (e.g., 6 layers of shadow) and precise rgba borders to create glowing depth. Extract its literal nested structure:
() => {
const btn = Array.from(document.querySelectorAll('a')).find(l => l.textContent.includes('Get Started'));
return btn ? btn.parentElement.outerHTML : 'Not found';
}
Lesson: This reveals the nested conic-gradient divs, blur() filters, and massive box-shadow arrays. Map those literal strings directly into an arbitrary Tailwind class like shadow-[0px_0.7px_..._rgba(...)].
Script 3: The API Interceptor (Shader Stealer)
If the target is using a WebGL , the exact GLSL shader code is often minified in JS chunks. You can hijack the browser's WebGL API to intercept the raw shader math before it goes to the GPU.
Inject this script before the page loads (using initScript in mcp_chrome-devtools_navigate_page):
window.__interceptedShaders = [];
function hookContext(glPrototype) {
if (!glPrototype) return;
const originalShaderSource = glPrototype.shaderSource;
glPrototype.shaderSource = function(shader, source) {
window.__interceptedShaders.push(source);
originalShaderSource.call(this, shader, source);
};
}
hookContext(WebGLRenderingContext.prototype);
if (typeof WebGL2RenderingContext !== 'undefined') hookContext(WebGL2RenderingContext.prototype);
Then, evaluate JSON.stringify(window.__interceptedShaders) to read the exact GLSL math!
Script 4: The "Last Resort" Canvas Recorder
When a WebGL Canvas shader is too heavily obfuscated to intercept (or relies on proprietary 3D math engines), do not try to guess the GLSL math. Instead, literally record the GPU output directly from the reference site and use it as a seamless background video.
() => {
return new Promise((resolve) => {
const canvas = document.querySelector('canvas');
if (!canvas) return resolve("No canvas found.");
const stream = canvas.captureStream(30);
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
const chunks = [];
recorder.ondataavailable = e => { if (e.data.size > 0) chunks.push(e.data); };
recorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'framer_perfect_loop.webm';
document.body.appendChild(a);
a.click(); // Triggers the download
document.body.removeChild(a);
resolve("Recorded 8s and downloaded: framer_perfect_loop.webm");
};
recorder.start();
setTimeout(() => recorder.stop(), 8000); // 8 seconds for a good loop
});
}
Best for: Translating visual effects into clean, modern tech stacks.
framer-motion for buttery smooth spring entrances instead of standard CSS transitions.mcp_chrome-devtools_list_pages to get the pageId for both tabs.mcp_chrome-devtools_select_page(pageId=REF_ID) to explicitly focus the reference.ref_latest.png).mcp_chrome-devtools_select_page(pageId=LOCAL_ID) to explicitly focus your local clone.location.reload() via script if WebGL or HMR is stuck.local_latest.png).```bash
python3 -c "
from PIL import Image
i1 = Image.open('/absolute/path/ref.png')
i2 = Image.open('/absolute/path/local.png')
h = min(i1.height, i2.height)
i1 = i1.resize((int(i1.width * h / i1.height), h))
i2 = i2.resize((int(i2.width * h / i2.height), h))
dst = Image.new('RGB', (i1.width + i2.width, h))
dst.paste(i1, (0, 0))
dst.paste(i2, (i1.width, 0))
dst.save('/absolute/path/combined.png')
"
```
combined.png to spot any remaining visual discrepancies side-by-side.outerHTML of the button's parent. You likely missed overlapping blurred divs or 6-layer box shadows that create the glow effect.max-w-[...]).pkill -f "chrome-devtools-mcp" || true.Ethical/Legal Note: When cloning websites, ensure you have the appropriate permissions. For learning purposes, focus on reverse-engineering the structural layout and design systems (spacing, colors, typography) rather than ripping proprietary copy, branding, or gated assets.
共 1 个版本