Frontend & Arayüz
design-skills · Claymorphism
Kabarık yuvarlak 3D şekiller, Poppins başlıklar, beyaz üzerine mavi.
Nedir
Claymorphic arayüz için bir kılavuz skill’i: yoğrulabilir kili taklit eden yumuşak, yuvarlak, kabarık şekiller. Poppins başlık, Montserrat gövde, mavi #3B82F6 vurgu ve beyaz üzerine koyu mavi metin.
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
Tasarım için neden önemli
- Kabarık yuvarlak biçimler, butonlara ek etiket olmadan bariz bir basılabilirlik hissi verir.
- Beyaz üzerine koyu mavi metin #1C398E, palet oyuncul kalırken kontrastı korur.
- Kurallar metafor karıştırmayı yasaklar; böylece kil derinliği asla cam ya da düz ile birleşmez.
Neleri kapsıyor
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Nasıl kurulur
design-skills · Claymorphism
-
Depoyu klonlayın.
git clone https://github.com/bergside/awesome-design-skills -
Codex’i skill dosyasına yönlendirin.
skills/claymorphism/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Kil görünümünü tanımladıkları için önce Codex’ten radius ve gölge token’ları isteyin.
-
Belirtildiği gibi Poppins başlığı Montserrat gövdeyle eşleştirin, iki benzer sans yüzüyle değil.
-
focus-visible ve disabled durumlarının yumuşak şekil işlemesinden sağ çıktığını kontrol edin.
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.