ios-design-reviewавтор Garry Tan

iOS Design Review Skill.

Skill для Claude Code и Codex для дизайна мобильных приложений: аудит визуального дизайна iOS-приложений на реальных устройствах.

Мобильные приложения
Отчёт ревью

Скачать OpenDesign Инструкция по использованию

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)

Вводная часть и заголовки разделов прочитаны из исходного файла 14 сентября 2026 · 33 841 символ полностью

01 Что делает

Что делает skill ios-design-review в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Подключается к реальному iPhone через gstack-ios-qa-daemon, делает скриншот каждого экрана и оценивает визуальный дизайн по Apple HIG, DESIGN.md и лучшим практикам. Оценивает десять измерений (иерархия типографики, ритм отступов, цветовая иерархия, размер тач-таргетов, состояния загрузки/пустоты/ошибки, доступность, дисциплина анимации, соответствие iOS-идиоматике, информационная плотность и проверка на AI-slop) по шкале 0–10, используя формулировку «что сделало бы это на 10».

Отражает рубрику оценки /plan-design-review, перенесённую на iOS-идиоматику. Формирует markdown-отчёт со скриншотами, оценками по каждому экрану и предложениями по исправлениям с наибольшим эффектом. Для ревью дизайна на этапе плана (до реализации) используйте /plan-design-review. Для живых визуальных аудитов веба используйте /design-review.

Что он выдаёт

Markdown-отчёт со встроенными скриншотами, оценками по каждому экрану (0–10 по каждому измерению) и предложениями по исправлениям с наибольшим эффектом по каждому измерению

Смотрите пример запроса ↗

Как это работает

01
Подключение к запущенному демону
Использует запущенный gstack-ios-qa-daemon. Если демон не запущен, создаёт его тем же способом, что и /ios-qa (фазы 0–2).
02
Захват экранов
Для каждого основного экрана (из предоставленного пользователем списка экранов или автоматически найденного через дерево доступности) получает скриншот и элементы через GET /screenshot и GET /elements.
03
Применение рубрики из десяти измерений
Оценивает иерархию типографики, ритм отступов, цветовую иерархию, тач-таргеты, состояния загрузки/пустоты/ошибки, доступность, дисциплину анимации, соответствие iOS-идиоматике, информационную плотность и проверку на AI-slop по шкале 0–10, объясняя, что подняло бы каждую оценку до 10.
04
Отметка низких оценок
Использует AskUserQuestion для любой оценки ниже 7, представляя проблему с рекомендуемым исправлением и компромиссом, чтобы пользователь мог решить, стоит ли её устранять.
05
Написание отчёта
Формирует markdown-отчёт со встроенными скриншотами, оценками по каждому экрану и предложениями по исправлениям с наибольшим эффектом по каждому измерению, записанный в ~/.gstack/projects/<slug>/ios-design-review-<date>.md.

02 Определите своё применение

Когда использовать Skill ios-design-review

Используйте skill ios-design-review в Claude Code или Codex, когда задача касается дизайна мобильных приложений такого типа. Требования и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

Визуальное QA iOS-приложения на реальном устройстве перед релизом
Проверка соответствия доступности (метки VoiceOver, Dynamic Type, Reduce Motion)

Знайте границы

Дизайн-ревью на этапе планирования до реализации (используйте /plan-design-review)
Живые визуальные аудиты веб-интерфейсов (используйте /design-review)

03 Внутри скилла

Правила, которые skill ios-design-review даёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

По умолчанию только для чтения
Получает сессию с возможностью observe, не выполняя изменяющих вызовов на iOS-устройстве.
Типографика использует SF Pro и Dynamic Type
Измерение иерархии типографики оценивает соотношение размеров display, body и caption на соответствие Apple HIG, с использованием SF Pro в корректном масштабе dynamic-type. Нигде не должно быть текста body размером 12pt.
Отступы должны соответствовать сетке 4pt или 8pt
Измерение ритма отступов требует последовательного использования сетки 4pt или 8pt, без «магических» padding'ов вроде 17/23/31pt, с учётом отступов безопасной зоны (safe-area).
Минимальный размер зон касания — 44x44pt
Каждый интерактивный элемент должен быть не менее 44x44pt. Никакой нажимаемый текст не должен быть меньше 24pt.
Коэффициенты контраста соответствуют WCAG AA
Измерение цветовой иерархии требует коэффициентов контраста, соответствующих WCAG AA для основного текста (4.5:1) и крупного текста (3:1), с корректным отображением в тёмном режиме.
Анимация ограничена 2 одновременными
Измерение дисциплины анимации ограничивает число одновременных анимаций до 2, с длительностью 200-300ms для UI-фидбека и корректным пружинным затуханием (без «прыгучести» для серьёзных сценариев).
Используйте нативные компоненты iOS
Измерение соответствия идиомам iOS требует использования нативных компонентов (NavigationStack, List, Form, системные sheets) там, где это уместно, без переизобретения навигации или веб-стиля «гамбургер»-меню на телефоне.
Отмечать паттерны AI-slop
Измерение проверки на AI-slop выявляет типовые шаблонные макеты, оставленные данные lorem ipsum, карго-культ Material Design, перенесённый из Android, и AI-сгенерированные градиенты.

04 Применение

Установите ios-design-review в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте ios-design-review в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

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

Стандартная форма CLI skills для ios-design-review/SKILL.md; репозиторий может документировать собственный путь.

Дайте скиллу первую задачу по дизайну мобильного приложения

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

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.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Убедитесь, что сессия была получена с возможностью observe и что не было выполнено изменяющих вызовов

В OpenDesign импортируйте ios-design-review по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Garry Tan
Repository: github.com/garrytan/gstack Ветка main
Файл skill: ios-design-review/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 71f6048
License: MIT Из LICENSE.
Звёзды репозитория: 132 921 Снимок GitHub сделан 2026-09-14 для всего репозитория garrytan/gstack, который содержит 7 навыков в этом каталоге. Не является рейтингом или числом использований ios-design-review.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Когда вызывать этот skillВизуальный аудит iOS-приложений на реальном оборудовании через StateServer, оценка по десяти измерениям от 0 до 10
ПодключениеИспользует запущенный gstack-ios-qa-daemon, при необходимости запускает через поток /ios-qa, по умолчанию только для чтения
Измерения и оценкаРубрика из десяти измерений: типографика, интервалы, цвет, области нажатия, состояния, доступность, анимация, iOS-идиома, плотность, AI-slop
ЦиклПолучение сессии, скриншот каждого экрана, применение рубрики, фиксация выводов, формирование markdown-отчёта
РезультатMarkdown-отчёт со встроенными скриншотами, оценками по экранам, предложениями по исправлениям с наибольшей отдачей
Сценарии сбоевОбрабатывает 403 capability_insufficient, пустые скриншоты, отсутствующие экраны

Собственное описание skill

«Аудит визуального дизайна iOS-приложений на реальном устройстве. (gstack)»

Описание из front-matter SKILL.md. Полный файл составляет около 33 841 символа. Читайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill ios-design-review

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

В чём разница между этим skill и /plan-design-review?

Этот skill работает на реальном устройстве iOS и оценивает выпущенные или разрабатываемые приложения по Apple HIG и iOS-идиомам. /plan-design-review оценивает дизайн-спецификации до реализации. Этот skill использует ту же рубрику оценки, перенесённую на iOS.

iOS Design Review

Запустите ios-design-review на реальной задаче дизайна мобильного приложения.

Скачайте OpenDesign, импортируйте ios-design-review по ссылке на SKILL.md, вставьте приведённый выше промпт и ознакомьтесь с планом перед результатом.

Загрузить OpenDesign Все навыки

Терминал

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

Что делает skill ios-design-review в Claude Code и Codex

Словами самого skill

Как это работает

Когда использовать Skill ios-design-review

Хорошо подходит

Знайте границы

Правила, которые skill ios-design-review даёт Claude Code и Codex

По умолчанию только для чтения

Типографика использует SF Pro и Dynamic Type

Отступы должны соответствовать сетке 4pt или 8pt

Минимальный размер зон касания — 44x44pt

Коэффициенты контраста соответствуют WCAG AA

Анимация ограничена 2 одновременными

Используйте нативные компоненты iOS

Отмечать паттерны AI-slop