Design de Sites para Clientes (sem IA genérica)

O que Design de Sites para Clientes (sem IA genérica) faz?

Aplique esta skill automaticamente para TODO pedido de design web (site, página, landing page, homepage, mockup, redesign, reformulação, site de apresentação) — o usuário não precisa nomeá-la.

Construa sites para clientes que parecem ter sido feitos por uma agência real: design com personalidade, conteúdo real, código limpo, verificado em um navegador real antes da entrega.

Passo 0 — Pergunte, nunca suponha

Antes de escrever qualquer código, confirme (pergunte apenas o que está faltando):

• Stack: HTML/CSS/JS puro, Angular, React/Next.js ou WordPress/Elementor.
• Negócio: nome (grafia exata), setor, cidade, serviços/produtos, cliente-alvo.
• Assets reais: logotipo, fotos, lista de projetos, números de telefone, WhatsApp, endereço, link do Google Maps, avaliação do Google, links de redes sociais.
• Idiomas (ex.: inglês + tâmil/canarês) — nunca adivinhe.
• Objetivo principal do site: chamadas, consultas pelo WhatsApp, pedidos de orçamento, reservas ou pedidos online. Se assets estiverem faltando, use espaços reservados claramente marcados como TODO — nunca fotos de pessoas genéricas ou fatos inventados.

Passo 1 — Especificação de design primeiro (ainda sem componentes)

Escreva uma especificação curta e obtenha aprovação:

1. Direção estética — comprometa-se com UMA: editorial, luxo, industrial, acolhedor-local, brutalista, minimal-premium. Uma frase sobre por que se adequa a este negócio.
2. Tipografia — uma fonte de destaque distinta + uma fonte limpa de corpo. Tamanhos fluidos com clamp() em uma escala modular estrita (por exemplo, 1.25). Nunca use Inter/Roboto/Arial como fonte de destaque.
3. Cor (60-30-10) — 60% base (ex.: off-white quente #F7F6F2 ou carvão #111214), 30% superfície estrutural, 10% um acento forte da marca. Defina como variáveis CSS / design tokens.
4. Grid e layout — grid de 12 colunas, pelo menos uma seção assimétrica/de split editorial, bordas finas de 1px, espaçamento generoso.
5. Lista de páginas + conteúdo real — manchete e corpo de texto para cada seção, escritos para este setor e cidade.

Predefinições de direção (pontos de partida, ajuste por cliente)

• Joias / ouro: luxo-editorial; serifa de destaque (ex.: Cormorant, Instrument Serif); marfim + verde/bordô escuro + acento dourado usado com moderação; fotografia de produto grande; bloco de cotação do ouro com data/hora; seção de plano de poupança; faixa de confiança do selo BIS.
• Industrial / manufatura / B2B: industrial-preciso; grotesca de destaque (ex.: Space Grotesk, Archivo); carvão + cinza aço + um acento de segurança (laranja/amarelo); tabelas de especificações, estudos de caso de projeto (cliente, local, área, cronograma), download de brochura, formulário de orçamento detalhado.
• Hotel / hospitalidade: editorial-acolhedor; cartões de quarto com fotos reais, tarifas/comodidades, localização e atrações próximas, CTA de reserva/WhatsApp.
• Fotografia / criativo: minimalista focado em galeria; alvenaria assimétrica baseada em imagens, cromo mínimo, tipografia forte para nomes/categorias.

Passo 2 — Proibições rígidas (clichês de IA)

NUNCA:

• Gradientes roxos/índigo/azul-violeta, bolhas de vidro, orbes gradientes flutuantes.
• Ícones genéricos dentro de círculos coloridos em uma grade de 3 colunas centralizada.
• Conteúdo placeholder: "Transforme seu fluxo de trabalho", "Empoderando negócios", "Desbloqueie seu potencial", "Eleve sua experiência", Lorem Ipsum, "Título de Exemplo".
• Fotos de stock de pessoas sorrindo não relacionadas ao negócio.
• Estatísticas falsas, depoimentos falsos ou contadores animados que podem mostrar "0+".
• Emoji como ícones, tudo centralizado, alturas idênticas de cartões em todos os lugares.
• Links para "#" no site finalizado.

Passo 3 — Regras de construção

• Componentes são pequenos e combináveis (ex.: Card com partes Header/Body/Footer), não um componente gigante cheio de props.
• Mobile-first; teste larguras 390px e 1440px.
• Imagens: texto alternativo real, largura/altura definidos (sem mudança de layout), carregamento lento abaixo da dobra, WebP/AVIF quando possível.
• Movimento: sutil e proposital (fade/slide ao rolar, estados de hover reais); respeite prefers-reduced-motion.
• Acessibilidade: contraste WCAG AA, estados de foco visíveis, cabeçalhos semânticos (um H1 por página), texto de link descritivo (não apenas "Saiba Mais").
• Angular + TranslateModule: sempre gere arquivos de chave i18n para cada idioma do projeto.
• Se a saída for longa, proponha um plano de lote primeiro e gere cada lote completamente — nunca trunque um arquivo.

Essentials para negócios locais (clientes SMB indianos)

• Botão fixo do WhatsApp e link click-to-call (tel:).
• Endereço + mapa do Google incorporado + horário de funcionamento.
• Avaliação/comentários do Google (reais, vinculados ao perfil).
• Formulário de contato/orçamento que realmente envia (alerta por e-mail e/ou WhatsApp) com proteção contra spam.
• SEO: título da página = "Serviço em Cidade | Marca"; meta descrição por página; esquema JSON-LD LocalBusiness; imagem Open Graph; sitemap.xml; robots.txt.
• Página de política de privacidade; ano de copyright atual correto.

Passo 4 — Verifique em um navegador real

Use Playwright (Chromium headless):

1. Tire screenshots de cada página em 1440px e 390px; veja os screenshots.
2. Verifique se há overflow horizontal, texto sobreposto, imagens quebradas, alvos de toque pequenos (<44px).
3. Verifique erros de console e requisições de rede com falha.
4. Corrija e tire screenshots novamente até ficar limpo.

Passo 5 — Checklist de pré-entrega (tudo deve passar)

• Nenhum texto Lorem Ipsum / "Exemplo" / TODO visível.
• Nenhum href="#" ou links mortos; todos os links de redes sociais vão para perfis reais.
• Nenhum link de admin/login em páginas públicas; nenhum e-mail de desenvolvedor ou caminhos internos em meta tags ou código-fonte.
• Nome do negócio, nomes de clientes e endereços escritos corretamente e de forma consistente.
• Contadores, sliders, tickers de taxa e formulários renderizam valores reais e funcionam.
• Cada imagem tem texto alternativo significativo; títulos e meta descrições são únicos por página.
• Screenshots mobile e desktop revisados.
• Lighthouse: Performance, Acessibilidade, SEO cada 90+ (ou explico por que não).

Termine com um resumo breve: direção de design escolhida, páginas construídas, resultados do checklist e qualquer coisa que ainda esteja pendente do cliente (fotos, conteúdo, credenciais).