25 ms·
Show HN: Copy any website pixel perfect
This repository which i built dosent allow claue to guess the dimensions, it iterates the ui till it looks 100% like the original.
- Harro123 2mo agohi 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.
- alexgoodhart 2mo agoIt doesn’t have any functional preservation though right?
- Harro123 2mo agono 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
- zionsati 2mo agoHow does it handle dynamic complex sites E.g. webapps.
- Harro123 2mo agoit 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
- mathieudombrock 2mo agoWhat's the intended use case? Porting from framework A->B? Does it handle responsive design? Keeping the same breakpoints etc?
- Linkd 2mo agoThis would be great for scammers
- Harro123 2mo agoTools can be misused all the time unfortunately. Claude code is also great for scammers
- Harro123 2mo agono 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
- cure_42 2mo agoI 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.
- Harro123 2mo agoyou 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.
- cure_42 2mo agoProperly 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.