Your actual product is really slick. Even just with some basic tests I can see that it produces designs with a much higher degree of polish than regular LLM models, and with much more of a design bent. I'll definitely use this for some prototyping this week!

I wonder what changes you've made from standard LLMS to get here? I could imagine trying to put things on guard rails, giving it some components to build off, or just fine tuning based on a really nice corpus of good websites (maybe generated with this tool).

thank you - we're a team of 2 and former full-time frontend engineers so that means a lot to us! You're spot on with the guard rails: we do a lot of post-processing, i.e., after LLM spits something out, we parse the AST, strip out hallucinated imports, add imports that are missing. And yes! We also do a bit of pre-processing (expanding the prompt, feeding relevant examples via a RAG-based approach).

It feels like everyone is building in the AI space these days, but I gotta say: it's quite fun tweaking it. The non-deterministic nature is simultaneously the worst and best thing.

> The non-deterministic nature is simultaneously the worst and best thing.

This is what always has me asking, "How can you trust it?" with usage of LLMs for some pretty complex tasks, so I gotta know, what kinds of tricks have you employed to identify hallucinations from good output? How do you separate valid output (valid meaning it works but isn't necessarily what's desired) from desired output?

Additionally, how do you identify the most performant ways of doing things? Have you found that you've recreated portions of websites more efficiently than the real sites you're mimicking?

The nice thing about building a design tool is correct output is defined as “did it render.” We do things like strip out hallucinated imports and parse the ast for errors to help with that.

“Did it output what I desired?” - we have the classic AI app stuff like thumbs up/down, and many features we’ve built are an attempt to make that answer be a solid yes. For example, we have a “referencing” feature (if you are within a “project” - our version of an infinite canvas) that lets you reference existing designs when doing a prompt for a brand new design. This helps the LLM keep the output consistent.

Regarding performance: you can download the raw HTML so I suppose that is more performant than a version that loads all the JS, hah. But our product focus is more on the design rather than the generated code, as we’ve seen with our customers that engineers will almost always touch it up.

To answer your last question: when users are “finished” and it’s deployed (and they share it with me), people don’t really mimic portions of websites. By they time they're done, it’s fully their own, they’ve iterated on it so much. What the imported from the extension ended up being just a base to get the LLM in the right initial context.

I am going to be that person, but how is the copyright for the output of tools like this? Since not all websites include license on their site, yet their looks are replicated, this might be even less clear than with LLMs in general.

Judging by the opening post, the intention seems to be to use this on your own IP (hence them pointing out you can use it on localhost) to easily translate existing production material into Figma or similar tools where designers can then iterate on it, without having to replicate the existing interface pixel-for-pixel beforehand. So it's probably a very grey area to use this on other sites, but that's not the suggestion being made.

I am the maker of SnipCSS. https://www.snipcss.com

Just like with other tools such as yt-dlp, the user is required to use it responsibly. As long as you don't copy text/images/svg, the only issue is going to be "trade dress" infringement since CSS styles are not copyrightable. (not a lawyer so this isn't legal advice)

Strange that this post made it to HN because I'm also releasing a Tailwind conversion this week. https://x.com/SnipCSS/status/1853586090164420639 I believe mine will be much better based on the blog post about this tool.

> . As long as you don't copy text/images/svg, the only issue is going to be "trade dress" infringement since CSS styles are not copyrightable. (not a lawyer so this isn't legal advice)

I am not lawyer as well, but this is highly unlikely true.

It is like saying that C syntax is not copyrightable so I can took their code. What matters is the end result; what did you do with it? And particularly, is monetary gain involved? If you use tools like this to replicate innovative design, and you don't have permission to use it, it is much more complicated. Especially, if you use that in commercial setting.

IANAL but my guess that the output seems likely to be considered a "derivative work" (referring to US law in this case). So you'd need prior authorization from the copyright holder in the absence of a license.

"Only the owner of copyright in a work has the right to prepare, or to authorize someone else to create, an adaptation of that work. The owner of a copyright is generally the author or someone who has obtained the exclusive rights from the author... The unauthorized adaptation of a work may constitute copyright infringement." [1]

Some of the examples they give in the referenced document above are pretty close to what this tool outputs. e.g. "A new version of an existing computer program", "A revision of a website", "A drawing based on a photograph", etc

[1] https://www.copyright.gov/circs/circ14.pdf

I did almost exactly this job for a company recently. As far as I know, this is what killed the rollout.

Not sure what would be the difference between this and an “open source airtable/notion” etc

The people at these open source alternative projects at least type in their version of the copycat designs/whatevers, not using a machine to style-by-style convert it to a component for them keeping everything that can be kept.

This is completely different case, since extension probably reads content of the copyrighted website with a specific branding and tries to make similar looking version. If you use it, what are the limits of copyright laws for that output?

Interesting that the author of this extension has not commented on your question...

thanks for the callout — was taking me a second to respond because I wasn't 100% sure. It's a good question. I was actually trying to get the phone with a copyright lawyer to give an accurate answer. I believe (not a legal advice) it depends on the given website's terms of service. There's usually a "fair use" clause. Of course, if you do use the extension and you're reading this: don't use their own trademarks (like logos!) on your own site! Use our convert button and edit it to make it fully your own.

There are many extensions that grab designs from any website (this is not new tech) - what's different about ours is that we convert it to a React component for the purpose of then editing it with AI to make it your own.

I'll note it's against our Acceptable Use Policy to use it for impersonation / inauthentic behavior: https://www.magicpatterns.com/docs/documentation/legal/accep...

Props for actually looking into it and giving an answer!

This is a very useful browser extension. Really love the fact that you are even able to convert the styles to TailwindCSS. Very clever.

thank you! Given Tailwind's conciseness, it's interesting seeing how "LLM-friendly" it is. Less tokens needed to style more!

But if you want to start with an existing design: first deterministically grabbing the styles via our extension helps a lot to get that initial prompt for the AI to even do the conversion in the first place

Although the tool isn't designed for this, it's a nice way to get a clean, printable HTML copy of a section on a page. For example, the Claude web UI doesn't allow you to print a whole chat transcript. It only prints what's visible on the screen.

With this tool, you can select a point between two chat bubbles, and this will select the whole transcript.

I built a simple Chrome extension to do something similar, but my output isn't as high fidelity: https://news.ycombinator.com/item?id=42043881

Hearing about use cases that the extension wasn't designed for is always fun: thanks for sharing and cool extension! They aren't easy to build! We use Plasmo.

Next step: turn it into a web native custom element instead, and then trivially have a React version of that too by making a component that just correctly wraps the custom element.

I'm not sure if I did it wrong, but going to the Hacker News bar and looking at the font of the Hacker News logo, it's different.

Original is: Verdana, Geneva, sans-serif

Yours is: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

It looks cool, but I don't see why that sort of thing would happen?

hey thanks for the bug report! I tried to repro and see it using Verdana, Geneva, san-serif when:

A) selecting just the logo — https://www.magicpatterns.com/21ae73b5-3e14-480c-9a2e-596146... B) the bar: https://www.magicpatterns.com/6f378234-df0f-4df5-ba80-25db7b... C) the entire page https://www.magicpatterns.com/6c2c1666-0c65-4ab2-a07a-42a96d...

Could you share the outputted URL? If you're referring to the example output in the post, that's the result of a "conversion" that uses an LLM to convert the the extracted styles to Tailwind. (AI is hallunicating not keeping the font consistent! Need to fix, thanks for flagging.)

I wonder if it is because Tailwind is the target, and it's reflecting default Tailwind font stack. Brackets notation is often used for size values but probably pretty rare to use for a font stack, as this kind of thing typically goes in config.

This is absolutely fantastic. I love it. Works great on about 80% of the website elements I've tried across about 10 websites now.

I tried it on our site, and was able to completely replicate some of our most esteemed components.

A few sites wont allow the selection. I activate the select mode then hover over elements, and it won't pick up on anything. Not that is has me wondering how I could have our own site prevent people from copying it as well.

Great work. I will be a long time user of this.

> I activate the select mode then hover over elements, and it won't pick up on anything.

Did you have these pages (the tab itself) open before you installed the extension? Try refreshing the page and seeing if that works, so that Chrome knows the extension is now available on that page.

If that doesn't fix it, I would love to know what sites don't allow selection at all, I actually haven't seen that before: alex [at] magicpatterns.com

And finally, thanks for the kind words!! Here to help if you need anything.

I tried again, and still no luck after full refreshes and what not!

I will shoot you an email with the one site I was having trouble with.

But the reliability so far today has been more than I'd be happy with.

This is cool. I hate that frotnend development is such a shitshow these days this sort of tooling is necessary. I miss the days of view-source and single style.css.

The fun thing about working on this extension is that it reminds me that everything you see still just boils down to HTML + CSS at the end of the day. Despite all the modern frontend tooling we have: it's all the same in the browser!

I like how people are putting “magic” in inverted quotes. You know, just so it’s not confused with real magic.

> Any sufficiently advanced technology is indistinguishable from magic.

- Arthur C. Clarke

(one of my favorite quotes!)

Somehow it seems roundabout to use computed styles (which aren't human friendly) then to use an LLM to convert that back into something human friendly. Maybe that's the only reasonable way.

Totally agree with you it feels roundabout. The really challenging part was converting the computed styles to output that is as human-friendly as possible. And what's interesting these days: human-friendly means LLM-friendly...

We do a few optimizations to make it as human-friendly as possible. Details in the blog post linked above, but to summarize:

1. We abstract global styles — don't want to include boxSizing: 'border-box' on every div! 2. Remove inherited styles — no need to have styles that are already inherited from the parent. 3. Pull out SVGs — lots of icons on the internet, which can just be their own imports. 4. Condense padding, margin, border to their shorthand properties

On the pricing page, there is a highlighted bullet point for "Private generations" under the Pro tier. How does that differ from the other tiers?

Hey thanks for asking, we should make that more clear. Generations that aren't private may be featured in our public, community catalog here https://www.magicpatterns.com/catalog

Yet to try but is there a way to support vanilla JS? Most of my nowadays are pure HTML/JS/CSS (using Alpine mostly)

If you don't use the "convert" feature, you can download the pure HTML directly by clicking on the three dots in the menu bar, on the right side. (No JS though, because we handle the interactivity / state management in React, and candidly haven't found a good way to convert the React to HTML.)

Nice job! Do you have hypothesis why this is particularly popular in Japan? Did you launch to specific market?

We do not, I wish I knew. We did post on Product Hunt https://www.producthunt.com/products/patterns-4#html-to-reac... about it as well as Twitter: https://x.com/Teddarific/status/1805268979508015589

I think it's possible it just went viral after an influencer covered it or something?

Would this work on my own Framer pages so I can finally host them myself?

When every website on the internet is your possible input set, there are some bugs, but it should work on most framer sites. That said, the extension is WAY BETTER at smaller components (sections of a given site) versus the entire site. The entire webpage is often just far too big.

Nice job! Are there any plans to make it compatible with Firefox?

We used Plasmo to build the extension, so I think should be easy to publish it to the Firefox Add-ons store too. To be honest, no one has ever asked this before! Will look into it!

Very useful way to get the HTML and CSS for a website!

Great demo video, will try this out!

Hey thanks that means a lot, the last time I posted a Show HN (year+ ago now), someone also commented that they liked the demo video for that project! It's far from perfect, but I think a key is explaining what, who, why and aiming to keep it under 2 mins.

Does this use computed styles?

yes! it uses window.getComputedStyle

There's a long write up here on the technical guts but happy to answer any qs: https://www.magicpatterns.com/blog/any-website-to-react-comp...

should help in generating data for LLM training

Oh cool, theft as a service!

so interestingly, one of the most popular URLs imported from the extension is actually localhost:3000, meaning people use it to import their own design context and iterate on it.

It pains me that people jump to the worst use case (copying). This is why we push the conversion/editing so hard, so that folks make it their own. Clearly we still need to do a better job of that.

If someone runs this on localhost to try it out, is any of the generated output sent to your system?

>> "Generations that aren't private may be featured in our public, community catalog"

That would also interest me

hey! other co-founder here — yeah, it does go through our backend systems for processing. We also store it in our db so people can iterate on it further in our web app. At the moment, no designs created via our extension are actually featured in our public catalog, but we do also support a private option for those folks who need private designs!

There are already 34 companies using this tool to create high quality login form clones for phishing purposes.

Feels more like a potentially useful testing tool for folks planning to convert their site to an SPA or something.

If I wanted to say, convert my CMS driven site to a React SPA, this could let me get mockup versions of the components there to slot in while the rest is being developed, and preview how it'd all fit together.

Is a camera a theft-accessory device? A tape recorder? Do you think this has any legitimate uses? Where do you personally draw the line? Should we ban things that can be used in bad faith?

Think of it more as a feature that provides accessibility to people that either don't have the ability, the time, or that simply can't be bothered to work it out themselves.

How does this compare to cursor composer?

Hey, cursor composer (an IDE that lets you pair-program with AI)is awesome! I use it myself. Our extension is very different: its use case is for getting design context from any website, and then feeding that into our AI design tool - Magic Patterns - as existing "context."

In the first step, no AI is involved: we deterministically grab the styles on the webpage and then construct that into JSX. Then, you can optionally "convert" that JSX to use the component library of your choice using our AI + or update it using our chat editor to make it your own. For example, prompting: "make it green" (even if the existing HTML you grabbed is purple.)