Frontend & UI
apple-design
Apples fluide Interface-Prinzipien, übersetzt in Web-Springs und Gesten.
Worum es geht
Wissen aus Apples WWDC-Design-Talks, vor allem Designing Fluid Interfaces, übertragen auf CSS, Pointer Events und Spring-Bibliotheken. Deckt Reaktion, Unterbrechbarkeit, Momentum, Materialien, Typografie und Barrierefreiheit ab.
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible tran
Warum das fürs Design zählt
- Feedback feuert bei pointer-down, damit gedrückte Elemente nicht mehr tot wirken.
- Animationen starten vom aktuellen Bildschirmwert, das entfernt sichtbare Sprünge bei Unterbrechung.
- Flicks projizieren einen Landepunkt, damit Würfe dort landen, wohin die Geste zielte.
Was es abdeckt
- Response
- Direct manipulation
- Interruptibility
- Momentum projection
- Materials and depth
- Reduced motion and accessibility
So installierst du es
apple-design
-
Klone das Repo.
git clone https://github.com/emilkowalski/skills -
Verweise Codex auf die Skill-Datei.
skills/apple-design/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Bitte Codex um ein Sheet, ein Drawer oder eine Drag-Interaktion.
-
Er trackt 1:1 per Pointer Capture und protokolliert den Geschwindigkeitsverlauf.
-
Beim Loslassen übergibt er die Geschwindigkeit an ein Spring mit den mitgelieferten Damping-Werten.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.