Frontend & Arayüz
design-skills · Bento
Krem üzerinde çeşitli bloklardan ızgara, Inter yazı, kompakt ölçek.
Nedir
İçeriği değişen boyutlarda ızgara blokları olarak sunan bento box düzenleri için bir kılavuz skill’i. Baştan sona Inter, kompakt 12 ile 32 arası yazı ölçeği, krem üzerinde şeftali ve mavi vurgular.
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Tasarım için neden önemli
- Değişen blok boyutları hiyerarşiyi taşır; böylece sıralamayı ızgaranın kendisi yapar.
- Kompakt 12 ile 32 arası yazı ölçeği, yoğun metni küçük döşemelere sığdırır.
- Krem #FFF5E6 yüzey, blok kenarlarını ağır kenarlıklar olmadan okunur tutar.
Neleri kapsıyor
- Brand
- Style foundations
- Rules: do
- Component rule expectations
- Required output structure
- Quality gates
Nasıl kurulur
design-skills · Bento
-
Depoyu klonlayın.
git clone https://github.com/bergside/awesome-design-skills -
Codex’i skill dosyasına yönlendirin.
skills/bento/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Codex’ten her bloğa içerik önceliğine göre bir boyut atamasını isteyin.
-
Döşemeleri yerleştirmeden önce boşluk token’larını 4 ile 32 arası ölçekte tanımlayın.
-
Bu skill’in uç durum olarak listelediği taşma ve uzun etiket yönetimini isteyin.
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.