Design-Systeme
Material 3
Setze Googles Material Design 3 über Compose, Flutter und Web um.
Worum es geht
Ein Leitfaden zu Material Design 3, der den md.sys-Token-Namespace, 30+ Komponenten, adaptives Layout, Theming und M3 Expressive abdeckt. Jetpack Compose ist das primäre Ziel, Flutter und @material/web sind sekundär.
>
Warum das fürs Design zählt
- Color-, Type-, Shape- und Elevation-Tokens ersetzen hartkodierte hex- und Radius-Werte.
- Tonale Flächen tragen Tiefe statt Schatten, im Einklang mit der aktuellen MD3-Spec.
- Ein bewertetes Audit benotet zehn Kategorien und listet Fixes in Prioritätsreihenfolge.
Was es abdeckt
- Design token system
- Component quick reference
- Common patterns
- Anti-patterns
- M3 Expressive
- MD3 compliance audit
So installierst du es
Material 3
-
Klone das Repo.
git clone https://github.com/hamen/material-3-skill -
Verweise Codex auf die Skill-Datei.
skills/material-3/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Nenn die Plattform, damit Codex Compose, Flutter oder CSS Custom Properties wählt.
-
Verlange eine Komponente und bekomm die richtige Variante plus Token-Verdrahtung.
-
Führe das Audit gegen eine URL oder Quelldateien aus, für einen Compliance-Report.
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.