design-media: rascunhos da migracao para Open Design

Levantamento e metodo, ainda por aprovar:

- SPEC-opendesign-migration.md: plano de migrar as skills e agents do
  plugin para o Open Design como motor unico, com design systems geridos
  la (Descomplicar e um por cliente)
- DRAFT-metodo-design-pro.md: contrato de entrada com 4 pilares, fluxo em
  4 fases, regra do hero, pipeline template-first (Envato e galerias) e
  directrizes de operacao no Open Design

Nenhum destes documentos esta validado por uso real. O primeiro teste
(WhatSMS) falhou no enquadramento — ver nota no topo do metodo.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

design-media/docs/SPECS/DRAFT-metodo-design-pro.md

@@ -0,0 +1,83 @@
+# DRAFT — Método Design Pro (camada de processo sobre Open Design)
+
+**Estado:** Rascunho — origem: síntese Gemini de vídeos de páginas de alta qualidade (2026-07-22), adaptado ao stack Descomplicar.
+**Aplica-se a:** websites/landing pages, propostas comerciais, decks PPTX, banners, vídeo — qualquer artefacto de design.
+
+## 1. Contrato de Entrada (Zero Rascunhos Genéricos)
+
+Proibido gerar qualquer artefacto sem os 4 pilares explícitos ou deduzidos e confirmados:
+
+1. **Objectivo comercial** — o que o utilizador/cliente deve sentir ou fazer no fim.
+2. **Layout narrativo** — ordem exacta das secções/slides e comportamento de transição (scrollytelling em web; arco narrativo em decks/propostas).
+3. **Personalidade da marca** — tom de voz, paleta intencional, espaçamento generoso (editorial feel). Fonte: design system no OD (Descomplicar ou cliente).
+4. **Público-alvo** — perfil exacto que justifica a conversão.
+
+Sem os 4 pilares → perguntar/deduzir e validar. Nunca template pré-feito como resposta.
+
+## 2. Fluxo em 4 fases (mapeado às skills OD)
+
+| Fase | O quê | Skills OD |
+|---|---|---|
+| **F1 Arquitectura** | Grelha estrutural, tipografia, hierarquia de blocos (wireframe visual) | `design-consultation`, `design-brief`, design system |
+| **F2 Direcção artística** | Implementação com micro-interacções, profundidade, impacto no início. Web: Next.js/TS + Tailwind + Framer Motion | `creative-director`, `high-end-visual-design`, `frontend-design`, `gsap-*`/`emilkowalski-motion` |
+| **F3 Variantes (Regra do Hero)** | Secção crítica → 3-5 abordagens estruturais distintas (split / centered minimal / inset frame) para selecção antes de avançar | runs paralelos no OD, `design-shotgun` local; **Google Stitch** (`stitch-loop`, `stitch-design-taste`) para ideação rápida de variantes UI a partir de prompt/sketch/screenshot, com export Figma |
+| **F4 Auditoria adversarial** | Validação crítica antes de entrega: consistência visual, tipos TS, acessibilidade, bundle, fluidez de animação, anti-AI-slop | `design-review`, `impeccable-design-polish`, `pptx-html-fidelity-audit` (decks) |
+
+## 3. Regra de Ouro da Modificação
+
+- **Macro** (estrutura, layout, fluxo de páginas/secções) → resolvido e validado primeiro, ao nível global.
+- **Micro** (espaçamentos, CTAs, detalhes) → só depois do macro aprovado. Nunca misturar os dois níveis na mesma iteração.
+
+## 4. Pipeline Template-First (Envato & afins)
+
+Um template profissional pode substituir F1+F2 — entra como ponto de partida, nunca como entrega directa.
+
+### 4.1 Duas categorias de fonte
+
+**A. Templates com código/ficheiros (adaptáveis):**
+- Envato/ThemeForest (HTML, Next.js, Elementor kits, PPTX, vídeo) — licença cobre projectos de cliente
+- UI8, Craftwork (UI kits), Relume (biblioteca Figma de secções), Framer/Webflow templates
+
+**B. Galerias de inspiração (extracção de DNA, nunca cópia):**
+- Dribbble, Pageflows, Recent.design, Landingfolio, Screensdesign
+- Mobbin (fluxos de apps reais), Awwwards, Godly, Land-book, Lapa Ninja, SaaSFrame
+
+### 4.2 Fluxo de adaptação (categoria A)
+
+1. **Seleccionar** — escolher template alinhado com o layout narrativo do Contrato de Entrada (não o contrário).
+2. **Extrair** — estrutura, grelha, tokens do template (`brand-extract`, `image-to-code`, `web-clone`, análise directa dos ficheiros).
+3. **Retheme** — aplicar o design system do cliente/Descomplicar sobre a estrutura (`theme-factory`, `redesign-existing-projects`). Zero cores/fontes do template sobram.
+4. **Recontentar** — copy e conteúdo reais segundo os 4 pilares; remover secções que não servem o objectivo comercial (cortar > acrescentar).
+5. **F4 Auditoria** — igual ao fluxo normal; atenção extra a resíduos do template (placeholders, lorem ipsum, links demo, créditos).
+
+### 4.3 Fluxo de referência (categoria B)
+
+1. Capturar screenshots/URLs das referências escolhidas.
+2. Extrair DNA: paleta, tipografia, grelha, ritmo de secções, padrões de interacção (`design-researcher` / visão OD).
+3. DNA alimenta F1/F2 como direcção de arte — o artefacto é gerado de raiz com o nosso design system.
+
+### 4.4 Biblioteca local de templates
+
+- Templates descarregados (Envato) arquivados em pasta própria com metadados (fonte, licença, tags de uso) — candidata: `Hub/04-Recursos/Design/templates/` — para reutilização entre projectos.
+- Cada adaptação bem-sucedida regista o par template→resultado para acelerar selecções futuras.
+
+## 5. Directrizes operacionais do agente no Open Design
+
+Regras de execução para qualquer agente (Claude Code, Gemini CLI) a operar como motor no OD. As que repetem as secções 1–3 não se duplicam — referem-se.
+
+1. **Contrato de Entrada** (secção 1) — os 4 pilares antes de qualquer geração.
+2. **`DESIGN.md` é o contrato da marca** — todas as decisões visuais (tipografia, paleta, espaçamento, componentes) vêm do `DESIGN.md` activo do projecto OD, nunca de adivinhação. A skill define *o quê*; o `DESIGN.md` define *como fica*. Manter o `DESIGN.md` sincronizado com o design system (Descomplicar ou cliente).
+3. **Declarar a skill/formato certo** — indicar explicitamente o tipo de saída (`web-prototype`, `dashboard`, `mobile-app`, `deck`) para activar a directriz OD correcta.
+4. **Macro → micro** (secção 3, Regra de Ouro).
+5. **Variantes antes de fechar** (secção 2, F3) — 3 a 5 variações radicalmente diferentes da secção crítica, resto igual; escolher direcção, só depois refinar.
+6. **Referências visuais concretas** — screenshots via menção `@` no chat OD ou ficheiros no projecto; nunca só descrição textual quando existe referência (liga à secção 4.3).
+7. **Ecossistema no mesmo projecto OD** — landing + dashboard + app do mesmo cliente vivem no mesmo projecto, para herdar `DESIGN.md`, paleta e tipografia sem deriva (handoff contínuo).
+8. **Componentes externos adaptados, não recriados** — gráficos animados, tabelas complexas: importar de bibliotecas (ex: 21st.dev, shadcn/ui) e adaptar ao design system, em vez de gerar do zero.
+9. **Acesso directo via MCP** — usar `mcp__open-design__*` (get_artifact, write_file, search_files, start_run) para trabalhar sobre o código vivo do projecto; nunca depender de exports estáticos/zips. Passar `project` explícito (contexto activo expira ~5 min).
+10. **Código final limpo e exportável** — HTML/CSS/JS determinístico, responsivo em iframe isolado, pronto para a equipa importar para React/Next.js/Vue sem limpeza. Nada de placeholders, estilos inline órfãos ou dependências fantasma. (Web em produção segue depois PROC-DEV-STANDARD no dev container.)
+
+## 6. Integração futura (após aprovação do SPEC v3.0.0)
+
+- Este método torna-se o corpo da skill `design` (router) — gate de contrato + orquestração das 4 fases.
+- Para websites, avaliar skill dedicada `create-pro-website` (Next.js/TS/Tailwind/Framer Motion) que empacota o output OD no nosso stack (dev container, regra 48).
+- Quality gate: nenhuma entrega sem F4 com score ≥7/10 (design-critic) e zero findings bloqueantes do design-review.

design-media/docs/SPECS/SPEC-opendesign-migration.md

@@ -0,0 +1,71 @@
+# SPEC — Migração do plugin design-media para Open Design (OD)
+
+**Versão alvo:** design-media v3.0.0
+**Data:** 2026-07-22
+**Estado:** Rascunho — aguarda aprovação
+**Decisor:** Emanuel
+
+## 1. Objectivo
+
+O Open Design (MCP `open-design`, daemon local) passa a ser o **motor único** de design do plugin design-media. Os motores actuais (design-engine Fibo/Gemini, Presenton, Stitch, Penpot, python-pptx directo, Remotion local) deixam de ser invocados directamente — tudo passa por projectos OD, skills OD e design systems OD.
+
+## 2. Porquê
+
+- O OD já tem nativamente o que o plugin reimplementa: `brand-guidelines`, `brandkit`, `brand-extract`, `theme-factory`, `pptx-generator`, `pptx`, `slides`, `remotion`, `ui-ux-pro-max`, `imagegen`, `venice-*`/`fal-*` (imagem/vídeo/áudio).
+- 143 design systems instalados como plugins (`design-system-*`) + suporte a design systems custom por projecto (o projecto "Banners WiP Descomplicar" já usa `designSystemId: descomplicar`).
+- Permite **adaptar entre modelos disponíveis no OD** e **criar design systems por cliente** — requisito directo do Emanuel.
+
+## 3. Âmbito
+
+### 3.1 Design systems geridos no OD (novo pilar)
+
+- Formalizar o design system **`descomplicar`** no OD a partir dos tokens actuais (`skills/brand-guidelines/references/descomplicar-theme.md` YAML + `color-palettes.md`).
+- Fluxo **novo cliente**: skill OD `brand-extract` (site do cliente) → `theme-factory`/`brand-guidelines` → design system custom no OD, nome = slug do cliente.
+- Os brand packs em `Hub/04-Recursos/Design/brands/*.json` são migrados/sincronizados para design systems OD (o JSON local mantém-se como fonte exportável, mas o OD é a fonte operacional).
+- Os 4 design systems sectoriais (b2b, ecommerce, saude, solar) passam a design systems OD; as skills locais `design-{b2b,ecommerce,saude,solar}` são reduzidas a referência/routing.
+
+### 3.2 Skills adaptadas (wrappers finos sobre OD)
+
+| Skill local | Passa a |
+|---|---|
+| `design` | Router: cria/reutiliza projecto OD, aplica design system, escolhe skill OD (`imagegen`, `slides`, `poster-hero`, etc.), `start_run` → `get_run` → entrega |
+| `brand-guidelines` | Gestão de design systems no OD (criar/actualizar/listar Descomplicar + clientes); mantém a norma escrita (tom, ®) |
+| `pptx-generator` | Wrapper das skills OD `pptx-generator`/`pptx`/`slides` com design system aplicado; python-pptx mantido só para leitura/QA de ficheiros existentes |
+| `remotion-video` | Wrapper da skill OD `remotion` (+ `venice-video`/`fal-*` quando fizer sentido) |
+| `clone-style` | Substituída pela skill OD `brand-extract` (wrapper) |
+| `cinematic-site` | Usa skills OD de web (`web-clone`, `frontend-design`) via projecto OD |
+| `ui-ux-pro-max`, `design-b2b/ecommerce/saude/solar` | Referência local mantida; apontam para design systems OD |
+
+### 3.3 Agents actualizados
+
+- `design-lead`, `design-prompt-architect`, `design-generator`: MCPs alvo passam a `mcp__open-design__*`; remoção de referências a Penpot/Presenton/Stitch/design-engine como motores.
+- `design-critic`, `design-researcher`, `ui-designer`, `web-designer`, `video-production-specialist`: actualizar referências de ferramentas; lógica mantém-se.
+
+### 3.4 Fora de âmbito
+
+- Alterar o OD em si (daemon, skills OD).
+- Migrar histórico de projectos antigos Presenton/Stitch.
+- Desligar os MCPs antigos da máquina (fica para limpeza posterior, decisão separada).
+
+## 4. Critérios de aceitação
+
+1. `/design` gera um artefacto real num projecto OD com design system `descomplicar` aplicado (prova: run `succeeded` + artefacto).
+2. Design system `descomplicar` existe no OD com os tokens oficiais (cores/fontes verificadas contra `descomplicar-theme.md`).
+3. Fluxo de cliente demonstrado: criar design system custom para 1 cliente de teste via `brand-extract`.
+4. `pptx-generator` produz um deck via OD com brand Descomplicar.
+5. `remotion-video` produz/inicia um vídeo via skill OD `remotion`.
+6. Zero referências activas a Penpot/Presenton/Stitch/design-engine como motores nas skills/agents adaptados.
+7. CHANGELOG.md + versão 3.0.0 + commit atómico.
+
+## 5. Riscos
+
+- **Paridade de export**: garantir que o OD exporta PPTX/PNG/PDF nos formatos que os fluxos actuais (propostas, LinkedIn) exigem — validar cedo (crit. 4).
+- **Contexto activo OD expira ~5 min**: wrappers devem passar `project` explícito, nunca depender do contexto activo.
+- **Outputs grandes do MCP** (`list_plugins` ~270KB): wrappers devem usar filtros/ids directos, nunca listagens completas no contexto (regra 62).
+
+## 6. Faseamento
+
+- **F1** — Design system `descomplicar` no OD + skill `brand-guidelines` adaptada.
+- **F2** — `design` (router) + agents lead/architect/generator.
+- **F3** — `pptx-generator` + `remotion-video` + `clone-style`→`brand-extract`.
+- **F4** — Sectoriais + cinematic-site + fluxo cliente de teste + QA final + CHANGELOG/commit.