HTML to React & Figma - extensão do Chrome que converte sites em componentes React

• Ferramenta que pode converter o HTML de páginas da web em código React ou em designs no Figma
  • O usuário pode importar um design existente e convertê-lo em código React, ou transformá-lo em um design editável no Figma
  • Oferece recursos para personalizar e modificar designs existentes com o uso de IA
• Principais recursos
  • Permite importar instantaneamente um design existente de que você goste e convertê-lo em código React utilizável no seu projeto
  • É possível importar, editar e trabalhar sobre um design existente, sem precisar começar do zero
  • Permite personalizar e modificar designs com o uso de IA

[charychary]

Impressões
É difícil clonar o site inteiro de uma vez.
Quanto maior o componente clonado, maior a chance de ocorrerem erros, então foi preciso clonar separadamente os principais componentes, como header, main, article, sidebar e footer, e o layout do container teve que ser montado manualmente pelo desenvolvedor.

Recursos de estilização
No inline padrão, era gerada uma tag style para cada componente ou era atribuído um atributo style a cada HTML, mas do ponto de vista do desenvolvedor isso parecia bagunçado e pouco adequado para manutenção, já que o código ficava menos separado do JS.
O recurso de converter para Tailwindcss foi realmente muito bom.

Recurso de divisão de componentes
Até existe, mas na prática é como se quase não existisse. Além disso, há uma quantidade absurda de CSS, e muitos componentes que poderiam ser reutilizados acabam sendo usados tal como estão como HTML.
Por isso, o resultado acaba sendo código JSX com milhares de linhas.

Atualização de IA
Dava para mudar o conceito do design via chat de IA, mas não saía nada tão inovador quanto eu imaginava; ainda assim, em cerca de uma a cada três tentativas aparecia um design interessante e fresco.
Só que, como é pago, não consegui usar muitas vezes.

Geração de arquivos estáticos
Gostei do fato de que ele integra os ícones usando a técnica de sprite de imagens, que consolida SVGs e PNGs em um único arquivo.

Conclusão
Como acontece com a IA generativa em geral,
ele produz um código que "no geral é bom, mas carece de detalhes e precisa ser ajustado pelo desenvolvedor".
Principalmente pela falta de um bom recurso de divisão de componentes, por enquanto ele parece útil apenas como um "extrator de layout e arquivos estáticos".
Com IAs como o GPT, já era um pouco difícil lidar não com a lógica de negócio, mas com problemas de layout de design em CSS; preciso testar mais para ver se isso pode compensar esse lado.

[iolothebard]

Por que seria necessário converter HTML para React (?)?

[yangeok]

Roubando ideias de UI..

[bobross0]

Insano...

[roxie]

Funciona bem demais..

[kws730]

Ah, isso é muito bom mesmo.

[GN⁺]

Comentários no Hacker News

• O produto em si é muito atraente. Mesmo com um teste básico, dá para ver que ele gera designs bem mais refinados do que modelos LLM comuns. Pretendo usá-lo para prototipagem esta semana

  • Fico curioso para saber o que foi mudado em relação a um LLM padrão. Dá para imaginar que definiram guardrails, forneceram componentes ou fizeram fine-tuning com base em um corpus de bons sites

• Esta ferramenta é uma boa maneira de obter seções de uma página em HTML limpo e imprimível. Por exemplo, a interface web do Claude não permite imprimir todo o histórico de conversa e imprime apenas o que está visível na tela

  • Com esta ferramenta, é possível selecionar o histórico inteiro escolhendo um ponto entre dois balões de conversa
  • Já fiz uma extensão simples para o Chrome com função parecida, mas a qualidade da saída é inferior

• Fico me perguntando como fica a questão dos direitos autorais sobre a saída de ferramentas como esta. Como nem todo site inclui uma licença, isso pode ser ainda menos claro do que no caso de LLMs comuns

• É uma extensão de navegador muito útil. Gosto muito do fato de ela conseguir converter estilos para TailwindCSS. Muito inteligente

• Esta ferramenta é realmente excelente. Testei em cerca de 10 sites e funcionou bem em aproximadamente 80% dos elementos das páginas

  • Também testei no nosso site e ela conseguiu replicar completamente os componentes mais importantes
  • Alguns sites não permitem seleção. Mesmo ativando o modo de seleção e passando o mouse sobre os elementos, nada é selecionado. Isso também me fez pensar em formas de impedir cópias no nosso site
  • Excelente trabalho. Vou usá-la por muito tempo

• Ferramenta muito legal. É uma pena que o desenvolvimento frontend hoje em dia tenha ficado tão complexo a ponto de precisarmos de algo assim. Sinto falta da época de view-source e de um único style.css

• Verifiquei a fonte do logo do Hacker News e ela está diferente

  • A original é: Verdana, Geneva, sans-serif
  • A sua é: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  • Ficou legal, mas não entendo por que isso acontece

• Bom trabalho. Fico curioso para saber se há planos de torná-la compatível com Firefox

• Fico me perguntando se ela também funcionaria na minha página do Framer, para que eu pudesse hospedá-la por conta própria

• Uma forma muito útil de obter o HTML e o CSS de um site