[Feature]:

[petramcneary]

Problem

Hey, first off thanks for this — it's the best cloner I've found and it leaves the code super clean. In the Reddit thread you mentioned a hybrid approach would be optimal (combining the downloaded HTML with browser navigation, instead of going section by section only). Are you planning to implement it in the repo (github.com/JCodesMore/ai-website-cloner-template) or is it staying as is? Just want to know whether to expect an update.

Proposed Solution

Combining the downloaded HTML with browser navigation.

Alternatives Considered

No response

Category

None

Additional Context

No response

[akashkumar6205]

Proposed Solution: Hybrid HTML + Browser Navigation Cloning

First, thank you for creating this project. The generated code is much cleaner than most website cloning solutions I've tested.

I wanted to suggest a hybrid approach that combines the current browser-navigation workflow with downloaded HTML/CSS snapshots.

Current Limitation

The current section-by-section reconstruction approach works well for clean code generation, but it can sometimes lose fidelity when dealing with:

• Complex nested layouts
• Custom CSS structures
• Advanced animations
• Responsive edge cases
• Highly customized component hierarchies

Because the AI is rebuilding sections rather than using the original DOM structure as a reference, some layouts may differ slightly from the source website.

Proposed Architecture

Website
↓
Browser Analysis
↓
Download HTML + CSS
↓
DOM Tree Extraction
↓
Component Mapping
↓
AI Refactoring
↓
Next.js Components

Suggested Reconnaissance Output

docs/research/
├── screenshots/
├── interaction-data/
├── assets/
├── raw-html/
├── css-snapshots/
└── dom-map.json

Example Implementation

1. Save Raw HTML

const html = await page.content();
await fs.promises.writeFile(
"docs/research/raw-html/index.html",
html
);

2. Capture DOM Structure

const domTree = await page.evaluate(() => {
function serialize(node) {
return {
tag: node.tagName,
id: node.id,
className: node.className,
children: [...node.children].map(serialize),
};
}

return serialize(document.body);
});

await fs.promises.writeFile(
"docs/research/dom-map.json",
JSON.stringify(domTree, null, 2)
);

3. Capture Computed Styles

const styles = await page.evaluate(() => {
return [...document.querySelectorAll("*")].map(el => ({
tag: el.tagName,
className: el.className,
styles: {
display: getComputedStyle(el).display,
position: getComputedStyle(el).position,
width: getComputedStyle(el).width,
height: getComputedStyle(el).height,
margin: getComputedStyle(el).margin,
padding: getComputedStyle(el).padding,
gap: getComputedStyle(el).gap,
}
}));
});

4. Update Generation Prompt

Current approach:

Generate component using screenshots and analysis.

Proposed approach:

Generate component using:

• Screenshot references
• Interaction analysis
• Original HTML structure
• DOM map
• Computed styles

Preserve layout hierarchy while converting to clean React/Next.js components.

Expected Benefits

• Better visual accuracy
• More faithful layout reproduction
• Improved responsive behavior
• Better animation recreation
• Fewer spacing and alignment issues
• Less AI-generated structural drift

This would keep the clean output that makes the project great while using the original HTML/CSS as a source of truth when reconstructing components.

Would something like this fit the project's roadmap, or is the current reconstruction-first approach intended to remain the primary strategy?

[petramcneary]

@akashkumar6205 Really well thought-out proposal. Quick direct question: would you feel up to implementing it yourself?

I ask because from the way you've laid it out, it looks like you've got a solid handle on it (the browser handling, DOM serialization, computed styles...). Would you be up for taking a crack?

[akashkumar6205]

Ok I will try my best to do that

[petramcneary]

I sent you an email @akashkumar6205