Icon Systempor Owl-Listener

Icon System Skill.

Dê aos ícones um sistema consistente de construção e nomenclatura, em vez de reunir símbolos sem relação entre si.

Design Systems
Especificações

Revisão da fonte · Icon SystemSKILL.md

Tarefa Design Systems Produz • Uma especificação de construção e tamanhos de ícones • Categorias de nomenclatura e requisitos de entrega • Regras de acessibilidade e de contribuição Antes de começar Um agente capaz de inspecionar ícones representativos, seus tamanhos previstos e os formatos de design e de código necessários.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Icon System: Padronize a iconografia do produto

Define como os ícones são desenhados, nomeados, entregues e usados de forma acessível em um produto.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Icon System define as regras da biblioteca de ícones de um produto: grade, linhas-guia, espessura do traço, tratamento de cantos, variações de tamanho, nomenclatura e entrega. Ela distingue o uso de ícones de traço, preenchidos e duotone, em vez de tratar todos os estilos como intercambiáveis.

A fonte também aborda rótulos, ocultação de ícones decorativos, contraste e áreas de interação. Os tamanhos em pixels propostos são valores de referência a adaptar ao produto. Uma especificação de icon-system não significa que uma biblioteca SVG completa já tenha sido desenhada ou testada.

Entregas esperadas

Uma especificação de construção e tamanhos de ícones
Categorias de nomenclatura e requisitos de entrega
Regras de acessibilidade e de contribuição

Ver o briefing de exemplo

Do briefing à revisão

01
Defina as regras de construção
Defina grade, linhas-guia, traço, cantos e estilos aceitos.
02
Organize a biblioteca
Escolha categorias, nomes, variações e os formatos de origem ou de componente necessários.
03
Verifique o uso em contexto
Inspecione os tamanhos aceitos, os rótulos, o texto das ações críticas e as áreas interativas.

02 Quando usar

Quando usar

Use para unificar conjuntos de ícones heterogêneos em um único sistema ou documentar uma biblioteca compartilhada para design e desenvolvimento.

Bom encaixe

Bibliotecas de ícones mistasReúna famílias de símbolos inconsistentes sob um único padrão de construção.
Componentes compartilhados do produtoDefina nomes e wrappers que design e desenvolvimento possam usar de forma consistente.

Limites a verificar

Não é um guia completo de ilustraçãoArte narrativa mais ampla é tratada por illustration-style.
Não cria ativos automaticamenteA fonte especifica um sistema; os ícones e wrappers reais ainda precisam ser produzidos.

Traga estes insumos

Ícones atuaisForneça símbolos representativos e os conflitos existentes.
Tamanhos de usoListe os tamanhos de exibição previstos e os contextos de interação.
Stack de entregaInforme se precisa de SVG, sprites, wrappers de componentes ou de uma biblioteca de design.

03 Decisões importantes

Decisões que importam

Consistência de construção
Regras geométricas compartilhadas fazem os símbolos parecerem relacionados, mesmo com assuntos diferentes.
Nomes significativos
Nomes de categorias e variações facilitam a descoberta e a manutenção.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Carregue o SKILL.md desta tarefa a partir do repositório designer-skills no local de skills compatível com seu agente. O arquivo de entrada não estabelece nenhum comando de instalação universal.

Arquivo de origem upstream

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md

Forneça ícones representativos e seus contextos de uso. A skill define regras; criar e testar os ativos de ícones reais é outra etapa.

Comece com uma única entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use icon-system para padronizar nossos ícones de navegação heterogêneos. Defina regras de grade, traço, cantos, tamanho e nomenclatura e, em seguida, especifique a entrega em SVG e em componentes. Diferencie ícones decorativos de ações rotuladas e indique onde o texto visível é necessário.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

Os ícones seguem regras de construção documentadas.
Os nomes distinguem categoria e variação.
O tratamento de acessibilidade corresponde a cada uso.

OpenDesign oferece um espaço de trabalho local de design para agentes de código. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software venham junto.

Baixar OpenDesign Ler o guia de início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte indicada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: design-systems/skills/icon-system/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Define como os ícones são desenhados, nomeados, entregues e usados de forma acessível em um produto.

Resumo original de OpenDesign, baseado na fonte indicada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

O tamanho visual de um ícone equivale à sua área de toque?

Não. A fonte trata o dimensionamento de exibição e a orientação sobre áreas interativas como questões separadas.

Todo ícone deve ter um nome acessível?

Ícones com significado precisam de rótulo adequado; os decorativos podem ser ocultados de tecnologias assistivas.

Isso abrange ilustrações hero?

Não. A fonte encaminha trabalhos de ilustração mais amplos para outra skill.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de incluí-la no seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design