Dê à sua IA o critério de design da Apple
A Apple publica de graça o manual de design que orienta quem cria apps para as plataformas dela. Numa aula, uma designer do time resume uma tela clara em três perguntas. Aqui estão os links, as partes do manual que servem para o seu projeto e o prompt que faz a IA avaliar a sua tela com esse critério.
As três perguntas que toda tela responde
Onde eu estou?
A tela deixa claro, logo de cara, em que lugar a pessoa está, sem ela ficar se perguntando como chegou ali.
O que eu posso fazer?
As ações aparecem e se explicam. Ninguém deveria precisar adivinhar.
Para onde eu posso ir?
O próximo passo está à vista, para a pessoa seguir sem hesitar.
Quando a tela não responde, a designer descreve o que a pessoa sente: hesitação, confusão e, às vezes, desistência. Num site de empresa ou numa página de vendas, desistência é o visitante que fecha a aba.
O caminho em quatro partes
O manual, os recursos e a aula
Os links oficiais, o minuto exato das três perguntas e o que a licença permite fazer com os kits.
As seções que servem para você
Quais páginas do manual copiar para site institucional, página de vendas ou app.
O prompt do diagnóstico
Como mandar a tela para a IA e o prompt que devolve nota para cada pergunta e correções em ordem de prioridade.
Conferir e corrigir
O que conferir na resposta, o prompt que aplica uma correção por vez e o que fazer quando der errado.
O manual, os recursos e a aula
Tudo abaixo é da Apple, grátis e em inglês. A aula tem legenda em português do Brasil no player do site.
Human Interface Guidelines
O manual. Orientações e boas práticas para desenhar apps em qualquer plataforma da Apple, divididas em fundamentos, padrões, componentes, entradas e tecnologias.
A aula: Design foundations from idea to interface
Sessão da WWDC25 com a Majo, do time de Design Evangelism da Apple. Ela cria um app de coleção de discos de vinil que parece bom à primeira vista, mostra onde ele confunde e reorganiza estrutura, navegação, conteúdo e visual, explicando cada decisão.
O link abre em 1:56, onde começam as três perguntas · 19 min no totalApple Design Resources
Kits de interface para Figma e Sketch (iOS e iPadOS 27, macOS 27, watchOS 26, visionOS 26), modelos de ícone de app, as fontes SF e molduras de aparelho.
SF Symbols
Biblioteca com mais de 7.000 símbolos desenhados para combinar com a fonte do sistema da Apple.
Liquid Glass no manual
A página Materials explica o material do visual novo: uma camada para controles e navegação que flutua sobre o conteúdo. E diz onde ele não entra, como na camada de conteúdo.
O que a licença permite
Os kits são para app das plataformas Apple
A licença dos Apple Design Resources permite usar os kits só para criar protótipos de telas de software que roda nos sistemas da Apple. Montar site ou app de Android com eles está fora.
Símbolo não vira logo
Os termos do SF Symbols proíbem usar os símbolos, ou desenhos parecidos com eles, em ícone de app, logo ou qualquer uso de marca.
O manual pede identidade própria
A seção Branding orienta o app a usar a voz e o tom da própria marca. Leve do manual o critério de clareza, não o visual da Apple.
Para site e página de vendas, o que vem do manual são os princípios: hierarquia, escrita, legibilidade, contraste. Os kits ficam de fora.
Cole só o que serve para o seu projeto
Escolha três ou quatro páginas do seu tipo de projeto e copie as seções indicadas. O prompt pede que cada correção cite o trecho que a sustenta, e com o manual inteiro colado você não consegue conferir nada.
O manual foi escrito para apps. Num site, valem os princípios; os componentes de app (barra de abas, toolbar) a IA precisa traduzir para web, e o prompt já pede isso.
Site institucional
Quem é, o que faz, como falar com você- Layout, seção Visual hierarchy
- Typography, seções Ensuring legibility e Conveying hierarchy
- Writing, seção Best practices
- Branding, seção Best practices
- Accessibility, seção Vision
Página de vendas
Uma oferta, uma ação- Buttons, seções Best practices e Content
- Writing, seção Best practices
- Layout, seção Visual hierarchy
- Entering data, se a página tem formulário de compra ou cadastro
- Feedback, para o que acontece depois do clique
App ou sistema web
Várias telas e navegação entre elas- Tab bars e Sidebars, para a navegação entre seções
- Toolbars, seções Titles e Actions: onde estou e o que posso fazer em cada tela
- Lists and tables e Searching
- Onboarding e Loading
- Materials, só se o app for para iPhone, iPad ou Mac
Regras com número rendem mais
Algumas páginas trazem medida, e a IA consegue cobrar medida. No Accessibility, a seção Vision pede contraste mínimo de 4,5:1 para texto de até 17 pt (3:1 a partir de 18 pt ou em negrito), e a seção Mobility dá 44 × 44 pt como tamanho padrão de controle no iOS, com mínimo de 28 × 28 pt. Se o seu público chega pelo celular, inclua os dois trechos.
Mande a tela do jeito certo
Print da primeira tela
O melhor jeitoTire o print do que aparece antes de rolar, no celular. É ali que as três perguntas precisam ter resposta. Para avaliar a página inteira, mande os prints em ordem, de cima para baixo.
HTML da página
Para receber a correção prontaNo Chrome, Ctrl+U no Windows ou Cmd+Option+U no Mac abre o código-fonte. Copie e cole junto com o print. Se a página é montada por JavaScript, esse código vem quase vazio, e aí fica só o print.
URL
Só junto com o printSe a sua IA abre links, cole a URL também. Sozinha ela rende pouco: a ferramenta pode ler o texto da página sem enxergar a ordem em que as coisas aparecem na tela.
O prompt do diagnóstico
Troque o que está marcado, cole os trechos do manual que você escolheu e mande junto com a tela.
Você vai avaliar a clareza de uma tela com o critério da aula "Design foundations from idea to interface", da WWDC25 da Apple: toda tela precisa deixar claro, logo de cara, onde a pessoa está, o que ela pode fazer e para onde ela pode ir.
Tela: [vai em anexo, em print, e o HTML está colado no fim desta mensagem].
Tipo de página: [página de vendas de um curso].
Quem chega: [dono de pequena empresa, vindo de um anúncio no Instagram, pelo celular].
Ação esperada: [comprar o curso].
Critério: use só os trechos do Human Interface Guidelines da Apple que eu colar abaixo. Toda correção cita o trecho que a sustenta. Se uma regra for de app e não servir para site, diga isso e traduza o princípio para web, sem forçar o componente.
Trechos do HIG: [cole aqui as seções das páginas que você escolheu, com o nome de cada página].
Faça nesta ordem: 1) descreva em três frases o que um visitante novo entende só com a primeira tela, antes de rolar; 2) responda às três perguntas com o que a tela mostra de fato e dê nota de 0 a 2 para cada uma (0 não responde, 1 responde tarde ou com esforço, 2 responde de cara); 3) para cada nota abaixo de 2, aponte o elemento que atrapalha, pelo texto dele ou pela posição na tela.
Entregue: um diagnóstico de no máximo cinco linhas e uma lista de até sete correções em ordem de prioridade. Em cada correção: prioridade (alta, média ou baixa), o problema, o que mudar, qual das três perguntas melhora e o trecho do HIG que sustenta. A primeira é a que mais ajuda quem chega pela primeira vez.
Regras: o critério é clareza, não gosto. Não proponha copiar o visual da Apple nem trocar a identidade da marca. O que você não conseguir ver no material enviado vai numa lista separada de dúvidas, sem palpite.
Preencha antes de rodar
Quem chega
De onde a pessoa vem muda a resposta. Quem vem de um anúncio no celular não leu nada antes; quem vem do Google já pesquisou o assunto.
Uma ação esperada
Uma só. Se você não consegue escolher uma, a tela provavelmente também não escolheu.
Os trechos com o nome da página
Cole cada trecho com o nome da página do manual em cima. É o que permite conferir de onde veio cada correção.
Confira a resposta antes de mexer na tela
Cada correção cita um trecho
Se uma correção não aponta o trecho do manual que você colou, peça a fonte ou trate como palpite.
As notas batem com uma pessoa de verdade
Mostre o print para alguém que não conhece a página e faça as três perguntas. Se a pessoa responde na hora e a IA deu nota 0, a IA errou.
Nada de virar Apple
Sugestão de trocar a sua fonte, a sua cor ou o seu estilo pelos da Apple vai para o lixo. O critério é clareza.
Uma correção por vez
Na mesma conversa, depois do diagnóstico.
Aplique a correção [número 1] da sua lista.
Se eu mandei HTML, devolva o trecho alterado inteiro, pronto para colar no lugar do original, e diga onde ele fica. Se mandei só print, descreva a nova versão da primeira tela de cima para baixo: o que aparece, em que ordem e com que texto.
Depois, responda de novo às três perguntas para a versão nova, com a nota de 0 a 2.
Deu errado? É um destes quatro
Resposta genérica
Faltou contexto. Preencha quem chega e a ação esperada; sem isso, a IA avalia uma tela qualquer.
A IA diz que não vê a imagem
A ferramenta ou o plano que você usa não lê imagem. Mande o HTML ou troque de ferramenta.
Correção de app numa página web
Barra de abas e toolbar são componentes de app. Peça para traduzir o princípio para web ou tire essas páginas dos trechos.
Lista enorme
O prompt limita a sete correções. Se veio mais, peça para ficar só com as que mudam a nota das três perguntas.
Testou?
Me manda no direct do Instagram qual tela você avaliou e qual das três perguntas ela não respondia. E me segue no @dantearaujo: a série de coisas contra-intuitivas que já dá para fazer com IA continua por lá.
Dante Araújo @dantearaujo