claude-plugins/design-media/skills/design-ecommerce/SKILL.md

name, description, layer

name	description	layer
design-ecommerce	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.	wiki

/design-ecommerce — Design System E-commerce

Paleta base (adaptar à marca do cliente)

--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

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