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

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

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

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

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

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/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

Ne Zaman EtkinleştirilirTetikleyicileri listeler: banner/kapak/başlık istekleri, sosyal medya, reklamlar, hero bölümleri, etkinlikler, kreatif kampanyalar
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
WorkflowGereksinim toplamadan araştırma, tasarım, dışa aktarma ve yinelemeye kadar beş adımlı süreç
Adım 1: Gereksinimleri Toplayın (AskUserQuestion)Yapılandırılmış sorularla amaç, platform, içerik, marka, stil tercihi ve miktarı toplar
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
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
Adım 4: Banner'ları Görsellere Dışa AktarınTarayıcıda önizler, PNG yakalar, boyutları ve kaliteyi doğrular, gerekirse optimize eder
Adım 5: Seçenekleri Sunun ve YineleyinTüm varyantları gerekçe ve dosya yollarıyla gösterir, geri bildirime göre yineler
Banner Boyutu Hızlı ReferansıYaygın platform boyutlarının tablosu: Facebook, Twitter, LinkedIn, YouTube, Instagram, Google, website hero
Sanat Yönetimi Stilleri (İlk 10)En iyi kullanım durumları ve temel unsurlarla 10 stilin tablosu; referansta tam 22 stil
Tasarım KurallarıGüvenli alanlar, CTA yerleşimi, tipografi sınırları, metin oranı, baskı özellikleri, marka uygulama kuralları
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.

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