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

name, description

name	description
penpot-pipeline	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

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

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

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

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

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

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

---

Skill /penpot-pipeline v1.0 | 06-04-2026 | Eixo 5.5 — Pipeline Penpot→Código