O Napkins.dev, representado como um projeto de código aberto, automatiza a conversão de rascunhos de design em código, integrando o modelo de linguagem visual Llama4 da Meta com o serviço de inferência Together AI. A ferramenta é especializada em gerar a estrutura completa de código HTML/CSS/JavaScript para a estrutura Next.js, e sua pilha de tecnologia contém três camadas principais de tecnologia:
- camada de identidade visualLlama4: modelo Llama4 para analisar elementos da interface do usuário (por exemplo, botões, formulários, etc.) e suas relações espaciais em capturas de tela carregadas
- camada de geração de códigoCrie uma árvore de componentes React e aplique as regras de estilo CSS do Tailwind com base nos resultados do reconhecimento.
- Pré-visualização da camada de depuraçãoAmbiente de sandbox em tempo real para geração de código via Sandpack
Exemplos típicos incluem a conversão de wireframes de páginas de login em componentes Next.js totalmente funcionais em menos de 15 segundos, com fundamentos de layout responsivo e ligações de eventos para elementos interativos incluídos por padrão no código gerado. Isso é de 8 a 10 vezes mais eficiente do que a codificação manual tradicional e é especialmente adequado para o design rápido de prova de conceito.
Essa resposta foi extraída do artigoNapkins.dev: upload de wireframes para gerar código de front-end com base no Llama4O
