Curadoria completa de um framework de vibecoding para criar sites…
INEMA
Aqui vão os HACKS REAIS que ele usa (e que fazem toda a diferença). Não é teoria — são atalhos práticos pra ganhar velocidade, qualidade e conversão.
🔥 HACK 1 — Nunca pedir “o site perfeito”⌗
Erro comum:
“Crie um site perfeito, bonito e profissional”
Hack: 👉 Peça só 80% bom no começo.
Por quê?
- IA fica mais rápida
- Menos ruído
- AntiGravity melhora depois
🧠 Frase mental dele: “Primeiro bonito. Depois correto.”
🔥 HACK 2 — Um prompt = uma tarefa⌗
Nunca misture pedidos.
❌ Ruim:
“Melhore o design, crie login, faça SEO e deploy”
✅ Bom:
“Audite UI/UX e me entregue um checklist”
📌 Isso evita context rot e bugs silenciosos.
🔥 HACK 3 — Reiniciar o chat = mais inteligência⌗
Quando o projeto cresce:
- Abra um novo chat
- Cole só o necessário
- Continue
🧠 IA tem janela de contexto — quanto mais longa, pior a performance.
🔥 HACK 4 — UI Sniping (roubar sem copiar)⌗
Ele não copia sites inteiros.
Hack real:
- Vai no CodePen / 21st.dev
- Escolhe um microcomponente (botão, card, hover)
- Cola no AntiGravity
- Diz onde encaixar
🎯 Resultado: design nível premium sem designer.
🔥 HACK 5 — Extrair HTML de sites reais⌗
Para sites muito bons:
- Copie a URL
- Use “view page source” / HTML extractor
- Jogue no AI Studio
- Peça:
“Recrie inspirado neste HTML”
⚠️ Regra: inspirar, não copiar
🔥 HACK 6 — Moodboard numerado (IA entende melhor)⌗
Em vez de explicar muito:
- Print da referência
- Número grande em cima
-
Texto simples:
-
“1 = hero”
- “2 = pricing”
- “3 = testimonials”
📌 IA entende visual melhor que texto longo.
🔥 HACK 7 — Design em 5 dimensões (sempre)⌗
Ele SEMPRE pensa assim:
- Layout
- Estilo
- Cores
- Tipografia
- Animações
Se faltar 1 → site fica “ok”, não premium.
🔥 HACK 8 — AntiGravity = engenheiro, não artista⌗
- Google AI Studio → impacto visual
- AntiGravity → engenharia de produto
Nunca inverta isso.
🔥 HACK 9 — Falar com backend em português simples⌗
Não pense em banco de dados.
❌ Ruim:
“Crie tabelas normalizadas”
✅ Bom:
“Salve o nome, site e meta do usuário e mantenha após refresh”
O MCP traduz pra SQL.
🔥 HACK 10 — Desligar confirmação de email no Supabase (DEV)⌗
Durante testes:
- Desative confirmação de email
- Teste rápido
- Reative em produção
⏱️ Economiza MUITO tempo.
🔥 HACK 11 — Commit cedo, commit sempre⌗
Depois de cada grande melhoria:
- Commit no GitHub
- Push
Se algo quebrar → rollback em segundos.
🔥 HACK 12 — Deixar o AntiGravity “pensar sozinho”⌗
Prompt poderoso:
Improve this section following all best practices
from the installed UI/UX skill.
Do not ask questions. Just do it.
📌 Remove fricção e acelera.
🔥 HACK 13 — Microanimações > animações grandes⌗
- Hover
- Fade
- Lift
- Glow
Nunca:
- Animações longas
- Efeitos que bloqueiam ação
💡 Conversão > show-off.
🔥 HACK 14 — Testar conversão antes do login⌗
Antes de backend:
- CTA claro
- Oferta clara
- Headline forte
Se não converte sem login, login não salva.
🔥 HACK 15 — Pensar como produto, não site⌗
Pergunta que ele sempre faz:
“O que o usuário salva aqui?”
Se não tem resposta → adicione dashboard, checklist, score, histórico.
🧠 META-HACK FINAL⌗
IA não substitui sistema. IA amplifica sistema.
Quem só pede “faça” → site médio Quem dá sequência certa → site $10k+
Analytics - Speed Insights
Integrate them into the project and deploy the updates.
🧩 O segredo real (importante)⌗
** Ele s**empre:
*** Dá 1 tarefa por prompt * Usa verbos claros: audit, improve, install, add, remove * Nunca mistura design + backend no mesmo pedido * Recomeça chats quando o contexto fica grande
Não é “um prompt mágico único”, e sim uma sequência de prompts, cada um com um objetivo claro. A força está na ordem + na clareza.
Abaixo estão os principais prompts (ou equivalentes fiéis), organizados na mesma ordem , já prontos para copiar/adaptar 👇
🧠 PROMPT 1 — Criar o design inicial (Google AI Studio)⌗
👉 Objetivo: gerar o front-end visual (80%)
```I am building a modern SaaS website.
Use this structure: - Pattern & Layout: Hero + Features + Social Proof + CTA - Style & Aesthetic: Bento Grid, modern, clean, high-end, subtle glow - Color Theme: Dark mode with blue accents (Linear / Vercel style) - Typography: Inter for headings and body - Animations & Interactions: - Scroll reveal animations - Subtle hover effects on cards and buttons - Smooth transitions
The website should feel: - Premium - Conversion-focused - Clean and scalable
Generate a responsive, animated landing page.```
📌 Ele não pede perfeição, só algo “bonito o suficiente” para refinar depois.
🧠 PROMPT 2 — Refinar com AntiGravity (auditoria completa)⌗
👉 Objetivo: transformar o site em nível profissional
```Using the installed UI/UX Pro Max skill:
Please audit and improve this entire website according to: - UI best practices - UX clarity and accessibility - SEO optimization - Performance improvements - Consistent spacing, typography, and color usage
Apply all relevant rules from the skill.
After finishing, provide a clear checklist of: - What was changed - Why it improves UX, SEO, or conversion```
📌 Esse prompt dispara 50+ melhorias automáticas.
🧠 PROMPT 3 — Instalar a skill (quando necessário)⌗
👉 Objetivo: adicionar a skill ao projeto
```This GitHub repository contains a complete UI/UX design system.
Please install this repository as an AntiGravity skill and make it available to this project.```
🧠 PROMPT 4 — “UI Sniping” (importar componentes prontos)⌗
👉 Objetivo: copiar animações e componentes premium de outros lugares
```Please add the following UI component to this website.
Requirements: - Place it below the testimonials section - Match the existing design system - Keep animations smooth and performant - Ensure responsiveness on mobile
Here is the component code: [PASTE CODE OR COMPONENT PROMPT HERE]```
📌 Ele faz isso com botões, cards, sliders, animações etc.
🧠 PROMPT 5 — Ajustes finos de layout e conteúdo⌗
👉 Objetivo: polir conversão e narrativa
```Please improve this section:
- Remove the current CTA in the bottom right
- Place the animated button in a more logical conversion point
- Add a short headline above the animated cards that reinforces value
- Ensure visual hierarchy and spacing feel premium```
🧠 PROMPT 6 — Criar login + backend (Supabase via MCP)⌗
👉 Objetivo: tornar o site full stack
```Using the Supabase MCP:
Please do the following: - Create a signup and login flow with email and password - Collect: name, email, website - Create a user dashboard in the same design style - Dashboard fields: - Goal - Monthly income - Active clients - Persist all data in Supabase - Ensure data is retained after refresh
Confirm when complete.```
🧠 PROMPT 7 — Segurança (RLS)⌗
👉 Objetivo: proteger dados dos usuários
Enable Row Level Security (RLS) on all Supabase tables
so users can only access and modify their own data.
🧠 PROMPT 8 — Preparar para deploy⌗
👉 Objetivo: evitar erro em produção
```Please review the project and ensure: - Files are structured correctly - Build will succeed on Vercel - Environment variables are properly referenced
Then commit and push all changes to GitHub.```
🧠 PROMPT 9 — Deploy no Vercel⌗
👉 Objetivo: colocar no ar
```I plan to deploy this project on Vercel.
Please ensure it is fully compatible and ready for deployment.```
(se tiver Vercel MCP conectado, ele faz tudo sozinho)
🧠 PROMPT 10 — Analytics e performance (opcional)⌗
Using the Vercel MCP:
Please enable:
- Web
**Passo a passo completo** (bem prático) do fluxo que ele ensina no vídeo — do zero até o site animado com login e no ar.
## 1) Montar a ideia + referências
* Defina o tipo de site (ex.: SaaS, agência, e-commerce).
* Separe **2–5 referências visuais** (Dribbble, Product Hunt, sites que você curte).
* (Opcional) Monte um **moodboard** (Canva/Figma) e numere: “1 = hero”, “2 = pricing”, etc.
## 2) Criar o “rascunho bonito” no Google AI Studio (80%)
* Abra o **Google AI Studio**.
* Cole um prompt guiado (o framework de 5 dimensões):
* **Layout / pattern** (ex.: Hero + Features + Social Proof + CTA)
* **Estilo** (ex.: Bento Grid, Linear/Vercel, Glassmorphism…)
* **Cores**
* **Tipografia**
* **Animações** (reveal, hover, microinterações)
* Gere a primeira versão do site (front-end) **focando em visual**.
## 3) Levar o projeto para o GitHub
* No AI Studio, use “**Save to GitHub**” (ou exporte e suba manualmente).
* Crie um repositório (ex.: `gorgeous-websites`).
* Confirme que os arquivos do projeto estão no repo.
## 4) Clonar no AntiGravity
* Abra o **AntiGravity**.
* Peça: “Clone este repositório do GitHub: <URL do repo>”.
* Ele baixa o projeto e identifica a stack (React/TS etc.).
## 5) Instalar a skill de UI/UX (UI/UX Pro Max)
* No AntiGravity, adicione a skill do repo (ex.: UI/UX Pro Max).
* Peça algo como:
* “Instale esta skill no projeto e aplique uma auditoria completa de **UI/UX, acessibilidade, SEO e performance**. Depois me entregue um checklist do que mudou.”
## 6) Rodar e revisar o resultado
* Rode localmente (ou use o preview do AntiGravity).
* Revise:
* Responsividade (mobile/desktop)
* Contraste e legibilidade
* CTA e seções (hero, prova social, pricing)
* Microinterações (hover, scroll reveal)
## 7) “UI Sniping” (pegar componentes prontos e inserir)
* Busque componentes em:
* **21st.dev**, **CodePen**, etc.
* Copie o código/prompt do componente (botão, card, animação).
* Cole no AntiGravity e peça:
* “Insira esse componente abaixo de X seção, mantendo o estilo do site.”
## 8) Conectar backend e login com Supabase (via MCP)
* Crie conta no **Supabase**.
* No AntiGravity: **MCP Servers → Supabase → Configure token**.
* Peça em linguagem natural:
* “Crie login/cadastro com email e senha (e campos: nome e site).”
* “Crie um dashboard com campos (meta, renda, nº clientes) e salve no Supabase.”
* “Persistir dados ao atualizar a página.”
## 9) Segurança básica (RLS)
* No Supabase, ative **RLS (Row Level Security)** nas tabelas.
* Garanta que cada usuário só veja/edite seus dados.
## 10) Commit e push para o GitHub
* No AntiGravity:
* “Revise o projeto, rode checagens e faça commit e push para o GitHub.”
## 11) Deploy no Vercel
* Crie conta na **Vercel** e conecte o GitHub.
* Importe o repositório e faça deploy.
* Configure **Environment Variables** (Supabase URL e Key) no Vercel.
## 12) (Opcional) Vercel MCP + Analytics
* Conecte o **Vercel MCP** no AntiGravity (token da Vercel).
* Ative **Web Analytics / Speed Insights** e peça ao AntiGravity para integrar.
---
### Checklist final (pra saber se ficou “padrão $10k”)
* ✅ Hero com proposta clara + CTA forte
* ✅ Animações suaves (não atrapalham)
* ✅ Mobile perfeito
* ✅ SEO básico (titles, meta, headings)
* ✅ Login + dashboard + dados persistidos
* ✅ Deploy + variáveis de ambiente corretas
* ✅ Performance ok (imagens otimizadas)
## 🦄 Resumo – Vibecode com AntiGravity
Como criar **sites lindos, animados, responsivos e com backend completo**, usando **IA + AntiGravity**, **sem precisar programar**.
### 🔑 Ideia central
Não basta usar IA para “gerar sites bonitos”.
👉 **Sem um sistema certo**, você perde semanas criando sites que:
* parecem ruins
* não convertem
* não escalam
Por isso, ele apresenta um **“sistema operacional de design”** que combina:
* **Google AI Studio** (para impacto visual)
* **AntiGravity** (para estrutura, performance e escalabilidade)
---
## 🧠 As duas filosofias de design
### 🎨 Google AI Studio
* Foco em **impacto visual / wow factor**
* Ótimo para criar o **primeiro rascunho (80%)**
* Menos estruturado e menos escalável
### 🧩 AntiGravity
* Foco em **boas práticas**
* Acessibilidade, UX, SEO, performance
* Código limpo, profissional e escalável
👉 **O segredo é usar os dois juntos**
---
## 🧱 O processo completo (do zero ao site no ar)
### 1️⃣ Criar o front-end visual
* Usar **Google AI Studio**
* Aplicar um **prompt de design estruturado** com 5 dimensões:
1. Layout
2. Estilo visual
3. Cores
4. Tipografia
5. Animações e interações
Também usa:
* Inspiração de sites reais (Dribbble, etc.)
* Extração de HTML para recriar componentes (sem copiar, só inspirar)
---
### 2️⃣ Versionar no GitHub
* Salvar o site gerado em um **repositório**
* GitHub funciona como “Dropbox do código”
* Permite reaproveitar projetos e integrar com outras ferramentas
---
### 3️⃣ Refinar com AntiGravity + UI/UX Pro Skill
* Instala a **skill UI/UX Pro Max**
* AntiGravity:
* Faz **50+ melhorias automáticas**
* Ajusta UX, UI, SEO, acessibilidade e performance
* Aplica dezenas de estilos profissionais
* Resultado: site **polido nível designer sênior**
---
### 4️⃣ “UI Sniping” (melhorias cirúrgicas)
* Buscar **componentes prontos** (CodePen, 21st.dev)
* Copiar animações, botões, cards
* Pedir em **linguagem natural** para AntiGravity integrar
👉 Sem mexer no código manualmente
---
### 5️⃣ Criar backend com login (Supabase)
* Conecta o **Supabase via MCP**
* Em português simples, pede:
* Cadastro de usuários
* Login
* Dashboard personalizado
* Dados salvos (objetivos, renda, clientes etc.)
Tudo:
* Persistente
* Seguro (RLS)
* Atualiza em tempo real
---
### 6️⃣ Deploy com Vercel
* Push automático do GitHub
* Deploy em 1 clique
* Ativa:
* Analytics
* Performance
* Variáveis de ambiente
* Pode integrar tudo via **Vercel MCP**
---
## 🚀 Resultado final
Você termina com um site que:
* ✨ É lindo e animado
* 📱 Totalmente responsivo
* 🔐 Tem login e dashboard
* ⚡ Performático e SEO-friendly
* 🧠 Criado quase todo com **comandos em linguagem natural**
---
## 💡 Mensagem final
> **IA sem sistema = caos**
> **IA + sistema = escala, velocidade e conversão**
Quem domina esse fluxo consegue:
* Criar sites premium rapidamente
* Vender projetos de alto valor
* Operar como uma “fábrica de sites com IA”
-
### 📍 Repositório no GitHub
**/ Gorgeous-websites.-** — “Gorgeous websites”
📌 Este é um projeto público no GitHub que apresenta um **aplicativo web moderno com interface bonita, animações e autenticação de usuários**. ([GitHub][1])
🔗 Link principal: [https://github.com/ItsssssJack/Gorgeous-websites.-](https://github.com/ItsssssJack/Gorgeous-websites.-) ([GitHub][1])
🌐 Demo do projeto: **gorgeous-websites.vercel.app** ([GitHub][1])
---
## 💡 O que o projeto oferece
### ✨ Funcionalidades principais
👉 Interface agradável e design moderno com efeitos visuais e animações suaves.
👉 **Efeito de “Card Scanner”** (visualização animada).
👉 **Autenticação de Usuário** usando **Supabase**.
👉 **Dashboard de usuário** para metas, renda e clientes.
👉 Desenvolvido com **React, TypeScript e Vite**.
👉 Otimizado para performance. ([GitHub][1])
---
## 🧠 Tecnologias usadas
O projeto é construído com:
* **React** — biblioteca UI.
* **TypeScript** — tipagem forte.
* **Vite** — ferramenta de build rápida.
* **Framer Motion** — animações.
* **Supabase** — backend e auth.
* **Tailwind CSS** — estilo.
* **Lucide React** — ícones. ([GitHub][1])
---
## 🚀 Como rodar localmente
Para executar o projeto no seu computador:
1. **Clonar o repositório**
``` git clone https://github.com/ItsssssJack/Gorgeous-websites.-.git
cd Gorgeous-websites.-
```
2. **Instalar dependências**
``` npm install
```
3. **Configurar variáveis de ambiente**
Copie `.env.example` para `.env.local` e adicione:
* `VITE_SUPABASE_URL` → URL do Supabase
* `VITE_SUPABASE_ANON_KEY` → Chave anon do Supabase
* `GEMINI_API_KEY` (opcional) → chave da API Gemini
4. **Rodar o servidor de desenvolvimento**
``` npm run dev
```
5. **Build para produção**
``` npm run build
```
➡️ Também há instruções para deploy no Vercel. ([GitHub][1])
---
## 🧩 Estrutura do projeto
O repositório contém pastas como:
* **components**
* **lib**
* **public**
* **services**
* **src**
* Arquivos como: `App.tsx`, `index.tsx`, `package.json`, `vite.config.ts`, etc. ([GitHub][1])
---
## 📌 Licença
O projeto está sob **MIT License** — livre para uso e modificação. ([GitHub][1])
---
[1]: https://github.com/ItsssssJack/Gorgeous-websites.-?utm_source=chatgpt.com "GitHub - ItsssssJack/Gorgeous-websites.-: Gorgeous websites."
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
prefers-reduced-motion media query
- Animate on scroll without throttling
Accessibility Considerations⌗
/* Respect User Preferences */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
🚫 Anti-Patterns: What to AVOID⌗
Tell the agent explicitly what NOT to do:
Design Anti-Patterns⌗
```❌ Flash Over Function - No animations that block user action - No transitions longer than 300ms for interactions - No auto-playing videos with sound - No infinite scroll without pagination option
❌ Low Contrast Crimes - No light grey (#CCC) on white backgrounds - No pure white text on pure black (too harsh) - Ensure WCAG AA minimum (4.5:1 for text) - Test with color blindness simulators
❌ Over-Cluttered Chaos - No more than 3 primary colors - No more than 2 font families - No more than 5 font sizes in a single view - No inconsistent spacing (use 8px grid system)
❌ Mystery Meat Navigation - Icons must have labels or tooltips - No hamburger menus on desktop - No hidden navigation without clear affordance - No "clever" navigation that confuses users
❌ Mobile Hostility - No tiny tap targets (minimum 44x44px) - No horizontal scrolling (unless intentional carousel) - No hover-dependent interactions on touch - No fixed elements that cover content
❌ Performance Sins - No unoptimized images (use WebP, lazy loading) - No render-blocking resources - No layout shifts (CLS > 0.1) - No heavy animations on page load
### UX Anti-Patterns
```❌ Form Frustrations
- No labels inside inputs (accessibility issue)
- No "clear all" without confirmation
- No validation only on submit
- No disabled submit buttons (show errors instead)
❌ Content Crimes
- No walls of text without hierarchy
- No auto-playing carousels (users miss content)
- No "click here" links (not descriptive)
- No Lorem Ipsum in production
❌ Accessibility Failures
- No keyboard navigation traps
- No missing alt text on images
- No color-only information conveyance
- No auto-focus on page load (except search)
Vercel MCP:
- Grab API key here 👉 vercel.com/account/tokens ↗
- Replace "INSERT_VERCEL_API_KEY" with your token.
- Copy and paste the below prompt.
I would like you to add the below Vercel MCP to my MCP config within Antigravity. Please confirm when this is done and that you have access.
"vercel": { "command": "npx", "args": [ "-y", "@robinson_ai_systems/vercel-mcp" ], "env": { "VERCEL_TOKEN": "INSERT_VERCEL_API_KEY" } }
ui/ux skills⌗
ghts: 300 (light), 400 (regular), 700 (bold), 900 (black)
---
---
## ✨ DIMENSION 5: Animations & Interactions
**This is what transforms "good" into "Pro Max". Explicitly request these:**
### Micro-Interactions
### Button Interactions
```css
/* Hover Effects */
- Scale up: transform: scale(1.02)
- Lift: box-shadow elevation + translateY(-2px)
- Ripple: Radial gradient animation from click point
- Glow: Outer glow on hover (box-shadow with color)
- Border beam: Animated gradient border (Linear-style)
/* Timing */
- Duration: 150-300ms
- Easing: cubic-bezier(0.4, 0, 0.2, 1)
Input Focus States⌗
```/ Focus Glow / - Ring: 2-4px outline with brand color at 50% opacity - Glow: Soft box-shadow with brand color - Border shift: Border color change + subtle scale - Label float: Animated label moving up on focus
/ Accessibility / - Always visible focus indicators - Minimum 3px outline width - High contrast (3:1 ratio)
### Card Hover Effects
```/* Premium Card Interactions */
- Lift + Shadow: translateY(-4px) + shadow increase
- Tilt: 3D perspective tilt on hover (subtle, 2-3deg)
- Glow border: Animated gradient border reveal
- Content reveal: Hidden content slides in on hover
- Image zoom: Scale image 1.05x inside container
Scroll Animations⌗
Reveal on Scroll⌗
```// Staggered Entrance - Fade up: opacity 0→1 + translateY(20px→0) - Stagger delay: 100ms between elements - Trigger: When element is 20% in viewport - Duration: 600ms - Easing: ease-out
### Parallax Effects
```// Layered Depth
- Hero background: Scroll speed 0.5x
- Foreground elements: Scroll speed 1.2x
- Subtle only: Max 20-30px movement
- Performance: Use transform, not position
Progress Indicators⌗
```/ Reading Progress / - Top bar: Fixed position, width based on scroll % - Circular: SVG circle with stroke-dashoffset - Smooth: transition: width 100ms linear
---
### Page Transitions
### Route Changes
```/* Smooth Navigation */
- Fade: opacity transition 200ms
- Slide: translateX(-100%→0) 300ms
- Blur: filter: blur(0→10px→0)
- Crossfade: Overlap old/new content
Modal/Dialog Animations⌗
```/ Entrance / - Backdrop: opacity 0→1 (200ms) - Content: scale(0.95→1) + opacity 0→1 (300ms) - Stagger: Backdrop first, then content
/ Exit / - Reverse animation - Faster duration (200ms)
---
### Loading States
### Skeleton Loaders
```/* Content Placeholders */
- Shimmer effect: Linear gradient animation
- Shape matching: Match final content layout
- Color: Light grey (#E5E7EB) on white
- Animation: 1.5s infinite ease-in-out
Spinners & Progress⌗
```/ Loading Indicators / - Spinner: Rotating circle with gradient - Progress bar: Indeterminate animation - Pulse: Scale + opacity animation - Duration: 1-2s infinite
---
### Advanced Effects
### Beams & Glows (Linear/Vercel Style)
```/* Border Beams */
- Animated gradient border
- Conic gradient rotation
- Subtle glow effect
- Use for: CTAs, featured cards, premium elements
/* Implementation */
background: linear-gradient(90deg, transparent, #3B82F6, transparent);
animation: beam 2s infinite;
Mesh Gradients⌗
```/ Animated Backgrounds / - Multi-color gradient mesh - Slow hue rotation (60s+) - Blur for organic feel - Use for: Hero sections, backgrounds
### Glassmorphism Blur
```/* Glass Effect */
backdrop-filter: blur(10px) saturate(180%);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
Animation Performance Rules⌗
✅ DO: - Use transform and opacity (GPU accelerated) - Set will-change for animated elements - Use requestAnimationFrame for JS animations - Debounce scroll events - Prefer CSS animations over JS when possible - Test on low-end devices
❌ DON'T: - Animate width, height, or position - Use animations longer than 500ms for interactions - Animate during user input (blocks interaction) - Use too many simultaneous animations - Forget
op-filter, animated transforms Use When: Creative agencies, modern SaaS, interactive experiences Avoid: Traditional industries, conservative audiences
### Additional High-Impact Styles
- **Brutalism**: Raw, bold, unconventional, high-contrast, geometric
- **Y2K Revival**: Metallic, chrome effects, bold colors, retro-futuristic
- **Claymorphism**: 3D inflated, soft shadows, playful, tactile
- **Gradient Mesh**: Complex multi-color gradients, organic flow
- **Minimalist Luxury**: Maximum white space, serif typography, subtle gold accents
- **Cyberpunk**: Neon colors, glitch effects, tech-noir, high energy
- **Organic/Biomorphic**: Nature-inspired shapes, earth tones, flowing forms
---
## 🎨 DIMENSION 3: Color & Theme
**Specify color moods to set the right emotional tone:**
### Color Psychology & Palettes
### Trust & Professionalism (Finance, Healthcare, Enterprise)
```css
--primary: #0F172A (Navy)
--cta: #0369A1 (Blue)
--background: #F8FAFC (Light Grey)
--text: #1E293B (Slate)
--accent: #3B82F6 (Bright Blue)
Mood: Reliable, secure, established
Vibrant & Modern (Tech Startups, Creative Tools)⌗
```--primary: #6366F1 (Indigo) --cta: #10B981 (Emerald) --background: #FFFFFF (Pure White) --text: #1E293B (Slate) --accent: #F59E0B (Amber)
Mood: Innovative, energetic, forward-thinking
### Luxury & Premium (High-end Products, Fashion)
```--primary: #1C1917 (Stone Dark)
--cta: #CA8A04 (Gold)
--background: #FAFAF9 (Cream)
--text: #292524 (Warm Black)
--accent: #78716C (Taupe)
Mood: Sophisticated, exclusive, timeless
Healthcare/Wellness (Medical, Fitness, Mental Health)⌗
```--primary: #0891B2 (Cyan) --cta: #059669 (Health Green) --background: #FFFFFF (Clean White) --text: #0F172A (Deep Blue) --accent: #06B6D4 (Bright Cyan)
Mood: Calm, trustworthy, clean
### Creative/Playful (Consumer Apps, Entertainment)
```--primary: #EC4899 (Pink)
--cta: #8B5CF6 (Purple)
--background: #FEF3C7 (Warm Cream)
--text: #1F2937 (Charcoal)
--accent: #F59E0B (Orange)
Mood: Fun, approachable, energetic
Dark Mode Excellence⌗
```--background: #0A0A0A (True Black) --surface: #1A1A1A (Card Background) --border: #333333 (Subtle Borders) --text: #FFFFFF (Pure White) --text-secondary: #A3A3A3 (Grey) --accent: #3B82F6 (Blue) or #10B981 (Green)
Technical: Ensure 15:1 contrast ratio for text
---
### Color System Best Practices
```✅ DO:
- Use 60-30-10 rule (60% dominant, 30% secondary, 10% accent)
- Ensure WCAG AA compliance (4.5:1 for text)
- Create semantic color tokens (--color-success, --color-error)
- Test in both light and dark modes
❌ DON'T:
- Use more than 3 primary colors
- Use pure black (#000) on pure white (#FFF) - too harsh
- Rely on color alone for information (accessibility)
- Use low-contrast grey text (#CCC on #FFF)
✍️ DIMENSION 4: Typography⌗
Font pairings create personality. Match fonts to your brand voice:
Strategic Font Pairings⌗
Modern/Tech (SaaS, Developer Tools)⌗
```Headings: Inter (Variable Font) Body: Roboto or System UI Mono: JetBrains Mono (for code)
Personality: Clean, scalable, professional Weights: 400 (regular), 600 (semibold), 700 (bold)
### Elegant/Luxury (Fashion, Premium Services)
```Headings: Playfair Display
Body: Montserrat
Accents: Cormorant Garamond
Personality: Sophisticated, high-contrast, editorial
Weights: 300 (light), 400 (regular), 700 (bold)
Friendly/Consumer (Apps, E-commerce)⌗
```Headings: Poppins Body: Open Sans Alternative: Nunito + Lato
Personality: Approachable, balanced, warm Weights: 400 (regular), 600 (semibold), 800 (extrabold)
### Brutalist/Bold (Creative Agencies, Art)
```Headings: Space Grotesk
Body: JetBrains Mono or IBM Plex Sans
Alternative: Archivo Black + Work Sans
Personality: Raw, technical, unconventional
Weights: 400 (regular), 700 (bold)
Editorial/Content-Heavy (Blogs, News)⌗
Headings: Merriweather Body: Source Sans Pro Alternative: Lora + Raleway
Personality: Readable, trustworthy, classic Wei
backdro
How I build Beautiful $10,000 Websites with AI (AntiGravity)⌗
!image.png
AI-Powered Design Intelligence for Gorgeous, Modern UIs⌗
Purpose: This framework provides a comprehensive template for prompting AI agents to create beautiful, functional, and high-performing user interfaces. Based on the UI/UX Pro Max methodology with 67+ design styles, 95+ color palettes, and proven interaction patterns.
Simply copy and paste your desired sections here 👉 aistudio.google.com/apps ↗
📋 The Complete Design Prompt Template⌗
When requesting a design from an AI agent, structure your prompt using these 5 Core Dimensions:
1. PATTERN & LAYOUT (The Skeleton)⌗
2. STYLE & AESTHETIC (The Skin)⌗
3. COLOR & THEME (The Palette)⌗
4. TYPOGRAPHY (The Voice)⌗
5. ANIMATIONS & INTERACTIONS (The Soul)⌗
🏗️ DIMENSION 1: Pattern & Layout⌗
Don't just say: "Create a landing page"
Instead, specify the functional pattern based on your product type:
Product-Specific Patterns⌗
SaaS (General)⌗
```Pattern: Hero + Features + Social Proof + CTA Focus: Value proposition first, feature showcase second Layout: Full-width hero, 3-column features, testimonial carousel, sticky CTA
### Micro SaaS
```Pattern: Minimal & Direct + Live Demo
Focus: Get straight to product utility, show don't tell
Layout: Centered hero with embedded demo, minimal navigation, single CTA
E-commerce (Luxury)⌗
```Pattern: Feature-Rich Showcase + Immersive Gallery Focus: Large imagery, high-end feel, storytelling Layout: Full-screen hero slider, grid gallery, product details with zoom
### Fintech/Crypto
```Pattern: Conversion-Optimized + Trust Signals
Focus: Clear data visualization, security badges, transparent pricing
Layout: Split hero (visual + form), live stats dashboard, trust indicators
Analytics Dashboard⌗
```Pattern: Bento Grid + Actionable Insights Focus: Data density with clarity, scannable metrics Layout: Modular card system, hierarchical information, quick filters
### Portfolio/Agency
```Pattern: Storytelling + Case Studies
Focus: Visual impact, project showcases, personality
Layout: Full-screen sections, horizontal scroll galleries, immersive transitions
🎨 DIMENSION 2: Style & Aesthetic⌗
Glassmorphism⌗
```Keywords: Frosted glass, transparent layers, blurred background, depth, vibrant backdrop Technical: backdrop-filter: blur(10px), rgba backgrounds, layered cards Use When: Modern apps, dashboards, overlays, modals Avoid: Low-contrast backgrounds, accessibility issues
### Aurora UI
```Keywords: Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous
Technical: Multi-stop gradients, animated hue rotation, glow effects
Use When: Landing pages, hero sections, creative portfolios
Avoid: Text-heavy interfaces, professional/corporate contexts
Soft UI Evolution (Neumorphism 2.0)⌗
```Keywords: Soft shadows, subtle gradients, rounded corners (12-16px), monochromatic, tactile Technical: box-shadow: inset + outset, same-color palette, minimal contrast Use When: Mobile apps, minimalist interfaces, wellness/health apps Avoid: Complex data displays, accessibility-critical applications
### Linear/Vercel Aesthetic
```Keywords: Dark mode, subtle borders (1px), high contrast, minimalist, developer-centric
Technical: #0A0A0A background, #1A1A1A cards, #333 borders, white text
Use When: Developer tools, SaaS platforms, technical products
Avoid: Consumer-facing, playful brands
Bento Grid⌗
```Keywords: Modular, clean, organized, information-dense, modern, structured Technical: CSS Grid, varying card sizes, consistent gaps (16-24px) Use When: Dashboards, feature showcases, content-heavy pages Avoid: Simple single-purpose pages
### Liquid Glass
``` Keywords: Fluid shapes, blurred transparency, organic movement, glossy, dynamic Technical: SVG blobs,
j131) 🦄 vibecode – Sites animados incríveis
O AntiGravity mudou completamente a forma de criar sites bonitos, mas, se você não usar o sistema certo, vai acabar desperdiçando semanas criando sites que parecem ruins e nunca convertem.
Depois de vender sites e sistemas por milhares de dólares para clientes, descobri um novo sistema operacional de design que é:
- ⚡ Mais rápido de construir
- 🎨 Cria sites lindos rapidamente
- 👤 Permite que os usuários criem contas
Assim, você pode transformar visitantes em compradores melhor do que qualquer outra pessoa — mesmo que você nunca tenha programado antes.
🤩 Animações incríveis
Ferramentas⌗
- 🩵 Gemini (AI Studio / Gemini 3): https://aistudio.google.com/
- 🤖 Claude: https://claude.ai/
- 💻 Vercel: https://vercel.com/
- 🧠 Claude Code: https://claude.ai/
- 🧪 Anti-Gravity (Google Antigravity): https://antigravity.google/
- 🎨 Dribbble: https://dribbble.com/
- 🐙 GitHub: https://github.com/
- 🌐 Product Hunt: https://www.producthunt.com/
- 🔍 AnswerThePublic: https://answerthepublic.com/
- 💬 Claude: https://claude.ai/
- 📊 Model Context Protocol (MCP): https://modelcontextprotocol.io/
- 🎨 Nano Banana Pro: https://nanobanana.pro/
Vibecode – Sites animados incríveis (AntiGravity)
O AntiGravity revolucionou a forma de criar sites bonitos. Se você não usar o sistema correto, pode facilmente perder semanas criando sites com aparência ruim e que nunca convertem.
Após MUITOS testes, descobri um novo sistema operacional de design.
- 🔥 Mais rápido de construir
- 🤩 Sites animados incríveis
- 🧑💻 Plugins antigravidade
Vibecode - Sites animados incríveis (AntiGravity)
1