Frontend & Arayüz
WebGL 3D Object
CSS transform numarası değil, gerçekten ışıklandırılmış bir 3D hero nesnesi.
Nedir
Geometrik mesh derinliği, fizik tabanlı malzeme, yönlü ve ortam ışığı, perspektif kamera ve süzülen hareketle gerçek bir 3D WebGL nesnesi.
Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero obje
Tasarım için neden önemli
- Ajanlar CSS transform’a kaçıp düz bir taklit üretir; bu skill gerçek ışık verir.
- Malzeme ve ışık varsayılanları sayesinde nesne oyuncak değil, ürün gibi durur.
- Hareket varsayılan olarak incedir; nesne hero’yu çalmaz, sabitler.
Neleri kapsıyor
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
Nasıl kurulur
WebGL 3D Object
-
Depoyu klonlayın.
git clone https://github.com/MengTo/Skills -
Codex’i skill dosyasına yönlendirin.
agent-skills/web-design/webgl-3d-object/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Depoyu klonlayın ve Codex’i bu skill dosyasına yönlendirin.
-
3D bir hero nesnesi isteyin ve istediğiniz malzemeyi tarif edin.
-
Malzeme ve ışık varsayılanlarını ayarlayın; kamera reçetesini koruyun.
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.