Pular para o conteúdo
Skillpedia
Interfaces (UI/UX)48 mil · #3204

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

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/hig-foundations/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/hig-foundations/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
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-foundations

Ou 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.md
Conteú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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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:

  1. 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.

repo: sickn33/agentic-awesome-skills

Popularidade

Estrelas no GitHub
48 mil
Posição no ranking
#3204
Licença
MIT
Atualizada em
15/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas