Hey HN, we built a Chrome Extension (https://www.magicpatterns.com/extension) that converts a snippet of any website to an isolated React component.

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

user:	skylovescoffee
created:	June 20, 2024
karma:	2