Tasarım Sistemleri
Material 3
Google’ın Material Design 3’ünü Compose, Flutter ve web’de uygulayın.
Nedir
md.sys token ad alanını, 30’dan fazla bileşeni, uyarlanabilir düzeni, temalandırmayı ve M3 Expressive’i kapsayan bir Material Design 3 rehberi. Jetpack Compose birincil hedeftir; Flutter ve @material/web ikincildir.
>
Tasarım için neden önemli
- Renk, yazı, şekil ve yükseklik token’ları, sabit kodlanmış hex ve radius değerlerinin yerini alır.
- Tonal yüzeyler, güncel MD3 spesifikasyonuyla uyumlu biçimde gölgeler yerine derinlik taşır.
- Puanlı bir denetim on kategoriyi değerlendirir ve düzeltmeleri öncelik sırasına göre listeler.
Neleri kapsıyor
- Design token system
- Component quick reference
- Common patterns
- Anti-patterns
- M3 Expressive
- MD3 compliance audit
Nasıl kurulur
Material 3
-
Depoyu klonlayın.
git clone https://github.com/hamen/material-3-skill -
Codex’i skill dosyasına yönlendirin.
skills/material-3/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Codex’in Compose, Flutter ya da CSS custom property’leri seçmesi için platformu belirtin.
-
Bir bileşen isteyin ve doğru varyantı artı token bağlantısını alın.
-
Bir uyumluluk raporu için denetimi bir URL’ye ya da kaynak dosyalara karşı çalıştırın.
Buradaki her eklenti ücretsiz, açık kaynak ve gerçek üst kaynağına bağlantı veriyor.
codex-design listesinde dahası ↗Diğer Codex tasarım eklentileri
Frontend & Arayüz Ne yapar gpt-taste GSAP scroll hareketi ve boşluksuz bento ızgaralarıyla ödüllük tarzda landing page’ler kurar. 
Tasarım Sistemleri Ne yapar Stitch Design Taste Google Stitch’i sıradan olmayan ekranlara yönlendiren bir DESIGN.md yazar. 
Frontend & Arayüz Ne yapar image-to-code Önce tasarım görselleri üretir, onları analiz eder, sonra eşleşen frontend kodunu kurar. 
Frontend & Arayüz Ne yapar imagegen-frontend-mobile Premium mobil uygulama ekran akışlarını kod değil, görsel olarak üretir. Sonraki adım
Kurulum derdi olmadan Open Design ile tasarlayın
Bu eklentiyi kendiniz kurun ya da Open Design ile Codex’in etrafına baştan sona küratörlü bir tasarım katmanı geçirin. Kendi anahtarınızı getirin, çıktınızın sahibi olun.