O que MotionSites Prompt Capture faz?
Objetivo
Quando o usuário apresentar uma necessidade de design de site/UI, acesse motionsites.ai para encontrar o template de prompt correspondente e forneça um plano de otimização direcionado ao projeto do usuário. A saída deste skill é "prompt recomendado + plano de otimização", não escrever código diretamente.
Fluxo de Trabalho
1. Refinar a Necessidade
Primeiro, confirme as informações-chave. Se estiverem faltando, prossiga com padrões razoáveis e não faça perguntas repetitivas:
- Tipo de site: Landing page / Site de SaaS / Portfólio / Site de Agência / Seção Hero / Página de E-commerce, etc.
- Estilo visual: Escuro, Vidro fosco, Gradiente, Minimalista, 3D, Fundo de partículas, etc.
- Necessidades de animação: Animação de scroll, Parallax, Scroll suave, Interação 3D, etc.
- Estrutura de conteúdo: Quais blocos são necessários (Navegação, Hero, Recursos, Preços, Rodapé, etc.)
- Stack tecnológica: Padrão React/Next.js + Tailwind + shadcn/ui (ambiente do plugin Build Web Apps); se o usuário especificar outra stack, use a dele.
2. Acessar motionsites.ai
- Priorize usar o navegador embutido (se o usuário já o tiver aberto ou se estiver disponível) para abrir https://motionsites.ai/ e navegar pelas categorias (SaaS, Agência, Portfólio, Landing pages, Seções Hero, etc.).
- Se o navegador não estiver disponível, use open_page ou web search para obter informações da página. Observe que o site é um SPA renderizado com JS; a captura estática pode não obter o conteúdo das categorias. Nesse caso, explique que usar o navegador é mais preciso.
- Filtre com base nos três eixos "Tipo + Estilo + Animação" e encontre de 1 a 3 prompts mais correspondentes.
3. Entregar o Prompt Recomendado
- Exiba o prompt original completo selecionado, sem reescrever ou traduzir.
- Explique o motivo da correspondência de cada prompt (por que é adequado para a necessidade do usuário).
- Se não encontrar uma correspondência exata, escolha a mais próxima e indique claramente as diferenças; nunca invente um prompt inexistente.
4. Fornecer o Plano de Otimização
Liste pontos de otimização direcionados ao projeto real do usuário:
- Adaptação da Stack Tecnológica: O prompt padrão visa Lovable/Bolt/Cursor/Claude; explique como migrar para a stack do usuário (padrão React + Tailwind + shadcn/ui; divisão de componentes, reutilização de tokens de design).
- Implementação de Animações: motionsites costuma usar GSAP ScrollTrigger + Lenis para scroll suave; apresente os trade-offs principais na implementação (desempenho, degradação, acessibilidade, prefers-reduced-motion).
- Assets Visuais: Se forem necessários hero images, texturas, ícones, explique que podem ser gerados com imagegen ou introduzidos a partir dos recursos exigidos pelo prompt.
- Método de Verificação: Após a implementação, use playwright / frontend-testing-debugging para verificação no navegador (responsividade, animações, erros de console).
- Aviso de Riscos: Aponte partes do prompt que podem não ser aplicáveis ao projeto atual (dependências, custo de desempenho, conteúdo placeholder).
5. Conclusão
Por fim, pergunte ao usuário se deseja começar a implementação de acordo com o plano de otimização; não escreva código antes da confirmação do usuário.
Exemplos de Acionamento
- "Preciso que você crie um site e use design de UI"
- "Quero fazer uma landing page de SaaS, me ajude a encontrar prompts no MotionSites"
- "Me ajude a fazer um site de portfólio com animação no Hero, primeiro me dê o plano"
Observações
- Não pule a etapa de "encontrar o prompt" para ir direto para o código.
- Mantenha o texto original do prompt; o plano de otimização é direcionado ao projeto do usuário. Por padrão, não reescreva o prompt em si, a menos que o usuário solicite.
- Priorize navegar visualmente pelo motionsites.ai usando o navegador antes de selecionar, evitando adivinhar o conteúdo do site de memória.