HTML to React & Figma - Chrome-Erweiterung zum Umwandeln von Websites in React-Komponenten

• Ein Tool, mit dem sich das HTML von Webseiten in React-Code oder Figma-Designs umwandeln lässt
  • Nutzer können bestehende Designs übernehmen und in React-Code konvertieren oder in in Figma bearbeitbare Designs umwandeln
  • Bietet Funktionen, mit denen sich bestehende Designs mithilfe von KI anpassen und bearbeiten lassen
• Hauptfunktionen
  • Vorhandene Designs, die einem gefallen, können übernommen und sofort in React-Code umgewandelt werden, der im eigenen Projekt verwendet werden kann
  • Bestehende Designs können übernommen, bearbeitet und weiterverwendet werden, sodass man nicht von Grund auf neu anfangen muss
  • Designs lassen sich mit KI individuell anpassen und bearbeiten

[charychary]

Rückblick
Die gesamte Website auf einmal zu duplizieren, ist schwierig.
Je größer die zu duplizierenden Komponenten wurden, desto höher war die Wahrscheinlichkeit von Fehlern, daher musste man Hauptkomponenten wie Header, Main, Artikel, Sidebar und Footer separat duplizieren, und das Container-Layout musste der Entwickler selbst schreiben.

Styling-Funktion
Standardmäßig wurden entweder für jede Komponente style-Tags erzeugt oder jedem HTML-Element style-Attribute zugewiesen, aber aus Entwicklersicht fühlte sich das für die Wartung unübersichtlich an, weil der Code nicht sauber genug von JS getrennt war.
Die Funktion zur Umwandlung in Tailwindcss war wirklich gut.

Komponentenaufteilungs-Funktion
Es gibt sie zwar, aber praktisch kann man sagen, dass sie kaum vorhanden ist. Dazu kommt eine wahnsinnige Menge an CSS, und viele potenziell wiederverwendbare Komponenten wurden unverändert als HTML verwendet.
Dadurch entstehen dann JSX-Codes mit mehreren tausend Zeilen.

AI-Update
Per AI-Chat konnte man das Designkonzept ändern; dabei kamen zwar nicht so überwältigend originelle Ergebnisse heraus wie gedacht, aber ungefähr jedes dritte Mal entstand ein frisches Design.
Allerdings ist das kostenpflichtig, daher konnte ich es nicht oft ausprobieren.

Erzeugung statischer Dateien
Gut fand ich, dass Icons mithilfe der Image-Sprite-Technik zusammengeführt werden, bei der SVGs oder PNGs in einer Datei zusammengefasst werden.

Fazit
Wie bei herkömmlicher generativer AI
erzeugt es „Code, der insgesamt okay ist, bei den Details aber Lücken hat und deshalb vom Entwickler nachbearbeitet werden muss“.
Besonders weil die Funktion zur Komponentenaufteilung schwach ist, wirkt es bislang nur in etwa als „Extraktor für Layouts und statische Dateien“ nützlich.
Bei bisherigen AIs wie GPT war es etwas schwierig, nicht Business-Logik, sondern Layout-Probleme im Design-CSS zu behandeln; ob das diese Seite ergänzen kann, muss ich noch weiter ausprobieren.

[iolothebard]

Warum sollte man HTML überhaupt in React umwandeln(?)?

[yangeok]

UI-Ideen klauen..

[bobross0]

Verrückt...

[roxie]

Funktioniert echt zu gut..

[kws730]

Ah, das ist wirklich großartig.

[GN⁺]

Hacker-News-Kommentare

• Das eigentliche Produkt ist sehr überzeugend. Schon mit einfachen Tests sieht man, dass es deutlich raffiniertere Designs erzeugt als normale LLM-Modelle. Ich werde es diese Woche fürs Prototyping verwenden.

  • Ich frage mich, was sie gegenüber einem Standard-LLM verändert haben. Ich könnte mir vorstellen, dass sie Guardrails gesetzt, Komponenten bereitgestellt oder auf einem Korpus guter Websites feinabgestimmt haben.

• Dieses Tool ist eine gute Möglichkeit, Abschnitte einer Seite als sauberes, druckbares HTML zu bekommen. Zum Beispiel kann die Claude-Web-UI nicht den gesamten Chatverlauf drucken, sondern nur das, was auf dem Bildschirm sichtbar ist.

  • Mit diesem Tool kann man einen Punkt zwischen zwei Chat-Blasen auswählen und so den gesamten Verlauf auswählen.
  • Ich habe eine einfache Chrome-Erweiterung mit ähnlicher Funktion gebaut, aber die Qualität der Ausgabe ist schlechter.

• Ich frage mich, wie es mit dem Urheberrecht bei den Ausgaben solcher Tools aussieht. Da nicht alle Websites eine Lizenz enthalten, könnte es noch unklarer sein als bei allgemeinen LLMs.

• Eine sehr nützliche Browser-Erweiterung. Mir gefällt besonders, dass sich Styles in TailwindCSS umwandeln lassen. Sehr clever.

• Dieses Tool ist wirklich großartig. Ich habe es auf ungefähr 10 Websites ausprobiert, und bei etwa 80 % der Website-Elemente funktioniert es gut.

  • Ich habe es auch auf unserer Website ausprobiert, und es konnte die wichtigsten Komponenten vollständig replizieren.
  • Manche Websites erlauben keine Auswahl. Selbst wenn man den Auswahlmodus aktiviert und mit der Maus über Elemente fährt, wird nichts ausgewählt. Das bringt mich dazu, darüber nachzudenken, wie wir unsere eigene Seite gegen Kopieren schützen könnten.
  • Großartige Arbeit. Ich werde es lange nutzen.

• Cooles Tool. Schade, dass Frontend-Entwicklung heutzutage so komplex geworden ist, dass man so etwas braucht. Ich vermisse die Zeiten von view-source und einer einzigen style.css.

• Ich habe mir die Schriftart des Hacker-News-Logos angesehen, und sie ist anders.

  • Das Original ist: Verdana, Geneva, sans-serif
  • Deine Version ist: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  • Sieht gut aus, aber ich verstehe nicht, warum das passiert.

• Gute Arbeit. Ich frage mich, ob geplant ist, es mit Firefox kompatibel zu machen.

• Es funktioniert auch auf meiner Framer-Seite, daher frage ich mich, ob ich sie selbst hosten könnte.

• Eine sehr nützliche Möglichkeit, das HTML und CSS einer Website zu bekommen