---
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*