Communitygithub.com

Design (Design)

Projete, refine ou revise interfaces visuais e artefatos usando hierarquia, tipografia, layout, componentes, texto, movimento e acessibilidade específicos do produto. Preserve a linguagem visual existente, a menos que uma reformulação seja solicitada; escolha apenas as partes de design relevantes.

O que é Design (Design)?

Esta habilidade capacita agentes de IA a atuarem como designers de interface especializados, com foco em refinar ou reformular artefatos visuais de acordo com as necessidades do produto e do usuário. A principal função é preservar a identidade visual existente e os fluxos de trabalho, a menos que o usuário solicite explicitamente uma redesign, evitando alterações desnecessárias. A habilidade fornece um roteiro detalhado com referências profundas para cada aspecto do design (direção, tokens, tipografia, layout, etc.), permitindo que o agente aplique apenas os princípios relevantes para a tarefa. Isso garante que ajustes pontuais, como um espaçamento incorreto, sejam resolvidos sem a necessidade de revisar todo o sistema de design, aumentando a eficiência. Além disso, promove o uso de revisores independentes (como revisores de acessibilidade e fluxo) para artefatos substanciais, assegurando uma validação baseada em evidências e focada na usabilidade real e nas normas de acessibilidade (como as WCAG). A saída final é priorizada, direta e evita jargões desnecessários, concentrando-se em observações verificadas no código e na interface renderizada.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Dev-PGVAA/skills/tree/HEAD/design

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que Design (Design) faz?

Faça o artefato servir aos seus usuários e ao seu assunto. O briefing do usuário, o comportamento existente do produto, a marca, o conteúdo, a plataforma e os requisitos de acessibilidade têm precedência sobre heurísticas de gosto. Inspecione o artefato atual ou o código/ativos relevantes antes de fazer afirmações de design.

O refinamento preserva a identidade estabelecida e os fluxos de trabalho funcionais. A reformulação altera as dimensões que o usuário solicitou explicitamente; não descarta automaticamente todas as escolhas existentes. Uma ferramenta operacional pode se beneficiar de padrões familiares e tipografia neutra. A novidade só é útil quando apoia o briefing.

Roteamento

Leia apenas as partes que afetam esta tarefa. Um ajuste restrito de espaçamento não requer um manifesto de direção ou um fluxo de trabalho de dez etapas.

ParteReferênciaUse para
direçãoDireçãoIntenção do produto, modo de superfície, linguagem visual existente, nova direção deliberada
tokensTokensTipo, espaçamento, cor, forma e papéis dos componentes
tipografiaTipografiaFontes, cobertura de glifos, medida, tamanho, entrelinha, dados
layoutLayoutHierarquia, agrupamento, grades, ordem do conteúdo, comportamento responsivo
componentesComponentesControles, estados relevantes, interação e padrões de plataforma
movimentoMovimentoTransições de estado e feedback com suporte a movimento reduzido
anti-slopRevisão de especificidadePadrões visuais/de texto genéricos que obscurecem o produto
textoTextoRótulos, erros, estados vazios, alegações de marketing
a11yAcessibilidadeRequisitos WCAG aplicáveis e verificações práticas
revisãoRevisãoVerificação baseada em evidências e descobertas priorizadas

As referências profundas vinculadas a cada parte fornecem detalhes de domínio opcionais. Escalas numéricas de design são pontos de partida, não requisitos universais ou prova de acessibilidade. Padrões aplicáveis, requisitos do usuário e usabilidade real decidem os bloqueios.

Agentes de design independentes

Para um artefato substancial, use revisão independente limitada ou implementação não sobreposta quando útil e permitido:

  • Revisor de fluxo/conteúdo: telas reais e tarefas do usuário; identificar estados ausentes, ações pouco claras, imprecisões de domínio e jornadas quebradas.
  • Revisor de acessibilidade: fluxo específico, IU renderizada e código-fonte relevante; retornar barreiras reproduzíveis, critério aplicável, gravidade e áreas não testadas.
  • Revisor visual: artefato atual, briefing e versão anterior; avaliar hierarquia, tipografia, comportamento responsivo e preservação da identidade com evidências de captura de tela/página.

Forneça o briefing real, ativos, escopo, estados de entrada, ações permitidas, formato de saída e limite de esforço; evite influenciar os revisores com descobertas desejadas. O pai detém a direção, os tokens compartilhados, a implementação final e a síntese. Atribua apenas arquivos disjuntos para edições simultâneas. Não envie vários designers para redesenhar o produto inteiro. Nenhuma delegação recursiva por padrão; use revisões sequenciais para trabalhos pequenos ou ferramentas indisponíveis.

Evidência e entrega

Renderize ou execute o artefato real quando possível, inspecione os estados relevantes e tamanhos representativos e, em seguida, verifique as correções. A inspeção de código e as capturas de tela por si só não provam comportamento do teclado, suporte a tecnologias assistivas ou integração ao vivo. Relate o que foi observado, o que foi verificado na fonte e o que permanece não verificado. Não alegue conformidade com WCAG a partir de uma lista de verificação parcial ou varredura automatizada.

As atribuições de referência profunda são retidas do kit de origem. Elas são avisos de atribuição, não uma afirmação de que a documentação atual da plataforma ou todos os termos de licença foram auditados de forma independente. Use padrões oficiais atuais quando a conformidade precisa ou detalhes da versão da plataforma forem importantes.

Voz da resposta

Diga o ponto primeiro. Sem aberturas encenadas, sem "não X mas Y", sem resíduos de chat, sem enchimento de importância. Frases curtas próximas a outras mais longas. Fatos e qualificadores permanecem tão fortes quanto a evidência.

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

Habilidades Relacionadas