ealmeida
faef9b47dc
Dify foi removido 06-03-2026. Skills brainstorm/discover ainda referenciam-no no corpo. Bump v1.2 + nota top-of-file. Reescrita workflow para próxima sessão. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
65 lines
2.0 KiB
Markdown
65 lines
2.0 KiB
Markdown
---
|
|
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"}
|
|
```
|