App-Icon-Design Skill
Auslöser
Verwenden Sie diesen Skill für jedes neue App-Symbol, jede Symbolüberarbeitung, Symbolkritik oder Apple-App-Symbol-Exportanfrage. Prüfen Sie die aktuellen Design- und technischen Dokumentationen von Apple, wenn eine produktionsreife Spezifikation wichtig ist.
Prozess
- Identifizieren Sie den Kernzweck der App und ihre Markensprache. Verwenden Sie, sofern vorhanden, bereits etabliertes Branding, andernfalls wählen Sie eine aussagekräftige visuelle Metapher.
- Reduzieren Sie die Metapher auf ein wiedererkennbares Kernsymbol mit kräftigen, gefüllten, einfachen Formen und einer klaren Silhouette. Vermeiden Sie winzige Details, überladene Texturen, dünne Striche, Screenshots, unnötigen Text und übermäßigen Glanz.
- Wählen Sie eine durchdachte, zurückhaltende Farbpalette und einen klaren Vordergrund-/Hintergrundkontrast. Zentrieren Sie das primäre Symbol optisch und lassen Sie einen großzügigen Sicherheitsbereich für die Systemmasken.
- Entwerfen Sie so, dass das Symbol auch in kleinen Größen erkennbar bleibt. Vorschau in voller Größe, 180 px, 60 px und 30 px (Designtests, keine von Apple vorgeschriebenen Pixelanforderungen).
- Berücksichtigen Sie die Modi Standard, Dunkel, Transparent und Getönt. Bewahren Sie das Konzept und die Wiedererkennbarkeit über alle Darstellungen hinweg.
- Überprüfen Sie die QA-Checkliste; vereinfachen Sie jedes Element, das in kleinen Maßstäben zu Rauschen wird.
- Erstellen Sie qualitativ hochwertigste Assets in Formaten, die von den verfügbaren Werkzeugen tatsächlich unterstützt werden. Geben Sie niemals Vektor-/bearbeitbare Quellen oder Varianten an, die nicht erstellt wurden.
Human Interface Guidelines von Apple
- Bevorzugen Sie Einfachheit und sofortige Wiedererkennung. Feine Merkmale können laut werden, sobald das System Glanzlichter und Schatten hinzufügt.
- Bevorzugen Sie Illustrationen gegenüber Fotos und reproduzieren Sie nicht einfach die App-Benutzeroberfläche.
- Vermeiden Sie extrem dünne Linien und scharfe Winkel, wenn deren Details bei kleineren Größen verloren gehen.
- Vermeiden Sie nicht wesentliche Wörter, Slogans oder plattformspezifische Aussagen.
- Kopieren Sie keine Apple-Hardware.
- Verwenden Sie ungemasste quadratische Ebenen; das System selbst fügt abgerundete Ecken oder kreisförmige Masken hinzu. Fügen Sie keine abgerundeten Ecken in das Basisartwork ein.
- Platzieren Sie wichtige Inhalte zentral, damit die Systemmaskierung sie nicht abschneidet.
- Symbole sollten über Geräte und Darstellungen hinweg visuell konsistent sein.
Apple-Größen und Systemformen (überprüft am 24.10.2026)
| Zielplattform | Leinwand | Systemmaske |
|---|---|---|
| iOS, iPadOS, macOS | 1024 × 1024 px | abgerundetes Rechteck |
| watchOS | 1088 × 1088 px | Kreis |
| visionOS | 1024 × 1024 px | Kreis |
| tvOS | 800 × 480 px | abgerundetes Rechteck |
- Verwenden Sie sRGB für portable Exporte; Display P3 wird auf Apple-Plattformen wie dokumentiert ebenfalls unterstützt.
- Bevorzugen Sie für den zeitgenössischen Apple-Workflow geschichtetes Artwork und Icon Composer, um eine Vorschau von Plattformen und Darstellungsvarianten (Standard, Dunkel, transparent hell/dunkel, getönt hell/dunkel) zu erhalten.
- Zeichnen Sie Artwork als Vektoren und exportieren Sie jede unabhängig einstellbare Ebene nach Möglichkeit als SVG, wobei Sie Text in Pfade umwandeln. PNG-Ebenen sind geeignet, wenn SVG-Funktionen nicht unterstützt werden.
- Schieben Sie Unschärfe, Schatten, Glanzeffekte, Transluzenz, Deckkraft, Verläufe und Hintergrundeffekte auf, wenn Sie geschichtete Liquid-Glass-Symbole in Icon Composer vorbereiten.
- Der Hintergrund muss die gesamte Leinwand abdecken. Verwenden Sie für ein statisches iOS-Symbol standardmäßig einen vollständig deckenden, randlosen Hintergrund. Ein transparentes, isoliertes Glyphen-Symbol ist ein anderer Asset-Typ, kein vollständiges App-Symbol.
- Das System wendet Masken an; exportieren Sie keine Maskengeometrie auf Artwork-Ebenen.
- Ein flaches 1024px-PNG kann für statische Icon-Workflows geliefert werden, ist aber nicht gleichwertig mit einem geschichteten Icon-Composer-
.icon-Asset.
QA-Checkliste
- Ein einprägsames Konzept, erkennbare Silhouette
- Lesbar in kleiner Größe und in Graustufen
- Begrenzte Farben und starker Kontrast
- Keine unnötigen Wörter, Texturen, feine Details oder Screenshots
- Optische Zentrierung und sicherer Randabstand
- Quellartwork quadratisch und ungemasst, Hintergrund randlos
- Gegen dunkle, getönte und transparente Darstellungen geprüft
- Korrekte Zielplattformgröße, Farbraum und Exportformat
- Behauptungen über Bearbeitbarkeit, Ebenen und Formate stimmen mit den tatsächlichen Dateien überein
Optionales markenspezifisches Overlay für die Gehirn-/Mathe-App des Benutzers
Nur für dieses spezifische Projekt verwenden, nicht für alle Apps:
- Maximal drei Volltonfarben; Palette aus Kobalt/Elektroblau, Violett und Magenta-Pink (oder tiefes Marineblau, wenn angemessen).
- Keine Verläufe, es sei denn, der Benutzer überschreibt dies.
- Abstrakte, vereinfachte Gehirnsilhouette mit einer Handvoll kräftiger Lappen; keine hyperdetaillierte anatomische Darstellung.
- Minimal, erkennbar und attraktiv in kleinen Symbolgrößen. Die Tiefe sollte zurückhaltend sein und keine zusätzlichen Farben hinzufügen.
- Der App-Symbolhintergrund ist Teil der Komposition, nicht transparent (es sei denn, eine separate Symbolebene wird angefordert).
Vorlage für die Bilderstellungsbeschreibung
"Erstellen Sie ein quadratisches App-Symbol für [APP], mit einem einprägsamen zentralen Symbol [SYMBOL], bestehend aus einer kleinen Anzahl von Vollton-High-Contrast-Formen in [PALETTE], auf einem randlosen, deckenden [HINTERGRUND]-Hintergrund. Zentrieren Sie nach visuellem Gewicht, lassen Sie großzügigen Freiraum um die Außenkanten, vermeiden Sie Verläufe [falls gewünscht], Buchstaben, Oberflächenelemente und kleine Details, starke Wiedererkennung bei winzigen Größen, keine eingebaute abgerundete Eckenmaske."
Quellen der Wahrheit
- Apple HIG App-Symbole: https://developer.apple.com/design/human-interface-guidelines/app-icons
- Apple Icon Composer Workflow: https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer
- Apple Design Resources: https://developer.apple.com/design/resources/
- Apple Icon Composer: https://developer.apple.com/icon-composer/
Der Design-Rat ist eine Synthese; überprüfen Sie vor der Veröffentlichung die aktuellen Apple-Spezifikationen. Dies ist ein portables Skill-Dokument, kein Nachweis, dass es als ausführbarer System-/Plugin-Skill registriert ist.