---
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 | Penpot + AI |
| `/design social [plataforma] [tema]` | Post redes sociais | Penpot |
| `/design web [descricao]` | Landing page / web component | Stitch |
| `/design logo [nome]` | Logo SVG + variacoes | Penpot + Fibo |
| `/design brand [empresa]` | Identidade visual completa | Todos |
| `/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" -> Penpot
   - "social" / "instagram" / "linkedin" -> Penpot (dimensoes)
   - "web" / "landing" / "page" / "ui" -> Stitch
   - "logo" / "icone" / "marca" -> Penpot + Fibo
   - "brand" / "identidade" -> Pipeline completo
   - "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 composta no Penpot 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 composto no Penpot 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.

## 5 MCPs de Design

| MCP | Funcao |
|-----|--------|
| **design-engine** | Imagens AI (Fibo/Gemini) + brand packs + rembg |
| **presenton** | Apresentacoes AI (slide.descomplicar.pt) |
| **penpot** | Compositor visual (pen.descomplicar.pt) |
| **stitch** | Web design AI (Google) |
| **figma** | Analise referencias (read-only) |

## 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.0.0 | **Data**: 2026-02-12 | **Autor**: Descomplicar