Pular pro conteúdo

Design An Interface skill

Antes de escrever o código, você vê três ou mais formas bem diferentes de montar a API de um módulo e escolhe a melhor, ou junta o melhor de cada.

por Matt Pocock

instalações
208,8 mil
estrelas no GitHub
303,3 mil
No skills.sh desde
fevereiro de 2026
Licença
MIT

Atualizada no GitHub em 22 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

O que ela faz

Aqui interface não é tela: é o jeito como outras partes do sistema usam um módulo ou uma API, com quais funções e parâmetros. A skill segue a ideia Design It Twice, do livro A Philosophy of Software Design: a primeira ideia raramente é a melhor, então vale gerar várias bem diferentes e comparar.

Primeiro o Claude levanta o que o módulo resolve, quem vai usá-lo, as operações principais e as restrições. Depois abre 3 ou mais subagentes ao mesmo tempo, cada um com uma restrição diferente: poucas funções, máxima flexibilidade, otimizar o caso mais comum ou se inspirar numa biblioteca.

Cada desenho volta com a assinatura, um exemplo de uso, o que esconde por dentro e os prós e contras. O Claude mostra um por vez, compara em texto (simplicidade, profundidade, facilidade de usar certo) e pergunta qual serve melhor e o que vale puxar dos outros. Ele não implementa nada.

Nas palavras de quem fez

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface…

Matt Pocock, no SKILL.md

Quando usar

  • Vai criar um módulo novo, como o de pagamentos ou de envio de e-mail, e quer acertar o formato antes
  • A API atual de uma parte do sistema está confusa e você quer opções de redesenho
  • Comparar formatos antes de pedir pro Claude escrever o código

Depois de instalar, é só pedir assim

  • Desenha a interface do módulo de cupons de desconto de três jeitos bem diferentes e compara
  • Design it twice: quero opções pra API que o site vai usar pra consultar o estoque
  • Antes de implementar o envio de notificações, me mostra desenhos alternativos da interface e qual serve melhor pro caso mais comum

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

  • Gen Agent Trust HubPassou
  • SocketPassou
  • SnykPassou

Perguntas

Como instalar a Design An Interface no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Design An Interface, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

Ela desenha telas?

Não. Interface, aqui, é o formato de uso de um módulo de código ou de uma API: funções, parâmetros e o que fica escondido por dentro. Pra tela de site ou app, o caminho é outro tipo de skill.

O que precisa pra funcionar?

Um agente que abra subagentes em paralelo, como o Claude Code. Não pede chave nem conta paga, mas três ou mais subagentes ao mesmo tempo consomem mais do seu limite de uso.

Roda no Codex e no Antigravity?

O roteiro é texto, e qualquer agente que leia skills consegue seguir. A geração em paralelo depende de o agente conseguir abrir subagentes.

Levar essa skill

1x design-an-interfaceR$ 0,00

TotalR$ 0,00

A skill sai aqui mesmo, na hora. Seus dados eu uso pra falar com você sobre o MazyOS.

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/mattpocock/skills

Aprenda a usar

Mais da loja Matt Pocock

Ver a loja Matt Pocock