Guia de Design UI/UX do Penpot

Crie designs profissionais e centrados no usuário no Penpot usando o servidor MCP penpot/penpot-mcp e princípios comprovados de UI/UX.

Ferramentas MCP Disponíveis

Configuração do Servidor MCP

As ferramentas MCP do Penpot exigem que o servidor penpot/penpot-mcp esteja em execução localmente. Para instalação detalhada e solução de problemas, consulte setup-troubleshooting.md.

Antes da Configuração: Verifique se Já Está em Execução

Sempre verifique se o servidor MCP já está disponível antes de tentar a configuração:

1. Tente chamar uma ferramenta primeiro: Tente mcp__penpot__penpot_api_info - se for bem-sucedido, o servidor está em execução e conectado. Nenhuma configuração é necessária.

2. Se a ferramenta falhar, pergunte ao usuário:

   "O servidor Penpot MCP não parece estar conectado. O servidor já está instalado e em execução? Se sim, posso ajudar a solucionar problemas. Se não, posso guiá-lo pela configuração."

3. Prossiga com as instruções de configuração somente se o usuário confirmar que o servidor não está instalado.

Início Rápido (Somente Se Não Instalado)

# Clone and install
git clone https://github.com/penpot/penpot-mcp.git
cd penpot-mcp
npm install

# Build and start servers
npm run bootstrap

Em seguida, no Penpot:

1. Abra um arquivo de design
2. Vá para Plugins → Carregar plugin de URL
3. Digite: http://localhost:4400/manifest.json
4. Clique em "Conectar ao servidor MCP" na interface do plugin

Configuração do VS Code

Adicione ao settings.json:

{
  "mcp": {
    "servers": {
      "penpot": {
        "url": "http://localhost:4401/sse"
      }
    }
  }
}

Solução de Problemas (Se o Servidor Estiver Instalado, Mas Não Funcionando)

Referência Rápida

Princípios Fundamentais de Design

As Regras de Ouro

1. Clareza acima de sagacidade: Cada elemento deve ter um propósito
2. Consistência constrói confiança: Reutilize padrões, cores e componentes
3. Objetivos do usuário em primeiro lugar: Projete para tarefas, não para recursos
4. Acessibilidade não é opcional: Projete para todos
5. Teste com usuários reais: Valide suposições precocemente

Hierarquia Visual (Ordem de Prioridade)

1. Tamanho: Maior = mais importante
2. Cor/Contraste: Alto contraste atrai a atenção
3. Posição: Canto superior esquerdo (da esquerda para a direita) é visto primeiro
4. Espaço em branco: O isolamento enfatiza a importância
5. Peso da tipografia: Negrito se destaca

Fluxo de Trabalho de Design

1. Verifique o sistema de design primeiro: Pergunte ao usuário se ele tem tokens/especificações existentes, ou descubra no arquivo Penpot atual
2. Entenda a página: Chame mcp__penpot__execute_code com penpotUtils.shapeStructure() para ver a hierarquia
3. Encontre elementos: Use penpotUtils.findShapes() para localizar elementos por tipo ou nome
4. Crie/modifique: Use penpot.createBoard(), penpot.createRectangle(), penpot.createText() etc.
5. Aplique layout: Use addFlexLayout() para contêineres responsivos
6. Valide: Chame mcp__penpot__export_shape para verificar visualmente seu trabalho

Gerenciamento do Sistema de Design

Antes de criar designs, determine se o usuário tem um sistema de design existente:

1. Pergunte ao usuário: "Você tem um sistema de design ou diretrizes de marca para seguir?"
2. Descubra no Penpot: Verifique se há componentes, cores e padrões existentes

…