ios-design-reviewpar Garry Tan

iOS Design Review Skill.

Un skill Claude Code et Codex pour la conception d'applications mobiles : audit de design visuel d'apps iOS sur matériel réel.

Applications mobiles
Rapport de revue

Télécharger OpenDesign Voir le guide d'utilisation

garrytan/gstack · ios-design-review/SKILL.mdSKILL.md

--- name: ios-design-review description: Visual design audit for iOS apps on real hardware. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 33 841 caractères au total

01 Ce qu'il fait

Ce que fait le Skill ios-design-review dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Se connecte à un véritable iPhone via gstack-ios-qa-daemon, capture chaque écran, et évalue le design visuel par rapport aux Apple HIG, à DESIGN.md, et aux bonnes pratiques. Note dix dimensions (hiérarchie typographique, rythme des espacements, hiérarchie des couleurs, cibles tactiles, états de chargement/vide/erreur, accessibilité, discipline des animations, alignement avec les idiomes iOS, densité d'information, et contrôle de l'aspect « généré par IA ») de 0 à 10, en utilisant le cadre « qu'est-ce qui en ferait un 10 ».

Reprend le référentiel de notation de /plan-design-review adapté aux idiomes iOS. Produit un rapport markdown avec captures d'écran, notes par écran, et suggestions de correction à plus fort effet de levier. Pour une revue de design en phase de plan (avant implémentation), utilisez plutôt /plan-design-review. Pour des audits visuels web en direct, utilisez /design-review.

Ce qu'il produit

Rapport markdown avec captures d'écran intégrées, notes par écran (0-10 pour chaque dimension), et suggestions de correction à plus fort effet de levier par dimension

Voir l'exemple de prompt ↗

Fonctionnement

01
Se connecter au démon en cours d'exécution
Utilise le gstack-ios-qa-daemon en cours d'exécution. Si aucun démon n'est en cours, en lance un via le même flux que /ios-qa (Phase 0-2).
02
Capturer les écrans
Pour chaque écran majeur (issu d'une liste d'écrans fournie par l'utilisateur ou découverte automatiquement via l'arbre d'accessibilité), récupère la capture d'écran et les éléments via GET /screenshot et GET /elements.
03
Appliquer le référentiel à dix dimensions
Note la hiérarchie typographique, le rythme des espacements, la hiérarchie des couleurs, les cibles tactiles, les états de chargement/vide/erreur, l'accessibilité, la discipline des animations, l'alignement avec les idiomes iOS, la densité d'information, et le contrôle de l'aspect « généré par IA » de 0 à 10, en expliquant ce qui ferait passer chacune à 10.
04
Signaler les notes basses
Utilise AskUserQuestion pour toute note inférieure à 7, en présentant le problème avec une correction recommandée et son compromis afin que l'utilisateur puisse décider de le traiter ou non.
05
Rédiger le rapport
Produit un rapport markdown avec captures d'écran intégrées, notes par écran, et suggestions de correction à plus fort effet de levier par dimension, écrit dans ~/.gstack/projects/<slug>/ios-design-review-<date>.md.

02 Trouvez celui qui vous convient

Quand utiliser le skill ios-design-review

Utilisez le skill ios-design-review dans Claude Code ou Codex quand le travail est du design d'application mobile de ce type. Périmètre et limites ci-dessous sont tirés du fichier du skill lui-même.

Bon choix

Contrôle qualité visuel d'une application iOS sur un véritable appareil avant sa mise en production
Vérification de la conformité d'accessibilité (libellés VoiceOver, Dynamic Type, Reduce Motion)

Connaître les limites

Revue de design en phase de planification avant implémentation (utilisez /plan-design-review)
Audits visuels web en direct (utilisez /design-review)

03 Dans le skill

Règles que le skill ios-design-review Donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Lecture Seule par Défaut
Acquiert une session avec capacité d'observation, sans effectuer d'appels modifiants sur l'appareil iOS.
La Typographie Utilise SF Pro et Dynamic Type
La dimension hiérarchie typographique note les tailles display, body et caption pour leur cohérence avec la HIG d'Apple, en utilisant SF Pro à l'échelle dynamic-type correcte. Aucun texte body en 12pt.
L'Espacement Doit Suivre une Grille de 4pt ou 8pt
La dimension rythme d'espacement exige une grille de 4pt ou 8pt utilisée de façon cohérente, sans marges magiques de 17/23/31pt, et le respect des zones sûres (safe-area insets).
Zones Tactiles de 44x44pt Minimum
Chaque élément interactif doit mesurer au moins 44x44pt. Aucun texte cliquable inférieur à 24pt.
Les Ratios de Contraste Respectent WCAG AA
La dimension hiérarchie des couleurs exige des ratios de contraste respectant WCAG AA pour le texte body (4.5:1) et le texte large (3:1), avec un rendu correct en mode sombre.
Animation Limitée à 2 Simultanées
La dimension rigueur d'animation limite à 2 le nombre d'animations simultanées, avec une durée de 200-300ms pour le feedback d'interface et un amortissement de ressort correct (pas rebondissant pour les flux sérieux).
Utiliser des Composants iOS Natifs
La dimension alignement avec les idiomes iOS exige l'usage de composants natifs (NavigationStack, List, Form, feuilles système) lorsque pertinent, sans navigation réinventée ni menus hamburger de style web sur téléphone.
Signaler les Motifs AI-slop
La dimension vérification AI-slop détecte les mises en page génériques de stock, les données lorem ipsum laissées en place, le Material Design importé d'Android par cargo-cult, et les dégradés générés par IA.

04 Mettez-le en pratique

Installer ios-design-review dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter ios-design-review à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/garrytan/gstack --skill ios-design-review

Forme générique de la CLI skills pour ios-design-review/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de conception d'application mobile

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Review the iOS design of [MyApp] running on the connected iPhone. Focus on the onboarding flow, home screen, and settings. Check for typography hierarchy issues, spacing rhythm inconsistencies, and accessibility compliance. Write the report to the project folder.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Confirmez que la session a été acquise avec la capacité d'observation et qu'aucun appel modifiant n'a été effectué

Dans OpenDesign, importez ios-design-review depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branche main
Fichier du skill: ios-design-review/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 71f6048
License: MIT Tiré de LICENSE.
Étoiles du dépôt: 132 921 Instantané GitHub pris le 14 septembre 2026 pour l'ensemble du dépôt garrytan/gstack, qui contient 7 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un décompte d'utilisation pour ios-design-review.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand invoquer ce skillAudit visuel des applications iOS sur matériel réel via StateServer, note dix dimensions de 0 à 10
ConnexionUtilise le gstack-ios-qa-daemon en cours d'exécution, le lance via le flux /ios-qa si nécessaire, en lecture seule par défaut
Dimensions et notationGrille en dix dimensions : typographie, espacement, couleur, cibles tactiles, états, accessibilité, animation, idiome iOS, densité, AI-slop
BoucleAcquérir la session, capturer chaque écran, appliquer la grille, consigner les constats, produire un rapport markdown
RésultatRapport markdown avec captures d'écran intégrées, scores par écran, suggestions de correctifs à fort impact
Modes d'échecGère les erreurs 403 capability_insufficient, les captures d'écran vides, les écrans manquants

Description du skill lui-même

Audit de design visuel pour applications iOS sur matériel réel. (gstack)

Description front-matter extraite de SKILL.md. Le fichier complet fait environ 33 841 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill ios-design-review

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Quelle est la différence avec /plan-design-review ?

Ce skill s'exécute sur un véritable appareil iOS et évalue des applications livrées ou en cours de développement au regard des Apple HIG et des idiomes iOS. /plan-design-review évalue les spécifications de conception avant l'implémentation. Ce skill reprend la même grille de notation, adaptée à iOS.

iOS Design Review

Exécuter ios-design-review sur une tâche de conception d'application mobile réelle.

Téléchargez OpenDesign, importez ios-design-review depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills

Terminal

npx skills add https://github.com/garrytan/gstack --skill ios-design-review

Ce que fait le Skill ios-design-review dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le skill ios-design-review

Bon choix

Connaître les limites

Règles que le skill ios-design-review Donne à Claude Code et Codex

Lecture Seule par Défaut

La Typographie Utilise SF Pro et Dynamic Type

L'Espacement Doit Suivre une Grille de 4pt ou 8pt

Zones Tactiles de 44x44pt Minimum

Les Ratios de Contraste Respectent WCAG AA

Animation Limitée à 2 Simultanées

Utiliser des Composants iOS Natifs

Signaler les Motifs AI-slop