Uma skill de design para Claude Code, Cursor e Codex que orienta agentes de programação com IA a criar interfaces que não parecem geradas por IA.
Owl-Listener/designer-skills
Coleção com 273 skills de design prontas para agentes e 76 slash commands para Claude Code e Gemini CLI, cobrindo pesquisa, sistemas, UI, interação e entrega.
- Estrelas
- 2,997
- Forks
- 413
- Issues abertas
- 3
- Último commit
- há 2 meses
O que é?
Designer Skills Pack é um conjunto de conhecimentos de design empacotados como skills e slash commands que um agente de programação com IA pode carregar e aplicar. As skills descrevem tópicos de design, como criar personas, definir design tokens ou elaborar perguntas não indutivas para entrevistas; já os comandos encadeiam várias skills para gerar entregáveis completos, como um ciclo de discovery, um plano de estudo de usabilidade ou um pacote de handoff para desenvolvedores.
A coleção de práticas de design deste repositório está organizada em nove plugins: design-research, design-systems, ux-strategy, ui-design, interaction-design, prototyping-testing, design-ops, designer-toolkit e visual-critique. Há outras quatro coleções, sobre design de produtos de IA, gestão de programas de UX, liderança em design e design inclusivo, hospedadas em repositórios separados e instaladas pelo mesmo marketplace.
A instalação é feita pelo comando de marketplace de plugins do Claude Code, após o qual é possível selecionar plugins individuais na aba Discover. Cada plugin também está disponível como extensão do Gemini CLI. O comando /start-here direciona os usuários à etapa do trabalho em que estão.
Recursos principais
- 01Abrange todo o ciclo de design, da pesquisa com usuários a sistemas, UI, interação e entrega.
- 02Oferece 76 slash commands que encadeiam várias skills para gerar entregáveis completos.
- 03Funciona com o marketplace de plugins do Claude Code e como extensão do Gemini CLI.
- 04Inclui um comando roteador /start-here que sugere por onde começar.
- 05Permite instalar plugins individualmente, em vez do pacote inteiro.
Casos de uso
- Conduzir um ciclo de discovery com personas, mapas de empatia e mapas de jornada para um novo produto.
- Auditar uma tela existente em busca de problemas de hierarquia e tipografia antes de reformulá-la.
- Preparar um pacote de handoff para desenvolvedores com especificações, estados e uma checklist de QA.
- Elaborar um plano de teste de usabilidade ou um roteiro de entrevista para pesquisa com usuários.
Início rápido
- 1
Baixe o Claude Code em claude.com e faça login
- 2
Adicione o marketplace de skills ao Claude Code
/plugin marketplace add Owl-Listener/designer-skills - 3
Digite /plugin, abra a aba Discover e instale as coleções que quiser
- 4
Instale um plugin específico pelo nome, por exemplo, ux-strategy
/plugin install ux-strategy@designer-skills
Antes de usar
- As skills são executadas dentro de um assistente de programação com IA, como o Claude Code ou o Gemini CLI, então você precisa de um deles.
Tópicos
Perguntas frequentes
- O que é designer-skills?
- Coleção com 273 skills de design prontas para agentes e 76 slash commands para Claude Code e Gemini CLI, cobrindo pesquisa, sistemas, UI, interação e entrega. Designer Skills Pack é um conjunto de conhecimentos de design empacotados como skills e slash commands que um agente de programação com IA pode carregar e aplicar. As skills descrevem tópicos de design, como criar personas, definir design tokens ou elaborar perguntas não indutivas para entrevistas; já os comandos encadeiam várias skills para gerar entregáveis completos, como um ciclo de discovery, um plano de estudo de usabilidade ou um pacote de handoff para desenvolvedores.
- designer-skills é gratuito? Qual é a licença?
- designer-skills é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
- designer-skills ainda é mantido?
- Atualizado nos últimos 6 meses. O último commit de designer-skills foi em 5 de set. de 2026.
- Para que posso usar designer-skills?
- Conduzir um ciclo de discovery com personas, mapas de empatia e mapas de jornada para um novo produto. Auditar uma tela existente em busca de problemas de hierarquia e tipografia antes de reformulá-la. Preparar um pacote de handoff para desenvolvedores com especificações, estados e uma checklist de QA. Elaborar um plano de teste de usabilidade ou um roteiro de entrevista para pesquisa com usuários.
- Como instalar designer-skills?
- Baixe o Claude Code em claude.com e faça login Adicione o marketplace de skills ao Claude Code: /plugin marketplace add Owl-Listener/designer-skills Digite /plugin, abra a aba Discover e instale as coleções que quiser Instale um plugin específico pelo nome, por exemplo, ux-strategy: /plugin install ux-strategy@designer-skills
- Onde consigo designer-skills?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/Owl-Listener/designer-skills
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Coleção com mais de 45 dicas práticas para usar o Claude Code, além de um script personalizado para a linha de status e o plugin dx, com habilidades úteis no dia a dia de desenvolvimento.
Uma skill para agentes de IA que oferece a assistentes de programação regras de design de UI/UX pesquisáveis, estilos, paletas, combinações de fontes e orientações específicas para cada stack.
Agent Skills que ajudam agentes de programação a criar interfaces diferenciadas, usando direção de arte, fotos reais e uma verificação no navegador em vez de landing pages genéricas feitas por IA.
Uma skill do Claude que transforma pedidos vagos em prompts estruturados e específicos para ferramentas de IA como Claude Code, Cursor, Midjourney e ChatGPT.
SDK open source para criar e executar agentes de IA em Python e TypeScript, com ferramentas, MCP, memória e portabilidade entre modelos.