Spacing Systemyazan Owl-Listener

Spacing System Skill.

Boşluğu, tek tek piksel ayarlarıyla değil, ilişkiye ve amaca göre seçin.

Arayüz Tasarımı
Tasarım Token'ları

OpenDesign'ı İndir Kullanım Kılavuzunu Görüntüle

Kaynak İncelemesi · Spacing SystemSKILL.md

Görev Arayüz Tasarımı Çıktılar • Seçilen bir temel birimden türetilmiş, adlandırılmış bir boşluk ölçeği. • İç boşluk (inset), dikey yığın (stack), satır içi (inline) ve ızgara aralıkları için kullanım kuralları. • Farklı içerik bağlamları için yoğunluk modu eşlemeleri. Başlamadan Önce Belirli bir token aracı gerekmez; uygulama mevcut bileşen sistemine bağlıdır.

Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Boşluğa Tutarlı Bir Anlam Verin

Temel ölçeği, anlamsal uygulamaları, gruplamayı ve yoğunluk modlarını kapsayan kompakt bir boşluk çerçevesi.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

Spacing System, kenar boşlukları, dolgular ve aralıklar için bir temel birim ve yeniden kullanılabilir bir ölçek belirler. Bir kapsayıcının içindeki iç boşluğu (inset) dikey yığınlardan, satır içi ilişkilerden ve ızgara aralıklarından ayırır; böylece aynı sayılar bile açıkça belgelenmiş farklı amaçlara sahip olabilir.

Kaynak, boşluğu gruplamayla ilişkilendirir: ilişkili öğeler birbirine daha yakın durur, ilgisiz bölümler ise daha fazla ayrılır. Ayrıca farklı bağlamlar için yoğunluk modlarını açıklar. Bu, kısa bir sistem tanımıdır; örnek ölçeğin her ürüne değiştirilmeden uyacağı iddiası değildir.

Beklenen Çıktılar

Seçilen bir temel birimden türetilmiş, adlandırılmış bir boşluk ölçeği.
İç boşluk (inset), dikey yığın (stack), satır içi (inline) ve ızgara aralıkları için kullanım kuralları.
Farklı içerik bağlamları için yoğunluk modu eşlemeleri.

Örnek Brifingi Gör

Brifingten İncelemeye

01
Temeli ve Ölçeği Seçin
Mevcut desenleri inceleyin ve rastgele ortaya çıkmış her değeri korumak yerine sınırlı bir boşluk sözlüğü seçin.
02
Anlamsal Kullanımları Atayın
Hangi adımların bileşenlerin içine, ilişkili kontroller arasına ve bölümler arasına ait olduğunu tanımlayın.
03
Yoğunluk Değişikliklerini Belirtin
Gruplama ilişkilerini okunaklı tutarken kompakt ve ferah modların varsayılanı nasıl değiştirdiğini açıklayın.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Belirli bir token aracı gerekmez; uygulama mevcut bileşen sistemine bağlıdır.

İyi Bir Uyum

Tutarsız Bileşen DolgusuBenzer kontroller birbiriyle ilgisiz boşluk değerleri kullandığında faydalıdır.
Birden Fazla Yoğunluk İhtiyacıYoğun çalışma görünümlerini daha rahat okuma yüzeyleriyle birleştiren ürünleri destekler.

Kontrol Edilecek Sınırlar

Sütun Izgarası DeğildirSayfa sütunları ve duyarlı oluklar Layout Grid kapsamındadır.
Otomatik Geçiş DeğildirKaynak kuralları açıklar; mevcut her CSS değerini güvenle değiştiren bir codemod sunmaz.

Bu Girdileri Getirin

Mevcut Boşluk ÖrnekleriTemsili bileşenleri ve kullandıkları değerleri sağlayın.
Gruplama AmacıHangi öğelerin birlikte durması, hangi bölümlerin ayrılması gerektiğini açıklayın.
Yoğunluk GereksinimleriVeri yoğun, olağan ve okuma odaklı bağlamları belirleyin.

03 Önemli Kararlar

Önemli Kararlar

Amaç Belgelenir
Yalnızca bir token tablosu, bir geliştiriciye etiket ile girdi alanı arasında hangi aralığın kullanılacağını söylemez.
Rastgelelik Olmadan Yoğunluk
Modlar, yeni bir keyfi değerler kümesi oluşturmak yerine ortak bir sistemi koruyarak sıkılığı değiştirebilir.

04 Örnek Görev Tanımı

Odaklı Bir Brifing Deneyin

Aşağıdaki örnek brifing test edilmemiştir. Kullanmadan önce becerinin kurulumunu kontrol edin.

Kurulumu İnceleyin

Deponun belgelenmiş kurulum yolunu kullanın ve atıfta bulunulan tüm yardımcı dosyaları saklayın. Bu kayıt, çalıştırılabilir bir uygulamayı değil, odaklı bir tasarım yöntemini açıklar.

Kaynak Dosyası (Upstream)

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/spacing-system/SKILL.md

Belirli bir token aracı gerekmez; uygulama mevcut bileşen sistemine bağlıdır.

Tek Bir Çıktıyla Başlayın

Beceriyi çalıştırmadan önce bu brifingdeki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brifing

Ayarlar formlarımızı ve yoğun kayıt tablomuzu uyumlu hale getirmek için spacing-system kullan. Bir temel birim, adlandırılmış bir ölçek, iç boşluk (inset)/dikey yığın (stack)/satır içi (inline) kuralları ve kompakt ile rahat modları tanımla. Etiket-girdi aralığını bölüm aralığından ayrı açıkla; sayfa sütunlarını yeniden tasarlama.

Sonucu İnceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

Önerilen her değer belgelenmiş ölçeğe aittir.
İlişkili gruplar, ilgisiz bölümlerden görsel olarak ayrı kalır.
Yoğunluk değişiklikleri net bir kullanım kuralını korur.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu liste, becerinin pakete dahil olduğu veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil edildiği anlamına gelmez.

OpenDesign'ı İndir Hızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak sürümünü açıklar. Üst kaynağın davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi: Owl-Listener
Depo: Owl-Listener/designer-skills
Beceri Dosyası: ui-design/skills/spacing-system/SKILL.md
Lisans: MIT
İncelenen Anlık Görüntü: 2026-10-07 · 9a6930cf84a8

Editoryal Kaynak Özeti

Temel ölçeği, anlamsal uygulamaları, gruplamayı ve yoğunluk modlarını kapsayan kompakt bir boşluk çerçevesi.

Bağlantısı verilen kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; beceri kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

8 piksellik bir temel gerekli mi?

Kaynak, tipik seçenekler olarak 4 ve 8 piksellik temelleri verir; ürünün ihtiyaçlarına göre seçim yapın.

Sayfa kenar boşluğu sistemin parçası mı?

Tutarlı sayfa kenar boşluklarını belgeleyebilir, ancak daha geniş sütun ve kırılma noktası yapısı ızgara belirtimine aittir.

Neden farklı boşluk türleri adlandırılıyor?

İç boşluk (inset), dikey yığın (stack), satır içi (inline) ve aralık (gap), boşluğun nasıl kullanıldığını açıklar; bu da uygulamayı yalnızca sayı listesine göre daha tekrarlanabilir kılar.

OpenDesign

Bir Sonraki Tasarım Yinelemesine Yer Açın.

Brifingi, kaynak materyali ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce becerinin kendi kurulumunu kontrol edin.

OpenDesign'ı İndir Tasarım Becerilerine Göz At