Icon Systemyazan Owl-Listener

Icon System Skill.

İlgisiz sembolleri bir araya toplamak yerine ikonlara tutarlı bir yapı ve adlandırma sistemi kazandırın.

Tasarım Sistemleri
Spesifikasyonlar

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

Kaynak İncelemesi · Icon SystemSKILL.md

Görev Tasarım Sistemleri Çıktılar • İkon yapısı ve boyut spesifikasyonu • Adlandırma kategorileri ve teslim gereksinimleri • Erişilebilirlik ve katkı kuralları Başlamadan Önce Örnek ikonları, bunların hedeflenen boyutlarını ve gereken tasarım ile kod formatlarını inceleyebilen bir ajan.

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

01 İşlevler

Icon System: Ürün İkonografisini Standartlaştırma

Bir ürün genelinde ikonların nasıl çizileceğini, adlandırılacağını, teslim edileceğini ve erişilebilir biçimde kullanılacağını tanımlar.

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

Çalışma Yaklaşımı

Icon System, bir ürünün ikon kütüphanesine ilişkin kuralları tanımlar: ızgara, kılavuz çizgileri, çizgi kalınlığı, köşe işlemi, boyut varyantları, adlandırma ve teslim. Tüm ikon stillerini birbirinin yerine kullanılabilir saymak yerine çizgili, dolgulu ve dubton kullanımı birbirinden ayırır.

Kaynak ayrıca etiketleri, dekoratif öğelerin gizlenmesini, kontrastı ve etkileşim hedeflerini kapsar. Önerilen piksel boyutları, ürüne göre uyarlanacak referans değerlerdir. İkon sistemi spesifikasyonu, eksiksiz bir SVG kütüphanesinin zaten çizildiği veya test edildiği anlamına gelmez.

Beklenen Çıktılar

İkon yapısı ve boyut spesifikasyonu
Adlandırma kategorileri ve teslim gereksinimleri
Erişilebilirlik ve katkı kuralları

Örnek Brief'i Gör

Brief'ten İncelemeye

01
Yapı Kurallarını Belirleyin
Izgarayı, kılavuz çizgilerini, çizgi kalınlığını, köşeleri ve desteklenen stilleri tanımlayın.
02
Kütüphaneyi Düzenleyin
Kategorileri, adları, varyantları ve gereken kaynak ya da bileşen formatlarını seçin.
03
Bağlam İçinde Kullanımı Kontrol Edin
Desteklenen boyutları, etiketleri, kritik eylem metinlerini ve etkileşimli hedefleri inceleyin.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Karışık ikon setlerini tek bir sistemde toplamak veya tasarım ve geliştirme için ortak bir kütüphaneyi belgelemek amacıyla kullanın.

İyi Bir Uyum

Karışık İkon KütüphaneleriTutarsız sembol ailelerini tek bir yapı standardı altında toplayın.
Ortak Ürün BileşenleriTasarım ve geliştirmenin tutarlı biçimde kullanabileceği adları ve sarmalayıcıları tanımlayın.

Kontrol Edilecek Sınırlar

Kapsamlı Bir İllüstrasyon Kılavuzu DeğildirDaha geniş hikâye anlatan görseller illustration-style kapsamındadır.
Otomatik Varlık Üretimi DeğildirKaynak bir sistemi tanımlar; gerçek ikonların ve sarmalayıcıların yine de üretilmesi gerekir.

Bu Girdileri Getirin

Mevcut İkonlarÖrnek sembolleri ve çakışmaları sağlayın.
Kullanım BoyutlarıHedeflenen görüntüleme boyutlarını ve etkileşim bağlamlarını listeleyin.
Teslim AltyapısıSVG, sprite'lar, bileşen sarmalayıcıları veya tasarım kütüphanesi ihtiyaçlarını belirtin.

03 Önemli Kararlar

Önemli Kararlar

Yapısal Tutarlılık
Ortak geometri kuralları, konuları farklı olsa bile sembollerin birbiriyle ilişkili görünmesini sağlar.
Anlamlı Adlar
Kategori ve varyant adları bulunabilirliği ve bakımı iyileştirir.

04 Örnek Görev Tanımı

Odaklı Bir Brief Deneyin

Aşağıdaki örnek brief test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kurulumu İnceleyin

Bu görevin SKILL.md dosyasını designer-skills deposundan, ajanınızın desteklediği skill konumuna yükleyin. Giriş dosyası evrensel bir yükleyici komutu belirtmez.

Upstream Kaynak Dosyası

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

Örnek ikonları ve kullanım bağlamlarını sağlayın. Skill kuralları tanımlar; gerçek ikon varlıklarının oluşturulması ve test edilmesi ayrı bir iştir.

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

Skill'i çalıştırmadan önce bu brief'teki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brief

Karışık gezinme ikonlarımızı standartlaştırmak için icon-system kullan. Izgara, çizgi kalınlığı, köşe, boyut ve adlandırma kurallarını tanımla, ardından SVG ve bileşen teslimini belirle. Dekoratif ikonları etiketli eylemlerden ayır ve görünür metnin gerekli olduğu yerleri işaretle.

Sonucu İnceleyin

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

İkonlar belgelenmiş ortak yapı kurallarını paylaşır.
Adlar kategori ve varyantı ayırt eder.
Erişilebilirlik uygulaması her kullanıma uygundur.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sunar. Bu listeleme, skill'in pakete dahil olduğu veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının sağlandığı 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ü anlatır. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi: Owl-Listener
Depo: Owl-Listener/designer-skills
Skill Dosyası: design-systems/skills/icon-system/SKILL.md
Lisans: MIT
İncelenen Sürüm: 2026-10-07 · 9a6930cf84a8

Editoryal Kaynak Özeti

Bir ürün genelinde ikonların nasıl çizileceğini, adlandırılacağını, teslim edileceğini ve erişilebilir biçimde kullanılacağını tanımlar.

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

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Bir ikonun görsel boyutu dokunma hedefine eşit midir?

Hayır. Kaynak, görüntüleme boyutunu ve etkileşimli hedef yönergesini ayrı konular olarak ele alır.

Her ikonun erişilebilir bir adı olmalı mı?

Anlam taşıyan ikonlar uygun şekilde etiketlenmelidir; dekoratif olanlar yardımcı teknolojilerden gizlenebilir.

Bu, ana görsel illüstrasyonlarını kapsıyor mu?

Hayır. Kaynak, daha geniş illüstrasyon işlerini ayrı bir skill'e yönlendirir.

OpenDesign

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

Brief'inizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndir Tasarım Skill'lerine Göz At