ios-design-reviewvon Garry Tan

iOS Design Review Skill.

Ein Claude Code- und Codex-Skill für Mobile-App-Design: visuelles Design-Audit von iOS-Apps auf echter Hardware.

Mobile Apps
Review-Bericht

OpenDesign herunterladen Anleitung ansehen

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)

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 33.841 Zeichen insgesamt

01 Was es tut

Was der ios-design-review Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Verbindet sich über gstack-ios-qa-daemon mit einem echten iPhone, erstellt Screenshots jedes Bildschirms und bewertet das visuelle Design anhand der Apple HIG, DESIGN.md und Best Practices. Bewertet zehn Dimensionen (Typografie-Hierarchie, Abstandsrhythmus, Farbhierarchie, Touch-Targets, Lade-/Leer-/Fehlerzustände, Zugänglichkeit, Animationsdisziplin, iOS-Idiom-Ausrichtung, Informationsdichte und AI-Slop-Check) von 0-10, mit der Denkweise 'was würde daraus eine 10 machen'.

Spiegelt das Bewertungsraster von /plan-design-review, übertragen auf iOS-Idiome. Erstellt einen Markdown-Bericht mit Screenshots, Bewertungen pro Bildschirm und Verbesserungsvorschlägen mit größter Wirkung. Für Design-Reviews in der Planungsphase (vor der Implementierung) verwenden Sie stattdessen /plan-design-review. Für visuelle Live-Audits im Web verwenden Sie /design-review.

Was er erzeugt

Markdown-Bericht mit eingebetteten Screenshots, Bewertungen pro Bildschirm (0-10 für jede Dimension) und Verbesserungsvorschlägen mit größter Wirkung pro Dimension

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Mit laufendem Daemon verbinden
Nutzt den laufenden gstack-ios-qa-daemon. Falls kein Daemon läuft, wird einer über denselben Ablauf wie bei /ios-qa (Phase 0-2) gestartet.
02
Bildschirme erfassen
Für jeden wichtigen Bildschirm (aus einer vom Nutzer bereitgestellten Bildschirmliste oder automatisch über den Accessibility-Baum ermittelt) werden Screenshot und Elemente über GET /screenshot und GET /elements abgerufen.
03
Zehn-Dimensionen-Raster anwenden
Bewertet Typografie-Hierarchie, Abstandsrhythmus, Farbhierarchie, Touch-Targets, Lade-/Leer-/Fehlerzustände, Zugänglichkeit, Animationsdisziplin, iOS-Idiom-Ausrichtung, Informationsdichte und AI-Slop-Check von 0-10 und erklärt, was jeweils zu einer 10 führen würde.
04
Niedrige Bewertungen kennzeichnen
Nutzt AskUserQuestion für jede Bewertung unter 7, indem das Problem mit empfohlener Lösung und Abwägung präsentiert wird, damit der Nutzer entscheiden kann, ob er es angehen möchte.
05
Bericht schreiben
Erstellt einen Markdown-Bericht mit eingebetteten Screenshots, Bewertungen pro Bildschirm und Verbesserungsvorschlägen mit größter Wirkung pro Dimension, geschrieben nach ~/.gstack/projects/<slug>/ios-design-review-<date>.md.

02 Finden Sie Ihren Favoriten

Wann der ios-design-review Skill zu verwenden ist

Verwenden Sie den ios-design-review-Skill in Claude Code oder Codex, wenn es um mobile App-Designs dieser Art geht. Eignung und Grenzen unten sind der eigenen Datei des Skills entnommen.

Gut geeignet

Visuelle QA einer iOS-App auf echter Hardware vor der Veröffentlichung
Prüft die Barrierefreiheit (VoiceOver-Labels, Dynamic Type, Reduce Motion)

Grenzen kennen

Design-Review in der Planungsphase vor der Umsetzung (mit /plan-design-review)
Live-Visual-Audits im Web (mit /design-review)

03 Innerhalb des Skills

Regeln, die die ios-design-review Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Standardmäßig nur lesend
Erhält eine Session mit Beobachtungsrechten (observe) und führt keine verändernden Aufrufe auf dem iOS-Gerät aus.
Typografie nutzt SF Pro und Dynamic Type
Die Typografie-Hierarchie bewertet Display-, Body- und Caption-Größen im Vergleich zu Apples HIG und prüft SF Pro auf der korrekten Dynamic-Type-Skala. Kein Fließtext mit 12pt.
Abstände müssen dem 4pt- oder 8pt-Raster folgen
Die Dimension Abstandsrhythmus verlangt ein durchgängig verwendetes 4pt- oder 8pt-Raster, ohne willkürliche Innenabstände wie 17/23/31pt, und respektiert Safe-Area-Insets.
Touch-Ziele mindestens 44x44pt
Jedes interaktive Element muss mindestens 44x44pt groß sein. Kein antippbarer Text kleiner als 24pt.
Kontrastverhältnisse erfüllen WCAG AA
Die Dimension Farbhierarchie verlangt Kontrastverhältnisse, die WCAG AA für Fließtext (4,5:1) und großen Text (3:1) erfüllen, wobei der Dark Mode korrekt dargestellt werden muss.
Animationen auf maximal 2 gleichzeitige begrenzt
Die Dimension Animationsdisziplin begrenzt gleichzeitige Animationen auf 2, mit einer Dauer von 200–300ms für UI-Feedback und korrekter Federdämpfung (nicht zu verspielt bei ernsten Abläufen).
Native iOS-Komponenten verwenden
Die Dimension iOS-Idiom-Konformität verlangt, wo angemessen, native Komponenten (NavigationStack, List, Form, System-Sheets) zu verwenden, ohne neu erfundene Navigation oder webartige Hamburger-Menüs auf dem Telefon.
AI-Slop-Muster kennzeichnen
Die Dimension AI-Slop-Prüfung erkennt generische Stock-Layouts, verbliebene Lorem-Ipsum-Daten, aus Android importiertes Cargo-Cult-Material-Design und KI-generierte Verläufe.

04 In Betrieb nehmen

ios-design-review in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

ios-design-review zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

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

Generische skills-CLI-Form für ios-design-review/SKILL.md; das Repository dokumentiert eventuell einen eigenen Pfad.

Geben Sie dem Skill eine erste Mobile-App-Design-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr 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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Bestätigen Sie, dass die Session mit Beobachtungsrechten (observe) erstellt wurde und keine verändernden Aufrufe erfolgt sind

In OpenDesign importieren Sie ios-design-review über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branch main
Skill-Datei: ios-design-review/SKILL.md Inhalts-Checksum bei Verifikation aufgezeichnet; Commit 71f6048
License: MIT Aus LICENSE.
Repository-Sterne: 132.921 GitHub-Snapshot vom 14.09.2026 für das gesamte garrytan/gstack-Repository, das 7 Skills in diesem Katalog enthält. Keine Bewertungs- oder Nutzungszahl für ios-design-review.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann diese Skill einsetzenVisuelles Audit von iOS-Apps auf echter Hardware über StateServer, bewertet zehn Dimensionen von 0-10
VerbindungNutzt den laufenden gstack-ios-qa-daemon, startet ihn bei Bedarf über den /ios-qa-Flow, standardmäßig nur lesend
Dimensionen + BewertungZehn-Dimensionen-Raster: Typografie, Abstände, Farbe, Touch-Targets, States, Barrierefreiheit, Animation, iOS-Idiom, Dichte, AI-Slop
AblaufSitzung erfassen, jeden Screen per Screenshot festhalten, Raster anwenden, Befunde protokollieren, Markdown-Report erstellen
AusgabeMarkdown-Report mit eingebetteten Screenshots, Scores je Screen, Vorschlägen für die wirksamsten Korrekturen
FehlerfälleBehandelt 403 capability_insufficient, leere Screenshots, fehlende Screens

Die eigene Beschreibung des Skills

„Visuelles Design-Audit für iOS-Apps auf echter Hardware. (gstack)"

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 33.841 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum ios-design-review Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Was ist der Unterschied zu /plan-design-review?

Dieser Skill läuft auf einem echten iOS-Gerät und bewertet ausgelieferte oder in Arbeit befindliche Apps anhand der Apple HIG und iOS-Idiome. /plan-design-review bewertet Design-Spezifikationen vor der Implementierung. Dieser Skill spiegelt dasselbe Bewertungsraster, übertragen auf iOS.

iOS Design Review

ios-design-review an einer echten Mobile-App-Design-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie ios-design-review über dessen SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

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

Was der ios-design-review Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann der ios-design-review Skill zu verwenden ist

Gut geeignet

Grenzen kennen

Regeln, die die ios-design-review Skill Claude Code und Codex vorgibt

Standardmäßig nur lesend

Typografie nutzt SF Pro und Dynamic Type

Abstände müssen dem 4pt- oder 8pt-Raster folgen

Touch-Ziele mindestens 44x44pt

Kontrastverhältnisse erfüllen WCAG AA

Animationen auf maximal 2 gleichzeitige begrenzt

Native iOS-Komponenten verwenden

AI-Slop-Muster kennzeichnen