Construção de Imagens
Etapa de produção das imagens de layout da Home: 13 imagens em 5 conjuntos, cobrindo o Hero, o Grid de Categorias, o bloco Personalize, o Destaque de Atacado e a Vitrine por Perfil. As imagens alimentam o protótipo de alta fidelidade da Home. As demais páginas do site ainda não têm imagens produzidas.
Pendências desta etapa
As duas imagens de personalização mostram bordado, não estampa DTF. Em personalize-seu-avental/avental-personalizado.png e categorias/personalize.png aparecem letras em linha de bordado em relevo, agulha, carretel e bastidor — uma cena de ateliê de bordado.
Isso contraria a validação v3 do cliente, que eliminou o bordado de todo o discovery e o substituiu por estampa DTF (mínimo de 30 peças para logo). A origem provável do erro é o manual de marca §9, que ainda diz "bordado ou impressão do logo" — o manual não foi atualizado depois da validação.
No protótipo, essas imagens aparecem hoje ao lado de um texto que diz "estampa DTF". Ação: regerar as duas imagens com acabamento de estampa DTF (aplicação lisa, sem relevo de linha, sem agulha/carretel/bastidor na cena) e, em paralelo, corrigir o §9 do manual de marca.
O Hero é um banner fechado, com o texto embutido no pixel. hero-desktop.png e hero-mobile.png trazem headline, subtítulo, botão "Ver produtos" e ícones de benefício achatados na arte, ocupando a metade direita.
Decisão: por escolha do cliente, o banner é usado inteiro, como veio — o protótipo não sobrepõe nenhum texto em HTML ao hero. As consequências, que ficam registradas aqui para decisão futura:
- O texto do hero não é lido por buscador nem por leitor de tela. Mitigação aplicada: um H1 oculto (fora da tela, mas presente na árvore de acessibilidade) carrega o texto verbatim aprovado, e o
altda imagem descreve a mensagem do banner. - O hero traz 1 CTA ("Ver produtos"), enquanto a Fase 07 especifica 2 ("Ver categorias" + "Personalizar avental"). A imagem inteira é clicável e leva às categorias.
- O texto do banner diz "…personalização a partir de uma peça", que não é o H1 verbatim aprovado na Fase 06/07, e repete os benefícios que já estão na barra logo acima.
- O texto não se adapta a outras larguras de tela nem a outros idiomas: qualquer ajuste de copy exige regerar a imagem.
Ação sugerida: nas próximas rodadas, gerar o hero como foto ambientada limpa e manter o texto em HTML — resolve os quatro pontos de uma vez.
Lacunas de cobertura
Quatro seções da Home não receberam imagem de layout nesta etapa. Três foram supridas com conteúdo real do site atual; uma segue em aberto:
| Seção da Home | Situação |
|---|---|
| 5 · Vitrine Destaques | Suprida com fotos reais do catálogo (casacha.com) — ver "Produtos reais" abaixo. |
| 8 · Vitrine Ofertas e Kits | Idem. Sem imagem de layout necessária. |
| 10 · Prova Social | Sem foto de depoente. Avatar com iniciais no protótipo. |
| 11 · Blog | Suprida com as capas reais dos 3 últimos posts de casacha.com/blog, extraídas por scripts/scrape-blog.py. |
Hero
Banner principal, seção 3 da Home. Servido via <picture>, com troca em 900px.
Grid de Categorias
Seção 4 da Home. As seis imagens correspondem 1:1 aos seis rótulos canônicos definidos na Fase 07.
Bloco Personalize seu Avental
Seção 6 da Home — o diferencial da marca.
Destaque de Atacado
Seção 7 da Home. Substitui a tabela de faixas que o wireframe previa — a arte já traz as quatro faixas e os percentuais.
Esta imagem fecha a maior lacuna aberta do discovery. As faixas de desconto por quantidade eram, desde a Fase 07, "regra comercial pendente" — nenhum número podia ser arbitrado. A arte define os quatro patamares:
| Faixa | Desconto |
|---|---|
| 3 a 9 unidades | 5% |
| 10 a 24 unidades | 10% |
| 25 a 49 unidades | 15% |
| 50+ unidades | 20% |
A arte informa ainda que os descontos são aplicados automaticamente no carrinho — regra de negócio nova, que impacta a Fase 06 (fluxo de carrinho) e a futura implementação na Shopify.
As faixas da arte não batem com as do discovery. A Fase 07 e o wireframe trabalhavam com 1–9 / 10–29 / 30+ (três faixas, valores placeholder). A arte traz 3–9 / 10–24 / 25–49 / 50+ — quatro faixas, com pontos de corte diferentes.
Repare que a faixa começa em 3 unidades: quem compra 1 ou 2 peças não tem desconto, o que o discovery não previa. Isso também conflita com o mínimo de 30 peças para logo em DTF, que não corresponde a nenhum corte da tabela.
Ação: a arte deve ser tratada como a regra vigente (é a mais recente e veio do cliente) e discovery/06-arquitetura.md e discovery/07-home.md precisam ser atualizados para refletir as quatro faixas reais.
Blog
A seção 11 da Home não teve imagem de layout produzida. Em vez de placeholder, o protótipo usa as capas reais dos 3 últimos posts do blog atual (casacha.com/blog, módulo ph_simpleblog), com título, categoria e tempo de leitura — extraídos por scripts/scrape-blog.py para assets/blog/. O tempo de leitura é estimado a partir do resumo, já que o script não baixa o corpo do post.
Vitrine por Perfil
Seção 9 da Home. Os três perfis correspondem às proto-personas da Fase 05.
Produtos reais no protótipo
As vitrines das seções 5 e 8 não usam imagem de layout: são 8 produtos reais extraídos do e-commerce atual (casacha.com, PrestaShop) pelo script scripts/scrape-produtos.py, com as fotos baixadas para assets/produtos/.
O card do protótipo mistura dado real com componentes novos do discovery. A tabela abaixo separa um do outro — nada aqui deve ser apresentado ao cliente como dado que o site já tem:
| Elemento do card | Procedência |
|---|---|
| Foto, nome, referência, preço | Real — catálogo atual |
| Preço no PIX (−3%) e 4x sem juros | Real — regra do briefing, calculada sobre o preço real |
| Chip de cor | Derivado — extraído do nome do produto; o site não expõe variante no card |
| Badge "Desconto por quantidade" | Regra real, faixas pendentes |
| Estrelas e nº de avaliações | Fictício — não existe avaliação no site hoje |
| Preço riscado | Fictício — derivado do preço real |
Não há Kits montados no catálogo atual. A vitrine "Ofertas e Kits e Combos" foi populada com utensílios reais, mas a linha de Kits e Combos é uma proposta do discovery e ainda precisa ser criada pelo cliente.
Logotipo
O logotipo oficial (assets/logo.png, 250×44 RGBA) foi aplicado no header e no rodapé do protótipo, substituindo a aproximação tipográfica que existia antes. Dois pontos a resolver:
O laranja do logotipo não é o Cobre do manual. O "A" de destaque do arquivo é #E65135 — um coral avermelhado. O manual §6 define o Cobre como #C76B43, e é ele que o §9 manda usar nos CTAs ("CTA em Cobre").
São dois laranjas diferentes convivendo na mesma tela: o "A" do logo e, ao lado, o badge do carrinho e o link "Personalize seu Avental". O protótipo mantém o Cobre do manual nos CTAs e o logotipo como veio — nenhum dos dois foi alterado por conta própria. Decisão necessária: ou o manual passa a valer e o logo é reexportado em Cobre, ou o logo passa a valer e a paleta de CTAs muda para o coral.
Faltam duas versões e falta resolução. O manual §5 prevê três versões do logotipo — principal, invertida e monocromática — mas só a principal foi fornecida. A invertida do rodapé foi derivada por scripts/gerar-logo-claro.py, que reescreve as letras neutras para Branco e preserva o "A" de destaque (assets/logo-claro.png).
O arquivo tem 44px de altura: exibido a 24px já está em ~1,8x, abaixo do 2x que telas retina pedem. Ação: pedir o SVG das três versões para o handoff.
Proveniência e otimização
As 12 imagens foram geradas por IA: os metadados XMP/C2PA embutidos registram trainedAlgorithmicMedia e Made with Google AI, assinados pela Google LLC. Nenhum prompt foi salvo — não é possível regerar variações fiéis sem reescrever os prompts do zero. Recomendação para as próximas rodadas: versionar os prompts junto dos assets.
Os originais somam 18,3 MB e são preservados intactos em assets/home/ como master para o handoff. O protótipo consome versões WebP redimensionadas ao slot real de cada componente em 2x, geradas por scripts/otimizar-imagens.py em assets/home/web/: 0,67 MB no total (−96%).
Sobre o escopo: specs/steering/product.md lista "Geração de imagens" e "Protótipo visual de alta fidelidade" como fora de escopo desta versão do workflow. Ambos foram solicitados e executados — o escopo do projeto expandiu além do PRD original. Os specs do workflow não foram reescritos; alinhá-los é uma decisão à parte.