ios-design-reviewdi Garry Tan

iOS Design Review Skill.

Uno skill per Claude Code e Codex per la progettazione di app mobile: audit di design visivo di app iOS su hardware reale.

Mobile Apps
Report di revisione

Scarica OpenDesign Guida all'uso

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)

Intestazione e sezioni lette dal file upstream il 14 settembre 2026 · 33.841 caratteri in totale

01 Cosa fa

Cosa fa la skill ios-design-review in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Si connette a un iPhone reale tramite gstack-ios-qa-daemon, fotografa ogni schermata e valuta il design visivo rispetto alle Apple HIG, a DESIGN.md e alle best practice. Assegna un punteggio su dieci dimensioni (gerarchia tipografica, ritmo degli spazi, gerarchia dei colori, aree di tocco, stati di caricamento/vuoto/errore, accessibilità, disciplina delle animazioni, coerenza con gli idiomi iOS, densità informativa e verifica dell'AI-slop) da 0 a 10, usando il criterio 'cosa lo porterebbe a un 10'.

Riprende la rubrica di valutazione di /plan-design-review adattata agli idiomi iOS. Produce un report in markdown con screenshot, punteggi per schermata e suggerimenti di correzione a maggiore impatto. Per la revisione del design in fase di pianificazione (prima dell'implementazione), usi invece /plan-design-review. Per audit visivi live sul web, usi /design-review.

Che cosa produce

Report in markdown con screenshot incorporati, punteggi per schermata (0-10 per ciascuna dimensione) e suggerimenti di correzione a maggiore impatto per dimensione

Vedi l'esempio di prompt ↗

Come funziona

01
Connettersi al Daemon in Esecuzione
Usa il gstack-ios-qa-daemon in esecuzione. Se nessun daemon è attivo, ne avvia uno seguendo lo stesso flusso di /ios-qa (Fase 0-2).
02
Catturare le Schermate
Per ogni schermata principale (ricavata da un elenco di schermate fornito dall'utente o individuata automaticamente tramite l'accessibility tree), recupera screenshot ed elementi tramite GET /screenshot e GET /elements.
03
Applicare la Rubrica a Dieci Dimensioni
Assegna un punteggio da 0 a 10 a gerarchia tipografica, ritmo degli spazi, gerarchia dei colori, aree di tocco, stati di caricamento/vuoto/errore, accessibilità, disciplina delle animazioni, coerenza con gli idiomi iOS, densità informativa e verifica dell'AI-slop, spiegando cosa porterebbe ciascuna dimensione a 10.
04
Segnalare i Punteggi Bassi
Usa AskUserQuestion per qualsiasi punteggio inferiore a 7, presentando il problema con la correzione consigliata e il relativo compromesso, così l'utente può decidere se intervenire.
05
Scrivere il Report
Produce un report in markdown con screenshot incorporati, punteggi per schermata e suggerimenti di correzione a maggiore impatto per dimensione, scritto in ~/.gstack/projects/<slug>/ios-design-review-<date>.md.

02 Trova la tua applicazione

Quando Usare lo Skill ios-design-review

Usa lo skill ios-design-review in Claude Code o Codex quando il lavoro è mobile app design di questo tipo. Ambito e limiti qui sotto sono presi dal file dello skill stesso.

Buona applicazione

Controllo qualità visivo di un'app iOS su hardware reale prima del rilascio
Verifica della conformità di accessibilità (etichette VoiceOver, Dynamic Type, Reduce Motion)

Conosci i limiti

Design review nella fase di pianificazione prima dell'implementazione (usa /plan-design-review)
Audit visivi web dal vivo (usa /design-review)

03 Dentro la skill

Regole che la Skill ios-design-review Fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Solo Lettura per Impostazione Predefinita
Acquisisce la sessione con capacità di osservazione, senza effettuare chiamate che modificano il dispositivo iOS.
La Tipografia Usa SF Pro e Dynamic Type
La gerarchia tipografica valuta le dimensioni di display, corpo del testo e didascalie in coerenza con le Apple HIG, usando SF Pro alla scala dynamic-type corretta. Nessun testo del corpo a 12pt in nessun punto.
La Spaziatura Deve Seguire una Griglia da 4pt o 8pt
La dimensione del ritmo della spaziatura richiede l'uso coerente di una griglia da 4pt o 8pt, senza padding magici come 17/23/31pt, e con il rispetto degli insets della safe area.
Target Tattili di Almeno 44x44pt
Ogni elemento interattivo deve misurare almeno 44x44pt. Nessun testo toccabile inferiore a 24pt.
I Rapporti di Contrasto Devono Rispettare il WCAG AA
La dimensione della gerarchia dei colori richiede rapporti di contrasto conformi al WCAG AA per il testo del corpo (4.5:1) e per il testo grande (3:1), con una corretta resa in dark mode.
Animazioni Limitate a 2 Simultanee
La dimensione della disciplina delle animazioni limita a 2 le animazioni simultanee, con una durata di 200-300ms per il feedback UI e uno smorzamento (spring damping) corretto (non troppo elastico per i flussi seri).
Usare Componenti Nativi iOS
La dimensione dell'allineamento all'idioma iOS richiede l'uso di componenti nativi (NavigationStack, List, Form, foglietti di sistema) dove appropriato, senza reinventare la navigazione o usare menu hamburger in stile web sul telefono.
Segnalare i Pattern AI-slop
La dimensione del controllo AI-slop individua layout generici da stock, dati lorem ipsum lasciati nel codice, Material Design importato acriticamente da Android e gradienti generati dall'IA.

04 Mettila al lavoro

Installare ios-design-review in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungere ios-design-review a Claude Code, Codex o al proprio agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica del comando CLI skills per ios-design-review/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai Allo Skill Un Primo Task Di Design Di App Mobile

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Conferma che la sessione sia stata acquisita con capacità di osservazione e che non siano state effettuate chiamate che modificano il dispositivo

In OpenDesign importi ios-design-review dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branch main
File della skill: ios-design-review/SKILL.md Checksum del contenuto registrato alla verifica; commit 71f6048
License: MIT Da LICENSE.
Stelle del repository: 132.921 Snapshot GitHub del 2026-09-14 per l'intero repository garrytan/gstack, che contiene 7 skill in questo catalogo. Non è un punteggio né un conteggio di utilizzo per ios-design-review.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Quando invocare questa skillAudit visivo di app iOS su hardware reale tramite StateServer, valuta dieci dimensioni da 0 a 10
ConnessioneUtilizza gstack-ios-qa-daemon in esecuzione, lo avvia tramite il flusso /ios-qa se necessario, di sola lettura per impostazione predefinita
Dimensioni e punteggioRubrica a dieci dimensioni: tipografia, spaziatura, colore, target touch, stati, accessibilità, animazione, idioma iOS, densità, AI-slop
CicloAcquisisce la sessione, cattura uno screenshot di ogni schermata, applica la rubrica, registra i risultati, produce un report in markdown
OutputReport markdown con screenshot inline, punteggi per schermata, suggerimenti di correzione con il maggiore impatto
Modalità di erroreGestisce 403 capability_insufficient, screenshot vuoti, schermate mancanti

Descrizione della skill

"Verifica del design visivo per app iOS su hardware reale. (gstack)"

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 33.841 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sullo Skill ios-design-review

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Qual è la differenza tra questo e /plan-design-review?

Questo skill viene eseguito su un dispositivo iOS reale e valuta app rilasciate o in fase di sviluppo rispetto alle Apple HIG e agli idiomi iOS. /plan-design-review valuta le specifiche di design prima dell'implementazione. Questo skill riprende la stessa rubrica di valutazione adattata per iOS.

iOS Design Review

Eseguire ios-design-review su un'attività di design reale per app mobile.

Scarica OpenDesign, importa ios-design-review dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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

Cosa fa la skill ios-design-review in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Usare lo Skill ios-design-review

Buona applicazione

Conosci i limiti

Regole che la Skill ios-design-review Fornisce a Claude Code e Codex

Solo Lettura per Impostazione Predefinita

La Tipografia Usa SF Pro e Dynamic Type

La Spaziatura Deve Seguire una Griglia da 4pt o 8pt

Target Tattili di Almeno 44x44pt

I Rapporti di Contrasto Devono Rispettare il WCAG AA

Animazioni Limitate a 2 Simultanee

Usare Componenti Nativi iOS

Segnalare i Pattern AI-slop