feat: refactor 30+ skills to Anthropic progressive disclosure pattern
- 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>
This commit is contained in:
@@ -1,28 +1,43 @@
|
||||
---
|
||||
name: design
|
||||
description: >
|
||||
Motor de design profissional multi-marca. Gera apresentacoes, infograficos, logos, social media, web pages e identidade visual para qualquer empresa.
|
||||
Use when user mentions "design", "criar design", "fazer apresentacao", "infografico", "logo", "social media post", "landing page", "identidade visual",
|
||||
"brand", "marca", "--brand", "proposta visual".
|
||||
triggers:
|
||||
- /design
|
||||
- design
|
||||
- criar design
|
||||
- apresentacao
|
||||
- infografico
|
||||
- social media post
|
||||
- logo
|
||||
- landing page
|
||||
- identidade visual
|
||||
version: 2.0.0
|
||||
author: Descomplicar Crescimento Digital
|
||||
category: design
|
||||
description: Motor de design profissional multi-marca. Gera apresentações, infográficos, logos, social media, web pages e identidade visual.
|
||||
---
|
||||
|
||||
# /design - Motor de Design Profissional
|
||||
|
||||
Ponto de entrada unificado para o sistema de design multi-marca. Routing automatico para o motor adequado.
|
||||
|
||||
## Contexto NotebookLM
|
||||
|
||||
ANTES de executar, consultar notebooks para contexto especializado:
|
||||
|
||||
| Notebook | ID | Consultar quando |
|
||||
|----------|-----|-----------------|
|
||||
| Tipografia e Cor para Web | f97a0d2b | Sempre |
|
||||
| UI/UX Design | 081ca512 | Para decisões de interface |
|
||||
| Design Profissional AItomatizado | b568b13b-0eed-48c9-b513-5c5b7ec0b102 | Sempre |
|
||||
|
||||
```
|
||||
mcp__notebooklm__notebook_query({
|
||||
notebook_id: "f97a0d2b-a5b3-4640-b941-3cbb184b1b81",
|
||||
query: "<adaptar ao contexto do pedido do utilizador>"
|
||||
})
|
||||
|
||||
mcp__notebooklm__notebook_query({
|
||||
notebook_id: "081ca512-8279-4850-b2b9-dff090267482",
|
||||
query: "<adaptar ao contexto de interface/UX do pedido>"
|
||||
})
|
||||
|
||||
mcp__notebooklm__notebook_query({
|
||||
notebook_id: "b568b13b-0eed-48c9-b513-5c5b7ec0b102",
|
||||
query: "<adaptar ao contexto de design profissional e automação>"
|
||||
})
|
||||
```
|
||||
|
||||
Integrar insights do NotebookLM nas recomendações e decisões.
|
||||
|
||||
---
|
||||
|
||||
## Comandos
|
||||
|
||||
| Comando | Output | Motor |
|
||||
|
||||
289
design-media/skills/design/references/premium-proposals.md
Normal file
289
design-media/skills/design/references/premium-proposals.md
Normal file
@@ -0,0 +1,289 @@
|
||||
# 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®*
|
||||
Reference in New Issue
Block a user