designyazan nextlevelbuilder

Design Skill.

Marka ve tasarım sistemi çalışmaları için Claude Code ve Codex skill: marka kimliği, tasarım token'ları, UI stillendirme, logo üretimi ve kurumsal kimlik programları.

Brand & Design Systems

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

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/design/SKILL.mdSKILL.md

--- name: design description: Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, … --- ## When to Use ## Sub-skill Routing ## Script Paths ## Logo Design (Built-in) ## CIP Design (Built-in) ## Slides (Built-in)

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

01 Ne yapar

Claude Code ve Codex'te tasarım Skill'i 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

Marka kimliği, tasarım token'ları, shadcn/ui ve Tailwind ile UI biçimlendirme, logo üretimi (Gemini, Atlas Cloud veya MuAPI üzerinden 55 stil), 50 çıktılı kurumsal kimlik programları, Chart.js kullanan HTML sunumlar, banner tasarımı (sosyal, reklam, web ve baskı için 22 sanat yönetimi stili), ikon tasarımı (15 stil, Gemini 3.1 Pro üzerinden SVG çıktısı) ve Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok ve Threads için sosyal medya fotoğraf tasarımını kapsayan birleşik tasarım skill'i. Brand, design-system ve ui-styling için harici alt-skill'lere yönlendirir; ayrıca logo, CIP, slaytlar, banner'lar, ikonlar ve sosyal fotoğraflar için Python betikleri, AI üretimi ve HTML-to-screenshot export ile yerleşik iş akışları sağlar.

Neler üretir

chrome-devtools aracılığıyla dışa aktarılan, tam platform boyutlarında Banner PNG ekran görüntüleri
İsteğe bağlı çoklu boyut dışa aktarımları ve toplu varyasyonlarla 15 stilde SVG ikon dosyaları
Düzenli varlık dizinlerinde saklanan, platforma özgü boyutlarda sosyal medya görselleri

Örnek istemi görün ↗

Nasıl Çalışır

01
Görev Türüne Göre Yönlendir
Skill, marka kimliğini ve sesini brand alt skill'ine, token'ları ve spesifikasyonları design-system'e, shadcn/ui ve Tailwind kodunu ui-styling'e gönderir; logo, CIP, slaytlar, banner'lar, ikonlar ve sosyal fotoğrafları yerleşik iş akışlarıyla ele alır.
02
AI Sağlayıcılarıyla Logo Üretin
55 stil, 30 renk paleti ve 25 sektör kılavuzunu aramak için Python betikleri çalıştırın, ardından beyaz arka planlarla Gemini Nano Banana, Atlas Cloud veya MuAPI aracılığıyla logo üretin.
03
Mockup'larla CIP Teslim Ürünleri Oluşturun
Gemini Flash veya Pro modellerini kullanarak 50 teslim ürünü için kurumsal kimlik programı mockup'ları üretin, isteğe bağlı olarak logo bindirmeli, ardından çıktının HTML sunumlarını render edin.
04
Stratejik HTML Sunumları Oluşturun
Slayt oluşturma iş akışı referansını yükleyerek Chart.js entegrasyonu, tasarım token'ları ve metin yazarlığı formülleri içeren sunumlar oluşturun.
05
HTML/CSS ile Banner Tasarlayın
Gereksinimleri toplayın, ui-ux-pro-max ile Pinterest üzerinde araştırma yapın, görseller için frontend-design ve ai-artist/ai-multimodal ile HTML/CSS banner'lar tasarlayın, ardından chrome-devtools ile tam boyutlarda dışa aktarın.
06
Ekran Görüntülerini Dışa Aktarın ve Doğrulayın
Tasarımların ekran görüntüsünü tam piksel boyutlarında ve 2x cihaz ölçek faktörüyle almak için chrome-devtools veya Playwright kullanın, ardından nihai dışa aktarımdan önce görsel olarak inceleyip düzen sorunlarını düzeltin.

02 Uyumunuzu bulun

design Skill'i Ne Zaman Kullanılır

Bu tür marka ve tasarım sistemi işlerinde Claude Code veya Codex'te design skill'ini kullanın. Uygunluk ve sınırlamalar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Logo, kurumsal kimlik teslimatları ve sunum (pitch deck) içeren marka kimliği paketleri oluşturma
Instagram, Facebook, LinkedIn, Twitter, Pinterest ve TikTok için çok platformlu sosyal medya görselleri tasarlama
Sosyal medya kapakları, reklam kampanyaları, web sitesi başlıkları ve baskı materyalleri için banner oluşturma
Semantik token'lar, Tailwind yapılandırması ve shadcn/ui bileşenleriyle tasarım sistemleri oluşturma

Sınırları Bilin

İkon üretici yalnızca SVG metin çıktısı üretir, raster görüntü dosyası üretmez

Ne Sağlamalısınız

Gemini API anahtarıGoogle AI Studio üzerinden logo, CIP ve ikon üretimi için gerekli ortam değişkeni
MuAPI API anahtarı (isteğe bağlı)Logolar için alternatif bir görüntü üretim sağlayıcısı olarak MuAPI kullanmak için isteğe bağlı ortam değişkeni
CIP için logo dosya yoluKurumsal kimlik teslimatları üzerine bindirilecek, CIP mockup'ları oluşturulurken kullanılacak mevcut logo PNG dosyasının yolu
AskUserQuestion aracılığıyla banner gereksinimleriBanner tasarımından önce etkileşimli olarak toplanan amaç, platform, içerik, marka yönergeleri, sanat yönü stili ve miktar
Sosyal fotoğraflar için marka bağlamıSosyal medya görsellerinde tutarlılığı korumak için brand alt-skill'inden marka yönergeleri ve design-system'den tasarım token'ları

03 Skill'in içinde

Tasarım Skill'inin Claude Code ve Codex'e Verdiği Kurallar

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

Logoları Her Zaman Beyaz Arka Planla Oluşturun
Logo üretimi, her durumda beyaz arka planlı çıktı görüntüleri üretmelidir.
Script Yolları Skill Dizinine Göre Belirlenir
Bu skill'de ve onun references klasöründeki script yolları, proje kök dizinine göre değil, SKILL.md dosyasını içeren dizine göre belirlenir.
Logo Üretiminden Sonra Kullanıcıya HTML Önizlemesi Sorun
Logo üretiminden sonra, kullanıcıya AskUserQuestion aracılığıyla bir HTML önizleme galerisi isteyip istemediğini her zaman sorun; isterse bunu oluşturmak için ui-ux-pro-max skill'ini çağırın.
Başarısız Script'leri Doğrudan Düzeltin
Python betikleri çalışma sırasında başarısız olduğunda, hatayı bildirmek yerine doğrudan düzeltmeye çalışın.
CIP İçin Önerilen Logo Bindirmesini Kullanın
CIP mockup'ları oluştururken, --logo bayrağıyla mevcut bir logo dosyası kullanmak önerilen yaklaşımdır.
Reklamlarda Metin Kapsamı %20'nin Altında Kalmalıdır
Reklam bannerlarında, Meta platformları metin ağırlıklı reklamları cezalandırdığından metin kapsamını toplam alanın %20'sinin altında tutun.
Windows'ta Python3 Yerine Python Kullanın
Windows sistemlerde, skill boyunca tüm komut örneklerinde python3'ü python ile değiştirin.
Banner Kritik İçeriği Merkezi Güvenli Alanlarda Tutun
Platformlar arasında görünürlüğü sağlamak için tüm kritik banner içeriğini merkezi %70-80'lik güvenli alan içinde konumlandırın.

04 İşe koyun

Claude Code veya Codex'e design Yükleyin

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

Claude Code, Codex veya Ajanınıza design Ekleyin

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

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

.claude/skills/design/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

Design a complete brand package for [TechFlow], a B2B SaaS startup in the fintech space. Create a minimalist logo with tech-appropriate colors, generate a full corporate identity program including business cards, letterhead, and email signature, then build a 10-slide pitch deck presentation with our Q4 metrics [revenue chart data] and competitive positioning [market analysis]. Export everything with consistent design tokens.

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:

Banner CTA'larının minimum 44px yükseklik gereksinimini karşıladığını ve sağ altta konumlandırıldığını doğrulayın
Baskı bannerlarının 300 DPI, CMYK renk modu kullandığından ve 3-5mm taşma (bleed) içerdiğinden emin olun

OpenDesign'da tasarımı 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: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill dosyası: .claude/skills/design/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 7f69fed
License: MIT LICENSE dosyasından; SKILL.md "MIT" diyor.
Repository yıldızları: 127.450 GitHub anlık görüntüsü, bu katalogda 7 beceri içeren nextlevelbuilder/ui-ux-pro-max-skill deposunun tamamı için 2026-09-14'te alındı. design için bir derecelendirme veya kullanım sayısı değil.
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

Ne Zaman KullanılırKullanım alanlarını listeler: marka kimliği, tasarım tokenleri, UI stillendirme, logolar, CIP, sunumlar, bannerlar, sosyal fotoğraflar, ikonlar
Alt Skill YönlendirmeGörevleri harici brand/design-system/ui-styling skill'lerine veya yerleşik logo/CIP/slides/banner/social/icon iş akışlarına yönlendirir
Betik YollarıBetik yollarının proje köküne değil, skill dizinine göre olduğunu açıklar
Logo Tasarımı (Yerleşik)55 stil arama ve Gemini, Atlas Cloud veya MuAPI aracılığıyla beyaz arka planlı logo oluşturma komutları
CIP Tasarımı (Yerleşik)50 teslim edilebilir öğe arama ve Flash veya Pro modelleriyle kurumsal kimlik mockup'ları oluşturma komutları
Slaytlar (Yerleşik)Chart.js ve metin yazarlığı formülleriyle stratejik HTML sunum oluşturmayı referans alır
Banner Tasarımı (Yerleşik)frontend-design, ai-artist ve dışa aktarım için chrome-devtools kullanarak 22 sanat yönü stilinde tasarım yapma iş akışı
İkon Tasarımı (Yerleşik)Gemini 3.1 Pro'nun yalnızca metin çıktısını kullanarak 15 stilde SVG ikon oluşturma komutları
Sosyal Fotoğraflar (Yerleşik)HTML'den ekran görüntüsü dışa aktarımına ve doğrulamaya kadar çok platformlu sosyal görsel tasarım iş akışı
İş AkışlarıAlt skill'ler arasında tam marka paketleri ve yeni tasarım sistemi oluşturma için diziler
Ön KoşullarWindows'a özgü python ve python3 komut talimatlarıyla Python gerekliliği
KurulumGemini ve MuAPI API anahtarları için ortam değişkenleri ile Python paket kurulumu

Skill'in Kendi Açıklaması

"Kapsamlı tasarım skill'i: marka kimliği, tasarım token'ları, UI stil verme, logo üretimi (55 stil, Gemini, Atlas Cloud veya MuAPI AI), kurumsal kimlik programı (50 ürün, CIP mockup'ları), HTML sunumları (Chart.js), banner tasarımı (22 stil, sosyal medya/reklam/web/baskı), icon tasarımı (15 stil, SVG, Gemini 3.1 Pro), sosyal medya fotoğrafları (HTML→ekran görüntüsü, çoklu platform). Eylemler: logo tasarla, CIP oluştur, mockup'lar üret, slayt hazırla, banner tasarla, icon üret, sosyal medya fotoğrafları oluştur, sosyal medya görselleri, marka kimliği, tasarım sistemi. Platformlar: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads."

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

06 Kurmadan önce

design Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Windows'ta Python betiklerini nasıl çalıştırırım?

Tüm komut örneklerinde python3 yerine python kullanın. Örneğin, python3 scripts/logo/search.py yerine python scripts/logo/search.py kullanın. Aynı durum pip komutları için de geçerlidir; python -m pip install kullanmanız gerekebilir.

Design

Gerçek Bir Marka ve Tasarım Sistemi Çalışması Görevinde design'ı Çalıştırın.

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

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

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

Claude Code ve Codex'te tasarım Skill'i Ne Yapar

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

design Skill'i Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

Tasarım Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Logoları Her Zaman Beyaz Arka Planla Oluşturun

Script Yolları Skill Dizinine Göre Belirlenir

Logo Üretiminden Sonra Kullanıcıya HTML Önizlemesi Sorun

Başarısız Script'leri Doğrudan Düzeltin

CIP İçin Önerilen Logo Bindirmesini Kullanın

Reklamlarda Metin Kapsamı %20'nin Altında Kalmalıdır

Windows'ta Python3 Yerine Python Kullanın

Banner Kritik İçeriği Merkezi Güvenli Alanlarda Tutun