visual-design-foundationsyazan Seth Hobson

Visual Design Foundations Skill.

Claude Code ve Codex için marka ve tasarım sistemi skill'i: tutarlı görseller için tipografi, renk teorisi, boşluk sistemleri ve ikonografi.

Brand & Design Systems

OpenDesign İndir Kullanım kılavuzunu görüntüle

wshobson/agents · plugins/ui-design/skills/visual-design-foundations/SKILL.mdSKILL.md

--- name: visual-design-foundations description: Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency. --- ## When to Use This Skill ## Core Systems ## Quick Start: Design Tokens in Tailwind ## Typography Best Practices ## Color Theory ## Spacing Guidelines

2026-09-14 tarihinde yukarı akış dosyasından okunan ön bilgi ve bölüm başlıkları · tam hali 7.218 karakter

01 Ne yapar

visual-design-foundations Skill Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Bu skill, tipografi ölçekleri, renk teorisi, boşluk sistemleri ve ikonografi temellerini kullanarak tutarlı, erişilebilir görsel sistemler oluşturmayı öğretir. Modüler tip ölçekleriyle tasarım token'ları oluşturmayı, 8 puanlık ızgara boşluklandırmasını, WCAG kontrast gereksinimleriyle anlamsal renk paletlerini ve ikon boyutlandırma sistemlerini kapsar.

Skill, Tailwind CSS, duyarlı akışkan tipografi, anlamsal token'larla karanlık mod temalandırma ve erişilebilirlik doğrulaması için somut uygulama desenleri sağlar. Oran tabanlı ölçekler ve yeniden kullanılabilir token sistemleri tanımlayarak tutarsız boşluklandırma, kötü kontrast ve rastgele sihirli sayılar gibi yaygın görsel tasarım zorluklarını ele alır.

Neler üretir

CSS özel özelliklerinde veya Tailwind yapılandırmasında tasarım token tanımları
Boyut varyantlarına sahip ikon bileşeni

Örnek istemi görün ↗

Nasıl Çalışır

01
Modüler Tasarım Token'ları Oluşturun
Oran tabanlı boyutlandırmayla (0.75rem'den 3rem'e) tipografi ölçeklerini, 8 puanlık ızgara boşluklandırmasını (4px'ten 64px'e) ve marka, durumlar ve neutraller için anlamsal renk token'larını tanımlayın.
02
Duyarlı Tipografi Uygulayın
Görüntü alanına duyarlı boyutlandırma için clamp() ile akışkan tipografi kullanın ve okunabilirlik için en fazla 65 karakter genişliğini koruyun.
03
Erişilebilir Renk Paletleri Uygulayın
WCAG kontrast oranlarını karşılayan renk sistemleri oluşturun: gövde metni için 4.5:1, büyük metin ve UI bileşenleri için 3:1, programatik kontrast kontrolüyle.
04
Tutarlı İkon Sistemleri Oluşturun
12px'ten 32px'e kadar ikon boyutlandırma ölçekleri tanımlayın; boyut prop'ları kabul eden ve flex-shrink-0 davranışını koruyan yeniden kullanılabilir bileşenlerle.
05
Semantik Token'larla Karanlık Mod Tasarlayın
Görünüme göre değil amaca göre semantik token adlandırması kullanın; bu, bileşenlerde değişiklik yapmadan data attribute'ları aracılığıyla tema değiştirmeyi sağlar.
06
Dikey Ritmi Koruyun
Arayüz boyunca görsel uyum yaratmak için tanımlı ölçek değerlerini kullanarak bitişik öğelere tutarlı boşluk kuralları uygulayın.

02 Uyumunuzu bulun

visual-design-foundations Skill Ne Zaman Kullanılır

Claude Code veya Codex'te marka ve tasarım sistemi işi bu türden olduğunda visual-design-foundations skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Yeni bir proje için tasarım token'larının oluşturulması
Boşluk ve boyutlandırma sistemi oluşturma veya iyileştirme
Erişilebilir renk paletleri oluşturma
İkon sistemleri ve görsel öğeler tasarlama
Görsel tutarlılık için tasarımları denetleme

Ne Sağlamalısınız

Tema belirtimleriSemantik token stratejileriyle karanlık mod veya çoklu tema sistemlerini uygulamak için gereksinimler

03 Skill'in içinde

visual-design-foundations Skill'inin Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 4 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

8 Punto Izgara Boşluğu Kullanın
Tüm boşluk değerleri, tanımlı boşluk ölçeği token'ları kullanılarak 0.25rem'den (4px) 4rem'e (64px) kadar 4px'in katları şeklinde olmalıdır.
Katı Satır Yüksekliği Aralıkları Uygulayın
Başlıklar 1.1 ile 1.3, gövde metni 1.5 ile 1.7 ve UI etiketleri 1.2 ile 1.4 arasında satır yüksekliği kullanmalıdır; bu, doğru okunabilirlik için gereklidir.
Metin Genişliğini 65 Karakterle Sınırlayın
Optimum okuma genişliğini korumak ve geniş ekranlarda göz yorgunluğunu önlemek için gövde metninde max-width'i 65ch olarak ayarlayın.
Bileşen Boşluk Aralıkları Uygulayın
Boşluk ölçeğini kullanarak kart iç boşluğu 16-24px, bölüm aralıkları 32-64px, form alanı aralıkları 16-24px ve ikon-metin aralıkları 8px olmalıdır.

04 İşe koyun

visual-design-foundations Skill'ini Claude Code veya Codex'e Yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

visual-design-foundations Skill'ini Claude Code, Codex veya Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/wshobson/agents --skill visual-design-foundations

plugins/ui-design/skills/visual-design-foundations/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk Marka ve Tasarım Sistemi İş Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Create a design token system for [project name] with an 8-point spacing grid, modular typography scale from 12px to 48px, and an accessible color palette including primary brand color [hex value], semantic status colors for success/warning/error, and a complete neutral gray scale. Implement both light and dark mode variants using semantic token naming. Include Tailwind configuration and verification that all text combinations meet WCAG AA contrast requirements.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Programatik kontrol kullanarak tüm metin ve UI bileşeni renk kombinasyonlarının WCAG kontrast oranı gereksinimlerini karşıladığını doğrulayın
Font yüklemenin, düzen kaymasını önlemek için font-display swap kullandığını test edin
Clamp fonksiyonlarını kullanarak duyarlı tipografinin görüntü alanı boyutları arasında sorunsuz ölçeklendiğinden emin olun

OpenDesign'da visual-design-foundations'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill dosyası: plugins/ui-design/skills/visual-design-foundations/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 4236bb9
License: MIT LICENSE dosyasından.
Repository yıldızları: 39.635 GitHub anlık görüntüsü bu katalogda 18 beceri içeren wshobson/agents deposu için 2026-09-14 tarihinde alındı. visual-design-foundations için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Bu Skill Ne Zaman KullanılırToken'lar oluşturma, paletler oluşturma, tutarlılığı denetleme ve karanlık mod uygulama gibi senaryoları listeler
Temel SistemlerCSS özel özellikleriyle modüler tipografi ölçeği, 8 puanlık boşluk ızgarası ve semantik renk token yapısı tanımlar
Hızlı Başlangıç: Tailwind'de Tasarım Token'larıÖzel yazı tipleri, boyutlar, renkler ve boşluk değerleriyle teması genişleten örnek bir Tailwind yapılandırması sağlar
Tipografi En İyi UygulamalarıYazı tipi eşleştirme kombinasyonlarını, clamp ile duyarlı akışkan tipografiyi ve yazı tipi yüklenirken düzen kaymasının önlenmesini kapsar
Renk TeorisiWCAG kontrast gerekliliklerini, koyu mod uygulama stratejisini ve programatik kontrast oranı kontrol fonksiyonunu ayrıntılı olarak ele alır
Boşluk YönergeleriBileşen boşluk aralıklarını belirtir ve metin içeriği için dikey ritim desenlerini gösterir
İkonografi12px'ten 32px'e kadar simge boyutlandırma sistemini tanımlar ve TypeScript simge bileşeni uygulaması sağlar
En İyi UygulamalarKısıtlamalar belirleme, kararları belgeleme, erişilebilirliği test etme ve semantik adlandırma kullanma dahil yedi ilke
Yaygın SorunlarTutarsız boşluk, zayıf kontrast, yazı tipi aşırı yüklenmesi, sihirli sayılar ve koyu mod planlamasının eksikliği gibi sorunları listeler

Skill'in Kendi Açıklaması

"Tutarlı görsel tasarımlar oluşturmak için tipografi, renk teorisi, boşluk sistemleri ve ikonografi ilkelerini uygular. Tasarım token'ları oluştururken, stil kılavuzları hazırlarken veya görsel hiyerarşiyi ve tutarlılığı geliştirirken kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 7.218 karakter. GitHub'da tam dosyayı okuyun.

Visual Design Foundations

visual-design-foundations'ı gerçek bir marka ve design-system çalışma görevi üzerinde çalıştırın.

OpenDesign'ı indirin, visual-design-foundations'ı SKILL.md bağlantısından içe aktarın, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın