Apple HIG: Design Foundations
Maîtrisez les directives de conception Apple pour des applications élégantes
Créez des applications Apple au rendu et au comportement natifs en suivant les directives officielles Human Interface Guidelines. Évitez les rejets de conception et assurez-vous que votre application respecte les normes d'accessibilité, de mise en page et visuelles d'Apple sur toutes les plateformes.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "Apple HIG: Design Foundations". De quel ratio de contraste ai-je besoin pour un texte de 17pt dans iOS ?
Résultat attendu:
Pour un texte jusqu'à 17pt (quel que soit son poids), vous avez besoin d'un ratio de contraste minimum de 4.5:1 pour respecter le niveau WCAG AA, que l'Accessibility Inspector d'Apple utilise comme référence. Pour un texte de 18pt et plus grand, ou du texte en gras de n'importe quelle taille, l'exigence descend à 3:1. Source : accessibility.md, section 'Vision'.
Utilisation de "Apple HIG: Design Foundations". Montrez-moi comment utiliser les couleurs système sémantiques en SwiftUI
Résultat attendu:
Utilisez les API de couleur sémantique comme Color.label, Color.secondaryLabel, Color.systemBackground au lieu de coder les valeurs en dur. Celles-ci s'adaptent automatiquement au mode clair/sombre et Augmenter le contraste : Text('Hello').foregroundColor(.label).background(Color.systemBackground). Source : color.md, section 'System colors'.
Utilisation de "Apple HIG: Design Foundations". Comment prendre en charge Dynamic Type dans ma vue texte ?
Résultat attendu:
Appliquez des styles de texte sémantiques comme .body, .headline, .subheadline qui s'adaptent automatiquement à la taille de texte préférée de l'utilisateur : Text('Hello').font(.body). Ceux-ci prennent en charge la gamme complète de 11pt à 23pt sur iOS. Combinez avec frame(maxWidth: .infinity) et des contraintes de mise en page appropriées pour éviter les débordements. Source : typography.md, section 'Supporting Dynamic Type'.
Audit de sécurité
SûrStatic analysis detected 2676 pattern matches across 18 markdown documentation files (4647 lines). All findings are confirmed FALSE POSITIVES from legitimate documentation content: Ruby backtick notation for inline code examples (e.g., `systemRed`, `label`), hardcoded URLs linking to Apple's official developer documentation, and 'C2 keywords' that are benign terminology in accessibility/design contexts (e.g., 'control' for Switch Control, 'access' for accessibility, 'capture' for screen capture guidelines). This skill contains only static markdown reference documentation with no executable code, network operations, or security risks. Safe to publish.
Score de qualité
Ce que vous pouvez construire
Concevoir des applications iOS accessibles
Assurez-vous que votre application respecte les normes d'accessibilité Apple en implémentant les étiquettes VoiceOver, la prise en charge Dynamic Type, et les ratios de contraste WCAG AA. Apprenez à tester avec l'Accessibility Inspector et à fournir des alternatives accessibles pour tous les éléments interactifs.
Implémenter la prise en charge du mode sombre
Adaptez le schéma de couleurs de votre application pour les apparences claires et sombres en utilisant les couleurs sémantiques du système. Comprenez comment tester le contraste dans les deux modes, appliquer des matériaux vibrants, et garantir que les palettes personnalisées fonctionnent sur toutes les apparences.
Standardiser la typographie de l'application
Utilisez l'échelle typographique d'Apple et les styles de texte pour garantir que votre texte s'adapte correctement avec Dynamic Type. Apprenez quand utiliser SF Pro par rapport aux polices personnalisées, comment implémenter la hiérarchie des graisses de police, et les meilleures pratiques d'espacement des lignes.
Essayez ces prompts
Je conçois un bouton avec une couleur de fond #007AFF et du texte blanc pour iOS. Cette combinaison est-elle accessible ? Quel ratio de contraste atteint-elle, et quel niveau WCAG respecte-t-elle ?
Je construis un formulaire en SwiftUI et j'ai besoin d'utiliser les couleurs sémantiques correctes pour les étiquettes, le texte secondaire, et les états d'erreur. Montrez-moi le modèle de code utilisant les couleurs système qui s'adaptent au mode sombre.
Ma mise en page de texte se brise lorsque les utilisateurs activent des tailles de police plus grandes dans les paramètres d'accessibilité. Montrez-moi comment structurer ma vue SwiftUI en utilisant les styles de texte et Auto Layout pour qu'elle s'adapte correctement de 11pt à 23pt.
J'ai besoin d'icônes personnalisées qui correspondent à l'apparence optique de SF Symbols. Quelles sont les spécifications de conception pour la graisse des symboles, l'alignement de la grille, et les modes de rendu ? Montrez-moi comment exporter des symboles personnalisés qui s'intègrent parfaitement.
Bonnes pratiques
- Vérifiez toujours la présence de `.claude/apple-design-context.md` avant de poser des questions pour utiliser le contexte de projet existant et éviter une collecte d'informations redondante
- Citez des documents de base HIG spécifiques avec les noms de fichiers et les sections lors de la fourniture de conseils pour permettre la traçabilité et la lecture approfondie
- Demandez des informations de ciblage de plateforme tôt car les directives Apple varient considérablement entre iOS, macOS, watchOS, tvOS et visionOS
- Expliquez toujours les implications d'accessibilité lors de la suggestion de modèles de conception, y compris les ratios de contraste, la prise en charge Dynamic Type, et le comportement VoiceOver
Éviter
- Ne codez pas en dur des valeurs de couleur comme RGB(0, 122, 255) - utilisez les API sémantiques comme UIColor.systemBlue ou Color.blue qui s'adaptent automatiquement au mode sombre et aux paramètres d'accessibilité
- Évitez d'utiliser des tailles de police fixes comme 16.0 - utilisez plutôt des styles de texte comme .body ou .headline qui s'adaptent avec Dynamic Type et respectent la taille de texte préférée de l'utilisateur
- Ne comptez pas uniquement sur la couleur pour transmettre des informations - fournissez toujours des indicateurs visuels supplémentaires comme des formes, des icônes ou des étiquettes de texte pour l'accessibilité
- Ne sautez jamais les tests d'accessibilité pendant la conception - intégrez l'Accessibility Inspector tôt et vérifiez la navigation VoiceOver, le scaling Dynamic Type, et les ratios de contraste avant la soumission