cerebro-vip INEMA.CLUB
início › INEMA.PROMPTS

Apresentação e documentação do framework **MegaPrompt AntiGravity**,…

INEMA.PROMPTS · 2026-01-24 · ~12 min · ver no Telegram ↗

INEMA

Perfeito. Execução concluída usando o MegaPromptPro AntiGravity conforme o documento base . Abaixo está a entrega completa, na ordem obrigatória.

1️⃣ PROMPT FINAL PROFISSIONAL (principal)⌗

```Você é um designer e front-end sênior, especialista em UI/UX moderno, performance, acessibilidade e design systems.

Crie uma interface de DASHBOARD para o público geral, com foco em FACILITAR O USO e transmitir sensação PREMIUM, inspirada na clareza e no refinamento visual da Apple.

Pattern & Layout⌗

  • Tipo: Dashboard / Analytics
  • Estrutura:
  • Top bar fixa com logo, título do produto e ações principais
  • Área principal em Bento Grid
  • Cards KPI no topo (3–5)
  • Gráficos simples e legíveis (linha, barra)
  • Tabela resumida com ações rápidas
  • Hierarquia clara, foco em leitura rápida e tomada de decisão

Style & Aesthetic⌗

  • Estilo: Minimalist Luxury
  • Visual limpo, muito espaço em branco
  • Bordas suaves, sombras discretas
  • Nada chamativo ou experimental

Color & Theme⌗

  • Paleta: Luxury & Premium
  • --primary: #1C1917
  • --cta: #CA8A04
  • --bg: #FAFAF9
  • --text: #292524
  • --accent: #78716C
  • Aplicar regra 60–30–10
  • Contraste WCAG AA garantido
  • Uso semântico de cores (success, warning, error)

Typography⌗

  • Pairing: Elegant/Luxury
  • Headings: Playfair Display
  • Body: Montserrat
  • Hierarquia clara:
  • H1: título da visão geral
  • H2: seções
  • Body: dados e descrições
  • Máximo de 2 famílias tipográficas

Animations & Interactions⌗

  • Animações sutis e rápidas:
  • Hover lift leve em cards (200ms)
  • Botões com feedback visual claro
  • Transições suaves de estado (opacity/transform)
  • Nada decorativo ou chamativo
  • Respeitar prefers-reduced-motion

Regras e Restrições⌗

  • Priorizar simplicidade e facilidade de uso
  • Não misturar estilos visuais
  • Não usar animações longas
  • Performance e acessibilidade acima de estética
  • Interface deve funcionar bem para usuários leigos```

2️⃣ Justificativa resumida das decisões⌗

  • Dashboard / Bento Grid: facilita escaneabilidade e compreensão rápida para público geral.
  • Minimalist Luxury: alinhado à referência Apple, transmite premium sem poluição visual.
  • Paleta Luxury & Premium: reforça sofisticação e confiança.
  • Tipografia elegante: sensação refinada, mas com boa legibilidade.
  • Animações mínimas: ajudam no feedback sem distrair nem confundir.

Escolhas sempre penderam para clareza e simplicidade, conforme a Regra de Ouro do método.

3️⃣ Estrutura da interface⌗

Seções principais⌗

  1. Top Bar
  • Logo
  • Nome do dashboard
  • Ação principal (CTA discreto)
  1. Resumo (KPI Cards)
  • 3–5 métricas principais
  • Números grandes, rótulos claros
  1. Área Analítica
  • Gráfico principal (linha ou barras)
  • Gráfico secundário (comparativo simples)
  1. Tabela Resumida
  • Dados essenciais
  • Ações rápidas (ver detalhes, filtrar)
  1. Feedback e Estados
  • Loading com skeleton
  • Estados vazios claros e amigáveis

exemplo

Então eu atualizei o arquivo Markdown no canvas e agora ele contém:

  • Lista de Patterns & Layout (SaaS, Micro SaaS, Landing, Dashboard, Fintech, E-commerce, Portfolio)
  • Lista de Styles (Linear/Vercel, Bento, Glass, Aurora, Soft UI, Luxury, Brutalism)
  • Paletas completas com tokens (Trust, Vibrant, Luxury, Wellness, Creative, Dark Mode)
  • Pairings de tipografia (Inter, Poppins, Playfair, etc.)
  • Kit de animações/interações (com regras de performance e acessibilidade)
  • Regras de seleção (como a IA escolhe com base nas respostas)

Ou seja: agora o MegaPromptPro tem “tudo em um só” e a IA “sabe” exatamente de onde tirar as escolhas.

Se você quiser, eu também posso adicionar mais 2 camadas (opcional, mas deixa ainda mais poderoso):

  1. Mapa de decisão (ex.: “sensação = premium → estilo = minimalist luxury + paleta luxury…”)
  2. Exemplos de saída (1 SaaS, 1 landing, 1 dashboard) para servir de referência.

voce carrega o MegaPrompt junto

A ideia é: 👉 você responde 5 perguntas simples 👉 a IA transforma isso automaticamente em um prompt AntiGravity completo.

🧠 PROMPT ULTRA LEIGO (5 PERGUNTAS)⌗

👉 Você só responde as perguntas. Não precisa saber design.

Copie e cole isso 👇

```Quero criar uma interface usando o método MegaPrompt AntiGravity.

Vou responder apenas 5 perguntas simples. Com base nelas, gere o PROMPT FINAL COMPLETO (escolhendo Pattern, Estilo, Cores, Tipografia e Animações).

Perguntas:

  1. O que é o produto? (ex: site institucional, app, SaaS, landing page, dashboard)

  2. Para quem é? (ex: pequenas empresas, jovens, designers, médicos, público geral)

  3. O que essa interface precisa fazer? (ex: vender, explicar, gerar leads, facilitar uso, passar confiança)

  4. Como a pessoa deve se sentir ao usar? (escolha até 3: moderno, simples, confiável, premium, divertido, rápido, seguro)

  5. Cite 1 ou 2 referências que você gosta (ex: Apple, Stripe, Linear, Instagram, Nubank — opcional)

Regras: - Você escolhe todas as dimensões do MegaPrompt AntiGravity - Use apenas 1 estilo principal - Priorize clareza, performance e acessibilidade - Evite exageros visuais - Se houver dúvida, escolha a opção mais simples e funcional

Entrega: 1. Mostre o PROMPT FINAL pronto para uso 2. Explique brevemente as escolhas 3. Liste os principais componentes da interface```

🔥 O QUE ACONTECE DEPOIS⌗

Você faz isso:⌗

```1. O que é o produto? → Landing page

  1. Para quem é? → Profissionais autônomos

  2. O que precisa fazer? → Gerar contatos

  3. Como deve se sentir? → Moderna, confiável, simples

  4. Referências? → Stripe```

A IA faz isso:⌗

  • escolhe layout correto
  • escolhe estilo visual
  • define cores e fontes
  • define animações certas
  • gera 1 prompt profissional, pronto para colar em qualquer IA

🎯 VANTAGEM DESSE MODELO⌗

  • Funciona com clientes leigos
  • Funciona pra você quando está com pressa
  • Evita decisões erradas
  • Escala fácil (time, freelancers, agências)

É literalmente um tradutor de ideia → design profissional.

Você não precisa saber escolher as dimensões.

O MegaPrompt AntiGravity não é um teste, é um tradutor do que você tem na cabeça.

Vou te mostrar como pedir mesmo sem saber nada de UI 👇

🧠 O truque: descreva o RESULTADO, não o DESIGN⌗

Se você sabe:

  • o que é o produto
  • pra quem é
  • que sensação ele deve passar

👉 isso já é suficiente.

A IA escolhe as dimensões por você.

✅ O JEITO MAIS SIMPLES DE PEDIR (sem escolher nada)⌗

Copie e cole isso:

```Você é um designer e front-end sênior.

Tenho um produto com as seguintes características:

  • Tipo de produto: [SaaS / app / site / dashboard / landing]
  • Público-alvo: [quem vai usar]
  • Objetivo principal: [converter / explicar / vender / reter]
  • Sensação desejada: [ex: moderno, confiável, premium, simples]
  • Referências (opcional): [ex: Linear, Stripe, Apple]

Com base no framework AntiGravity: - Escolha o Pattern & Layout ideal - Escolha o Style & Aesthetic mais adequado - Defina Color & Theme - Defina Typography - Defina Animations & Interactions

Depois: 1. Explique rapidamente por que escolheu cada dimensão 2. Descreva a estrutura da interface 3. Liste os principais componentes 4. Aplique boas práticas de UX, performance e acessibilidade```

👉 Pronto. Isso funciona mesmo se você não souber nada de design.

🔹 EXEMPLO REAL (usuário que “não sabe design”)⌗

```Você é um designer e front-end sênior.

Tenho um produto com as seguintes características: - Tipo de produto: SaaS - Público-alvo: pequenas empresas - Objetivo principal: facilitar gestão financeira - Sensação desejada: confiável, simples, profissional - Referências: gosto do visual da Stripe

Com base no framework AntiGravity: - Escolha as dimensões ideais - Justifique cada escolha - Crie a interface completa```

➡️ A IA vai:

  • escolher layout de SaaS
  • usar cores de confiança
  • tipografia limpa
  • animações mínimas
  • evitar exageros

🧠 NÍVEL 2 (quando você sabe UM pouco)⌗

Se você só souber uma coisa, diga só ela:

A única coisa que eu quero controlar é: - Estilo: moderno e clean Todo o resto você decide usando AntiGravity.

Ou:

Quero algo premium e elegante. Não quero visual chamativo. Escolha o resto.

Isso já guia tudo.

🎯 Regra importante (salva seu resultado)⌗

Sempre acrescente esta linha:

Se houver dúvida, escolha a opção mais simples e funcional. Não exagere em estilos ou animações.

Isso evita “arte demais”.

🧩 Resumo em 3 linhas⌗

  • ❌ Você não precisa saber design
  • ✅ Descreva objetivo + sensação
  • ✅ Deixe a IA mapear as dimensões

A ideia é: copiar, colar e usar.

🧩 A FORMA CERTA DE PEDIR (MODELO PADRÃO)⌗

Sempre peça em um único prompt, usando esta estrutura fixa 👇

👉 PROMPT BASE (reutilizável)⌗

```Você é um designer e front-end sênior.

Crie uma interface para:

[DESCREVA O PRODUTO EM 1 FRASE]

Siga EXATAMENTE estas diretrizes:

  1. Pattern & Layout: [escolha UM padrão do AntiGravity]

  2. Style & Aesthetic: [escolha UM estilo dominante]

  3. Color & Theme: [escolha UMA paleta ou mood]

  4. Typography: [escolha UM pairing]

  5. Animations & Interactions: [escolha 3–5 interações no máximo]

Restrições: - Evitar anti-patterns de UI/UX - Priorizar clareza, performance e acessibilidade - Layout responsivo (mobile-first)

Entrega esperada: - Estrutura da página - Hierarquia visual - Componentes principais - Sugestões de micro-interações```

👉 Esse prompt já é suficiente para 90% dos casos.

🔹 EXEMPLO REAL 1 — SaaS⌗

```Você é um designer e front-end sênior.

Crie uma interface para: Uma plataforma SaaS de gestão de projetos para equipes remotas.

  1. Pattern & Layout: SaaS – Hero + Features + Social Proof + CTA

  2. Style & Aesthetic: Linear / Vercel style, dark mode, minimal

  3. Color & Theme: Dark mode excellence, accent azul

  4. Typography: Inter (headings) + System UI (body)

  5. Animations & Interactions: - Hover lift em cards - CTA com glow sutil - Fade-up staggered on scroll

Restrições: - Nada de animações chamativas - Alto contraste (WCAG AA) - Interface limpa e profissional```

🔹 EXEMPLO REAL 2 — Landing Page impactante⌗

```Você é um designer e front-end sênior.

Crie uma landing page para: Um micro SaaS de geração de sites com IA.

  1. Pattern & Layout: Micro SaaS – Centered hero + live demo + single CTA

  2. Style & Aesthetic: Aurora UI + Gradient Mesh

  3. Color & Theme: Vibrant & modern (indigo, emerald, amber)

  4. Typography: Poppins (headings) + Open Sans (body)

  5. Animations & Interactions: - Parallax sutil no hero - CTA com glow - Cards com hover lift - Reveal on scroll

Restrições: - Evitar excesso visual - Performance primeiro - Mobile-first```

🔹 EXEMPLO REAL 3 — Dashboard⌗

```Você é um designer e front-end sênior.

Crie um dashboard para: Uma plataforma de analytics para e-commerce.

  1. Pattern & Layout: Analytics dashboard – Bento Grid + actionable insights

  2. Style & Aesthetic: Bento Grid + Linear style

  3. Color & Theme: Dark mode, semantic colors

  4. Typography: Inter + JetBrains Mono

  5. Animations & Interactions: - Hover imediato em cards - Sem parallax - Feedback visual instantâneo

Restrições: - Clareza > beleza - Nada que atrapalhe leitura```

🧠 DICA DE OURO (isso muda tudo)⌗

Se quiser resultado ainda melhor, adicione esta linha no final:

Não invente estilos fora do que foi pedido. Se algo não estiver especificado, escolha a opção mais simples e funcional.

Isso freia a IA e evita bagunça.

🎯 Resumo mental rápido⌗

  • ❌ Não cole o framework inteiro
  • ✅ Escolha 1 opção por dimensão
  • ✅ 1 prompt = 1 projeto
  • ✅ Clareza > quantidade
  • ✅ Restrições são suas aliadas

🧠 A regra de ouro do MegaPrompt AntiGravity⌗

👉 Você SEMPRE faz 1 pedido só, 👉 mas escolhe apenas as partes que fazem sentido para aquele projeto.

O erro comum é achar que tem que “ativar tudo”. Não precisa (e nem deve).

✅ Como você usa na prática (modelo mental)⌗

Pense assim:

  • O framework completo fica guardado (referência)
  • Para cada projeto, você monta um prompt sob medida

  • Esse prompt usa:

  • as 5 dimensões

  • mas com escolhas específicas, não tudo

🧩 Estrutura ideal de um prompt real⌗

Sempre use essas 5 linhas (fixas):⌗

1. Pattern & Layout: 2. Style & Aesthetic: 3. Color & Theme: 4. Typography: 5. Animations & Interactions:

E dentro de cada uma, você escolhe 1 opção, no máximo 2.⌗

🔹 Exemplo 1 — SaaS simples (rápido)⌗

```Pattern & Layout: SaaS – Hero + Features + Social Proof + CTA

Style & Aesthetic: Linear / Vercel style, minimal, dark mode

Color & Theme: Dark mode excellence, blue accent

Typography: Inter (headings) + System UI (body)

Animations & Interactions: Subtle hover, lift on cards, fade-up on scroll```

➡️ Pronto. Isso já gera algo muito bom.

🔹 Exemplo 2 — Landing page impactante (marketing)⌗

```Pattern & Layout: Micro SaaS – Centered hero + live demo + single CTA

Style & Aesthetic: Aurora UI + Gradient Mesh

Color & Theme: Vibrant & modern (indigo, emerald, amber)

Typography: Poppins (headings) + Open Sans (body)

Animations & Interactions: Glow CTAs, parallax hero, staggered scroll reveal```

➡️ Aqui você ativa mais emoção e impacto visual.

🔹 Exemplo 3 — Dashboard profissional⌗

```Pattern & Layout: Analytics dashboard – Bento Grid + actionable insights

Style & Aesthetic: Bento Grid + Linear style

Color & Theme: Dark mode, high contrast, semantic colors

Typography: Inter + JetBrains Mono (metrics)

Animations & Interactions: Instant hover feedback, no heavy scroll animations```

➡️ Visual limpo, foco em clareza.

🚫 O que NÃO fazer⌗

❌ Não pedir:

“Use Glassmorphism, Aurora, Bento, Brutalismo e Neumorphism”

Isso confunde a IA e gera lixo visual.

🎯 Forma correta de pensar⌗

  • 1 projeto = 1 prompt
  • 1 estilo dominante
  • 1 padrão de layout
  • animações só onde agregam
  • o framework existe para te ajudar a escolher, não para ser colado inteiro

🧠 Analogia rápida⌗

  • MegaPrompt AntiGravity ≠ receita pronta
  • MegaPrompt AntiGravity = cardápio de chef
  • Você monta o prato conforme o cliente 🍽️

🧠 O que é este conteúdo?⌗

É um framework completo para criar sites bonitos, modernos e performáticos usando IA, chamado MegaPrompt AntiGravity.

Ele ensina como pedir (prompts) para agentes de IA criarem interfaces de alto nível profissional, indo muito além de “crie um site bonito”.

🧱 A Base do Método (5 Dimensões)⌗

O conteúdo propõe que todo pedido de UI para IA seja estruturado em 5 dimensões essenciais:

1️⃣ Padrão & Layout (Skeleton)⌗

Define como a página é estruturada, dependendo do tipo de produto:

  • SaaS
  • Micro SaaS
  • E-commerce de luxo
  • Fintech / Crypto
  • Dashboards
  • Portfólios

👉 Foco em conversão, clareza e fluxo correto de informação.

2️⃣ Estilo & Estética (Skin)⌗

Lista estilos visuais modernos e de alto impacto, como:

  • Glassmorphism
  • Aurora UI
  • Bento Grid
  • Linear / Vercel style
  • Neumorphism 2.0
  • Liquid Glass
  • Brutalismo, Y2K, Cyberpunk, etc.

👉 Cada estilo vem com quando usar, como usar e quando evitar.

3️⃣ Cores & Tema (Palette)⌗

Mostra como escolher cores com base em emoção e contexto:

  • Confiança (finanças, saúde)
  • Moderno e vibrante (startups)
  • Luxo e premium
  • Bem-estar
  • Criativo e divertido
  • Dark mode bem feito

Inclui:

  • Paletas prontas
  • Boas práticas (60-30-10, WCAG)
  • Erros comuns de acessibilidade

4️⃣ Tipografia (Voice)⌗

Ensina a combinar fontes de forma estratégica, de acordo com a personalidade da marca:

  • Tech / SaaS
  • Luxo
  • Apps amigáveis
  • Brutalista
  • Editorial

👉 Define fontes, pesos e sensação transmitida.

5️⃣ Animações & Interações (Soul)⌗

É o diferencial “Pro Max”:

  • Micro-interações (botões, cards, inputs)
  • Animações de scroll
  • Parallax sutil
  • Page transitions
  • Modais animados
  • Loaders e skeletons
  • Efeitos avançados (glow, beams, mesh gradients)

Tudo com:

  • Tempos corretos
  • Boas práticas de performance
  • Respeito a acessibilidade (prefers-reduced-motion)

🚫 O que NÃO fazer (Anti-Patterns)⌗

Uma parte forte do conteúdo lista erros clássicos de UI/UX, como:

  • Animações exageradas
  • Baixo contraste
  • Layout poluído
  • Navegação confusa
  • Experiência ruim no mobile
  • Problemas de performance
  • Falhas graves de acessibilidade

👉 Isso ajuda a IA não cometer erros comuns.

🔌 Integração Técnica (Vercel MCP)⌗

No final, mostra como:

  • Conectar a IA ao Vercel via MCP
  • Permitir que agentes entendam deploys, performance e infraestrutura
  • Usar isso para melhorar decisões de UI com dados reais

🎯 Em resumo, o objetivo final⌗

Transformar a IA em um designer + dev sênior, que:

  • entende layout
  • respeita design systems
  • cria interfaces lindas
  • mantém performance
  • é acessível
  • e entrega resultado real

MegaPrompt Antigravity 5 Dimensões

chatgpt.com ↗

1

Recursos

↑ voltar ao topo · ver no Telegram ↗