Skill de Design de Ícones de App
Gatilho
Use para qualquer solicitação de novo ícone de app, redesenho de ícone, crítica de ícone ou exportação de ícone de app da Apple. Consulte a documentação técnica e de design atual da Apple quando as especificações de produção forem importantes.
Processo
- Identifique o propósito central do app e a linguagem da marca. Use a identidade visual previamente estabelecida, se relevante; caso contrário, escolha uma metáfora visual distinta.
- Reduza a metáfora a um símbolo central reconhecível, com formas simples, preenchidas e em negrito, e uma silhueta clara. Evite detalhes minúsculos, texturas complexas, traços finos, capturas de tela, texto desnecessário e brilho excessivo.
- Escolha uma paleta deliberada e contida, com contraste claro entre o fundo e o primeiro plano. Centralize o ícone primário opticamente e deixe uma área de segurança generosa para as máscaras do sistema.
- Projete para permanecer identificável em tamanhos pequenos. Visualize em tamanho real, 180 px, 60 px e 30 px (testes de design, não requisitos de pixel prescritos pela Apple).
- Considere os modos padrão, escuro, claro e matizado. Preserve o conceito e o reconhecimento entre as diferentes aparências.
- Revise o checklist de garantia de qualidade; simplifique qualquer elemento que se torne ruído em escala reduzida.
- Produza ativos da mais alta qualidade nos formatos realmente suportados pelas ferramentas disponíveis. Nunca afirme que uma fonte vetorial/editável ou variantes foram criadas se não tiverem sido.
Diretrizes de Interface Humana da Apple
- Prefira simplicidade e reconhecimento imediato. Detalhes finos podem se tornar ruídos quando o sistema adiciona realces e sombras.
- Prefira ilustrações a fotos e não reproduza meramente a interface do aplicativo.
- Evite linhas extremamente finas e ângulos agudos se seus detalhes se perderem em tamanhos menores.
- Evite palavras não essenciais, slogans ou declarações específicas da plataforma.
- Não replique hardware da Apple.
- Use camadas quadradas sem máscara; o sistema aplica cantos arredondados/máscaras circulares por conta própria. Não incorpore cantos arredondados na arte-base.
- Posicione o conteúdo importante centralmente para que a máscara do sistema não o corte.
- Os ícones devem manter consistência visual entre dispositivos e aparências.
Tamanhos Apple e máscaras do sistema (verificado em 2026-10-24)
| Alvo | Tela | Máscara do sistema |
|---|---|---|
| iOS, iPadOS, macOS | 1024 × 1024 px | retângulo arredondado |
| watchOS | 1088 × 1088 px | círculo |
| visionOS | 1024 × 1024 px | círculo |
| tvOS | 800 × 480 px | retângulo arredondado |
- Use sRGB para exportações portáteis; Display P3 também é suportado em plataformas Apple, conforme documentado.
- Para o fluxo de trabalho contemporâneo da Apple, prefira arte em camadas e o Icon Composer para visualizar variantes de plataforma e aparência (padrão, escuro, claro/escuro claro, matizado claro/escuro).
- Desenhe a arte como vetores e exporte cada camada ajustável independentemente como SVG, quando possível, convertendo texto em contornos. Camadas PNG são adequadas se os recursos SVG não forem suportados.
- Adie desfoque, sombras, efeitos especulares, transparência, opacidade, gradientes e efeitos de fundo para o Icon Composer ao preparar ícones em camadas Liquid Glass.
- O fundo deve cobrir toda a tela. Para um ícone iOS estático, use como padrão um fundo opaco e sangrado. Um glifo isolado e transparente é um tipo diferente de ativo, não um ícone completo.
- O sistema aplica máscaras; não exporte geometria de máscara nas camadas de arte.
- Um PNG plano de 1024 px pode ser entregue para fluxos de trabalho de ícones estáticos, mas não equivale a um ativo
.iconem camadas do Icon Composer.
Checklist de garantia de qualidade
- Um conceito memorável, silhueta reconhecível
- Legível em tamanho pequeno e em escala de cinza
- Cores limitadas e contraste forte
- Nenhuma palavra, textura, detalhe fino ou captura de tela desnecessários
- Centralização óptica e espaçamento seguro nas bordas
- Arte-fonte quadrada e sem máscara, fundo sangrado
- Revisado para aparências escura, matizada e clara
- Tamanho da plataforma alvo, espaço de cor e formato de exportação corretos
- Alegações sobre editabilidade, camadas e formatos correspondem aos arquivos reais
App atual de cérebro/matemática do usuário: sobreposição opcional específica da marca
Use apenas para este projeto específico, não para todos os apps:
- Máximo de três cores sólidas; paleta extraída de azul cobalto/elétrico, violeta e rosa-magenta (ou azul marinho profundo quando apropriado).
- Sem gradientes, a menos que o usuário os solicite.
- Silhueta de cérebro abstrata e simplificada com alguns lobos em negrito; sem ilustração anatômica hiperdetalhada.
- Mínimo, reconhecível e atraente em tamanhos de ícone pequenos. A profundidade deve ser contida e não deve adicionar mais cores.
- O fundo do ícone do app faz parte da composição, não é transparente (a menos que uma camada de símbolo separada seja solicitada).
Template de prompt de geração de imagem
'Crie um ícone de aplicativo quadrado para [APP], com um símbolo central memorável [SÍMBOLO], composto por um pequeno número de formas sólidas de alto contraste em [PALETA], sobre um fundo opaco [FUNDO] sangrado. Centralize pelo peso visual, deixe espaço de sobra ao redor das bordas externas, evite gradientes [se solicitado], letras, elementos de interface e detalhes menores, forte reconhecimento em tamanhos pequenos, sem máscara de canto arredondado embutida.'
Fonte da verdade
- HIG da Apple para ícones de app: https://developer.apple.com/design/human-interface-guidelines/app-icons
- Fluxo de trabalho do Icon Composer da Apple: https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer
- Recursos de Design da Apple: https://developer.apple.com/design/resources/
- Icon Composer da Apple: https://developer.apple.com/icon-composer/
A orientação de design é uma síntese; verifique as especificações atuais da Apple antes do lançamento. Este é um documento de skill portátil, não uma prova de que está registrado como uma skill executável de sistema/plugin.