ios-design-reviewpor Garry Tan

iOS Design Review Skill.

Un skill de Claude Code y Codex para diseño de aplicaciones móviles: auditoría de diseño visual de aplicaciones iOS en hardware real.

Mobile Apps
Informe de revisión

Descargar OpenDesign Ver guía de 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)

Encabezados y metadatos leídos del archivo original el 14-09-2026 · 33 841 caracteres en total

01 Qué hace

Qué hace el skill ios-design-review en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Se conecta a un iPhone real mediante gstack-ios-qa-daemon, captura cada pantalla y evalúa el diseño visual frente a Apple HIG, DESIGN.md y las mejores prácticas. Puntúa diez dimensiones (jerarquía tipográfica, ritmo de espaciado, jerarquía de color, áreas táctiles, estados de carga/vacío/error, accesibilidad, disciplina de animación, alineación con los modismos de iOS, densidad de información y verificación de AI-slop) de 0 a 10, usando el enfoque de 'qué haría falta para llegar a un 10'.

Refleja la rúbrica de puntuación de /plan-design-review adaptada a los modismos de iOS. Produce un informe en markdown con capturas de pantalla, puntuaciones por pantalla y sugerencias de arreglo de mayor impacto. Para la revisión de diseño en la etapa de planificación (antes de la implementación), usa /plan-design-review en su lugar. Para auditorías visuales web en vivo, usa /design-review.

Qué produce

Informe en markdown con capturas de pantalla incorporadas, puntuaciones por pantalla (0-10 para cada dimensión) y sugerencias de arreglo de mayor impacto

Ver el ejemplo de prompt ↗

Cómo funciona

01
Conectar con el Daemon en Ejecución
Usa el gstack-ios-qa-daemon en ejecución. Si no hay ningún daemon activo, inicia uno mediante el mismo flujo que /ios-qa (Fase 0-2).
02
Capturar Pantallas
Para cada pantalla principal (a partir de una lista de pantallas proporcionada por el usuario o descubierta automáticamente mediante el árbol de accesibilidad), obtiene la captura de pantalla y los elementos mediante GET /screenshot y GET /elements.
03
Aplicar la Rúbrica de Diez Dimensiones
Puntúa la jerarquía tipográfica, el ritmo de espaciado, la jerarquía de color, las áreas táctiles, los estados de carga/vacío/error, la accesibilidad, la disciplina de animación, la alineación con los modismos de iOS, la densidad de información y la verificación de AI-slop de 0 a 10, explicando qué haría falta para llevar cada una a un 10.
04
Marcar Puntuaciones Bajas
Usa AskUserQuestion para cualquier puntuación por debajo de 7, presentando el problema junto con el arreglo recomendado y su contrapartida para que el usuario decida si abordarlo.
05
Escribir Informe
Produce un informe en markdown con capturas de pantalla incorporadas, puntuaciones por pantalla y sugerencias de arreglo de mayor impacto por dimensión, escrito en ~/.gstack/projects/<slug>/ios-design-review-<date>.md.

02 Encuentra tu caso de uso

Cuándo usar el skill ios-design-review

Usa el skill ios-design-review en Claude Code o Codex cuando el trabajo sea diseño de apps móviles de este tipo. La adecuación y límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

Control de calidad visual de una app de iOS en hardware real antes de lanzarla
Comprobación del cumplimiento de accesibilidad (etiquetas de VoiceOver, Dynamic Type, Reduce Motion)

Conozca los límites

Revisión de diseño en fase de planificación antes de la implementación (usar /plan-design-review)
Auditorías visuales web en vivo (usar /design-review)

03 Dentro del skill

Reglas que el Skill ios-design-review da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Solo lectura por defecto
Adquiere la sesión con capacidad de observación, sin realizar llamadas que modifiquen el dispositivo iOS.
La tipografía usa SF Pro y Dynamic Type
La jerarquía tipográfica puntúa los tamaños de display, cuerpo y caption según la coherencia con las HIG de Apple, usando SF Pro en la escala dinámica correcta. Ningún texto de cuerpo a 12pt en ningún lugar.
El espaciado debe seguir una cuadrícula de 4pt u 8pt
La dimensión de ritmo de espaciado exige el uso coherente de una cuadrícula de 4pt u 8pt, sin paddings arbitrarios de 17/23/31pt, y respetando los márgenes de área segura.
Objetivos táctiles de 44x44pt como mínimo
Todo elemento interactivo debe medir al menos 44x44pt. Ningún texto pulsable menor de 24pt.
Las relaciones de contraste cumplen WCAG AA
La dimensión de jerarquía de color exige relaciones de contraste que cumplan WCAG AA para texto de cuerpo (4.5:1) y texto grande (3:1), con el modo oscuro renderizado correctamente.
Animación limitada a 2 simultáneas
La dimensión de disciplina de animación limita las animaciones simultáneas a 2, con una duración de 200-300ms para la retroalimentación de UI y un damping de resorte correcto (no rebotante para flujos serios).
Usar componentes nativos de iOS
La dimensión de alineación con los idiomas de iOS exige usar componentes nativos (NavigationStack, List, Form, hojas del sistema) cuando corresponda, sin navegación reinventada ni menús hamburguesa de estilo web en el teléfono.
Señalar patrones de AI-slop
La dimensión de comprobación de AI-slop detecta diseños genéricos de stock, datos lorem ipsum sin eliminar, Material Design importado por imitación desde Android y gradientes generados por IA.

04 Ponlo a trabajar

Instalar ios-design-review en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añade ios-design-review a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Forma genérica del CLI skills para ios-design-review/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de aplicación móvil

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Confirme que la sesión se adquirió con capacidad de observación y que no se realizaron llamadas que modifiquen el dispositivo

En OpenDesign importe ios-design-review desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Garry Tan
Repository: github.com/garrytan/gstack Rama main
Archivo de skill: ios-design-review/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 71f6048
License: MIT De LICENSE.
Estrellas del repositorio: 132.921 Captura de GitHub tomada el 14-09-2026 para todo el repositorio garrytan/gstack, que contiene 7 skills en este catálogo. No es una valoración ni un recuento de uso de ios-design-review.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo invocar este skillAuditoría visual de apps iOS en hardware real mediante StateServer, puntúa diez dimensiones de 0 a 10
ConexiónUsa el gstack-ios-qa-daemon en ejecución, lo lanza mediante el flujo /ios-qa si es necesario, solo lectura por defecto
Dimensiones y puntuaciónRúbrica de diez dimensiones: tipografía, espaciado, color, áreas táctiles, estados, accesibilidad, animación, idioma iOS, densidad, AI-slop
BucleAdquiere la sesión, captura cada pantalla, aplica la rúbrica, registra los hallazgos, genera un informe en markdown
SalidaInforme en markdown con capturas incrustadas, puntuaciones por pantalla, sugerencias de mejora con mayor impacto
Modos de falloGestiona el 403 capability_insufficient, capturas en blanco, pantallas ausentes

La descripción propia del Skill

"Auditoría de diseño visual para apps de iOS en hardware real. (gstack)"

Descripción del front-matter de SKILL.md. El archivo completo tiene alrededor de 33.841 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill ios-design-review

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Cuál es la diferencia entre esto y /plan-design-review?

Este skill se ejecuta en un dispositivo iOS real y evalúa apps publicadas o en desarrollo frente a las HIG de Apple y los idiomas de iOS. /plan-design-review evalúa las especificaciones de diseño antes de la implementación. Este skill refleja la misma rúbrica de puntuación adaptada a iOS.

iOS Design Review

Ejecuta ios-design-review en una tarea de diseño de aplicación móvil real.

Descarga OpenDesign, importa ios-design-review desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills

Terminal

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

Qué hace el skill ios-design-review en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo usar el skill ios-design-review

Buen caso de uso

Conozca los límites

Reglas que el Skill ios-design-review da a Claude Code y Codex

Solo lectura por defecto

La tipografía usa SF Pro y Dynamic Type

El espaciado debe seguir una cuadrícula de 4pt u 8pt

Objetivos táctiles de 44x44pt como mínimo

Las relaciones de contraste cumplen WCAG AA

Animación limitada a 2 simultáneas

Usar componentes nativos de iOS

Señalar patrones de AI-slop