Demo video: https://youtu.be/hutUYDkyE_A
How it works: 1) Iterate through each node in the selected DOM tree, 2) For each element, find any matching CSS selectors / inline styles, 3) Use window.getComputedStyle to get the deterministic values, 4) Construct JSX
It was pretty hard producing the minimal code necessary while maintaining the same visual look. To do this, we implemented things like abstracting out global styles, removing inherited styles, pulling out SVGs, deleting styles with no effect, and condensing styles into their shorthand properties.
We dive into each of those optimizations here for fun: https://www.magicpatterns.com/blog/any-website-to-react-comp...
One of the main reasons we cared so much about condensing down the styles was not only to make it more human-readable, but also to reduce context length for an LLM, so that you can iterate on it with AI. Our extension has a “convert” option that lets you convert the output to Tailwind, Shadcn, or Chakra UI using an LLM. You can also export to Figma.
We're frontend engineers and we built the extension because our core product (https://www.magicpatterns.com/) helps software teams prototype their product ideas. And a huge pain point for users is getting their existing designs into our product, so that they can reference them to generate UIs with their existing aesthetic.
The extension allows you to get existing design context from any website, even localhost. Since launch, the extension has more than 3,000 users and interestingly is most popular in Japan.
Here's some real examples if you're curious what the final output looks like:
A) Hacker News Navbar - https://www.magicpatterns.com/ac9f38e4-5ef0-49e5-8b80-dbc429...
B) ChatGPT Welcome Screen - https://www.magicpatterns.com/7cb3ad12-cb12-4a5b-b32b-eda04d...
C) Cal.com Calendar Component — https://www.magicpatterns.com/a43bac78-134d-458d-8107-811ac7...
D) Stripe.com logo section - https://www.magicpatterns.com/deff1793-7a05-42fe-97f7-945976...
If you have an opinion about the extension, we’re all ears! You can try it for free at: https://www.magicpatterns.com/extension
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
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?
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.)
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.)
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).
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.
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?
“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.
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
"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
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...
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.
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.
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.
>> "Generations that aren't private may be featured in our public, community catalog"
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.
- Arthur C. Clarke
(one of my favorite quotes!)
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...
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.
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 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.
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
I think it's possible it just went viral after an influencer covered it or something?