Frontend & Arayüz
Container Lines
İçerik kapsayıcınızın kenarlarına sessiz dikey kılavuz çizgileri çizin.
Nedir
İçerik kapsayıcısının her iki kenarına 1px dikey çizgiler, artı isteğe bağlı mini köşe kareleri ekleyen bir CSS deseni. Kılavuzlar içeriğin arkasında durur ve pointer olaylarını yok sayar.
Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small
Tasarım için neden önemli
- Kapsayıcı genişliğini açığa çıkarır; böylece gevşek hero bölümleri yapısal gerilim kazanır.
- Kılavuzlar kapsayıcının max-width ve padding’ini paylaşır; böylece asla savrulmaz.
- Pointer olayları devre dışıdır; böylece çizgiler asla tıklamayı ya da seçimi engellemez.
Neleri kapsıyor
- Use when
- Rules
- Base tokens
- Page container lines
- Corner squares
- Minimal section wrapper
Nasıl kurulur
Container Lines
-
Depoyu klonlayın.
git clone https://github.com/MengTo/Skills -
Codex’i skill dosyasına yönlendirin.
agent-skills/web-design/container-lines/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
container-lines sınıfını düzen kabuğuna ekleyin.
-
Köşe karelerini yalnızca gerçek kapsayıcı ya da bölüm köşelerine yerleştirin.
-
Çizgilerin hem açık hem koyu arka planlarda ince kaldığı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.