Frontend & UI
emil-design-eng
Emil Kowalskis Regeln für Animations-Timing, Easing und Komponenten-Feinschliff.
Worum es geht
Kodiert eine Design-Engineering-Philosophie: ein Entscheidungsframework für Animation, Spring-Empfehlungen, Komponentenprinzipien, clip-path-Techniken, Gesten-Handling, Performance-Regeln und eine Review-Checkliste.
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Warum das fürs Design zählt
- Häufige Aktionen verlieren ihre Animation ganz, damit Command Palettes sofort bleiben.
- Einblendungen starten bei scale(0.95), nie bei scale(0), damit nichts aus dem Nichts erscheint.
- Popovers skalieren von ihrem Trigger statt aus der Mitte und wahren so den räumlichen Bezug.
Was es abdeckt
- The animation decision framework
- Spring animations
- Component building principles
- clip-path for animation
- Performance rules
- Review checklist
So installierst du es
emil-design-eng
-
Klone das Repo.
git clone https://github.com/emilkowalski/skills -
Verweise Codex auf die Skill-Datei.
skills/emil-design-eng/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Bitte Codex, UI-Code zu prüfen, er liefert eine Before-After-Why-Tabelle.
-
Bei neuer Motion beantwortet er: sollte das animieren, warum, welches Easing, wie schnell.
-
Er wendet die Checkliste an und markiert transition: all sowie Dauern über 300ms.
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.