design-showcase-websites

Design Showcase Websites

Transforme briefings esparsos e material de origem disperso em um site que pareça específico para seu assunto, público, idioma e propósito. Suporte landing pages focadas, sites com várias páginas e produtos web interativos. Use esta skill como espinha dorsal do fluxo de trabalho; combine-a com qualquer skill de design, navegador, imagem, interface de produto ou framework que o usuário nomear explicitamente.

Regras principais

• Projete uma experiência de conversão, não uma coleção de seções atraentes.
• Derive a identidade do negócio, público, local, produto e imagens reais. Não reutilize o estilo visual de um projeto anterior, a menos que o usuário solicite.
• Separe fatos verificados de interpretação criativa. Nunca invente endereços, preços, horários de funcionamento, avaliações, clientes, prêmios, recursos ou alegações de desempenho.
• Preserve os ativos originais do usuário. Otimize cópias dentro do projeto e documente imagens geradas ou temporárias.
• Escolha o idioma com base no público e no briefing. Nunca presuma conteúdo coreano, chinês, inglês, japonês ou bilíngue sem evidências.
• Trate a tipografia localizada, quebra de linha, pontuação, ordem de leitura, densidade de conteúdo e ações culturalmente familiares como parte do design.
• Prefira uma direção de arte forte em vez de uma colagem de efeitos da moda.
• Quando o usuário conceder liberdade criativa, infira e comprometa-se com uma direção justificada, em vez de pedir que ele projete o site para você.
• Torne o protótipo genuinamente clicável e demonstrável quando a implementação for solicitada. Não pare em um conceito escrito, a menos que o usuário peça apenas estratégia.
• Mantenha todas as informações essenciais visíveis sem animação e respeite as preferências de movimento reduzido.

Escolha o modo de engajamento

1. Apenas conceito: Produza posicionamento, fluxo de página, direção visual e descrições de telas-chave. Não altere arquivos a menos que solicitado.
2. Protótipo: Construa um site responsivo e executável de página única ou várias páginas com interações primárias funcionais e conteúdo com qualidade de apresentação.
3. Redesign: Audite a página existente e o repositório primeiro, preserve os requisitos funcionais e a stack atual e, em seguida, melhore a interface.
4. Polimento: Inspecione a página ao vivo ou local, identifique as lacunas de maior impacto, implemente alterações focadas e verifique novamente.
5. Produto web: Projete fluxos de tarefas, estados, navegação e apresentação de dados; emparelhe esta skill com uma skill de interface de produto quando o trabalho for pesado em aplicação.

Quando não existir repositório, escolha a stack mais simples e sustentável que atenda às necessidades de interação. Quando existir um repositório, inspecione suas convenções e reutilize-as.

Fluxo de trabalho

1. Enquadre o resultado

Resolva apenas decisões que alterem materialmente o resultado:

• público e local;
• tipo de site, escala de conteúdo e se a experiência é de página única, várias páginas ou semelhante a aplicação;
• ações de conversão primárias e secundárias;
• forma de entrega e interações necessárias;
• material de origem e direitos de uso;
• primeira impressão desejada e direções inaceitáveis;
• restrições de lançamento, como stack, rota, viewport ou porta.

Faça no máximo três perguntas compactas por vez. Se o usuário conceder liberdade criativa e as evidências forem suficientes, declare suposições razoáveis e prossiga.

Para briefings esparsos, links de mapa ou ativos locais mistos, leia discovery-and-research.md antes de coletar conteúdo.

Leia site-types-and-localization.md ao escolher a arquitetura da informação, trabalhar em chinês, inglês, japonês, coreano ou construir uma experiência multilíngue.

2. Construa um livro-razão da fonte da verdade

Inspecione links fornecidos, listagens de mapas, sites existentes, arquivos, imagens e vídeos. Registre:

• o valor verificado;
• sua fonte e data de verificação;
• se pode ser publicado diretamente;
• qualquer coisa que exija confirmação do proprietário.

Mantenha os fatos operacionais centralizados em arquivos de dados ou conteúdo, em vez de espalhá-los por componentes. Rotule placeholders explicitamente. Se informações públicas entrarem em conflito, prefira a fonte de propriedade da empresa ou a mais recentemente atualizada e sinalize o conflito.

3. Defina a história de conversão

Escreva estes itens antes de escolher efeitos visuais:

• a frase que os visitantes devem lembrar após dez segundos;
• o CTA principal e um CTA secundário opcional;
• uma escada de crenças da primeira impressão à ação;
• três a cinco pontos de prova já suportados por evidências;
• as informações mínimas necessárias para remover hesitação.

Crie ou atualize PRODUCT.md em projetos de implementação com público, propósito, posicionamento, conversão, prova, voz, antirreferências e expectativas de acessibilidade.

4. Estabeleça uma direção de arte específica

Nomeie um conceito que combine a verdade da categoria com uma promessa emocional e um contraste deliberado. Exemplos de contrastes úteis incluem energético mas disciplinado, local mas editorial, técnico mas humano, ou premium mas acolhedor.

Defina os dialetos de design antes da implementação:

• variação de design, 1–10;
• intensidade de movimento, 1–10;
• densidade de informação, 1–10;
• estratégia de cor;
• estratégia de fotografia;
• estratégia de tipografia.

Crie ou atualize DESIGN.md com conceito, tokens, tipo, layout, tratamento de imagem, movimento e comportamento responsivo. Leia direction-and-structure.md ao selecionar o conceito, a arquitetura da página ou o tratamento de mídia.

Evite padrões visuais automáticos: estilo genérico de fitness preto-neon, estilo genérico de restaurante bege, painéis de vidro decorativos, grades bento aleatórias, brilho sem significado, pílulas excessivas, cards uniformes e seções repetidas de fade-up.

5. Componha a página em torno das decisões

Escolha a arquitetura da informação a partir do propósito do site. Para trabalho com várias páginas, defina o menor sitemap completo, navegação global, metas específicas da página e caminho de conversão entre páginas antes de estilizar seções individuais. Para produtos web, priorize a conclusão de tarefas e a cobertura de estados em vez do ritmo de marketing.

Use apenas as seções necessárias para a decisão do visitante. Um fluxo comum de página de conversão é:

1. hero com a promessa e ação primária;
2. prova imediata;
3. oferta principal ou valor do produto;
4. experiência, processo ou diferenciais;
5. detalhes práticos que removem objeções;
6. local, contato, reserva, compra ou consulta;
7. CTA final decisivo.

Varie a composição por meio de escala, ritmo, corte, espaço em branco e alinhamento editorial — não por variedade arbitrária de componentes. No mobile, mantenha a ação mais valiosa ao alcance fácil quando apropriado, como chamada, navegação, reserva, compra, inscrição, pesquisa, salvar ou continuar.

6. Escreva conteúdo como interface

• Escreva primeiro no idioma principal do público; adicione outras localidades apenas quando necessário.
• Use títulos curtos e diretos que se encaixem no ritmo visual.
• Substitua alegações genéricas por especificidades suportadas.
• Mantenha os rótulos dos CTAs literais e culturalmente familiares.
• Teste as quebras de linha no idioma alvo em larguras reais; não aprove o layout usando placeholders em inglês.
• Teste cada localidade suportada de forma independente. Não presuma que uma tradução se encaixa no componente do idioma de origem.
• Use conteúdo real em vez de lorem ipsum.

7. Construa o protótipo

• Use estrutura de página semântica e tokens reutilizáveis.
• Faça links, chamadas, navegação, menus, filtros, galerias e modais funcionarem no nível implícito pelo protótipo.
• Otimize imagens grandes para formatos e tamanhos web apropriados; retenha pontos focais de corte significativos.
• Use movimento para esclarecer hierarquia, revelar relações espaciais ou reforçar o caráter da marca. Mantenha-o esparso e interrompível.
• Forneça foco de teclado, texto alternativo significativo, contraste suficiente, alvos de toque de 44px e controles móveis com consciência de área segura.
• Preserve o conteúdo essencial quando o movimento JavaScript não for executado.

Leia prototype-and-qa.md antes da implementação ou revisão final.

8. Verifique em um navegador real

Não declare conclusão apenas com base em uma compilação bem-sucedida. Verifique no mínimo:

• desktop amplo em torno de 1440px;
• largura intermediária/tablet;
• mobile em torno de 390px;
• mobile estreito em torno de 375px;
• um teste de movimento reduzido ou de teclado.

Inspecione o hero e a página completa. Verifique quebra de linha no idioma alvo, cortes de imagem, estouro horizontal, áreas seguras, controles fixos, erros de console, links, formulários, menus, ordem de foco, comportamento de carregamento e alcance do CTA final. Corrija problemas descobertos e repita a verificação afetada.

Entrega esperada

Para um protótipo executável, entregue:

• código-fonte funcional e uma compilação de produção bem-sucedida;
• uma prévia local ou comando de execução claro;
• PRODUCT.md e DESIGN.md quando o projeto justificar;
• uma nota de origem/placeholder para fatos operacionais e mídia;
• uma lista concisa de interações implementadas e viewports validadas;
• uma lista curta de confirmação do proprietário para fatos que possam mudar antes do lançamento.

Lide a resposta final com a prévia ou artefato principal. Mencione apenas as decisões de design mais importantes e os resultados de validação.

Portão de qualidade

Não entregue até que todos os itens sejam verdadeiros:

• Especificidade: O site não poderia ser rotulado para um concorrente aleatório sem redesenho.
• Autenticidade: Alegações e mídia são reais, com origem ou claramente marcadas como provisórias.
• Conversão: A próxima ação é óbvia em segundos e permanece fácil no mobile.
• Hierarquia: Uma ideia domina cada viewport; tipografia e imagens a suportam.
• Responsividade: As composições se adaptam intencionalmente em vez de apenas empilhar.
• Moderação: Movimento e efeitos têm um papel; o site não parece uma demonstração de efeitos.
• Inclusão: Teclado, contraste, alvos de toque, movimento reduzido e estrutura semântica são cobertos.
• Confiabilidade: Compilação, console, ativos e interações críticas são verificados.