O Google Stitch é uma ferramenta de design e desenvolvimento de UI impulsionada por IA que permite gerar designs de UI de qualidade profissional e código-fonte para web e mobile a partir de comandos de texto.

O coding por “vibe” envolve o uso de IA para construir aplicações via prompts, sendo eficaz para design. Vamos explorar o uso do Stitch para gerar design de aplicativos e implementá-lo em código React usando Google Gemini.

Vamos criar um site de e-commerce responsivo e multipágina, incluindo Homepage, listagem de produtos e páginas de detalhes, com a UI gerada a partir de prompts de texto usando o Stitch. Nossa página também conterá as páginas Adicionar ao Carrinho e Checkout.

Discutiremos os benefícios e desvantagens de usar o Stitch e como ferramentas como essa afetarão o futuro do design de UI e frontend.

Para começar com o Stitch, acesse stitch.withgoogle.com. O Stitch possui uma interface direta e inclui um grande campo de entrada para prompts de IA, oferecendo modos padrão e experimental.

No modo padrão, é possível editar rapidamente temas e exportar para Figma. Já o modo experimental permite o upload de imagens de design para inspiração.

Stitch pode ser acessado gratuitamente, mas possui limitações de uso. Cada usuário tem uma cota mensal de 350 gerações de UI no modo padrão e 50 no modo experimental.

Apesar das vantagens, o Stitch ainda não está totalmente amadurecido para o desenvolvimento de software empresarial, sendo recomendado para protótipos.

Para exportar designs para o Figma, use o botão Figma na parte superior do design. Para HTML/CSS, o Stitch gera código frontend que pode ser copiado para uso em projetos.

O código final para os componentes React pode ser copiado e colado no arquivo App.jsx para ver o aplicativo em ação.

Por enquanto, o Stitch é mais indicado para MVPs, startups e projetos pessoais, permitindo um lançamento mais rápido com designs prontos para uso imediato.