UX Premium Audit - Transformação de Experiência
Esta skill fornece um workflow estruturado para transformar qualquer site em uma experiência premium interativa, mantendo 100% do conteúdo existente e aplicando apenas técnicas de UX.
Workflow Principal
O processo segue 4 etapas principais:
- Análise do Site - Coletar informações sobre a página atual
- Mapeamento de Seções - Mapear conteúdo para técnicas de UX premium
- Geração de Plano - Criar estrutura de fases e prompts
- Entrega de Prompts - Gerar prompts prontos para Lovable.dev
Como Usar Esta Skill
Etapa 1: Fornecer Informações do Site
Quando solicitado, forneça:
- URL do site ou captura de tela (PDF/imagem)
- Stack técnico atual (React, Next.js, WordPress, etc)
- Objetivo principal (gerar leads, vender, educar, engajar)
- Hospedagem e CMS (Vercel, AWS, Supabase, etc)
Etapa 2: Análise Automática
Manus irá:
- Analisar a estrutura de seções do site
- Identificar conteúdo a preservar (textos, imagens, métricas, depoimentos)
- Mapear cada seção para técnicas de UX premium apropriadas
- Documentar oportunidades de transformação
Etapa 3: Geração do Plano
Manus criará um documento com:
- Mapeamento: Seção → Técnica de UX → Prompts necessários
- Fases: Organização em 4-7 fases de implementação
- Prompts: 8-15 prompts específicos e prontos para usar
- Cronograma: Estimativa de tempo por fase
- Métricas: Objetivos de sucesso (scroll depth, conversão, performance)
Etapa 4: Usar os Prompts
Copie cada prompt gerado e cole no Lovable.dev. Cada prompt é:
- Específico: Direcionado para uma seção ou funcionalidade
- Contextualizado: Inclui informações sobre o que foi feito antes
- Detalhado: Requisitos técnicos, conteúdo a preservar, responsividade
- Pronto: Pode ser usado imediatamente sem modificações
Técnicas de UX Premium Disponíveis
A skill aplica 8 técnicas principais (consulte references/ux-premium-techniques.md para detalhes):
- Progressive Disclosure - Revelar conteúdo sequencialmente
- Scroll-Driven Storytelling - Narrativa guiada pelo scroll
- Micro-interações - Animações funcionais em elementos interativos
- Contadores Animados - Números que animam de 0 até valor final
- Carrosséis Interativos - Componentes com drag e auto-play
- Split-Screen Animado - Layout com dois lados conectados visualmente
- Sticky Scroll - Elemento fixo enquanto conteúdo muda
- Design Conversacional - Interface que simula diálogo (Typebot-style)
Stack Recomendado
Para melhor resultado, a implementação deve usar:
- Frontend: React + Vite + TypeScript
- Estilização: Tailwind CSS
- Animações: Framer Motion
- Detecção de Scroll: Intersection Observer API
- Backend: Supabase ou similar para dados dinâmicos
A skill é agnóstica de stack, mas otimizada para React/Framer Motion.
Estrutura de Fases Padrão
A maioria dos planos segue este padrão:
| Fase |
Objetivo |
Prompts |
Duração |
| 1 |
Preparação (estrutura + animações) |
1-2 |
2-3 dias |
| 2 |
Seções críticas (hero, pricing) |
2-3 |
2-3 dias |
| 3 |
Seções principais (features, resultados) |
2-4 |
3-4 dias |
| 4 |
Seções secundárias (depoimentos, FAQ) |
2-3 |
2-3 dias |
| 5 |
Polish (micro-interações globais) |
1-2 |
1-2 dias |
| 6 |
Otimização (performance, responsividade) |
1-2 |
1-2 dias |
| 7 |
Testes (validação e ajustes) |
1 |
1-2 dias |
Total estimado: 12-20 prompts em 14-21 dias
Preservação de Conteúdo
A skill garante que 100% do conteúdo existente seja preservado:
- ✅ Todos os textos e títulos
- ✅ Todas as imagens e ícones
- ✅ Todas as métricas e números
- ✅ Todos os depoimentos
- ✅ Todos os CTAs e links
- ✅ Toda a estrutura de navegação
Apenas a experiência muda, não o conteúdo.
Recursos Inclusos
A skill inclui templates e referências reutilizáveis:
templates/site-analysis-template.md - Formulário para coletar informações do sitereferences/ux-premium-techniques.md - Guia detalhado de cada técnica (quando usar, como implementar)references/prompt-generation-workflow.md - Workflow para gerar prompts (padrões e exemplos)
Consulte estes arquivos conforme necessário durante o processo.
Exemplo de Uso
Entrada:
- URL: https://exemplo.com.br
- Stack: React + Vite + TypeScript + Tailwind
- Objetivo: Gerar leads
- Seções: Hero, 3 soluções, resultados, pricing, FAQ
Saída:
- Análise de 6 seções
- Mapeamento para 8 técnicas de UX premium
- 12 prompts organizados em 6 fases
- Cronograma de 16-18 dias
- Métricas de sucesso definidas
Próximo passo:
- Copiar Prompt 1 e colar no Lovable.dev
- Validar output
- Continuar com Prompt 2, 3, etc
Dicas para Melhor Resultado
- Forneça captura completa - Se possível, PDF ou screenshot de toda a página
- Descreva o objetivo - Quanto mais claro o objetivo, melhor o plano
- Mencione stack atual - Facilita recomendações técnicas
- Implemente sequencialmente - Não tente fazer tudo de uma vez
- Valide após cada fase - Ajuste conforme necessário
- Acompanhe métricas - Rastreie scroll depth, conversão, performance
- Itere baseado em feedback - Usuários reais darão insights valiosos
Limitações e Considerações
- A skill assume que o conteúdo atual é válido e bem estruturado
- Não faz recomendações sobre mudanças de conteúdo ou estratégia
- Foca em experiência (UX), não em conversão (CRO) diretamente
- Performance final depende da implementação correta dos prompts
- Requer conhecimento técnico para executar os prompts no Lovable.dev
Próximas Etapas Após Usar Esta Skill
- Receber plano de implementação com prompts
- Usar prompts no Lovable.dev para gerar código
- Testar em dispositivos reais
- Coletar métricas (scroll depth, conversão, performance)
- Iterar baseado em dados reais
- Documentar aprendizados para futuras implementações
1---2name: ux-premium-audit3description: Auditar e planejar transformação de UX premium para qualquer site. Use para analisar páginas existentes, mapear conteúdo para técnicas de UX premium (progressive disclosure, scroll-driven storytelling, micro-interações), e gerar planos prompt-a-prompt prontos para implementação no Lovable.dev.4---56# UX Premium Audit - Transformação de Experiência78Esta skill fornece um workflow estruturado para transformar qualquer site em uma experiência premium interativa, mantendo 100% do conteúdo existente e aplicando apenas técnicas de UX.910## Workflow Principal1112O processo segue 4 etapas principais:13141. **Análise do Site** - Coletar informações sobre a página atual152. **Mapeamento de Seções** - Mapear conteúdo para técnicas de UX premium163. **Geração de Plano** - Criar estrutura de fases e prompts174. **Entrega de Prompts** - Gerar prompts prontos para Lovable.dev1819## Como Usar Esta Skill2021### Etapa 1: Fornecer Informações do Site2223Quando solicitado, forneça:24- **URL do site** ou captura de tela (PDF/imagem)25- **Stack técnico atual** (React, Next.js, WordPress, etc)26- **Objetivo principal** (gerar leads, vender, educar, engajar)27- **Hospedagem e CMS** (Vercel, AWS, Supabase, etc)2829### Etapa 2: Análise Automática3031Manus irá:32- Analisar a estrutura de seções do site33- Identificar conteúdo a preservar (textos, imagens, métricas, depoimentos)34- Mapear cada seção para técnicas de UX premium apropriadas35- Documentar oportunidades de transformação3637### Etapa 3: Geração do Plano3839Manus criará um documento com:40- **Mapeamento:** Seção → Técnica de UX → Prompts necessários41- **Fases:** Organização em 4-7 fases de implementação42- **Prompts:** 8-15 prompts específicos e prontos para usar43- **Cronograma:** Estimativa de tempo por fase44- **Métricas:** Objetivos de sucesso (scroll depth, conversão, performance)4546### Etapa 4: Usar os Prompts4748Copie cada prompt gerado e cole no Lovable.dev. Cada prompt é:49- **Específico:** Direcionado para uma seção ou funcionalidade50- **Contextualizado:** Inclui informações sobre o que foi feito antes51- **Detalhado:** Requisitos técnicos, conteúdo a preservar, responsividade52- **Pronto:** Pode ser usado imediatamente sem modificações5354## Técnicas de UX Premium Disponíveis5556A skill aplica 8 técnicas principais (consulte `references/ux-premium-techniques.md` para detalhes):57581. **Progressive Disclosure** - Revelar conteúdo sequencialmente592. **Scroll-Driven Storytelling** - Narrativa guiada pelo scroll603. **Micro-interações** - Animações funcionais em elementos interativos614. **Contadores Animados** - Números que animam de 0 até valor final625. **Carrosséis Interativos** - Componentes com drag e auto-play636. **Split-Screen Animado** - Layout com dois lados conectados visualmente647. **Sticky Scroll** - Elemento fixo enquanto conteúdo muda658. **Design Conversacional** - Interface que simula diálogo (Typebot-style)6667## Stack Recomendado6869Para melhor resultado, a implementação deve usar:70- **Frontend:** React + Vite + TypeScript71- **Estilização:** Tailwind CSS72- **Animações:** Framer Motion73- **Detecção de Scroll:** Intersection Observer API74- **Backend:** Supabase ou similar para dados dinâmicos7576A skill é agnóstica de stack, mas otimizada para React/Framer Motion.7778## Estrutura de Fases Padrão7980A maioria dos planos segue este padrão:8182| Fase | Objetivo | Prompts | Duração |83|------|----------|---------|---------|84| **1** | Preparação (estrutura + animações) | 1-2 | 2-3 dias |85| **2** | Seções críticas (hero, pricing) | 2-3 | 2-3 dias |86| **3** | Seções principais (features, resultados) | 2-4 | 3-4 dias |87| **4** | Seções secundárias (depoimentos, FAQ) | 2-3 | 2-3 dias |88| **5** | Polish (micro-interações globais) | 1-2 | 1-2 dias |89| **6** | Otimização (performance, responsividade) | 1-2 | 1-2 dias |90| **7** | Testes (validação e ajustes) | 1 | 1-2 dias |9192**Total estimado:** 12-20 prompts em 14-21 dias9394## Preservação de Conteúdo9596A skill garante que **100% do conteúdo existente seja preservado**:97- ✅ Todos os textos e títulos98- ✅ Todas as imagens e ícones99- ✅ Todas as métricas e números100- ✅ Todos os depoimentos101- ✅ Todos os CTAs e links102- ✅ Toda a estrutura de navegação103104**Apenas a experiência muda**, não o conteúdo.105106## Recursos Inclusos107108A skill inclui templates e referências reutilizáveis:109110- **`templates/site-analysis-template.md`** - Formulário para coletar informações do site111- **`references/ux-premium-techniques.md`** - Guia detalhado de cada técnica (quando usar, como implementar)112- **`references/prompt-generation-workflow.md`** - Workflow para gerar prompts (padrões e exemplos)113114Consulte estes arquivos conforme necessário durante o processo.115116## Exemplo de Uso117118**Entrada:**119- URL: https://exemplo.com.br120- Stack: React + Vite + TypeScript + Tailwind121- Objetivo: Gerar leads122- Seções: Hero, 3 soluções, resultados, pricing, FAQ123124**Saída:**125- Análise de 6 seções126- Mapeamento para 8 técnicas de UX premium127- 12 prompts organizados em 6 fases128- Cronograma de 16-18 dias129- Métricas de sucesso definidas130131**Próximo passo:**132- Copiar Prompt 1 e colar no Lovable.dev133- Validar output134- Continuar com Prompt 2, 3, etc135136## Dicas para Melhor Resultado1371381. **Forneça captura completa** - Se possível, PDF ou screenshot de toda a página1392. **Descreva o objetivo** - Quanto mais claro o objetivo, melhor o plano1403. **Mencione stack atual** - Facilita recomendações técnicas1414. **Implemente sequencialmente** - Não tente fazer tudo de uma vez1425. **Valide após cada fase** - Ajuste conforme necessário1436. **Acompanhe métricas** - Rastreie scroll depth, conversão, performance1447. **Itere baseado em feedback** - Usuários reais darão insights valiosos145146## Limitações e Considerações147148- A skill assume que o conteúdo atual é válido e bem estruturado149- Não faz recomendações sobre mudanças de conteúdo ou estratégia150- Foca em experiência (UX), não em conversão (CRO) diretamente151- Performance final depende da implementação correta dos prompts152- Requer conhecimento técnico para executar os prompts no Lovable.dev153154## Próximas Etapas Após Usar Esta Skill1551561. Receber plano de implementação com prompts1572. Usar prompts no Lovable.dev para gerar código1583. Testar em dispositivos reais1594. Coletar métricas (scroll depth, conversão, performance)1605. Iterar baseado em dados reais1616. Documentar aprendizados para futuras implementações
taleshagn-horushub