Frontend & UI
design-skills · Editorial
Magazin-Layout in Gelasio-Serif auf einem strikten 8pt-Raster.
Worum es geht
Ein Design-System-Richtlinien-Skill für einen modernen Editorial-Look: Gelasio-Serif für Fließtext und Display, Ubuntu Mono, Fast-Schwarz #111111 auf weißen Flächen und ein 8pt-Grundlinienraster.
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
Warum das fürs Design zählt
- Display und Fließtext als Serif aus einer Familie halten lange Lesepassagen typografisch konsistent.
- Ein 8pt-Grundlinienraster erzwingt vertikalen Rhythmus über Überschriften, Fließtext und Abstände.
- Die Barrierefreiheitslatte umfasst reduced-motion-Support, 44px-Touch-Targets und High-Contrast-Handling.
Was es abdeckt
- Style foundations
- Accessibility
- Guideline authoring workflow
- Required output structure
- Component rule expectations
- Quality gates
So installierst du es
design-skills · Editorial
-
Klone das Repo.
git clone https://github.com/bergside/awesome-design-skills -
Verweise Codex auf die Skill-Datei.
skills/editorial/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Bitte Codex, die Design-Absicht zu wiederholen, und definiere Tokens, bevor du Komponenten anfasst.
-
Verlange Komponentenregeln zu Anatomie, Varianten, States und Responsive-Verhalten.
-
Schließ mit der QA-Checkliste ab, damit ein Code-Reviewer die Ausgabe prüfen kann.
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.