[HN Gopher] Show HN: Convert any website into a React component
___________________________________________________________________
Show HN: Convert any website into a React component
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
Author : alexdanilowicz
Score : 92 points
Date : 2024-11-04 17:03 UTC (5 hours ago)
(HTM) web link (chromewebstore.google.com)
(TXT) w3m dump (chromewebstore.google.com)
| rriley wrote:
| This is a very useful browser extension. Really love the fact
| that you are even able to convert the styles to TailwindCSS. Very
| clever.
| alexdanilowicz wrote:
| 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
| robertlagrant wrote:
| 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?
| alexdanilowicz wrote:
| 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.)
| mushufasa wrote:
| How does this compare to cursor composer?
| alexdanilowicz wrote:
| 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.)
| chis wrote:
| 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).
| alexdanilowicz wrote:
| 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.
| ape4 wrote:
| 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.
| alexdanilowicz wrote:
| 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
| nicce wrote:
| 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.
| demarq wrote:
| Not sure what would be the difference between this and an "open
| source airtable/notion" etc
| nicce wrote:
| 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?
| szundi wrote:
| 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.
| spmurrayzzz wrote:
| 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
| abstractspoon wrote:
| Interesting that the author of this extension has not commented
| on your question...
| instagary wrote:
| Great demo video, will try this out!
| superb_dev wrote:
| Oh cool, theft as a service!
| alexdanilowicz wrote:
| 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.
| urbandw311er wrote:
| I like how people are putting "magic" in inverted quotes. You
| know, just so it's not confused with _real_ magic.
| alexdanilowicz wrote:
| > Any sufficiently advanced technology is indistinguishable
| from magic.
|
| - Arthur C. Clarke
|
| (one of my favorite quotes!)
___________________________________________________________________
(page generated 2024-11-04 23:00 UTC)