Sosyal Kart Ajan Becerisi

Claude Code, Codex ve benzeri kodlama ajanı ortamları için bir ajan becerisi. Makaleler, reklam metinleri, ekran görüntüleri, ürün notları, altyazılar veya fotoğraflardan Xiaohongshu / Rednote karusel görselleri ve WeChat 21:9 + 1:1 kapak çiftleri oluşturur.

İki görsel sistem tek bir iş akışını paylaşır:

• Editoryal. Monocle / Kinfolk / Cereal ruhunda sade düzenler. Hikaye anlatımı, yaşam tarzı, seyahat, okuma, film ve kişisel gözlemler için en iyisi.
• İsviçre Uluslararası. Izgara öncelikli, tek vurgu rengi, keskin ince çizgiler, aşırı tip kontrastı. Ürün incelemeleri, veri, çerçeveler, öğreticiler ve yapay zeka araçları için en iyisi.

Kardeş proje: guizang-ppt-skill. Ortak görsel dil, ayrı bakım. PPT "yatay kaydırmalı konuşmaları" çözer; bu ise "statik akış görsellerini" çözer.

30 saniyede başlangıç

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

Veya kabuk erişimi olan bir yapay zeka ajanına şunu yapıştırın:

Benim için guizang-social-card-skill'i yükle. https://github.com/op7418/guizang-social-card-skill deposunu ~/.claude/skills/guizang-social-card-skill içine klonla, sonra SKILL.md, assets/ ve references/ dosyalarının var olduğunu doğrula.

Zaten yüklüyse, şununla güncelleyin:

Benim için guizang-social-card-skill'i güncelle. ~/.claude/skills/guizang-social-card-skill dizinine git, git pull çalıştır, sonra bana en son commit'i söyle.

Sonra ajanınıza sorun:

Bu makaleden İsviçre tarzı bir Xiaohongshu karuseli yap, 5 kart, IKB mavisi.

Diğer faydalı istemler:

Bu ürün incelemesinden editoryal tarz başlıklarla 3:4 Xiaohongshu seti yap.
Bu makaleyi bir WeChat kapak çiftine dönüştür: 21:9 kahraman + 1:1 paylaşım kartı, görsel olarak tutarlı.
3 kamp fotoğrafım var — görsel ağırlıklı bir Xiaohongshu karuseli yap.
Bu oyun kılavuzu metnini bir Xiaohongshu setine dönüştür; Wallhaven'dan biraz oyun sanatı al.

Elde edecekleriniz

• 🖋 İki görsel sistem: Atmosfer ve anlatı için Editoryal, olgular ve yapı için İsviçre, tek bir iş akışını paylaşır
• 📐 3 tuval boyutu: .poster.xhs 1080×1440 (Xiaohongshu 3:4), .poster.wide 2100×900 (WeChat 21:9), .poster.square 1080×1080 (WeChat 1:1)
• 🧩 28 düzen iskeleti: 16 Editoryal (M01-M16, Görsel Ağırlıklı Kapak, İşlem Hattı, Önce/Sonra dahil) + 12 İsviçre (S01-S12, KPI Kulesi, H-Çubuk Grafiği, Matris + Kahraman dahil)
• 🎨 10 tema ön ayarı: 6 Editoryal (Mürekkep Klasik, İndigo Porselen, Orman Mürekkebi, Kraft Kağıt, Kumul, Gece Yarısı Mürekkebi koyu) + 4 İsviçre vurgu rengi (IKB Klein Mavisi, Limon, Limon Yeşili, Güvenlik Turuncusu)
• 🖼 Görsel bulma iş akışı: önce kullanıcı görselleri; yoksa Unsplash → Pexels → Flickr CC → Wallhaven → doğrudan arama sırasıyla, yerel olarak indirilir ve otomatik oluşturulan SOURCES.md ile birlikte
• 🌫 WebGL mürekkep akışı arka planı: editoryal kahraman sayfaları canlı bir mürekkep animasyonu sunabilir; düşük güçlü cihazlar veya ekran görüntüsü modu için devre dışı bırakılabilir
• 🪧 Görsel bindirme + yüz güvenliği: tam kanamalı görseller bir maske taşımalıdır; metin bırakma bölgeleri konudan kaçınmalıdır. references/image-overlay.md içinde katı kurallar
• 🧰 Ekran görüntüsü güzelleştirme varlıkları: 9 gerçek dokulu WebP arka plan (5 Editoryal / 4 İsviçre), .frame-shot / .device-browser / .device-phone yardımcıları ile eşleştirilmiş
• 🗺 Harita bileşeni: MapLibre + OSM gerçek döşemeler, çoklu iğne + bağlayıcılar, seyahat rehberleri için yapılmış
• ✅ Doğrulayıcı: validate-social-deck.mjs taşma, tip sınırı ihlalleri, 4 bantlı yoğunluk boşlukları ve altbilgi çarpışmalarını otomatik algılar
• 📄 Tek dosya HTML + Playwright işleme: ön uç derleme hattı yok; node render.mjs doğrudan PNG çıktısı verir

Uygun / Uygun değil

✅ Uygun: Xiaohongshu karuselleri / WeChat kapak çiftleri / Moments kapakları / Kanallar kapakları / makale görselleri / öğretici sayfaları / veri özetleri / seyahat rehberleri / ürün incelemeleri / ekran görüntüsü açıklayıcıları

❌ Uygun değil: Yatay kaydırmalı desteler (guizang-ppt-skill kullanın) / uzun biçimli video üretimi / saf fotoğraf rötuşu / düzen olmadan düz metin düzenleme

11 Xiaohongshu kategorisi

"Yetkinlik çemberi"ne göre kademelendirilmiş — bkz. references/category-cookbook.md:

Uçtan uca güçlü (metin / yapı / görsellerin tümü kapsamda):

• Seyahat, kariyer, öneriler (bir alt tür belirledikten sonra)

Metin ve yapı güçlü, görseller kullanıcıya veya bulunan sanata bağlı:

• Oyun, film, yemek (tarif odaklı), makyaj (öğretici odaklı), fitness, ev, moda (seçilmiş parçalar)

Kapsam dışı, baştan beyan edilir (zorla uydurulmaz):

• OOTD canlı çekimler / rüya çekirdeği / film emülasyonu derecelendirme / gerçek cilt testi makyajı — büyük ölçüde fotoğrafçılığa veya post prodüksiyona bağlı her şey

Yaygın senaryolar

Neden tek dosya HTML'den PNG'ye

• Ajan dostu: HTML + CSS metindir — ajanlar doğrudan yazabilir, okuyabilir, düzenleyebilir ve doğrulayabilir
• Düzen hassasiyeti: CSS Izgara + katı tip / kenar boşluğu / ızgara kuralları Markdown'un düzen erişimini çok aşar
• Açık görsel kaynağı: Unsplash / Pexels / Wallhaven / Mapbox / OSM / herhangi bir web kaynağına bağlanın
• Doğrulanabilir kalite: validate-social-deck.mjs Playwright DOM ölçümünü çalıştırır, tahmin değil
• Basit teslimat: output/*.png doğrudan gönderilir — dağıtım yok, dışa aktarma aracı yok

Platform desteği

Yükle

Seçenek 1: Tek satırda yükleme (önerilir)

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

Seçenek 2: Bir yapay zekaya şunu yapıştırın

Benim için guizang-social-card-skill Claude Code becerisini yükle. Adımlar:

1. ~/.claude/skills/ dizininin var olduğundan emin ol (yoksa oluştur)
2. git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill komutunu çalıştır
3. Doğrula: ls ~/.claude/skills/guizang-social-card-skill/ çıktısı SKILL.md, assets/, references/ göstermeli
4. Bittiğinde bana söyle. Daha sonra, "bana bir Xiaohongshu karuseli yap" gibi ifadeler bu beceriyi tetikleyecektir.

Yukarıdaki bloğu Claude Code / Cursor / kabuk erişimi olan herhangi bir yapay zeka ajanına yapıştırın.

Seçenek 3: Manuel CLI

git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

Nasıl tetiklenir

Yüklendikten sonra, Claude Code beceriyi otomatik algılar. Tetikleyici ifadeler:

• "Bana bir Xiaohongshu / Rednote karuseli yap"
• "Bana Rednote kartları yap"
• "Bir WeChat 21:9 kahraman + 1:1 paylaşım kartı yap"
• "Sosyal kartlar / dergi tarzı sosyal kartlar oluştur"
• "Bu makaleyi bir öğretici karuseline dönüştür"
• "İsviçre tarzı bir Xiaohongshu incelemesi / IKB tarzı kartlar yap"

İş akışı

Beceri yapılandırılmış bir iş akışıdır. Ajan 7 adımdan geçer:

1. Alım — 4 şeyi yakala: hedef platform / stil / kaynak içerik / kullanıcı görselleri. Görsel yoksa, A/B/C'yi bir kez sun (kendin çek / yapay zeka oluştur / çevrimiçi bul); tekrar sunma
2. Stil ve Tema — Editoryal veya İsviçre'yi seç, sonra 10 tema ön ayarından birini seç. Özel hex değerlerine izin verilmez
3. Düzen Seçimi — 28 düzen iskeletinden metni seç / yapıştır / uyarla. 16 Editoryal / 12 İsviçre
4. Varlık Hazırlığı — görselleri bul (Unsplash / Pexels / Flickr CC / Wallhaven / doğrudan arama), yerel olarak indir + SOURCES.md yaz; kaynakları belirtmek isteyip istemediğini sor
5. Oluştur ve İşle — tohum şablonu kopyala → <!-- POSTERS_HERE --> yorumunu değiştir → node render.mjs
6. Teslim ve İnceleme — önce PNG'leri göster, "onlara kendin mi bakarsın yoksa doğrulayıcıyı çalıştırmamı ister misin?" diye sor — otomatik doğrulama yapma
7. Yineleme — kullanıcı geri bildirimini uygula, satır içi stilleri düzelt veya düzenleri / görselleri değiştir, yeniden işle

Tam şartname SKILL.md içinde. Derin ayrıntılar eşleşen references/*.md dosyalarında.

Doğrulayıcı

node validate-social-deck.mjs yol/görev-dizini

Playwright gerçek işleme ölçümüne dayalı 6 kural, statik tarama değil:

• R1 Taşma — .poster öğesini aşan herhangi bir bölüm hemen başarısız olur
• R2 Tip Sınırları — .h-xl / .h-display boyut + ağırlık kombinasyonları tohum tanımlarını aşarsa
• R3 Altbilgi Çarpışması — içeriğin alt altbilgiye / sayfa numarasına baskı yapması
• R4 4 Bantlı Yoğunluk — 1440 yüksekliğindeki tuval 4 yatay banda bölünür; her biri içerik tutmalı veya boşluk için belirtilmiş bir nedeni olmalı
• R5 Çerçeve Taşması — .frame-img / .frame-shot çocukları çerçeveyi aşarsa
• R6 İsviçre Kimliği — Satır içi font-weight >= 700 olan İsviçre şablonları uyarır ("daha büyük demek daha ince demektir" kuralını ihlal eder)

SKILL.md Adım 7, doğrulayıcının otomatik çalışmadığını açıkça belirtir — kullanıcının önce görsellere bakmasını bekleyin, böylece tur başına onlarca saniye tasarruf edilir.

Tema ön ayarları

references/theme-presets.md dosyasından seçin. Özel hex değerlerine izin verilmez — estetiği korumak seçim özgürlüğünden daha önemlidir.

Editoryal (6)

İsviçre (4)

Temaları değiştirmek için, tohum şablonundaki <section class="poster" data-theme="..."> özelliğini değiştirmeniz yeterlidir; tüm CSS var(--...) üzerinden çözümlenir.

Dizin

guizang-social-card-skill/
├── SKILL.md                              ← Ana beceri dosyası: 7 adımlı iş akışı
├── README.md                             ← Çince BENİOKU
├── README.en.md                          ← Bu dosya
├── HANDOFF.md                            ← Devir belgesi: olgular + sürüm geçmişi
├── PRODUCT.md                            ← Ürün belgesi: düşünce + kararlar + yol haritası
├── validate-social-deck.mjs              ← Playwright düzen doğrulayıcı
├── assets/
│   ├── template-editorial-card.html      ← Editoryal tohum (6 tema / 3 tuval)
│   ├── template-swiss-card.html          ← İsviçre tohum (4 vurgu / 3 tuval)
│   ├── magazine-bg-webgl.js              ← WebGL mürekkep akışı arka planı
│   └── screenshot-backgrounds/           ← 9 ekran görüntüsü sahne arka planı (WebP)
│       ├── style-a/                      ←   5 Editoryal
│       └── style-b/                      ←   4 İsviçre
└── references/
    ├── platform-specs.md                 ← Platform × çözünürlük × adlandırma
    ├── style-system.md                   ← Her iki stil için katı kurallar ve anti-desenler
    ├── theme-presets.md                  ← 10 paletin tümü ayrıntılı
    ├── layout-recipes.md                 ← 28 düzen iskeleti (M01-M16 + S01-S12)
    ├── components.md                     ← Tip / kartlar / boşluk / simgeler
    ├── background-systems.md             ← Mürekkep akışı / ızgara / kağıt katmanları
    ├── portrait-fill.md                  ← 3:4 pano için boşluk stratejisi
    ├── content-planning.md               ← Kancalar / sayfa bölmeleri / metin sıkıştırma
    ├── category-cookbook.md              ← 11 Xiaohongshu kategori yönlendirme tablosu
    ├── image-overlay.md                  ← Tam kanamalı görsel maskesi + yüz güvenliği kuralları
    ├── screenshot-treatment.md           ← `.frame-shot` yardımcıları + ekran görüntüsü güzelleştirme
    ├── map-component.md                  ← `.map-block` MapLibre harita
    ├── title-shortener.md                ← 1:1 kapak için kısa başlık stratejisi
    ├── production-workflow.md            ← Playwright işleme hattı
    └── qa-checklist.md                   ← Kalite kontrol listesi

Temel tasarım ilkeleri

1. Gürültü yerine sınırlama — doygun bir akışta sade paletler öne çıkar
2. Süsleme yerine yapı — hiyerarşiyi gölgeler veya kartlar değil, tip / kontrast / ızgara taşır
3. Özgürlük yerine düzenler — önce seç, sonra uyarla; 28 iskelet dışında sayfa icat etme
4. Önce kullanıcı görselleri — alımda A/B/C'yi bir kez sun; kendi çekimlerini tekrar sunma
5. Maskele + kaçın — tam kanamalı görseller her zaman bir maske taşır; metin bırakma bölgeleri konuyu (yüzler / ürünler / metin yoğun bölgeler) temizlemelidir
6. Daha büyük demek daha ince demektir — İsviçre .h-xl boyutu arttıkça → ağırlık azalmalıdır. Editoryal aynı kuralı izler
7. Otomatik doğrulama yok — önce kullanıcının bakmasına izin ver, sonra doğrulamadan önce sor; tur başına onlarca saniye tasarruf sağlar
8. Beceri bir üründür, istem değil — PRODUCT.md, sürüm numaraları, CHANGELOG, yetenek sınırları içerir
9. Yerel testler git'te kalmaz — tüm demolar / duman testleri local-tests/ altında yaşar, gitignore'da

Görsel referanslar

• Monocle / Kinfolk / Cereal dergi düzenleri ve harf aralığı
• Massimo Vignelli / Helvetica Forever / İsviçre Uluslararası Tipografik Stili ızgara sistemleri
• Apartamento / The Gentlewoman görsel-metin oranları ve insan portreciliği
• Xiaohongshu / Rednote'tan sınırlı-kazanan-akış örnekleri
• Guizang'ın sosyal kart pratiği

Yol haritası

• Uzun Editoryal içerik altında tip sınırı uç durumları için daha fazla duman testi
• Daha fazla İsviçre veri düzeni (ek grafik iskeletleri)
• Görüntü oluşturma sonrası: yerel düzeltmeler yapıp yapmama / tüm görüntüyü yeniden oluşturma konusunda aktif olarak sor
• Daha fazla kategoriye özgü önerilen düzen paketleri (şu anda 11'in 7'si uçtan uca güçlü)
• Pazar yeri için hazır WorkBuddy sürümü

Katkıda bulunma

Hatalar, düzen sorunları, yeni düzen istekleri — Sorunlar ve PR'ler memnuniyetle karşılanır. Değişiklikler için öncelikler:

• Tohum şablonlarını düzenlerken, references/components.md'deki yazışma tablosunu da güncelleyin (boyutlar / boşluklar / ağırlıklar)
• Düzen eklerken, tam tarifi references/layout-recipes.md'ye ekleyin (metin sınırları + minimum yoğunluk)
• Tema renkleri eklerken, tohum şablonunun [data-theme="..."] bloğunu + references/theme-presets.md'yi de güncelleyin
• İsviçre kuralları eklerken, validate-social-deck.mjs içindeki eşleşen kuralı da güncelleyin
• Karşılaştığınız hatalar references/qa-checklist.md'ye gider
• Testler ve demolar local-tests/ altında yaşar — beceri kökünü kirletmeyin

Lisans

AGPL-3.0 © 2026 op7418

Bu proje GNU AGPL-3.0 altında lisanslanmıştır. Ana noktalar:

1. Atıf gerekli — Telif hakkı bildirimini koruyun
2. Türevler açık kaynak olmalı — Herhangi bir değiştirilmiş sürüm, çatal veya yeniden dağıtım, tam kaynak koduyla birlikte AGPL-3.0 (veya uyumlu bir lisans) altında yayınlanmalıdır
3. Ağ kullanımı dağıtımdır — Değiştirilmiş bir sürümü yalnızca SaaS / web hizmeti olarak çalıştırsanız ve kodu dağıtmasanız bile, kaynağı yayınlamak zorundasınız (AGPL'yi GPL'den daha katı yapan budur)
4. Kapalı kaynak, özel mülk veya yalnızca ücretli dağıtım yok

Tam şartlar LICENSE içinde.