Skill de Sistema de Design — UI/UX Profissional, Espaçamento e Arquitetura Multi-Página
Esta skill impõe padrões de design profissional: paletas de cores adequadas, tipografia, espaçamento entre seções, limites de navegação, páginas detalhadas de serviços/produtos, zero emojis e arquitetura de site multi-página. Stack recomendado: Astro para sites estáticos/de conteúdo, implantado no Cloudflare Pages.
⚠️ OBRIGATÓRIO: Regra de Site Multi-Página
NUNCA crie uma única landing page quando o usuário pedir um site.
Quando o usuário solicitar um site (ex.: "site de agência de marketing", "site de restaurante", "site de empresa"), você DEVE criar um site COMPLETO multi-página com as seguintes páginas no mínimo:
Páginas Padrão do Site (OBRIGATÓRIO)
| Página | Finalidade | Prioridade |
|---|---|---|
| Home | Hero, proposta de valor, seções principais e CTA | Obrigatória |
| Sobre | História da empresa, equipe, missão, valores | Obrigatória |
| Serviços | Página de LISTAGEM de serviços com links para páginas de detalhes | Obrigatória |
| Detalhe do Serviço | Página individual por serviço (ex.: /servicos/web-design) | Obrigatória |
| Contato | Formulário de contato, mapa, telefone, email, horários | Obrigatória |
| Produtos/Portfólio | Página de LISTAGEM de produtos com links para páginas de detalhes | Obrigatória |
Páginas de Serviço — DETALHADAS (NÃO Genéricas)
Cada serviço DEVE ter SUA PRÓPRIA página dedicada. A página de listagem de serviços mostra cards/resumos que linkam para páginas de detalhes individuais.
❌ PROIBIDO:
- /servicos com todos os serviços listados, mas SEM páginas individuais
- Uma única página /servicos genérica com descrições curtas
- Serviços descritos em apenas 2-3 linhas de texto
- Sem preços, processo ou entregáveis por serviço
✅ ESTRUTURA EXIGIDA:
/servicos → Página de listagem (cards com imagem + título + resumo + CTA)
/servicos/web-design → Página de detalhes (descrição, processo, entregáveis, preços, FAQ, CTA)
/servicos/seo → Página de detalhes (descrição, processo, entregáveis, preços, FAQ, CTA)
/servicos/social-media → Página de detalhes (descrição, processo, entregáveis, preços, FAQ, CTA)
Cada página de detalhe de serviço DEVE incluir:
- Descrição: 3-5 parágrafos explicando o serviço
- Processo: Passo a passo (1. Descoberta → 2. Design → 3. Desenvolvimento → 4. Lançamento)
- Entregáveis: O que o cliente recebe
- Faixas de preço ou "A partir de R$X" (ou CTA para orçamento personalizado)
- Seção de FAQ: 3-5 perguntas comuns
- CTA: "Solicitar Orçamento", "Agendar Consultoria", "Iniciar Projeto"
- Depoimentos ou estudos de caso (se disponíveis)
Páginas de Produto — DETALHADAS (NÃO Genéricas)
Cada produto DEVE ter SUA PRÓPRIA página dedicada. A página de listagem de produtos mostra cards que linkam para páginas de detalhes individuais.
❌ PROIBIDO:
- /produtos com uma simples lista ou grade e SEM páginas de detalhes
- Produtos descritos em um único card sem especificações
- Sem preços, características ou imagens por produto
✅ ESTRUTURA EXIGIDA:
/produtos → Página de listagem (cards com imagem + nome + preço resumo + CTA)
/produtos/produto-a → Página de detalhes (galeria, descrição completa, especs, preços, avaliações, relacionados)
/produtos/produto-b → Página de detalhes (galeria, descrição completa, especs, preços, avaliações, relacionados)
Cada página de detalhe de produto DEVE incluir:
- Galeria de imagens: 3-5 imagens do produto
- Descrição completa: Características, especificações, materiais
- Preço: Exibição clara do preço
- CTA: "Adicionar ao Carrinho", "Solicitar Orçamento", "Comprar Agora"
- Seção de produtos relacionados
- Avaliações/depoimentos (se disponíveis)
Páginas Adicionais (Baseadas no Tipo de Negócio)
| Tipo de Negócio | Páginas Adicionais |
|---|---|
| Agência | Portfólio, Estudos de Caso, Equipe, Processo, Preços |
| Restaurante | Cardápio, Reservas, Galeria, Chef/História, Eventos Privados |
| E-commerce | Loja, Detalhe do Produto, Carrinho, Checkout, Conta, Lista de Desejos |
| SaaS | Recursos, Preços, Docs, Blog, Changelog, Status |
| Portfólio | Projetos, Sobre Mim, Currículo, Depoimentos, Contato |
| Imobiliária | Listagens, Detalhe do Imóvel, Corretores, Bairros, Calculadora de Hipoteca |
| Saúde | Serviços, Médicos/Equipe, Agendamentos, Portal do Paciente, Unidades |
| Educação | Programas, Cursos, Corpo Docente, Admissões, Vida no Campus, Calendário |
| Jurídico | Áreas de Atuação, Advogados, Depoimentos, Recursos, Consulta Gratuita |
| ONG | Missão, Programas, Impacto, Envolva-se, Doe, Eventos |
Quando Perguntar Sobre as Páginas
Use AskUserQuestion para confirmar a estrutura de páginas:
AskUserQuestion({
questions: [
{
question: "Quais páginas o site deve incluir?",
header: "Páginas",
options: [
{ label: "Site Completo", description: "Home + Sobre + Serviços + Produtos + Contato (recomendado)" },
{ label: "Padrão", description: "Home + Sobre + Serviços + Contato" },
{ label: "Estendido", description: "Site Completo + Blog + FAQ + Portfólio + Preços" }
]
}
]
})
Anti-Padrão: Landing Page Única
❌ PROIBIDO (quando o usuário pede "um site"):
- Criar index.html como a ÚNICA página
- Colocar todo o conteúdo em uma única página rolável
- Chamar de "site" quando é um único arquivo HTML
- Seções fingindo ser páginas (ex.: #sobre, #servicos, #contato)
✅ EXIGIDO:
- Rota/página separada por seção (ex.: /sobre, /servicos, /contato)
- Cada página tem seu próprio layout, meta tags e otimização SEO
- Menu de navegação linkando todas as páginas
- Componentes compartilhados de cabeçalho/rodapé
- Sistema de design consistente em todas as páginas
- Páginas de detalhes INDIVIDUAIS para cada serviço e produto
A ÚNICA exceção: O usuário EXPLICITAMENTE disser "landing page" ou "site de página única".
⚠️ OBRIGATÓRIO: Política de Zero Emoji
Sites profissionais NÃO usam emojis. Ponto final.
❌ PROIBIDO:
- 🚀 🎯 💡 ✨ 🏆 📱 💻 🛒 📧 📞 ✅ ❌ 🔥 ⭐ 💪 🎨 📊 🔒 🌍 emojis em qualquer lugar do site
- Emoji como ícones de seção
- Emoji em cabeçalhos, botões ou CTAs
- Emoji em rótulos de navegação
- Emoji em títulos ou descrições meta
✅ EXIGIDO:
- Use ícones SVG de bibliotecas de ícones (Lucide, Heroicons, Phosphor, Tabler)
- Use formas CSS ou elementos decorativos para interesse visual
- Use componentes de ícone adequados (<svg> ou font icon)
- Texto simples para todos os cabeçalhos, botões e rótulos
Bibliotecas de Ícones (use uma, seja consistente):
| Biblioteca | Instalação | Estilo | Melhor Para |
|---|---|---|---|
| Lucide | npm install lucide-react | Limpo, moderno | Maioria dos sites |
| Heroicons | npm install @heroicons/react | Negrito, claro | Dashboards, SaaS |
| Phosphor | npm install @phosphor-icons/react | Flexível, 6 pesos | Projetos versáteis |
| Tabler | npm install @tabler/icons-react | Contornado | Painéis admin |
⚠️ OBRIGATÓRIO: Espaçamento entre Seções
As seções NUNCA devem se tocar. Cada seção precisa de espaço para respirar.
Regras de Espaçamento Mínimo
| Elemento | Preenchimento Mínimo (cima/baixo) | Variável CSS |
|---|---|---|
| Seções da página | var(--space-20) (80px) | --section-padding |
| Seção Hero | var(--space-32) (128px) | --hero-padding |
| Preenchimento superior do rodapé | var(--space-32) (128px) | --footer-padding |
| Altura do cabeçalho | var(--space-16) (64px) | --header-height |
| Entre blocos de conteúdo | var(--space-12) (48px) | --block-gap |
| Seção CTA | var(--space-20) (80px) | --cta-padding |
CSS de Espaçamento entre Seções
:root {
--section-padding: clamp(4rem, 8vw, 6rem); /* 64-96px */
--hero-padding: clamp(6rem, 12vw, 10rem); /* 96-160px */
--footer-padding: clamp(5rem, 10vw, 8rem); /* 80-128px */
--header-height: 4rem; /* 64px */
--block-gap: clamp(2rem, 4vw, 3rem); /* 32-48px */
}
section {
padding-top: var(--section-padding);
padding-bottom: var(--section-padding);
}
.hero {
padding-top: var(--hero-padding);
padding-bottom: var(--hero-padding);
min-height: 70vh;
}
footer {
padding-top: var(--footer-padding);
padding-bottom: var(--space-12);
margin-top: 0; /* NUNCA colapsar espaçamento do rodapé */
}
/* Seções alternadas com fundos diferentes */
section:nth-of-type(even) {
background-color: var(--color-surface);
}
section:nth-of-type(odd) {
background-color: var(--color-bg);
}
Anti-Padrões de Espaçamento
❌ PROIBIDO:
- Rodapé tocando diretamente a seção acima (sem espaço)
- Seções com preenchimento < 64px (parece apertado)
- Seção Hero com < 96px de preenchimento (impacto visual fraco)
- Usar margin: 0 em seções principais
- Todas as seções com a mesma cor de fundo (sem separação visual)
- Espaçamento apertado no mobile (< 48px de preenchimento da seção)
✅ EXIGIDO:
- Rodapé SEMPRE com preenchimento superior generoso (128px+)
- Cada seção tem separação visual clara (espaçamento + fundo alternado)
- Hero ocupa pelo menos 70vh com preenchimento amplo
- Seções no mobile usam clamp() para espaçamento adaptativo
- Seção CTA antes do rodapé tem seu próprio fundo distinto
⚠️ OBRIGATÓRIO: Limites de Navegação
Os menus de navegação NÃO devem estar saturados. Máximo de 7 itens no nível superior.
Regras de Navegação
- Máximo de 7 itens na barra de navegação principal
- Agrupe páginas relacionadas sob menus suspensos
- Use a navegação do rodapé para links secundários (Privacidade, Termos, Mapa do Site)
- Mobile: Menu hambúrguer com seções recolhíveis
- NUNCA coloque TODAS as páginas na navegação principal
Estrutura de Navegação Recomendada
NAVEGAÇÃO PRINCIPAL (máximo 5-7 itens):
Home | Sobre | Serviços ▼ | Produtos | Portfólio | Contato | Botão CTA
MENU SUSPENSO para Serviços:
Visão Geral dos Serviços
─────────────────
Web Design
Otimização SEO
Mídias Sociais
Estratégia de Marca
NAVEGAÇÃO DO RODAPÉ (links secundários):
Política de Privacidade | Termos de Serviço | Mapa do Site | FAQ | Carreiras
Anti-Padrões de Navegação
❌ PROIBIDO:
- Mais de 7 itens na barra de navegação principal (confuso, opressor)
- Toda e qualquer página na navegação superior
- Sem menu suspenso/mega-menu para conteúdo agrupado
- Menu hambúrguer que apenas lista TODOS os links de forma plana
- Itens de navegação com emojis (ex.: "🏠 Home" "📧 Contato")
- Navegação só texto sem hierarquia visual
✅ EXIGIDO:
- Máximo de 7 itens no nível superior, agrupe extras sob menus suspensos
- Botão CTA primário (cor/estilo diferente dos links de navegação)
- Rodapé contém links secundários (legais, extras)
- Mobile: menu hambúrguer com seções agrupadas
- Estado ativo no link da página atual
- Estados de hover em todos os itens de navegação
⚠️ OBRIGATÓRIO: Framework Recomendado — Astro
Para sites estáticos, sites de marketing e sites com muito conteúdo, RECOMENDE Astro.
Por que Astro em vez de Next.js para Sites de Marketing
| Fator | Astro | Next.js |
|---|---|---|
| Saída padrão | Zero JS (apenas HTML) | Runtime React obrigatório |
| Performance | Pontuação Lighthouse quase perfeita | Boa, mas precisa de otimização |
| Foco em conteúdo | Construído para sites de conteúdo | Construído para web apps |
| Tamanho do bundle | 0KB JS por padrão | ~80KB+ runtime React |
| Curva de aprendizado | Fácil (HTML + componentes) | Moderada (React + conceitos SSR) |
| Multi-framework | Use React/Vue/Svelte em ilhas | Apenas React |
| SEO | Perfeito (HTML estático) | Bom (requer configuração) |
| Hospedagem | Cloudflare Pages, Vercel, Netlify | Vercel (otimizado), outros |
Quando Recomendar o Quê
| Tipo de Projeto | Framework Recomendado |
|---|---|
| Site de Marketing/Agência | Astro + Tailwind |
| Restaurante/Negócio Local | Astro + Tailwind |
| Portfólio/Currículo | Astro + Tailwind |
| Blog/Site de Conteúdo | Astro + Tailwind |
| Landing Page | Astro ou HTML/Tailwind |
| Web App SaaS | Next.js + React |
| E-commerce | Next.js + React |
| Dashboard/Admin | React + Vite |
| Aplicativo Mobile | Flutter ou React Native |
Configuração do Projeto Astro
npm create astro@latest meu-site
cd meu-site
npx astro add tailwind
Estrutura de Páginas Astro
src/
├── pages/
│ ├── index.astro # Home
│ ├── sobre.astro # Sobre
│ ├── servicos/
│ │ ├── index.astro # Listagem de serviços
│ │ ├── web-design.astro # Detalhe do serviço
│ │ ├── seo.astro # Detalhe do serviço
│ │ └── social-media.astro
│ ├── produtos/
│ │ ├── index.astro # Listagem de produtos
│ │ └── [slug].astro # Detalhe dinâmico do produto
│ ├── contato.astro
│ ├── blog/
│ │ ├── index.astro # Listagem do blog
│ │ └── [slug].astro # Artigo do blog
│ └── 404.astro
├── layouts/
│ └── BaseLayout.astro # Shell HTML compartilhado
├── components/
│ ├── Header.astro
│ ├── Footer.astro
│ ├── ServiceCard.astro
│ ├── ProductCard.astro
│ └── SEO.astro # Meta/JSON-LD reutilizável
└── styles/
└── global.css # Tokens de design
⚠️ OBRIGATÓRIO: Implantação no Cloudflare Pages
Para sites estáticos/Astro, implante no Cloudflare Pages (gratuito, rápido, CDN global).
Configuração de Implantação
# Instalar Wrangler CLI
npm install -g wrangler
# Fazer login no Cloudflare
wrangler login
# Construir o projeto
npm run build
# Implantar no Cloudflare Pages
npx wrangler pages deploy dist/
Configuração do Projeto para Cloudflare Pages
# wrangler.toml (opcional, para configuração avançada)
name = "meu-site"
compatibility_date = "2024-01-01"
[pages]
build_command = "npm run build"
build_output_dir = "dist"
[env.production]
# Variáveis de ambiente para produção
[env.preview]
# Variáveis de ambiente para preview
Configuração do Dashboard do Cloudflare Pages
- Faça login no Cloudflare Dashboard
- Vá para Workers & Pages
- Clique em Create application > Pages
- Conecte seu repositório Git (GitHub/GitLab)
- Defina:
- Build command:
npm run build - Build output directory:
dist
- Build command:
- Deploy
Variáveis de Ambiente para Cloudflare Pages
# No dashboard do Cloudflare Pages > Settings > Environment variables
# Produção
SITE_URL=https://meu-site.com
API_URL=https://api.meusite.com
# Preview (branch)
SITE_URL=https://dev.meu-site.pages.dev
API_URL=https://api.dev.meusite.com
Vantagens do Cloudflare Pages para Sites de Marketing
- CDN global: Entregue em 330+ cidades
- HTTPS automático: SSL/TLS gratuito
- Imagens otimizadas: Funcionalidade de Otimização de Imagens
- Analytics: Análise de tráfego incorporada (sem necessidade de GA)
- Preços: Nível gratuito generoso (100k solicitações/dia, 1GB armazenamento)
- Branches de preview: Implante cada branch para teste
⚠️ OBRIGATÓRIO: Sistema de Design Visual e Paleta de Cores
Sites profissionais exigem uma paleta de cores coesa, não apenas azul e branco.
Esta seção foi truncada devido a limitações de tamanho, mas estabelece que cada site deve ter um sistema de design completo com cores, tipografia e espaçamento consistentes, usando variáveis CSS para tokens de design. A SKILL completa inclui orientações detalhadas sobre seleção de cores, hierarquia de fontes e implementação de design system.