feat(design-media): adiciona plugin design-media (agents, skills, knowledge e metadados do projeto)

2026-10-28 16:08:37 +00:00
parent 81d1373977
commit ce6030ee00
47 changed files with 2794 additions and 0 deletions
@@ -0,0 +1,147 @@
+---
+name: design
+description: Motor de design profissional multi-marca. Gera apresentações, infográficos, logos, social media, web pages e identidade visual.
+layer: wiki
+---
+
+# /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 |
+|---------|--------|-------|
+| `/design [descricao]` | Routing automatico | Auto |
+| `/design presentation [tema]` | Apresentacao PPTX/PDF | Presenton |
+| `/design infographic [tema]` | Infografico PNG/PDF | design-engine (Fibo/Gemini) |
+| `/design social [plataforma] [tema]` | Post redes sociais | design-engine |
+| `/design web [descricao]` | Landing page / web component | **Stitch (motor principal)** |
+| `/design logo [nome]` | Logo SVG + variacoes | design-engine + Fibo |
+| `/design brand [empresa]` | Identidade visual completa | Stitch + design-engine |
+| `/design from-reference [url]` | Analisa e recria adaptado | Auto |
+
+## Parametros Opcionais
+
+| Parametro | Descricao | Exemplo |
+|-----------|-----------|---------|
+| `--brand [nome]` | Aplicar identidade de marca | `--brand descomplicar` |
+| `--tone [tom]` | Tom da apresentacao | `--tone sales_pitch` |
+| `--format [fmt]` | Formato de exportacao | `--format pdf` |
+| `--variations [n]` | Numero de variacoes | `--variations 5` |
+
+## Workflow
+
+```
+1. PARSE comando e parametros
+2. IDENTIFICAR tipo de output
+   - "presentation" / "slides" / "proposta" -> Presenton
+   - "infographic" / "poster" / "flyer" -> design-engine (Fibo/Gemini)
+   - "social" / "instagram" / "linkedin" -> design-engine (com dimensões)
+   - "web" / "landing" / "page" / "ui" -> Stitch
+   - "logo" / "icone" / "marca" -> design-engine + Fibo
+   - "brand" / "identidade" -> Stitch (web) + design-engine (assets)
+   - "from-reference" -> Researcher primeiro
+3. SE --brand especificado:
+   - Carregar brand pack via design-engine MCP: brand_load(nome)
+   - Aplicar cores, fontes e logo a todos os outputs
+4. DELEGAR a design-lead agent (orquestrador)
+5. APRESENTAR resultados ao utilizador
+```
+
+## Exemplos de Uso
+
+### Apresentacao com marca
+```
+/design presentation "Proposta de servicos web para empresa X" --brand descomplicar
+```
+Resultado: PPTX profissional via Presenton com cores dourado/preto, logo Descomplicar, fonte Nexa.
+
+### Post Instagram
+```
+/design social instagram "Promocao Black Friday -30%"
+```
+Resultado: Imagem 1080x1080 gerada via design-engine (Fibo/Gemini) com texto, cores e layout profissional.
+
+### Landing page
+```
+/design web "Landing page para agencia de marketing digital" --brand descomplicar
+```
+Resultado: HTML/CSS via Stitch com Design DNA da marca.
+
+### Infografico
+```
+/design infographic "Top 10 tendencias AI 2026"
+```
+Resultado: PNG/PDF vertical gerado via design-engine com icones, dados e hierarquia visual.
+
+### Identidade visual completa
+```
+/design brand "Nova Empresa Tech"
+```
+Resultado: Logo + paleta + tipografia + templates social + template apresentacao.
+
+### A partir de referencia
+```
+/design from-reference https://figma.com/file/abc123
+```
+Resultado: Analisa design Figma, extrai estilo, recria adaptado.
+
+## MCPs de Design (4)
+
+| MCP | Funcao |
+|-----|--------|
+| **design-engine** | Imagens AI (Fibo/Gemini) + brand packs + rembg + composição |
+| **presenton** | Apresentacoes AI (slide.descomplicar.pt) |
+| **stitch** | Web design AI text→UI (Google Labs) — motor principal para web/ui/landing |
+| **figma** | Analise referencias (read-only) |
+
+> **Penpot suspenso 07-04-2026 sessão 5** — substituído por Stitch (text→UI generation). MCP penpot removido. Se Stitch for descontinuado, reavaliar.
+
+## Brand Packs Disponiveis
+
+Verificar com: `brand_list()` via design-engine MCP.
+
+Brand packs em: `/media/ealmeida/Dados/Hub/04-Recursos/Design/brands/`
+
+Formato: `{nome}.json` com cores, fontes, logos, voz, estilo.
+
+## Dimensoes Social Media
+
+| Plataforma | Formato | Dimensoes |
+|------------|---------|-----------|
+| Instagram Post | 1:1 | 1080x1080 |
+| Instagram Story | 9:16 | 1080x1920 |
+| LinkedIn Post | ~2:1 | 1200x628 |
+| YouTube Thumbnail | 1
@@ -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®*