Show HN: Copy any website pixel perfect | Hacker News Reader

Show HN: Copy any website pixel perfect

github.com

8 pointsHarro12312 comments

This repository which i built dosent allow claue to guess the dimensions, it iterates the ui till it looks 100% like the original.

Open articleView on HN

I can't see a real world use case for this.

If you actually want to make something worth the effort, you'll have to make it responsive and accessible, along with actually implementing whatever functionality your project needs.

At that point, it seems guaranteed to be more work to try to make all that happen with a visually "perfect" but implementationally soulless clone than to just mimic the design while building out your interface.

you take it as a base. You have a really solid design system for your dashboard and build on top of it. Adding responsive design and hooking it up to a database is so easy with claude code. But getting an actually good design direction is hard af

Your design naturally will not look like a clone because you have entirely different requirements. Its just about having a good design start.

Properly making a webapp responsive and accessible is not at all something Claude is good at, especially not when the entire interface is built with no architecture or structure beyond being a clone of something else.

Accessibility is baked into almost every aspect of ui and ux. Changing an existing interface to be properly accessible is very difficult.

hi guys I built this tool, its actually working way better than i ever expected. I had the problem a lot that i tried to copy a certain ui but the agent just massively hallucinated. I simply implemented evrything around a single feature.

The agent renders the actual image of the created web page, and checks the actual diff against the original.

Thus the agent is literally forced to iterate till its done.

Right now its still taking some time to be done. So I wish that some smart minds improve the algoirthm and make it quicker and more efficient.

I also cloned some other websites just for testing purposes with anonymized logos. But i am not sure if i can upload all due to copyright risks. Its literally 1 to 1 so idk.

It doesn’t have any functional preservation though right?

no function exactly, it preserves hover states and just a static screenshot. However you can copy multiple pages as a react project and the sidebar would work. But all would be static.

I have created a clone of doppler full interactive aswell with multiple pages but idk if i can share that legally

How does it handle dynamic complex sites E.g. webapps.

it copies each page statically. You can input multiple pages and it will copy each page separately.

e.g. stripe.

you do one screenshot for dashboard, one capture of billing, settings and so on. Each a separate page.

it then creates for each page a separate html file pixel perfect of that respective screenshot

What's the intended use case? Porting from framework A->B?

Does it handle responsive design? Keeping the same breakpoints etc?

This would be great for scammers

Tools can be misused all the time unfortunately. Claude code is also great for scammers

no it only copies exactly one resolution. However if one person were smart it could implement 3 screenshots which it would adapt to in parallel and check each screenshot. This would preserve scaling. However i havent impelemtned that yet

Reply on news.ycombinator.com