chore(design-media): suspender Penpot, adoptar Stitch como motor principal web/ui
- /penpot-pipeline arquivada (backup GDrive) - /design v2.1.0: routing actualizado, MCPs reduzidos 5→4, Penpot removido - design-engine assume infographic/social/logo (era Penpot) - Stitch assume web/landing/ui (era também Stitch, agora primário) Decisão sessão 5 (07-04): match com workflow real (mockups para propostas). Penpot exigia build manual; Stitch faz text→UI generation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -44,11 +44,11 @@ Integrar insights do NotebookLM nas recomendações e decisões.
|
||||
|---------|--------|-------|
|
||||
| `/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 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
|
||||
@@ -66,11 +66,11 @@ Integrar insights do NotebookLM nas recomendações e decisões.
|
||||
1. PARSE comando e parametros
|
||||
2. IDENTIFICAR tipo de output
|
||||
- "presentation" / "slides" / "proposta" -> Presenton
|
||||
- "infographic" / "poster" / "flyer" -> Penpot
|
||||
- "social" / "instagram" / "linkedin" -> Penpot (dimensoes)
|
||||
- "infographic" / "poster" / "flyer" -> design-engine (Fibo/Gemini)
|
||||
- "social" / "instagram" / "linkedin" -> design-engine (com dimensões)
|
||||
- "web" / "landing" / "page" / "ui" -> Stitch
|
||||
- "logo" / "icone" / "marca" -> Penpot + Fibo
|
||||
- "brand" / "identidade" -> Pipeline completo
|
||||
- "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)
|
||||
@@ -91,7 +91,7 @@ Resultado: PPTX profissional via Presenton com cores dourado/preto, logo Descomp
|
||||
```
|
||||
/design social instagram "Promocao Black Friday -30%"
|
||||
```
|
||||
Resultado: Imagem 1080x1080 composta no Penpot com texto, cores e layout profissional.
|
||||
Resultado: Imagem 1080x1080 gerada via design-engine (Fibo/Gemini) com texto, cores e layout profissional.
|
||||
|
||||
### Landing page
|
||||
```
|
||||
@@ -103,7 +103,7 @@ Resultado: HTML/CSS via Stitch com Design DNA da marca.
|
||||
```
|
||||
/design infographic "Top 10 tendencias AI 2026"
|
||||
```
|
||||
Resultado: PNG/PDF vertical composto no Penpot com icones, dados e hierarquia visual.
|
||||
Resultado: PNG/PDF vertical gerado via design-engine com icones, dados e hierarquia visual.
|
||||
|
||||
### Identidade visual completa
|
||||
```
|
||||
@@ -117,16 +117,17 @@ Resultado: Logo + paleta + tipografia + templates social + template apresentacao
|
||||
```
|
||||
Resultado: Analisa design Figma, extrai estilo, recria adaptado.
|
||||
|
||||
## 5 MCPs de Design
|
||||
## MCPs de Design (4)
|
||||
|
||||
| MCP | Funcao |
|
||||
|-----|--------|
|
||||
| **design-engine** | Imagens AI (Fibo/Gemini) + brand packs + rembg |
|
||||
| **design-engine** | Imagens AI (Fibo/Gemini) + brand packs + rembg + composição |
|
||||
| **presenton** | Apresentacoes AI (slide.descomplicar.pt) |
|
||||
| **penpot** | Compositor visual (pen.descomplicar.pt) |
|
||||
| **stitch** | Web design AI (Google) |
|
||||
| **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.
|
||||
@@ -153,7 +154,8 @@ fidelidade, concisao visual, legibilidade, profissionalismo, brand compliance.
|
||||
|
||||
---
|
||||
|
||||
**Versao**: 2.0.0 | **Data**: 2026-02-12 | **Autor**: Descomplicar
|
||||
**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.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,168 +0,0 @@
|
||||
---
|
||||
name: penpot-pipeline
|
||||
description: >
|
||||
Pipeline Penpot→código: extrai designs do Penpot via MCP, converte para HTML/CSS/React.
|
||||
Usar quando: converter mockup Penpot para código, gerar componente a partir de design,
|
||||
exportar assets Penpot, sincronizar design system com código.
|
||||
---
|
||||
|
||||
# /penpot-pipeline — Pipeline Design→Código
|
||||
|
||||
Workflow formalizado para converter designs Penpot em código funcional.
|
||||
O MCP Penpot já existe (`mcp__penpot__*`) — esta skill formaliza o workflow.
|
||||
|
||||
---
|
||||
|
||||
## Workflow Completo
|
||||
|
||||
### Passo 1 — Encontrar o Design
|
||||
|
||||
```javascript
|
||||
// Listar projectos Penpot
|
||||
mcp__penpot__list_projects({})
|
||||
|
||||
// Listar ficheiros no projecto
|
||||
mcp__penpot__get_project_files({ project_id: "<ID>" })
|
||||
|
||||
// Buscar componente específico
|
||||
mcp__penpot__search_object({
|
||||
file_id: "<FILE_ID>",
|
||||
query: "<nome do componente>"
|
||||
})
|
||||
```
|
||||
|
||||
### Passo 2 — Analisar Estrutura
|
||||
|
||||
```javascript
|
||||
// Schema disponível (ler uma vez por sessão)
|
||||
mcp__penpot__penpot_tree_schema({})
|
||||
|
||||
// Árvore do componente com screenshot
|
||||
mcp__penpot__get_object_tree({
|
||||
file_id: "<FILE_ID>",
|
||||
object_id: "<OBJECT_ID>",
|
||||
depth: 3
|
||||
})
|
||||
|
||||
// Screenshot visual de alta resolução
|
||||
mcp__penpot__get_rendered_component({
|
||||
file_id: "<FILE_ID>",
|
||||
object_id: "<OBJECT_ID>"
|
||||
})
|
||||
```
|
||||
|
||||
### Passo 3 — Gerar Código
|
||||
|
||||
Com base na árvore + screenshot, gerar código na stack alvo:
|
||||
|
||||
#### HTML + CSS (vanilla)
|
||||
```
|
||||
- Usar variáveis CSS para cores/fonts do design system
|
||||
- Mobile-first (375px → 768px → 1200px)
|
||||
- Nomes de classes: BEM (block__element--modifier)
|
||||
- Acessibilidade: aria-labels, roles semânticos
|
||||
```
|
||||
|
||||
#### React + TailwindCSS
|
||||
```
|
||||
- Componente funcional com TypeScript
|
||||
- Props tipadas
|
||||
- Variantes via className condicional
|
||||
- Shadcn/ui para primitivos (Button, Card, Input)
|
||||
- Tailwind classes da paleta Descomplicar ou do cliente
|
||||
```
|
||||
|
||||
#### Next.js (Server Component por defeito)
|
||||
```
|
||||
- Server Component se sem interactividade
|
||||
- Client Component ('use client') apenas para eventos
|
||||
- Image: next/image com alt e sizes
|
||||
- Link: next/link
|
||||
```
|
||||
|
||||
### Passo 4 — Exportar Assets
|
||||
|
||||
```javascript
|
||||
// Exportar imagem/icon do design
|
||||
mcp__penpot__export_object({
|
||||
file_id: "<FILE_ID>",
|
||||
object_id: "<OBJECT_ID>",
|
||||
format: "svg" // svg | png | pdf
|
||||
})
|
||||
```
|
||||
|
||||
### Passo 5 — Auditoria 10/10
|
||||
|
||||
Antes de entregar código (Regra #49):
|
||||
- [ ] Segurança: sem XSS, sem dados expostos
|
||||
- [ ] Performance: imagens optimizadas, lazy loading
|
||||
- [ ] Acessibilidade: contraste, labels, keyboard nav
|
||||
- [ ] Mobile: testado em 375px
|
||||
- [ ] PT-PT: texto em português europeu
|
||||
|
||||
---
|
||||
|
||||
## Design System Descomplicar → Código
|
||||
|
||||
```css
|
||||
/* design.json → variáveis CSS */
|
||||
--color-primary: #1e3a5f;
|
||||
--color-accent: #f97316;
|
||||
--color-neutral: #f8fafc;
|
||||
--color-text: #1e293b;
|
||||
--color-muted: #64748b;
|
||||
--font-heading: 'Inter', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
```
|
||||
|
||||
```tsx
|
||||
// Tailwind config (tailwind.config.ts)
|
||||
colors: {
|
||||
primary: '#1e3a5f',
|
||||
accent: '#f97316',
|
||||
neutral: '#f8fafc',
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Casos de Uso
|
||||
|
||||
### Landing page de serviço
|
||||
```
|
||||
1. mcp__penpot__search_object — encontrar frames "Hero", "Features", "CTA"
|
||||
2. get_object_tree para cada frame
|
||||
3. get_rendered_component para referência visual
|
||||
4. Gerar HTML/CSS seguindo /design-b2b ou /design-saude
|
||||
5. Integrar em WP (Elementor) ou Next.js
|
||||
```
|
||||
|
||||
### Componente React isolado
|
||||
```
|
||||
1. search_object — encontrar componente
|
||||
2. get_object_tree com depth=5 (para componentes complexos)
|
||||
3. Gerar TSX com props
|
||||
4. Exportar assets SVG
|
||||
5. Publicar em /components da biblioteca
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
- **Nunca** gerar código sem ver o screenshot (get_rendered_component)
|
||||
- **Nunca** assumir cores sem verificar design.json ou paleta do cliente
|
||||
- **Nunca** entregar sem testar mobile (375px)
|
||||
- **Nunca** hardcodar texto — usar variáveis/props
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
```jsonl
|
||||
{"date":"","issue":"","fix":"","source":"user|auto"}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*Skill /penpot-pipeline v1.0 | 06-04-2026 | Eixo 5.5 — Pipeline Penpot→Código*
|
||||
Reference in New Issue
Block a user