Show HN: Convert any website into a React component

Hey HN, we built a Chrome Extension (https://www.magicpatterns.com/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 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-component 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/ 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-dbc42951a00a https://www.magicpatterns.com/ac9f38e4-5ef0-49e5-8b80-dbc429... B) ChatGPT Welcome Screen - https://www.magicpatterns.com/7cb3ad12-cb12-4a5b-b32b-eda04de9ec01 https://www.magicpatterns.com/7cb3ad12-cb12-4a5b-b32b-eda04d... C) Cal.com Calendar Component — https://www.magicpatterns.com/a43bac78-134d-458d-8107-811ac7b32b1f https://www.magicpatterns.com/a43bac78-134d-458d-8107-811ac7... D) Stripe.com logo section - https://www.magicpatterns.com/deff1793-7a05-42fe-97f7-945976cdbc7e 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 https://www.magicpatterns.com/extension