Frontend & Arayüz
Framed Grid Layout
İnce çerçeveler ve köşe ayraçlarıyla hassas editoryal düzenler kurun.
Nedir
Her bölümün 1px çerçeveli kutular içinde paylaşılan sütunlara oturduğu on iki sütunlu bir ızgara deseni. L biçimli köşe ayraçları, düşük opaklıklı çapraz bir doku üzerine arka plan katmanları olarak çizilir.
Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial
Tasarım için neden önemli
- Her bölüm tek bir kenarlık rengi, tek bir ayraç boyutu, tek bir boşluk ölçeği paylaşır.
- Köşe ayraçları ek işaretleme gerektirmez; böylece yapı CSS’te kalır.
- Doku katmanı kaldırılsa bile düzen yine net okunur.
Neleri kapsıyor
- Use when
- Layout rules
- Base tokens
- Parent grid
- L-shaped corner brackets
- Section spans
Nasıl kurulur
Framed Grid Layout
-
Depoyu klonlayın.
git clone https://github.com/MengTo/Skills -
Codex’i skill dosyasına yönlendirin.
agent-skills/web-design/framed-grid-layout/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Teknik ya da editoryal bir sayfa isteyin ve önce ana ızgarayı alın.
-
Gelişigüzel bölüm genişlikleri yerine açık span sınıfları atayın.
-
Çerçeve kenarlarının her iki breakpoint’te dikey ve yatay olarak hizalandığını doğrulayı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.