---
name: design-ecommerce
description: >
  Design system para e-commerce — lojas WooCommerce, páginas produto, checkout PT.
  Optimização conversão, layouts loja, UX checkout e elementos de confiança.
  Usar quando: criar ou optimizar loja WooCommerce, página produto, carrinho,
  checkout, ou qualquer elemento visual de e-commerce para mercado português.
---

# /design-ecommerce — Design System E-commerce

## Paleta base (adaptar à marca do cliente)

```css
--cta: #dc2626;         /* Vermelho urgência — "Comprar Agora" */
--trust: #16a34a;       /* Verde confiança — "Pagamento Seguro" */
--price: #1e3a5f;       /* Azul preço destacado */
--sale: #f59e0b;        /* Âmbar promoção */
--neutral: #ffffff;
--text: #111827;
```

## Elementos conversão obrigatórios

### Página produto
1. Imagens: mínimo 4 ângulos, zoom, vídeo se possível
2. Preço: destacado, desconto visível, preço original riscado
3. Stock: urgência ("Últimas 3 unidades")
4. CTA: "Adicionar ao Carrinho" (vermelho, proeminente)
5. Confiança: selos Visa/MB/MBWay + devolução 30 dias
6. Avaliações: estrelas + número (social proof)
7. "Também pode gostar" + "Compraram juntos"

### Checkout PT
- Referência Multibanco visível
- MB Way como opção principal
- Campo NIF opcional (B2B)
- Morada: formato PT (Rua, nº, andar, código postal, localidade)

### Elementos de confiança PT
- Selos: MBWay, Visa, Mastercard, PayPal
- "Envio para Portugal Continental em 24-48h"
- "Devolução gratuita em 30 dias"
- "Suporte em português"

## Anti-slop checklist e-commerce

- [ ] Preços em EUR (não USD)
- [ ] CTAs em PT-PT: "Comprar" não "Buy", "Carrinho" não "Cart"
- [ ] Mobile: checkout testado em 375px (maioria compra no telemóvel)
- [ ] Tempo de carregamento: imagens optimizadas <100KB
- [ ] Trust badges visíveis acima do fold

## Referências visuais

Ver `~/.claude/design/referencias-visuais/ecommerce/`

---

## Healing Log

```jsonl
{"date":"","issue":"","fix":"","source":"user|auto"}
```