HTML to React & Figma - extensión de Chrome para convertir sitios web en componentes de React

• Una herramienta que permite convertir el HTML de una página web en código React o en un diseño de Figma
  • Los usuarios pueden importar diseños existentes y convertirlos en código React, o transformarlos en diseños editables en Figma
  • Ofrece funciones para personalizar y modificar diseños existentes usando IA
• Funciones principales
  • Permite importar al instante un diseño existente que te guste y convertirlo en código React utilizable en tu propio proyecto
  • Se pueden importar, editar y trabajar diseños existentes, por lo que no hace falta empezar desde cero
  • Permite personalizar y modificar diseños con ayuda de IA

[charychary]

Reseña
Es difícil clonar todo el sitio de una sola vez.
Cuanto más grande es el componente que se intenta clonar, mayor es la posibilidad de que aparezcan errores, así que hubo que clonar por separado los componentes principales como el header, main, article, sidebar y footer, y el layout del contenedor tuvo que hacerlo manualmente el desarrollador.

Función de estilos
En la opción básica en línea, se generaba una etiqueta style para cada componente o se asignaba un atributo style a cada HTML, pero desde el punto de vista del desarrollador se sentía desordenado y poco mantenible porque el código quedaba menos separado de JS.
La función para convertir a Tailwindcss estuvo realmente muy buena.

Función de división de componentes
Sí existe, pero prácticamente es como si no existiera. Además de eso, genera una cantidad desesperante de CSS y muchos componentes que podrían reutilizarse se usan tal cual como HTML.
Por eso terminan saliendo códigos JSX de miles de líneas.

Actualización de AI
Se podía cambiar el concepto de diseño con un chat de AI; no salía algo tan increíblemente novedoso como uno imaginaría, pero más o menos una de cada tres veces salía un diseño fresco.
Pero como es de pago, no pude usarlo muchas veces.

Generación de archivos estáticos
Me gustó que integrara los íconos usando la técnica de image sprite, que combina los SVG o PNG en un solo archivo.

Conclusión
Como cuando se usa la AI generativa de siempre,
termina produciendo "código que en general está bien, pero al que el desarrollador tiene que meterle mano por la falta de detalle".
Sobre todo, como la función de división de componentes es deficiente, por ahora parece útil solo como una especie de "extractor de layouts y archivos estáticos".
Con AI existente como GPT antes era un poco difícil tratar problemas de layout de diseño y CSS, más que lógica de negocio; habrá que probar más para ver si esto puede compensar ese aspecto.

[iolothebard]

¿Por qué habría que convertir HTML a React (?)?

[yangeok]

Robarse ideas de UI..

[bobross0]

Qué locura...

[roxie]

Funciona demasiado bien..

[kws730]

Ah, está buenísimo

[GN⁺]

Opiniones de Hacker News

• El producto real es muy atractivo. Incluso con pruebas básicas se nota que genera diseños mucho más pulidos que los modelos LLM generales. Planeo usarlo para prototipado esta semana.

  • Me pregunto qué cambiaron respecto a un LLM estándar. Puedo imaginar que configuraron guardrails, proporcionaron componentes o lo ajustaron finamente sobre un corpus de buenos sitios web.

• Esta herramienta es una buena forma de obtener secciones de una página como HTML limpio e imprimible. Por ejemplo, la interfaz web de Claude no permite imprimir todo el historial del chat y solo imprime lo que se ve en pantalla.

  • Con esta herramienta puedes seleccionar el punto entre dos burbujas de chat para capturar todo el historial.
  • Hice una extensión simple de Chrome con una función similar, pero la calidad de la salida es inferior.

• Me pregunto cómo queda el tema del copyright para las salidas de este tipo de herramientas. Como no todos los sitios web incluyen una licencia, puede ser incluso más ambiguo que con un LLM general.

• Es una extensión de navegador muy útil. Me gusta mucho que pueda convertir los estilos a TailwindCSS. Muy ingenioso.

• Esta herramienta es realmente excelente. La probé en unos 10 sitios web y funcionó bien en aproximadamente el 80% de los elementos.

  • También la probé en nuestro sitio y pudo replicar por completo los componentes más importantes.
  • Algunos sitios no permiten seleccionar. Aunque activo el modo de selección y paso el mouse sobre los elementos, no se selecciona nada. Incluso nos hizo pensar en cómo evitar que copien nuestro propio sitio.
  • Excelente trabajo. La usaré por mucho tiempo.

• Es una gran herramienta. Da un poco de pena que el desarrollo frontend se haya vuelto tan complejo hoy en día que necesitemos algo así. Extraño la época de view-source y un solo style.css.

• Revisé la fuente del logo de Hacker News y es distinta.

  • La original es: Verdana, Geneva, sans-serif
  • La tuya es: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  • Se ve bien, pero no entiendo por qué pasa esto.

• Buen trabajo. Me pregunto si tienen planes de hacerlo compatible con Firefox.

• Me pregunto si también funcionará con mi página de Framer para poder alojarla yo mismo.

• Es una forma muy útil de obtener el HTML y CSS de un sitio web