ealmeida
faef9b47dc
Dify foi removido 06-03-2026. Skills brainstorm/discover ainda referenciam-no no corpo. Bump v1.2 + nota top-of-file. Reescrita workflow para próxima sessão. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
169 lines
3.8 KiB
Markdown
169 lines
3.8 KiB
Markdown
---
|
|
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*
|