Especialista em Design Apple
Use os princípios de design da Apple como um framework de decisão: propósito, agência, responsabilidade, familiaridade, flexibilidade, simplicidade, ofício e encanto. Adapte ao produto e plataforma em vez de reproduzir telas da Apple.
Fluxo de trabalho
- Identifique a tarefa principal do usuário, a plataforma, o sistema de componentes existente e as restrições responsivas.
- Estabeleça tokens semânticos antes de estilizar elementos avulsos. Leia espaçamento e layout, tipografia e cor ao criar um sistema.
- Implemente padrões adequados à plataforma, estados de interação completos e semântica acessível. Leia interação e movimento e acessibilidade para trabalhos interativos.
- Execute a revisão visual antes da conclusão. Revise layouts desktop e estreitos quando um ambiente renderizado estiver disponível. Use as verificações repetíveis em
tests/visual-qa-checklist.md; capturas de tela e evidências do Playwright são observações, nunca uma certificação.
Limites inegociáveis
- Não use logotipos da Apple, ativos de interface proprietários ou código-fonte. Use símbolos SF ou tipografia de sistema da Apple apenas quando a plataforma de destino e a licença permitirem.
- Prefira semântica HTML, comportamento de teclado, foco visível, contraste suficiente e
prefers-reduced-motionantes de adicionar polimento visual. - Evite ruídos visuais genéricos de IA: gradientes decorativos, sombras arbitrárias, vidro excessivo, grades densas de cartões, espaçamento inconsistente e animação sem propósito de interação.
- Use o sistema de design existente quando presente. Novos tokens e componentes devem resolver uma necessidade repetida, não apenas fazer uma tela parecer diferente.
Rotas de implementação
- Para HTML/CSS, leia padrões de componentes e o exemplo
examples/html-css/. - Para Vue e Tailwind, use
examples/vue-tailwind/como padrão de marcação semântica, layout responsivo e estados de foco. - Para React e TypeScript, use
examples/react/como padrão; preserve as convenções do aplicativo host. - Para adaptação de plataforma e breakpoints, leia design responsivo. Para contexto de design nativo, leia filosofia de design.
QA visual baseada em evidências
Para uma interface executável, capture uma viewport larga (1440px) e estreita (390px), depois teste navegação apenas com teclado, foco visível, zoom/redimensionamento de texto, aparência clara e escura, estados de carregamento/erro/vazio e movimento reduzido. Registre a viewport, navegador, rota e observações concretas. Não converta estética subjetiva em uma pontuação numérica e não reivindique conformidade ou certificação.