Emanuel Almeida
6b3a6f2698
- All SKILL.md files now <500 lines (avg reduction 69%) - Detailed content extracted to references/ subdirectories - Frontmatter standardised: only name + description (Anthropic standard) - New skills: brand-guidelines, spec-coauthor, report-templates, skill-creator - Design skills: anti-slop guidelines, premium-proposals reference - Removed non-standard frontmatter fields (triggers, version, author, category) Plugins affected: infraestrutura, marketing, dev-tools, crm-ops, gestao, core-tools, negocio, perfex-dev, wordpress, design-media Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
290 lines
9.8 KiB
Markdown
290 lines
9.8 KiB
Markdown
# Referência: Propostas Premium — Design de Capas e Páginas Visuais
|
|
|
|
Guia prático para criar páginas visuais de impacto em propostas comerciais Descomplicar.
|
|
Baseado na filosofia canvas-design: design-forward, cada página comunica antes de ser lida.
|
|
|
|
---
|
|
|
|
## Filosofia de Design
|
|
|
|
**Princípio central:** o cliente forma opinião sobre a proposta nos primeiros 3 segundos.
|
|
Cada página deve funcionar como imagem antes de funcionar como texto.
|
|
|
|
| Princípio | Aplicação |
|
|
|-----------|-----------|
|
|
| Visual-first | Imagem/composição comunica o tema antes do texto |
|
|
| Texto mínimo | Menos palavras, mais impacto por palavra |
|
|
| Espaço negativo | Respiração generosa — o vazio é parte do design |
|
|
| Tipografia como design | O tipo de letra é um elemento visual, não só legível |
|
|
| Paleta disciplinada | Máximo 3 cores por página (+ neutros) |
|
|
|
|
---
|
|
|
|
## Paleta Descomplicar
|
|
|
|
```python
|
|
# Cores base da marca — aplicar consistentemente
|
|
PALETA = {
|
|
"dourado": "#C9A84C", # acento principal
|
|
"dourado_lt": "#E8D5A3", # acento suave / fundo dourado
|
|
"preto": "#0D0D0D", # fundo principal dark
|
|
"cinza_esc": "#1A1A1A", # fundo secundário
|
|
"cinza_med": "#3D3D3D", # separadores
|
|
"cinza_lt": "#F5F5F5", # fundo light / texto em dark
|
|
"branco": "#FFFFFF", # texto em dark, fundo clean
|
|
}
|
|
|
|
# Tipografia (Nexa é a fonte da marca)
|
|
FONTES = {
|
|
"heading": "Nexa Bold",
|
|
"subheading":"Nexa Light",
|
|
"corpo": "Source Sans 3",
|
|
"detalhe": "IBM Plex Mono", # para números, códigos
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Workflow: do conceito à página
|
|
|
|
```
|
|
1. BRIEFING — que secção é esta? qual a mensagem principal?
|
|
2. COMPOSIÇÃO — escolher layout base (ver tipos abaixo)
|
|
3. HIERARQUIA — definir 3 níveis: âncora visual / título / detalhe
|
|
4. COR — aplicar paleta com dominante + acento
|
|
5. TIPOGRAFIA — tamanhos com contraste forte (ex: 72pt / 14pt)
|
|
6. REFINAMENTO — remover tudo o que não é necessário
|
|
7. EXPORTAÇÃO — PDF vector (300dpi para imprimir, 72dpi para digital)
|
|
```
|
|
|
|
---
|
|
|
|
## Tipos de Página por Secção
|
|
|
|
### Capa de Proposta (primeira página)
|
|
|
|
**Objectivo:** impressionar, identificar o cliente, criar antecipação.
|
|
|
|
```python
|
|
# Composição com python-reportlab
|
|
from reportlab.lib.pagesizes import A4
|
|
from reportlab.pdfgen import canvas
|
|
from reportlab.lib.colors import HexColor
|
|
|
|
W, H = A4 # 595 x 842 pontos
|
|
|
|
def criar_capa(c: canvas.Canvas, nome_cliente: str, titulo: str):
|
|
# Fundo preto total
|
|
c.setFillColor(HexColor("#0D0D0D"))
|
|
c.rect(0, 0, W, H, fill=1, stroke=0)
|
|
|
|
# Barra dourada lateral esquerda (elemento âncora)
|
|
c.setFillColor(HexColor("#C9A84C"))
|
|
c.rect(0, 0, 8, H, fill=1, stroke=0)
|
|
|
|
# Logo Descomplicar (topo direito)
|
|
c.drawImage("assets/logo-white.png", W - 130, H - 60, 110, 40, mask="auto")
|
|
|
|
# Título em grande — dois terços da página
|
|
c.setFillColor(HexColor("#FFFFFF"))
|
|
c.setFont("Nexa-Bold", 52)
|
|
# Quebra em 2 linhas se necessário
|
|
linhas = quebrar_texto(titulo, max_chars=24)
|
|
y = H * 0.55
|
|
for linha in linhas:
|
|
c.drawString(48, y, linha)
|
|
y -= 64
|
|
|
|
# Nome do cliente — acento dourado
|
|
c.setFillColor(HexColor("#C9A84C"))
|
|
c.setFont("Nexa-Light", 18)
|
|
c.drawString(48, H * 0.35, f"Preparado para {nome_cliente}")
|
|
|
|
# Data — rodapé discreto
|
|
c.setFillColor(HexColor("#3D3D3D"))
|
|
c.setFont("SourceSans3-Regular", 10)
|
|
c.drawString(48, 32, f"Descomplicar® · descomplicar.pt · Março 2026")
|
|
```
|
|
|
|
**Composição alternativa (versão light):**
|
|
- Fundo branco com mancha fotográfica no lado direito (60% da largura)
|
|
- Título sobreposto à foto com overlay escuro
|
|
- Logo em preto, barra dourada mantida
|
|
|
|
### Separador de Secção
|
|
|
|
**Objectivo:** pausar o ritmo, anunciar o tema seguinte.
|
|
|
|
```python
|
|
def criar_separador(c: canvas.Canvas, numero: str, titulo_seccao: str):
|
|
# Fundo dourado total — inversão de cor
|
|
c.setFillColor(HexColor("#C9A84C"))
|
|
c.rect(0, 0, W, H, fill=1, stroke=0)
|
|
|
|
# Número enorme em background (marca de água visual)
|
|
c.setFillColor(HexColor("#E8D5A3")) # dourado claro
|
|
c.setFont("Nexa-Bold", 280)
|
|
c.drawString(-20, H * 0.1, numero) # pode sair do bounds — intencional
|
|
|
|
# Título da secção — preto sobre dourado
|
|
c.setFillColor(HexColor("#0D0D0D"))
|
|
c.setFont("Nexa-Bold", 42)
|
|
c.drawString(48, H * 0.45, titulo_seccao)
|
|
|
|
# Linha divisória fina
|
|
c.setStrokeColor(HexColor("#0D0D0D"))
|
|
c.setLineWidth(1)
|
|
c.line(48, H * 0.42, W - 48, H * 0.42)
|
|
```
|
|
|
|
### Infográfico de Dados
|
|
|
|
**Objectivo:** tornar números abstractos em narrativa visual.
|
|
|
|
```python
|
|
def criar_infografico_metricas(c: canvas.Canvas, metricas: list[dict]):
|
|
"""
|
|
metricas = [
|
|
{"valor": "3x", "label": "Aumento de tráfego", "icone": "trend"},
|
|
{"valor": "47%", "label": "Redução de custo por lead", "icone": "savings"},
|
|
{"valor": "12", "label": "Palavras-chave no Top 3", "icone": "star"},
|
|
]
|
|
"""
|
|
# Fundo neutro quente
|
|
c.setFillColor(HexColor("#F5F5F5"))
|
|
c.rect(0, 0, W, H, fill=1, stroke=0)
|
|
|
|
# Título da página
|
|
c.setFillColor(HexColor("#0D0D0D"))
|
|
c.setFont("Nexa-Bold", 32)
|
|
c.drawString(48, H - 80, "Resultados Projectados")
|
|
|
|
# Grid de métricas (3 colunas)
|
|
col_w = (W - 96) / len(metricas)
|
|
for i, m in enumerate(metricas):
|
|
x = 48 + i * col_w
|
|
y_center = H * 0.5
|
|
|
|
# Caixa de métrica
|
|
c.setFillColor(HexColor("#FFFFFF"))
|
|
c.roundRect(x + 8, y_center - 80, col_w - 16, 160, 12, fill=1, stroke=0)
|
|
|
|
# Valor principal — grande e dourado
|
|
c.setFillColor(HexColor("#C9A84C"))
|
|
c.setFont("Nexa-Bold", 56)
|
|
c.drawCentredString(x + col_w / 2, y_center + 20, m["valor"])
|
|
|
|
# Label — preto, pequeno
|
|
c.setFillColor(HexColor("#3D3D3D"))
|
|
c.setFont("SourceSans3-Regular", 11)
|
|
c.drawCentredString(x + col_w / 2, y_center - 20, m["label"])
|
|
```
|
|
|
|
### Página de Pricing Visual
|
|
|
|
**Objectivo:** apresentar preços sem que pareçam uma tabela de custos.
|
|
|
|
```python
|
|
def criar_pricing(c: canvas.Canvas, planos: list[dict]):
|
|
"""
|
|
planos = [
|
|
{"nome": "Essencial", "preco": 450, "destaque": False,
|
|
"items": ["SEO On-page", "Relatório mensal", "2 artigos/mês"]},
|
|
{"nome": "Crescimento", "preco": 850, "destaque": True,
|
|
"items": ["SEO completo", "Google Ads", "4 artigos/mês", "Dashboard BI"]},
|
|
]
|
|
"""
|
|
# Fundo escuro para pricing
|
|
c.setFillColor(HexColor("#0D0D0D"))
|
|
c.rect(0, 0, W, H, fill=1, stroke=0)
|
|
|
|
card_w = (W - 96 - 16 * (len(planos) - 1)) / len(planos)
|
|
|
|
for i, p in enumerate(planos):
|
|
x = 48 + i * (card_w + 16)
|
|
y_top = H * 0.75
|
|
|
|
if p["destaque"]:
|
|
# Card dourado para o plano recomendado
|
|
c.setFillColor(HexColor("#C9A84C"))
|
|
c.roundRect(x - 4, y_top - 4, card_w + 8, H * 0.5 + 8, 16, fill=1, stroke=0)
|
|
texto_cor = HexColor("#0D0D0D")
|
|
else:
|
|
c.setFillColor(HexColor("#1A1A1A"))
|
|
c.roundRect(x, y_top, card_w, H * 0.5, 12, fill=1, stroke=0)
|
|
texto_cor = HexColor("#FFFFFF")
|
|
|
|
# Nome do plano
|
|
c.setFillColor(texto_cor)
|
|
c.setFont("Nexa-Bold", 20)
|
|
c.drawString(x + 20, y_top + H * 0.5 - 44, p["nome"])
|
|
|
|
# Preço
|
|
c.setFont("Nexa-Bold", 48)
|
|
c.drawString(x + 20, y_top + H * 0.5 - 100, f"{p['preco']}€")
|
|
c.setFont("SourceSans3-Regular", 11)
|
|
c.drawString(x + 20, y_top + H * 0.5 - 118, "/ mês + IVA")
|
|
|
|
# Items incluídos
|
|
c.setFont("SourceSans3-Regular", 12)
|
|
y_item = y_top + H * 0.5 - 150
|
|
for item in p["items"]:
|
|
c.drawString(x + 28, y_item, f"— {item}")
|
|
y_item -= 22
|
|
```
|
|
|
|
---
|
|
|
|
## Ferramentas: python-reportlab vs pptxgenjs
|
|
|
|
| Critério | python-reportlab | pptxgenjs (Node) |
|
|
|----------|-----------------|------------------|
|
|
| Output | PDF nativo | PPTX (editável) |
|
|
| Controlo | Pixel-perfect | Aproximado |
|
|
| Fontes custom | Suporte completo | Limitado |
|
|
| Melhor para | Proposta final PDF | Template editável pelo cliente |
|
|
| Ambiente | Servidor dev (`/root/Dev`) | Servidor dev ou local |
|
|
|
|
**Recomendação:** usar reportlab para proposta final; pptxgenjs se o cliente precisar de editar.
|
|
|
|
```bash
|
|
# Instalar no servidor dev
|
|
pip install reportlab Pillow
|
|
|
|
# Registar fontes Nexa
|
|
from reportlab.pdfbase import pdfmetrics
|
|
from reportlab.pdfbase.ttfonts import TTFont
|
|
pdfmetrics.registerFont(TTFont("Nexa-Bold", "/root/Dev/assets/fonts/Nexa-Bold.ttf"))
|
|
pdfmetrics.registerFont(TTFont("Nexa-Light", "/root/Dev/assets/fonts/Nexa-Light.ttf"))
|
|
```
|
|
|
|
---
|
|
|
|
## Regras de Composição (resumo operacional)
|
|
|
|
1. **Uma mensagem por página** — se precisas de duas frases para explicar, remove uma
|
|
2. **Âncora visual primeiro** — o olho precisa de um ponto de entrada (número grande, foto, cor)
|
|
3. **Contraste de escala** — combinar elemento 280pt com texto 12pt (não 24pt com 18pt)
|
|
4. **Margens generosas** — margem mínima de 48pt em A4; prefere 64pt
|
|
5. **Rodapé discreto** — página + marca em 9pt, nunca competir com conteúdo
|
|
6. **Máximo 3 fontes** — Nexa Bold + Nexa Light + Source Sans 3 (IBM Plex Mono opcional para dados)
|
|
7. **Alinhamento consistente** — escolher esquerda ou centrado para o documento inteiro
|
|
|
|
---
|
|
|
|
## Checklist de Qualidade
|
|
|
|
- [ ] Capa com nome do cliente e data correctos
|
|
- [ ] Logo Descomplicar presente em todas as páginas (rodapé ou canto)
|
|
- [ ] Paleta restrita a 3 cores por página
|
|
- [ ] Nenhuma fonte genérica (Arial, Calibri, Times)
|
|
- [ ] Espaço negativo generoso — sem páginas "cheias"
|
|
- [ ] Preços em EUR sem decimais desnecessários (850EUR, não 850,00EUR)
|
|
- [ ] PDF exportado em vector (não rasterizado)
|
|
- [ ] Tamanho final < 10MB para envio por email
|
|
- [ ] Testar visualização em modo claro e escuro (PDF viewer)
|
|
|
|
---
|
|
|
|
*Referência: premium-proposals v1.0 | 2026-03-10 | Descomplicar®*
|