AI gera código de página da Web com captura de tela mágica!

@este site – 13 de dezembro de 2023

Como um indivíduo que se destaca no desenvolvimento de software, mas não possui experiência em design e experiência do usuário/interface do usuário (UX/UI), é essencial reconhecer suas limitações enquanto busca oportunidades de crescimento profissional. Neste cenário, adotar uma abordagem colaborativa com profissionais experientes pode ser altamente benéfico. Ao reconhecer estas áreas de fraqueza e abraçar o trabalho em equipa, pode-se melhorar a sua base de conhecimento geral e contribuir eficazmente para projetos que exigem tanto proezas técnicas como competências de design excecionais.

Uma abordagem eficaz é capitalizar os esforços dos outros. Na verdade, encontrar inspiração em tais empreendimentos pode ser altamente benéfico. Felizmente, existe um recurso notável conhecido como “Captura de tela para código”, que tem a capacidade de transformar capturas de tela capturadas de interfaces fáceis de usar em código HTML/CSS bem estruturado usando Tailwind.

Mas como isso é possível? Bem, Screenshot To Code simplesmente usa GPT-4 Vision para analisar o código e Dall-E para gerar imagens semelhantes.

Alternativamente, você pode optar por baixar e instalar o software de seu repositório Github ou implantá-lo em um contêiner Docker. No entanto, para efeitos de teste, utilizar uma demonstração online pode ser a opção mais simples disponível.

Ao avaliar seu desempenho, nosso código gerado demonstrou capacidades notáveis; no entanto, quando se trata de resultados visuais, ainda há espaço considerável para melhorias. No entanto, através da colaboração iterativa com a IA, podemos aproximar-nos gradativamente de um resultado mais desejável.

O processo envolve a utilização da API OpenAI, que incorre em uma taxa de uso. Consequentemente, ao empregar este método, pode-se gerar com facilidade um protótipo HTML/CSS acessível de um site, pois basta exportar o código gerado.

Para descobrir aqui.

-Desenvolvimento

Descubra um artigo aleatório…

Comece a discussão neste site da comunidade!

Compartilhe este artigo

*️⃣ Link da fonte:

** Captura de tela para código ** , esta demonstração online. , Para descobrir aqui. ,