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

---
name: 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 |
|---------|--------|-------|
| `/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 | 16:9 | 1280x720 |
| OG Image | ~2:1 | 1200x630 |
| Facebook Cover | ~3:1 | 820x312 |

## Qualidade

Todos os outputs passam pelo design-critic com score minimo 7/10 em 5 dimensoes:
fidelidade, concisao visual, legibilidade, profissionalismo, brand compliance.

---

**Versao**: 2.1.0 | **Data**: 2026-04-07 | **Autor**: Descomplicar
**v2.1.0:** Penpot removido como motor activo (substituído por Stitch para web/ui e design-engine para imagens/social/infográficos). Workflow simplificado.

---

## Healing Log

Registo de erros conhecidos e como evitá-los. Lido automaticamente antes de executar.

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

*Adicionar nova linha após cada erro corrigido.*