HTML to React & Figma - Extension Chrome pour convertir des sites web en composants React

• Outil permettant de convertir le HTML d’une page web en code React ou en design Figma
  • Les utilisateurs peuvent importer un design existant et le convertir en code React, ou le transformer en design modifiable dans Figma
  • Offre des fonctionnalités pour personnaliser et modifier des designs existants à l’aide de l’IA
• Principales fonctionnalités
  • Permet d’importer instantanément un design existant apprécié et de le convertir en code React utilisable dans son propre projet
  • Permet d’importer, d’éditer et de retravailler des designs existants, sans avoir à repartir de zéro
  • Possibilité de personnaliser et modifier les designs à l’aide de l’IA

[charychary]

Retour d’expérience
Il est difficile de dupliquer un site entier d’un seul coup.
Plus le composant à dupliquer est volumineux, plus le risque d’erreurs augmente ; j’ai donc dû dupliquer séparément les composants principaux comme le header, le main, les articles, la sidebar et le footer, puis le développeur a dû coder lui-même le layout du conteneur.

Fonction de styling
Par défaut, pour l’inline, soit une balise style était générée pour chaque composant, soit un attribut style était ajouté à chaque HTML ; du point de vue d’un développeur, j’ai trouvé que c’était peu maintenable, que le code était mal séparé du JS et assez sale.
La fonctionnalité de conversion vers Tailwindcss était vraiment excellente.

Fonction de découpage des composants
Elle existe, mais il faut presque considérer qu’elle n’existe pas. En plus de ça, il y a une quantité infernale de CSS, et une grande partie des composants potentiellement réutilisables reste utilisée telle quelle en HTML.
On se retrouve donc avec du code JSX qui peut atteindre plusieurs milliers de lignes.

Mise à jour IA
On pouvait modifier le concept de design via un chat IA ; le résultat n’était pas aussi incroyablement original que je l’imaginais, mais environ une fois sur trois, on obtenait un design assez frais.
Par contre, comme c’est payant, je n’ai pas pu l’essayer souvent.

Génération de fichiers statiques
J’ai trouvé appréciable le fait que les icônes soient regroupées grâce à la technique des image sprites, qui fusionne les svg ou png en un seul fichier.

Conclusion
Comme avec les IA génératives existantes,
cela produit un « code globalement correct, mais dont les détails manquent de finition et qui doit être retouché par un développeur ».
En particulier, la fonction de découpage des composants est insuffisante ; pour l’instant, cela semble surtout utile comme « extracteur de layouts et de fichiers statiques ».
Jusqu’ici, avec une IA comme GPT, il était un peu difficile de traiter non pas la logique métier mais les problèmes de layout CSS liés au design ; il faudra que je l’utilise davantage pour voir si cela peut compenser cet aspect.

[iolothebard]

Pourquoi faudrait-il convertir du HTML en React (?) ?

[yangeok]

Vol d'idées d'UI..

[bobross0]

Incroyable...

[roxie]

Ça marche vraiment trop bien..

[kws730]

Ah, c’est vraiment génial.

[GN⁺]

Avis Hacker News

• Le produit réel est très séduisant. Même avec un test de base, on voit qu’il génère des designs bien plus soignés que les modèles LLM génériques. Je compte l’utiliser pour du prototypage cette semaine.

  • Je me demande quelles modifications ont été apportées par rapport à un LLM standard. J’imagine qu’ils ont pu mettre en place des garde-fous, fournir des composants ou effectuer un fine-tuning sur un corpus de bons sites web.

• Cet outil est un excellent moyen d’obtenir proprement des sections de page en HTML imprimable. Par exemple, l’interface web de Claude ne permet pas d’imprimer l’historique complet du chat et n’imprime que ce qui est visible à l’écran.

  • Avec cet outil, on peut sélectionner le point entre deux bulles de discussion pour récupérer l’historique complet.
  • J’ai créé une extension Chrome simple avec une fonction similaire, mais la qualité du résultat est inférieure.

• Je me demande comment fonctionne le droit d’auteur sur les sorties de ce type d’outil. Comme tous les sites web n’incluent pas de licence, cela peut être encore plus flou qu’avec un LLM classique.

• Extension de navigateur très utile. J’aime beaucoup le fait qu’elle puisse convertir les styles en TailwindCSS. C’est très malin.

• Cet outil est vraiment excellent. Je l’ai essayé sur une dizaine de sites web, et il fonctionne bien sur environ 80 % des éléments.

  • Je l’ai aussi testé sur notre site, et il a pu répliquer complètement les composants les plus importants.
  • Certains sites n’autorisent pas la sélection. Même en activant le mode de sélection et en passant la souris sur les éléments, rien n’est sélectionné. Cela m’a aussi fait réfléchir à des moyens d’empêcher la copie sur notre site.
  • Excellent travail. Je vais l’utiliser longtemps.

• Bel outil. C’est dommage qu’on ait besoin de ce genre d’outil maintenant que le développement frontend est devenu si complexe. L’époque de view-source et d’un unique style.css me manque.

• J’ai vérifié la police du logo Hacker News, et elle est différente.

  • L’originale : Verdana, Geneva, sans-serif
  • La vôtre : ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  • C’est joli, mais je ne comprends pas pourquoi cela se produit.

• Bon travail. Je me demande s’il est prévu de le rendre compatible avec Firefox.

• Je me demande si cela fonctionne aussi sur ma page Framer et si je pourrais ensuite l’héberger moi-même.

• Une manière très utile d’obtenir le HTML et le CSS d’un site web