🎨 3 sites de inspiração para frontend (Getlayers, Curated.Design e 60fps)

Nível 1 · 🪷 Lotófagos · ⏱️ 10 min · Pré-requisitos: nenhum (só navegador; o Getlayers pode exigir conta ou plano pago, veja abaixo)

📌 Pra que serve

O vídeo é a parte 3 da série "Os melhores sites pra FRONTEND que já vi", do Gabriel Fagundes. Ele mostra três acervos online de referência visual para quem cria sites e apps: um com sites prontos e prompts, um com sites bem desenhados e um com animações de interface mobile. Ajudam designers, devs e quem monta site com IA a começar de uma referência em vez de uma tela em branco.

O vídeo não tem fala, só legendas na tela. Este tutorial se baseia nelas e nas telas que aparecem. Não vi nenhuma tela de uso, só as galerias, então os passos abaixo são uma sugestão de como aproveitar cada site, não uma demonstração do vídeo.

🛠️ Passo a passo

1. Getlayers. A legenda diz "Diversos sites de 10k+ com prompts" (o vídeo não explica o que significa o "10k+"). A tela mostra uma biblioteca em grade, com cards de sites escuros e coloridos e um menu com Library, Pricing, Docs e Affiliate. O item Pricing indica que parte do conteúdo pode ser paga, e pode haver pedido de conta. O vídeo não detalha planos nem limites. - Busque o site pelo nome e navegue pela Library até achar um visual que combine com seu projeto. - Abra um card e veja se ele oferece o prompt do site. Se oferecer, use-o na sua ferramenta de IA como ponto de partida. O vídeo não mostra esse passo, então confira no próprio site como funciona. 2. Curated.Design. A legenda diz "As melhores inspirações pra vc usar no seu site". A tela mostra uma grade de capturas de sites, cada uma com o nome embaixo, e uma barra de busca no rodapé. - Role a grade e escolha 2 ou 3 referências com a estrutura que você quer (hero, tipografia, espaçamento). - Anote o que gosto u em cada uma para descrever depois na IA ou no seu design. 3. 60fps. A legenda diz "Biblioteca de UI/UX absurda". A tela mostra uma coleção de mockups de celular com botão de play (vídeos curtos de interações de apps) e, na parte de cima, uma fileira de ícones que parecem ser categorias. - Escolha uma categoria na fileira de cima, dê play nos exemplos e veja como funcionam transições, teclados e telas de configuração. - Use como referência para animações e microinterações no seu app. 4. Junte tudo. Escolha uma referência de cada site e descreva-as para sua IA de código (por exemplo, Claude Code): - o layout vem do Curated.Design; - o estilo de animação vem do 60fps; - o prompt de partida vem do Getlayers, se o card oferecer um.

💡 Dica: salve 3 a 5 referências numa pasta ou board antes de começar a codar. Pedir à IA algo concreto ("hero escuro com gradiente, como no card X") tende a dar um resultado mais próximo do que você quer do que um pedido genérico.

🔗 Links e instalação

Fonte do vídeo: https://www.instagram.com/reel/DczMg9hJJq7/
Curated.Design: https://curated.design
60fps: https://60fps.design
Getlayers: não tenho certeza do endereço exato. Busque "Getlayers" no Google e confira pelo menu Library, Pricing, Docs, Affiliate.

Nada precisa ser instalado: os três funcionam no navegador.

O que ficou de fora: o autor pede para comentar "site" e promete mandar o material por DM. Esse conteúdo não está no vídeo, então não sei se a lista tem mais sites além destes três. Também não sei os preços nem os limites de cada plataforma.