Kullanım kılavuzuna geç
banner-designyazan nextlevelbuilder

Banner Design Skill.

Görsel çalışmaları için bir Claude Code ve Codex skill'i: sosyal medya, reklamlar, web sitesi hero'ları ve baskı için banner'lar.

  • Images & Generative Art
  • Image
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/banner-design/SKILL.mdSKILL.md
--- name: banner-design description: Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, … --- ## When to Activate ## Workflow ## Art Direction Styles (Top 10) ## Design Rules ## Security
Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam hâliyle 7.010 karakter

01 Ne yapar

banner-design Skill'i 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

HTML/CSS içinde birden çok art direction seçeneği üreterek sosyal medya kapakları, reklam kampanyaları, web sitesi hero görselleri ve baskı için bannerlar tasarlar. Yapılandırılmış sorularla (platform, içerik, marka, stil, adet) gereksinimleri toplar, paketlenmiş boyut ve güvenli alan rehberliğine başvurur ve tam platform boyutlarında piksel kusursuz PNG'ler dışa aktarır.

Minimalist, gradyan, kalın tipografi, fotoğraf tabanlı, geometrik, glassmorphism ve neon dahil 22 art direction stilini destekler. Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display ve özel formatları işler. İstek başına varsayılan olarak 3 seçenek sunar. Kullanıcının sağladığı varlıkları, CSS ile oluşturulmuş görselleri veya isteğe bağlı üretilmiş arka planları kullanır—marka kurallarını asla kendisi icat etmez. Video düzenleme, tam web sitesi tasarımı veya baskı üretimi ile ilgilenmez.

Neler üretir

  • Tam platform boyutlarında PNG görsel dosyaları, kebab-case adlandırmayla assets/banners/{campaign}/ altına aktarılır
  • Görüntü yakalama mümkün olmadığında her banner varyantı için HTML/CSS kaynak kodu
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Yapılandırılmış Sorularla Gereksinimleri Toplama

    Amacı (sosyal kapak, reklam, hero, baskı), platform veya özel boyutları, içeriği (başlık, alt metin, CTA, logo), marka yönergelerini, stil tercihini ve adedi (varsayılan 3 seçenek) toplar.

  2. 02
    Art Direction ve Güvenli Alanları Araştırma

    Hedef format, güvenli alanlar ve uygun stiller için paketlenmiş banner-sizes-and-styles.md referansını okur.

  3. 03
    Her Seçeneği HTML/CSS ile Tasarlama

    En fazla 2 yazı tipi, tek bir CTA ve 4.5:1 metin kontrastı kullanarak güvenli alan kurallarıyla (merkezi %70–80'de kritik içerik) tam platform boyutlarında bannerlar oluşturur.

  4. 04
    Her Seçenek İçin Görsel Kaynak Seçme

    Kullanıcının sağladığı varlıkları tercih eder, bağımsız sonuçlar için CSS ile oluşturulmuş görselleri (gradyanlar, geometrik şekiller) kullanır veya çalışma zamanı destekliyorsa isteğe bağlı olarak hedef en-boy oranında arka planlar üretir.

  5. 05
    Bannerları PNG Görsel Olarak Dışa Aktarma

    Her banner'ı tarayıcıda tam görüntü alanında önizler, standart ekran görüntüsü yeteneğiyle PNG olarak yakalar ve piksel boyutlarını, güvenli alan kırpmasını, font yüklemesini ve görsel kalitesini doğrular.

  6. 06
    Gerekçeleriyle Birlikte Seçenekleri Sunma

    Tüm dışa aktarılan görselleri art direction stil adı, önizleme, temel tasarım gerekçesi, dosya yolu ve boyutlarla yan yana gösterir.

02 Uyumunuzu bulun

banner-design Skill Ne Zaman Kullanılır

Claude Code veya Codex'te iş bu türden bir görsel çalışma olduğunda banner-design skill'ini kullanın. Aşağıdaki uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Facebook, Twitter/X, LinkedIn, YouTube ve Instagram gibi platformlar için sosyal medya kapağı veya başlık oluşturma
  • Google Ads ve diğer reklam platformları için reklam bannerı veya görüntülü reklam tasarımı
  • Standart veya özel boyutlarda web sitesi hero bölümü görsel tasarımı
  • CMYK çıktı ve taşma (bleed) özellikleriyle etkinlik veya baskı afişi tasarımı
  • Birden fazla sanat yönetimi varyasyonu gerektiren kampanyalar için kreatif materyal üretimi

Sınırları Bilin

  • Banner için video düzenleme veya hareketli grafik tasarımı

Ne Sağlamalısınız

  • Platform veya özel boyutlarHedef sosyal medya platformunu belirtir (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Ads) veya özel formatlar için tam piksel boyutları sağlar.
  • İçerik öğeleriBanner kompozisyonu için başlık, destekleyici metin, harekete geçirici mesaj (call-to-action) metni ve logo yerleşim gereksinimlerini sağlar.
  • Marka kuralları ve materyallerUygulanacak mevcut marka renklerini, tipografi özelliklerini, logo dosyalarını ve doğrulanmış diğer marka yönlendirmelerini sağlar.
  • Sanat yönetimi tercihi22 seçenek arasından (minimalist, gradyan, kalın tipografi, geometrik, glassmorphism, neon vb.) tercih edilen stili belirtir veya stil önerisi ister.

03 Skill'in içinde

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

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

  1. Varsayılan Olarak 3 Sanat Yönetimi Seçeneği

    Kullanıcı gereksinim toplama sırasında farklı bir miktar belirtmedikçe her istek için 3 tasarım seçeneği üretir.

  2. Banner Başına En Fazla 2 Yazı Tipi ve 1 CTA

    En fazla 2 yazı tipi kullanır ve minimum 44px yükseklikte, bir eylem fiili içeren, sağ altta konumlandırılmış tek bir harekete geçirici mesaj (CTA) içerir.

  3. Marka Kurallarını Asla Uydurmaz

    Yalnızca kullanıcı tarafından sağlanan veya doğrulanmış marka kurallarını, renklerini, logolarını ve tipografisini uygular. Marka özelliklerini icat etmez.

  4. Reklamlar İçin Metin Oranını %20'nin Altında Tutar

    Meta'nın görüntülü reklamlarda yoğun metni cezalandırması nedeniyle, reklam formatlarında metin kaplamasını banner alanının %20'sinin altında sınırlar.

  5. Baskı Özellikleri: 300 DPI, CMYK, 3-5mm Taşma

    Profesyonel çıktı için 300 DPI çözünürlükte, CMYK renk uzayında ve 3–5mm taşma (bleed) marjlarıyla baskı afişleri üretir.

  6. kebab-case Dosya Adlandırma Kuralını Kullanır

    Dışa aktarılan dosyaları kebab-case formatında {style}-{width}x{height}.{ext} olarak adlandırır, zamana bağlı kampanyaları isteğe bağlı olarak {YYMMDD}- öneki ile başlatır.

04 İşe koyun

banner-design'ı Claude Code veya Codex'e Kurun

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

banner-design'ı 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/nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design

.claude/skills/banner-design/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk Görsel Çalışma Görevini Verin

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

Starter prompt
Design 3 LinkedIn cover banners for our Q2 product launch. The headline is "Ship faster with AI-powered workflows," subtext "Join 10,000+ teams building better software," and CTA "Start free trial." Use our logo from assets/logo.svg, brand colors #0066FF (primary) and #00CC88 (accent), and Inter font family. Show minimalist, gradient, and bold typography options at 1584×396.

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:

  • Dışa aktarılan PNG boyutlarının boyut referansındaki tam platform özellikleriyle eşleştiğini doğrulayın
  • Dosya boyutunun platform sınırlarını aşmadığını onaylayın, gerekirse kaliteyi optimize edin veya düşürün

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

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

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

Skill dosyası
.claude/skills/banner-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 Katalogda 7 skill içeren nextlevelbuilder/ui-ux-pro-max-skill deposunun tamamı için 2026-09-14 tarihinde GitHub anlık görüntüsü alındı. banner-design 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

  1. Ne Zaman EtkinleştirilirTetikleyicileri listeler: banner/kapak/başlık istekleri, sosyal medya, reklamlar, hero bölümleri, etkinlikler, kreatif kampanyalar
  2. Kullanılabilir KaynaklarPaketlenmiş boyut referansını kullanan kendi kendine yeten bir workflow; tarayıcı araştırması ve görsel üretimi isteğe bağlıdır
  3. WorkflowGereksinim toplamadan araştırma, tasarım, dışa aktarma ve yinelemeye kadar beş adımlı süreç
  4. Adım 1: Gereksinimleri Toplayın (AskUserQuestion)Yapılandırılmış sorularla amaç, platform, içerik, marka, stil tercihi ve miktarı toplar
  5. Adım 2: Araştırma ve Sanat YönetimiBoyut referansını okur, isteğe bağlı olarak örnekleri araştırır, 2-3 birbirini tamamlayan sanat yönü seçer
  6. Adım 3: Tasarım ve Seçenek ÜretimiGüvenli alanlarla tam boyutlarda HTML/CSS banner'lar oluşturur, görsel kaynağı seçer, sonucu bir araya getirir
  7. Adım 4: Banner'ları Görsellere Dışa AktarınTarayıcıda önizler, PNG yakalar, boyutları ve kaliteyi doğrular, gerekirse optimize eder
  8. Adım 5: Seçenekleri Sunun ve YineleyinTüm varyantları gerekçe ve dosya yollarıyla gösterir, geri bildirime göre yineler
  9. Banner Boyutu Hızlı ReferansıYaygın platform boyutlarının tablosu: Facebook, Twitter, LinkedIn, YouTube, Instagram, Google, website hero
  10. Sanat Yönetimi Stilleri (İlk 10)En iyi kullanım durumları ve temel unsurlarla 10 stilin tablosu; referansta tam 22 stil
  11. Tasarım KurallarıGüvenli alanlar, CTA yerleşimi, tipografi sınırları, metin oranı, baskı özellikleri, marka uygulama kuralları
  12. GüvenlikStandart korumalar: skill iç yapısı paylaşılmaz, kapsam dışı isteklere açık reddediş, veri ifşası yok, rol sınırları
Skill'in Kendi Açıklaması
"Sosyal medya, reklamlar, web sitesi hero'ları, yaratıcı varlıklar ve baskı için banner'lar tasarlayın. İsteğe bağlı olarak oluşturulan veya sağlanan görsellerle birden fazla sanat yönetimi seçeneği. Eylemler: tasarla, oluştur, banner üret. Platformlar: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, web sitesi hero, baskı. Stiller: minimalist, degrade, kalın tipografi, fotoğraf tabanlı, illüstrasyonlu, geometrik, retro, glassmorphism, 3D, neon, duotone, editoryal, kolaj."

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

06 Kurmadan önce

banner-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.

Bu skill harici görsel üretimi veya tarayıcı araçları gerektiriyor mu?

Hayır. Workflow kendi kendine yeterlidir ve bağımsız sonuçlar için CSS ile oluşturulmuş görseller (degradeler, geometrik formlar, tipografi) kullanır. Tarayıcı araştırması, görsel üretimi ve ekran görüntüsü araçları, mevcut olduğunda çıktıyı iyileştiren ama gerekli olmayan isteğe bağlı özelliklerdir.

Banner Tasarımı

Gerçek bir görüntü iş görevi üzerinde banner-design çalıştırın.

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

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

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için