hig-foundations
Faz seu agente conhecer os princípios básicos de design da Apple. É útil para garantir que os aplicativos sigam as diretrizes de design da plataforma.
O que ela faz
Este guia ajuda a criar aplicativos com um visual bonito e fácil de usar, seguindo as regras de design da Apple. Ele foca em princípios como clareza, acessibilidade e o uso de elementos visuais que já vêm no sistema.
Quando usar
- ✓Ao começar a desenhar um novo aplicativo para iPhone ou iPad.
- ✓Quando você quer que seu aplicativo seja fácil de usar para todos, incluindo pessoas com deficiência.
- ✓Se você precisa usar cores, fontes e ícones que combinem com outros aplicativos da Apple.
Exemplo do que pedir para a IA
“Como posso garantir que meu aplicativo funcione bem para pessoas que usam leitores de tela?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
O guia explica os princípios básicos de design da Apple, como 'priorize o conteúdo' e 'construa a acessibilidade desde o início'. Ele também lista recursos específicos como cores, fontes e ícones do sistema.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill hig-foundationsOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/hig-foundations/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Apple HIG: Fundamentos de Design
Verifique .claude/apple-design-context.md antes de fazer perguntas. Use o contexto existente e peça apenas informações que ainda não foram abordadas.
Princípios Chave
Priorize o conteúdo sobre o "cromo". Reduza a poluição visual. Use materiais fornecidos pelo sistema e separadores sutis em vez de bordas e fundos pesados.
Construa a acessibilidade desde o início. Projete para VoiceOver, Dynamic Type, Reduzir Movimento, Aumentar Contraste e Controle de Comutador desde o primeiro dia. Cada elemento interativo precisa de um rótulo acessível.
Use cores e materiais do sistema. As cores do sistema se adaptam ao modo claro/escuro, contraste aumentado e vivacidade. Prefira cores semânticas (
label,secondaryLabel,systemBackground) em vez de valores codificados.Use fontes e ícones da plataforma. SF Pro, SF Compact, SF Mono por padrão. New York para serifas. Siga a hierarquia tipográfica nos tamanhos recomendados. Use SF Symbols para iconografia.
Combine com as convenções da plataforma. Alinhe a aparência e o comportamento com os padrões do sistema. Forneça manipulação direta e responsiva e feedback claro para cada ação.
Respeite a privacidade. Solicite permissões apenas quando necessário, explique claramente o motivo, forneça valor antes de pedir dados. Projete para coleta mínima de dados.
Suporte à internacionalização. Acomode a expansão de texto, scripts da direita para a esquerda e formatos variados de data/número. Use Auto Layout para dimensionamento de conteúdo dinâmico.
Use movimento com propósito. A animação deve comunicar significado e relações espaciais. Respeite o Reduzir Movimento fornecendo alternativas de fade cruzado.
Índice de Referência
| Referência | Tópico | Conteúdo principal |
|---|---|---|
| accessibility.md | Acessibilidade | VoiceOver, Dynamic Type, contraste de cores, acessibilidade motora, Controle de Comutador, descrições de áudio |
| app-icons.md | Ícones de Aplicativo | Grade de ícones, tamanhos específicos da plataforma, ponto focal único, sem transparência |
| branding.md | Branding | Integração da identidade da marca na linguagem de design da Apple, branding sutil, tons personalizados |
| color.md | Cor | Cores do sistema, Cores Dinâmicas, cores semânticas, paletas personalizadas, proporções de contraste |
| dark-mode.md | Modo Escuro | Superfícies elevadas, cores semânticas, paletas adaptadas, vivacidade, testes em ambos os modos |
| icons.md | Ícones | Ícones de glifo, integração com SF Symbols, design de ícones personalizados, pesos de ícones, alinhamento óptico |
| images.md | Imagens | Resolução de imagem, ativos @2x/@3x, ativos vetoriais, acessibilidade de imagem |
| immersive-experiences.md | Experiências Imersivas | Design AR/VR, imersão espacial, zonas de conforto, níveis de imersão progressiva |
| inclusion.md | Inclusão | Representação diversa, linguagem não-sexista, sensibilidade cultural, padrões inclusivos |
| layout.md | Layout | Margens, espaçamento, alinhamento, áreas seguras, layouts adaptáveis, guias de conteúdo legível |
| materials.md | Materiais | Vivacidade, desfoque, translucidez, materiais do sistema, espessura do material |
| motion.md | Movimento | Curvas de animação, transições, continuidade, suporte a Reduzir Movimento, movimento baseado em física |
| privacy.md | Privacidade | Solicitações de permissão, descrições de uso, rótulos de nutrição de privacidade, coleta mínima de dados |
| right-to-left.md | Direita para Esquerda | Espelhamento de layout RTL, texto bidirecional, ícones que viram, exceções |
| sf-symbols.md | SF Symbols | Categorias de símbolos, modos de renderização, cor variável, símbolos personalizados, correspondência de peso |
| spatial-layout.md | Layout Espacial | Posicionamento de janela do visionOS, profundidade, zonas ergonômicas, design do eixo Z |
| typography.md | Tipografia | SF Pro, tamanhos de Dynamic Type, estilos de texto, fontes personalizadas, hierarquia de peso de fonte, espaçamento entre linhas |
| writing.md | Escrita | Diretrizes de cópia de UI, tom, regras de capitalização, mensagens de erro, rótulos de botões, concisão |
Aplicando os Fundamentos em Conjunto
Considere como os princípios interagem:
- Cor + Modo Escuro + Acessibilidade -- Paletas personalizadas devem funcionar em ambos os modos, mantendo as proporções de contraste do WCAG. Comece com cores semânticas do sistema.
…
Perguntas frequentes
O que significa 'priorizar o conteúdo sobre a moldura'?
Significa que o que é importante (o conteúdo) deve se destacar mais do que os elementos de design ao redor (a moldura).
O que são 'cores semânticas'?
São cores que têm um significado, como 'cor do texto principal' ou 'cor de fundo', e que se ajustam automaticamente ao modo claro ou escuro do sistema.
O que é 'SF Symbols'?
É uma coleção de ícones desenhados pela Apple que se encaixam perfeitamente no estilo visual dos aplicativos e se adaptam a diferentes tamanhos e pesos de fonte.
Detalhes
Descrição original do autor
Apple Human Interface Guidelines design foundations.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #3204
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC