Planeje um site no Framer: páginas, seções e animações
Cria o mapa do site, o wireframe em texto e as interações para montar no Framer sem ficar perdido. Use antes de abrir o editor.
Por Breno Valente · 0 cópias · funciona com Claude, ChatGPT, Gemini
Personalize
Atue como web designer especialista em Framer. Vou montar o site de Valents, um(a) estúdio de design com IA. Referências de estilo que eu gosto: sites editoriais com muito espaço em branco e tipografia grande. Entregue: 1. Mapa do site com no máximo 5 páginas e o objetivo de cada uma. 2. Para a home, um wireframe em texto: cada seção com título, subtítulo, elementos (imagem, cards, vídeo) e CTA. 3. Grid e tipografia: largura máxima, colunas, escala de tamanhos de fonte para desktop e celular e sugestão de 2 fontes do Google Fonts. 4. Interações por seção usando recursos nativos do Framer (Appear, Scroll Transform, Hover, Page Transitions), com duração e easing sugeridos. 5. Quais conteúdos devem ir para o CMS e os campos de cada coleção. 6. Checklist de SEO e publicação no Framer. Mantenha o design limpo e as animações a serviço da leitura, nunca chamando mais atenção que o conteúdo.
Exemplos de uso
Resultado esperado
Mapa do site, wireframe da home, sistema de grid e tipografia, interações do Framer, coleções do CMS e checklist de publicação.
Receba novos prompts toda semana
Outros prompts
- Foto de produto profissional com Nano Banana a partir de uma foto simples
Transforma uma foto caseira de produto em imagem de catálogo ou anúncio, mantendo o produto fiel. Use em e-commerce e posts de lançamento.
- Retrato editorial com direção de fotografia para Midjourney
Monta um prompt de retrato com linguagem de diretor de fotografia: lente, luz, filme e styling. Use para capas, perfis e campanhas com cara de revista.
- Especificação de microinterações para botões, cards e menus
Define microinterações consistentes para um produto digital, com tempos e curvas prontos para design e código. Use ao criar um design system ou refinar uma interface.