Frontend & UI
Details that make interfaces feel better
Sechzehn konkrete UI-Feinschliff-Regeln mit Review-Checkliste.
Worum es geht
Eine Reihe von Design-Engineering-Prinzipien für Interface-Feinschliff: konzentrische Radien, optische Ausrichtung, gestapelte Schatten, gestaffelte Einblend-Animationen, Tabellenziffern, Hit Areas und Transition-Spezifität.
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/
Warum das fürs Design zählt
- Nennt exakte Werte, damit die Skalierung beim Drücken immer 0.96 ist, nie geraten.
- Behebt den verschachtelten Radius-Fehler, der die meisten Komponenten daneben wirken lässt.
- Fängt Layout-Shift durch wechselnde Zahlen ab, bevor er die Nutzer erreicht.
Was es abdeckt
- Quick reference
- Core principles
- Common mistakes
- Review output format
- Review checklist
- Reference files
So installierst du es
Details that make interfaces feel better
-
Klone das Repo.
git clone https://github.com/jakubkrehel/make-interfaces-feel-better -
Verweise Codex auf die Skill-Datei.
skills/make-interfaces-feel-better/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Verweise Codex auf eine Komponente und bitte ihn, die Prinzipien anzuwenden.
-
Verlange ein Review, die Befunde kommen als Before-After-Tabellen zurück.
-
Geh die vierzehnteilige Checkliste durch, bevor du eine Frontend-Änderung mergst.
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.