Expert en Design Apple

Expert en Conception Apple

Utilisez les principes de conception d'Apple comme cadre de décision : utilité, agence, responsabilité, familiarité, flexibilité, simplicité, qualité d'exécution et plaisir. Adaptez-vous au produit et à la plateforme au lieu de reproduire les interfaces Apple.

Flux de travail

1. Identifiez la tâche principale de l'utilisateur, la plateforme, le système de composants existant et les contraintes responsives.
2. Établissez des jetons sémantiques avant de styliser des éléments isolés. Consultez espacement et disposition, typographie et couleur lors de la création d'un système.
3. Implémentez des motifs adaptés à la plateforme, des états d'interaction complets et une sémantique accessible. Consultez interaction et mouvement et accessibilité pour le travail interactif.
4. Exécutez la revue visuelle avant la finalisation. Examinez les dispositions larges et réduites lorsqu'un environnement rendu est disponible. Utilisez les vérifications reproductibles dans tests/visual-qa-checklist.md ; les captures d'écran et les preuves Playwright sont des observations, jamais une certification.

Limites non négociables

• N'utilisez pas de logos Apple, de ressources d'interface propriétaires ou de code source. Utilisez les symboles SF ou la typographie système Apple uniquement si la plateforme cible et la licence le permettent.
• Privilégiez la sémantique HTML, le comportement au clavier, le focus visible, le contraste suffisant et prefers-reduced-motion avant d'ajouter une finition visuelle.
• Évitez le bruit visuel générique de l'IA : dégradés décoratifs, ombres arbitraires, verre excessif, grilles de cartes denses, espacement incohérent et animation sans but d'interaction.
• Utilisez le système de conception existant lorsqu'il est présent. Les nouveaux jetons et composants doivent résoudre un besoin récurrent, pas simplement donner un aspect différent à un écran.

Routes d'implémentation

• Pour HTML/CSS, consultez motifs de composants et l'exemple examples/html-css/.
• Pour Vue et Tailwind, utilisez examples/vue-tailwind/ comme motif pour un balisage sémantique, une disposition responsive et des états de focus.
• Pour React et TypeScript, utilisez examples/react/ comme motif ; conservez les conventions de l'application hôte.
• Pour l'adaptation à la plateforme et les points de rupture, consultez conception responsive. Pour le contexte de conception natif, consultez philosophie de conception.

QA visuelle basée sur des preuves

Pour une interface exécutable, capturez une vue large (1440 px) et étroite (390 px), puis testez la navigation au clavier uniquement, le focus visible, le zoom/redimensionnement du texte, l'apparence claire et sombre, les états de chargement/erreur/vide, et le mouvement réduit. Enregistrez la zone d'affichage, le navigateur, la route et les observations concrètes. Ne convertissez pas l'esthétique subjective en score numérique et ne revendiquez pas de conformité ou de certification.