Was macht Apple Design Experte?
Nutze Apple Designprinzipien als Entscheidungsrahmen: Zweck, Eigenverantwortung, Verantwortung, Vertrautheit, Flexibilität, Einfachheit, Handwerkskunst und Freude. Passe dich dem Produkt und der Plattform an, anstatt Apple-Bildschirme zu reproduzieren.
Arbeitsablauf
- Identifiziere die Hauptaufgabe des Benutzers, die Plattform, das vorhandene Komponentensystem und die responsiven Einschränkungen.
- Lege semantische Tokens fest, bevor du einzelne Elemente stylst. Lese Abstände und Layout, Typografie und Farbe, wenn du ein System erstellst.
- Implementiere plattformgerechte Muster, vollständige Interaktionszustände und zugängliche Semantiken. Lese Interaktion und Bewegung und Barrierefreiheit für interaktive Arbeiten.
- Führe die visuelle Überprüfung vor Fertigstellung durch. Überprüfe Desktop- und schmale Layouts, wenn eine gerenderte Umgebung verfügbar ist. Verwende die wiederholbaren Prüfungen in
tests/visual-qa-checklist.md; Screenshots und Playwright-Nachweise sind Beobachtungen, niemals eine Zertifizierung.
Nicht verhandelbare Grenzen
- Verwende keine Apple-Logos, proprietären Oberflächen-Assets oder Quellcode. Verwende SF-Symbole oder Apple-Systemtypografie nur, wenn die Zielplattform und die Lizenz dies erlauben.
- Bevorzuge HTML-Semantik, Tastaturverhalten, sichtbaren Fokus, ausreichenden Kontrast und
prefers-reduced-motion, bevor du optische Verfeinerungen hinzufügst. - Vermeide generisches visuelles KI-Rauschen: dekorative Verläufe, willkürliche Schatten, übermäßiges Glas, dichte Kartenraster, inkonsistente Abstände und Animation ohne Interaktionszweck.
- Verwende das vorhandene Designsystem, wenn es vorhanden ist. Neue Tokens und Komponenten müssen einen wiederholten Bedarf lösen, nicht nur einen Bildschirm anders aussehen lassen.
Implementierungsrouten
- Für HTML/CSS, lese Komponentenmuster und das Beispiel
examples/html-css/. - Für Vue und Tailwind, verwende
examples/vue-tailwind/als Muster für semantisches Markup, responsives Layout und Fokus-Zustände. - Für React und TypeScript, verwende
examples/react/als Muster; bewahre die Konventionen der Host-Anwendung. - Für Plattformanpassung und Breakpoints, lese Responsive Design. Für nativen Designkontext, lese Designphilosophie.
Evidenzbasierte visuelle Qualitätssicherung
Erfasse für eine ausführbare Oberfläche einen breiten (1440px) und einen schmalen (390px) Viewport, teste dann reine Tastaturnavigation, sichtbaren Fokus, Text-Zoom/Reflow, helles und dunkles Erscheinungsbild, Lade-/Fehler-/Leerzustände sowie reduzierte Bewegung. Notiere den Viewport, den Browser, die Route und konkrete Beobachtungen. Konvertiere keine subjektive Ästhetik in eine numerische Bewertung und behaupte keine Konformität oder Zertifizierung.