83.3K+İndir
Kullanım kılavuzuna geç
imagegen-frontend-webyazan Leonxlnx

ImageGen Frontend Web Skill.

Claude Code ve Codex için UI tasarımı skill'i: görsel üretimi yoluyla bölüm bölüm web sitesi tasarım referansları.

  • Web & UI
  • Image
OpenDesign İndirKullanım kılavuzunu görüntüle
Leonxlnx/taste-skill · skills/imagegen-frontend-web/SKILL.mdSKILL.md
--- name: imagegen-frontend-web description: Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. THE COMBINATORIAL VARIATION ENGINE ## 3. FRONTEND REFERENCE RULE ## 4. HERO MINIMALISM RULES ## 5. IMAGE COUNT & PAGE SLICING ## 6. CREATIVITY ESCALATION RULE
Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okunmuştur · toplam 36.780 karakter

01 Ne yapar

imagegen-frontend-web Skill'in Claude Code ve Codex'te Yaptığı

Ö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

Skill, premium web sitesi tasarım referanslarını bölüm başına bir görsel olarak ayrı yatay görseller şeklinde üretir. Aşırı kullanılan sol-metin/sağ-görsel düzeninin ötesinde kompozisyon çeşitliliği zorunlu kılar, tam kaplama arka planları kararlılıkla kullanır, hero ölçeklerini (dev/orta/mini) çeşitlendirir ve tüm bölümler boyunca tek ve tutarlı bir palet sürdürür. Geliştiricilerin veya kodlama modellerinin yeniden üretebileceği açılış sayfaları, pazarlama siteleri ve ürün kompozisyonları için tasarlanmıştır.

Yapılandırılabilir temel ayarlar kullanır: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8. Skill, kombinatoryal çeşitlilik yoluyla—bir tema paradigması, tipografi karakteri, hero mimarisi, bölüm sistemi ve anlatı kavram omurgası seçerek—yapay zeka varsayılanlarını kırar; bunu yaparken dönüşüm disiplinini ve bölümler arasında geniş, düzenli boşluğu korur.

Neler üretir

  • Her karede tek bir odaklanmış bölümü yüksek doğrulukla işleyen yatay görseller (16:9, 16:10 veya 21:9)
  • Tam sayı teslim edilene kadar 'Bölüm X / N: <ad>' biçiminde bölüm etiketli görsel seti
  • Tüm karelerde tutarlı bir marka dünyası: aynı palet, tipografi ailesi, CTA kimliği, kenar yuvarlaklığı, görsel işleme, ton sesi
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Brief'i Okuyun ve Temel Ayarları Uyarlayın

    Skill, kullanıcı istemini dikkatle okur, ardından brief'e uyacak şekilde ayarları (tasarım çeşitliliği, görsel yoğunluk, sanat yönü, uygulama netliği, görsel kullanımı, boşluk, düzen çeşitliliği, dönüşüm disiplini), hero ölçeğini, arka plan modunu, gradyan kullanımını ve kompozisyon çeşitliliğini uyarlar.

  2. 02
    Her Kombinatoryal Kategoriden Bir Seçenek Belirleyin

    Skill, istem temelinde bir tema paradigmasına, bir arka plan karakterine, bir tipografi karakterine, bir hero mimarisine, bir bölüm sistemine, tam olarak 4 imza bileşene, tam olarak 2 hareket ima eden dile ve bir anlatı kavram omurgasına karar kılar.

  3. 03
    Bölüm Başına Bir Yatay Görsel Üretin

    Her bölüm kendi ayrı yatay 16:9, 16:10 veya 21:9 görselini alır. Skill, birden fazla bölümü tek bir karede birleştirmez ya da tek bir uzun dilim döndürmez.

  4. 04
    Kompozisyon Eksenlerini ve Arka Plan Modlarını Çeşitlendirin

    Bölümler arasında skill, farklı kompozisyon eksenleri (ortalanmış, görsel üzerinde sol-alt, sol-üst öncü, ortada yığılmış, ızgara dışı editoryal vb.) ve arka plan modları (düz, tam kaplama görsel, editoryal yan görsel, duoton, radyal vinyet) seçer; böylece sayfa tekrarlayan yapay zeka düzenlerinden kaçınır.

  5. 05
    Çıkıştan Önce 21 Maddelik Netlik Kontrolü Yapın

    Sonlandırmadan önce skill; hiyerarşiyi, hero temizliğini, görsel ayırt edicilik, yapay zeka izlerinin yokluğunu, premium hissi, kodlanabilirliği, çok görsel tutarlılığını, görsel gücü, nefes alma alanını, düzenli boşluğu, kasıtlı yaratıcılığı ve doğru görsel sayısını doğrular.

02 Uyumunuzu bulun

imagegen-frontend-web Skill Ne Zaman Kullanılır

Bu tür UI tasarımı işlerinde Claude Code veya Codex'te imagegen-frontend-web becerisini kullanın. Uygunluk ve sınırlamalar becerinin kendi dosyasından alınmıştır.

İyi Uyum

  • Geliştiricilerin veya kodlama modellerinin doğru şekilde yeniden üretmesi gereken açılış sayfaları, pazarlama siteleri ve ürün kompozisyonları
  • Net dönüşüm hunilerine sahip premium tasarımlar—salt sanat moodboard'ları değil
  • Fotoğrafı temel tasarım malzemesi olarak kullanan görsel odaklı tasarımlar
  • Son derece kodlanabilir UI referanslarına ihtiyaç duyan geliştiriciler veya kodlama modelleri
  • Tekrarlayan yapay zeka düzenlerinden kaçınmak için bölümler arasında güçlü kompozisyon çeşitliliği gerektiren siteler

Sınırları Bilin

  • Bölüm başına ayrı kareler yerine birleştirilmiş tek bir uzun görsel isteyen talepler
  • Yaratıcı hedef veya cesur ifadeler içermeyen güvenli ticari düzenler

Ne Sağlamalısınız

  • Site türü ve dönüşüm hedefiSkill, tasarım kararlarına yön vermek için prompt'tan site türünü (landing page, pazarlama sitesi, ürün sayfası, portfolyo, SaaS, e-ticaret, ajans, editoryal) ve birincil dönüşüm hedefini çıkarır.
  • Bölüm sayısı veya varsayılan belirsizlikBölüm sayısını belirtin, aksi halde skill landing page'ler için 6, tam web siteleri için 8 varsayılanını kullanır.
  • Marka ruh hali anahtar kelimeleriMinimalist, clean, editorial, magazine, cinematic, atmospheric, premium, luxury, SaaS, product, fintech, agency, creative studio, e-commerce gibi anahtar kelimeler hero ölçeğini, arka plan modunu, gradyan kullanımını ve kompozisyon seçimlerini yönlendirir.
  • Kültürel uyum için sektör veya bölgeBrief bir sektör veya bölge belirttiğinde, skill paleti ve tipografik tonu buna uyacak şekilde yönlendirir—kasıtlı olarak jenerik bir SaaS istenmediği sürece nötr SF startup görünümüne varsayılan olarak dönmez.

03 Skill'in içinde

imagegen-frontend-web 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ı.

  1. Varsayılan Olarak Sol Metin/Sağ Görsel Hero'dan Kaçının

    Varsayılan sol metin/sağ görsel hero, en fazla kullanılan yapay zeka desenidir.

  2. Kompozisyonu Çeşitlendirin—En Az 3 Farklı Sabitleme Noktası Görünmelidir

    Her bölüm bir kompozisyon sabitleme noktası seçer (ortalanmış, sol üst öncü, görsel üzerinde sol alt, sağ altta CTA kümesi, sol üçte bir/sağ üçte iki, sağ üçte bir/sol üçte iki, aşağıda ortalanmış, gridden bağımsız editoryal, ortada istiflenmiş, tuval olarak görsel).

  3. İstek Türüne Göre Varsayılan Bölüm Sayıları

    Landing page veya site şablonu varsayılan olarak 6 bölüm (6 görsel) kullanır. Tam web sitesi veya pazarlama sitesi varsayılan olarak 8 bölüm (8 görsel) kullanır. Ürün sayfası veya portfolyo varsayılan olarak 6 bölüm kullanır.

  4. Hero Başlığını Kısa ve Etkili Tutun

    H1 görsel olarak premium bir ifade gibi okunmalıdır. Başlıklar genellikle bir paragraf değil, 5-10 güçlü kelimeden oluşmalıdır.

04 İşe koyun

imagegen-frontend-web'i Claude Code veya Codex'te Yükleyin

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

imagegen-frontend-web'i 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/Leonxlnx/taste-skill --skill imagegen-frontend-web

skills/imagegen-frontend-web/SKILL.md için genel skills CLI formu; repository kendi yolunu farklı belgeleyebilir.

Skill'e İlk UI Tasarım Görevini Verin

Bu isteği kendi içeriğiniz ve kısıtlamalarınızla uyarlayın, ardından Claude Code veya Codex'te çalıştırın.

Example prompt
design 8 sections for a fintech website

Kaynak: SKILL.md örneği (birebir).

İlk Sonucu Kontrol Edin

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

  • Toplam görsel sayısı, bölüm sayısına eşittir—asla daha az olamaz
  • Sayfa nefes alır—bölümler arası boşluk düzenli ve kontrollüdür, aşırı sıkışık değildir
  • Kompozisyon bölümler arasında çeşitlendirilmiştir—sabitleme noktaları ve arka plan modları karıştırılmıştır
  • Biri bu referanstan kod yazabilir

OpenDesign'da imagegen-frontend-web önceden paketlenmiştir: üst çubukta Plugins → Skills'i seçin.

OpenDesign İndirHı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
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill dosyası
skills/imagegen-frontend-web/SKILL.md Doğrulama sırasında kaydedilen içerik sağlama toplamı; commit ccbc156
License
MIT LICENSE dosyasından.
Repository yıldızları
86.946 Katalogda 11 skill içeren Leonxlnx/taste-skill deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. imagegen-frontend-web için bir değerlendirme 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 paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. KESİN ÇIKIŞ KURALI — ÖNCE OKUYUNHer zaman bölüm başına ayrı bir yatay görsel oluşturun, birden fazla bölümü tek bir çerçevede birleştirmeyin
  2. HERO KOMPOZİSYON EĞİLİMİ — ÖNCE OKUYUNAşırı kullanılan sol metin/sağ görsel varsayılan hero'dan kaçının; arka plan üzerinde ortalanmış veya görsel üzerinde sol alt gibi alternatifleri tercih edin
  3. 1. AKTİF TEMEL YAPILANDIRMAKadranları ayarlar: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8, prompt'tan uyarlanmış
  4. 2. KOMBİNATORYAL VARYASYON MOTORUHer kategoriden bir seçenek belirleyin: tema paradigması, arka plan karakteri, tipografi karakteri, hero mimarisi, bölüm sistemi, 4 imza bileşen, 2 hareket dili, anlatı iskeleti
  5. 4. HERO MİNİMALİZM KURALLARIHero'yu sade tutun, başlığı kısa ve güçlü yapın, negatif alana öncelik verin, ilk görünüm alanını pill'ler ve detaylarla aşırı doldurmaktan kaçının
  6. 5. GÖRSEL SAYISI VE SAYFA DİLİMLEMEHer bölümde bir yatay görsel olsun; landing page için varsayılan 6, tam web sitesi için 8; bölüm boyutu çeşitliliğini karıştırın; kareler arasında sürekliliği zorunlu kılın
  7. 6. YARATICILIK YÜKSELTME KURALIŞunlardan en az 3'ünü artırarak gerçek yaratıcı hedefler gösterin: kompozisyon, tipografi, ölçek karşıtlığı, hero konsepti, görsel işleme, bölüm ritmi, kadrajlama
  8. 7. GÖRSEL ODAKLI ART DİREKTÖRLÜKGörselleri temel tasarım malzemesi olarak aktif şekilde kullanın: art-direction'lı fotoğrafçılık, ürün görselleri, editoryal görseller, görsel kırpmaları, çerçeveli paneller, katmanlı kompozisyonlar
  9. 8. YAPAY ZEKA KLİŞESİ KARŞITI KURALLARYasaklanan: sonsuz ortalanmış bölümler, mor/mavi yapay zeka gradyanları, süzülen blob'lar, glassmorphism spam'i, gradyanlı başlıklar, jenerik metin, kayan logo şeritleri, sahte KPI'lar
  10. 10. BÖLÜM RİTMİ KURALIYoğunluğu, görsel-metin oranını, hizalamayı, ölçeği, boş alanı, kart gruplamasını, arka plan yoğunluğunu değiştirerek bölüm ritmini çeşitlendirin; tekrarlanan şablon kutulardan kaçının
  11. 12. YOĞUNLUK VE BOŞLUK DİSİPLİNİSayfa nefes almalı; ana bölümler arasında düzenli dikey boşluk kullanın, sıkışık-sonra-boş sıçramalarından kaçının, boş alan bir tasarım aracıdır
  12. 13. RENK VE MALZEME KURALLARIKontrollü bir palet kullanın: 1 birincil, 1 ikincil, 1 vurgu, nötr ölçek; profesyonel tonal gradyanlara izin verin; gökkuşağı örgü blob'ları yasaklayın
Skill'in Kendi Açıklaması
Gelişmiş web sitesi tasarım referansları üreten, üst düzey frontend görsel yönlendirme skill'i; dönüşüm odaklı ve premium tasarımlara özel. KRİTİK ÇIKTI KURALI — her bölüm için AYRI bir yatay görsel üret. 8 bölümlü bir landing page, 8 görsel üretir. Asla birden fazla bölümü tek görselde birleştirme. Kompozisyon çeşitliliği (her zaman sol-metin / sağ-görsel değil), arka plan görseli özgürlüğü, çeşitli CTA'lar, değişken hero ölçekleri (dev / orta / minimalist mini), anlatı konsepti omurgası, ikinci okuma anları ve tüm görsellerde tek bir tutarlı palet uygulanır. Landing page'ler, pazarlama siteleri ve geliştiricilerin ya da kodlama modellerinin doğru şekilde yeniden oluşturabileceği ürün taslaklarına optimize edilmiştir.

SKILL.md'den ön bilgi açıklaması. Dosyanın tamamı yaklaşık 36.780 karakterdir. Dosyanın tamamını GitHub'da okuyun.

ImageGen Frontend Web

imagegen-frontend-web'i Gerçek Bir UI Tasarım Görevinde Çalıştırın.

imagegen-frontend-web skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'te skill'i seçin, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web