Guizang HTML PPT Aracı Becerisi

Claude Code, Codex ve benzeri kodlama ajanı ortamları için bir ajan becerisi. Tek dosyalı HTML yatay kaydırmalı slayt desteleri, deste görselleri ve sosyal kapak sayfaları oluşturur.

İki görsel sistemle birlikte gelir:

• Stil A: editoryal dergi × elektronik mürekkep. İçine kod işlenmiş Monocle'ı hayal edin. Anlatı odaklı konuşmalar, fikirler, salonlar ve kişisel ses için en iyisi.
• Stil B: İsviçre Uluslararası Tipografik Stili. Izgara öncelikli, tek bir yüksek doygunlukta ana renk, keskin dikdörtgenler, incecik çizgiler ve aşırı tip kontrastı. Gerçekler, ürünler, analiz ve çerçeveler için en iyisi.

Guizang tarafından "Tek Kişilik Şirket: Yapay Zeka ile Katlanan Organizasyonlar" ve "Yeni Bir Çalışma Biçimi" gibi çevrimdışı konuşmalardan damıtılmıştır. O destelerde karşılaşılan her tuzak checklist.md dosyasına kaydedilmiştir.

Eski Tema · Stil A Editoryal Dergi

Yeni Tema · Stil B İsviçre Uluslararası

30 saniyede başlangıç

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

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

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

Eğer zaten yüklüyse, şu komutla güncelleyin:

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

Ardından ajanınıza sorun:

Bu makaleden yaklaşık 7 slaytlı, 2-3 oluşturulmuş görsel içeren İsviçre tarzı bir deste oluştur.

Diğer kullanışlı komutlar:

Bu Markdown dosyasını editoryal dergi tarzı bir sunuma dönüştür.
Bu destenin ana fikrinden bir 21:9 sosyal kapak oluştur.
Bu ürün ekran görüntüsünü 16:10 slayt görseli olarak yeniden tasarla.

Ne alırsınız

• 🖋 İki görsel sistem: Stil A için editoryal hikaye anlatımı, Stil B için olgusal İsviçre yapısı
• 📐 Yatay kaydırma navigasyonu: ← → ok tuşları / fare tekerleği / dokunmatik kaydırma / alt noktalar / dizin için ESC
• 🧩 Stil A 10 düzen: kapak, ayraç, büyük sayılar, resim/metin, resim ızgarası, iş akışı, karşılaştırma ve daha fazlası
• 🧱 Stil B 22 kilitli düzen: Kapak, Açıklama, KPI Kulesi, Döngü Diyagramı, İkili Karşılaştırma, Görsel Kahraman, Kapanış Manifestosu ve daha fazlası
• 🎨 Seçilmiş tema ön ayarları: Stil A için 5 elektronik mürekkep teması, Stil B için 4 İsviçre ana renk teması
• 🖼 İsteğe bağlı Codex görsel akışı: GPT-Image 2.0 / GPT-M 2.0 ile belgesel fotoğrafları, bilgi grafikleri, akış diyagramları, sistem haritaları ve UI sahneleri oluşturun, ardından şablon güvenli oranlarda ekleyin
• 📰 Sosyal kapaklar: 21:9 WeChat kapak görselleri, 1:1 paylaşım kartları, 3:4 Xiaohongshu kapakları, video küçük resimleri ve ilgili varyantlar oluşturun
• 📴 Düşük güç statik modu: WebGL / canvas animasyonunu statik görsellere dönüştürmek için B tuşuna basın
• 📄 Tek HTML dosyası — derleme yok, sunucu yok, doğrudan tarayıcıda açın

Uyan / Uymayan

✅ Uyan: çevrimdışı konuşmalar, sektör açılış konuşmaları, özel salonlar, yapay zeka ürün lansmanları, demo günü, güçlü kişisel sese sahip sunumlar

❌ Uymayan: veri ağırlıklı tablolar, eğitim desteleri (yoğunluk çok düşük), çok kullanıcılı işbirliğine dayalı düzenleme (statik HTML)

Yaygın kullanım durumları

Neden HTML desteleri

• Ajan-doğal düzenleme: HTML / CSS düz metindir, bu nedenle ajanlar doğrudan okuyabilir, düzenleyebilir ve doğrulayabilir.
• Markdown'dan daha yüksek görsel yoğunluk: hassas düzen, konumlandırma, hareket, etkileşim ve kapak formatları.
• Hafif teslimat: bir HTML dosyası açılabilir, sunulabilir, gönderilebilir, ekran görüntüsü alınabilir veya kaydedilebilir.
• Daha iyi kalite kontrolleri: İsviçre doğrulayıcısı düzen kaymasını, güvensiz görüntü yerleşimini, ortalanmış gövde başlıklarını ve SVG metin tuzaklarını yakalayabilir.
• Çıktılar arasında tek bir görsel sistem: desteler, oluşturulan görseller, kapaklar ve ekran görüntüsü yeniden tasarımları aynı stil kurallarını paylaşabilir.

Platform desteği

Yükleme

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

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

Seçenek 2: Bunu bir yapay zekaya yapıştırın

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

1. ~/.claude/skills/ dizininin var olduğundan emin olun (yoksa oluşturun)
2. git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill komutunu çalıştırın
3. Doğrulayın: ls ~/.claude/skills/guizang-ppt-skill/ çıktısı SKILL.md, assets/, references/ göstermelidir
4. Tamamlandığında bana haber verin. Daha sonra "bana dergi tarzı bir deste yap" gibi şeyler söylemek bu beceriyi tetikleyecektir.

Yukarıdaki bloğu Claude Code / Cursor / shell erişimi olan herhangi bir yapay zeka ajanına yapıştırın ve yüklemeyi o halledecektir.

Seçenek 3: Manuel CLI

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

Nasıl tetiklenir

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

• "Bana dergi tarzı bir deste yap"
• "Bana İsviçre tarzı bir deste yap"
• "Yatay kaydırmalı bir deste oluştur"
• "Editoryal dergi tarzı sunum"
• "Konuşmam için elektronik mürekkep slaytları"
• "Bu makaleden bir 21:9 WeChat kapağı oluştur"
• "Bu desteden bir 1:1 paylaşım kartı oluştur"

İş Akışı

Beceri yapılandırılmış bir iş akışıdır; ajan sizi her adımda yönlendirir:

1. Stili seçin — Stil A editoryal dergi veya Stil B İsviçre Uluslararası
2. Amacı netleştirin — 7 soruluk kontrol listesi: stil, hedef kitle, süre, kaynak materyal, görseller/ekran görüntüleri, tema, katı kısıtlamalar
3. Şablonu kopyalayın — Stil A assets/template.html kullanır; Stil B assets/template-swiss.html kullanır
4. İçeriği doldurun — bir ritim planı oluşturun, ardından eşleşen düzen iskeletlerini seçin ve uyarlayın
5. İsteğe bağlı görüntü oluşturma — Codex'te, GPT-Image 2.0 / GPT-M 2.0 görüntülerini kullanıp kullanmayacağınızı sorun, ardından sayfaya uygun oranlarda ekleyin
6. Kendi kendine kontrol — references/checklist.md ile karşılaştırın; P0 sorunlarının tümü geçmelidir; İsviçre desteleri ayrıca düzen doğrulayıcıyı geçmelidir
7. Önizleme — HTML'i tarayıcıda açın
8. Yineleyin — yazı tipi boyutunu, yüksekliği, boşluğu ayarlamak için satır içi stilleri kullanın

Tam özellikler SKILL.md dosyasında.

Stil B İsviçre

İsviçre teması, sadece bir CSS kaplaması değil, katı bir düzen sistemidir.

• 22 adlandırılmış düzen: gövde slaytları S01 ile S22 arasını kullanmalıdır; yeni yapılar icat etmeyin
• 4 ana renk: Uluslararası Klein Mavisi, limon sarısı, limon yeşili, güvenlik turuncusu
• Izgara kilidi: 16 sütunlu ızgara, keskin dikdörtgenler, 1px ince çizgiler, gölge yok, degrade yok, yuvarlak kart yok
• Çince başlık ölçeklendirme: tamamen Çince başlıklar, içerik ve görüntüler için alan korumak amacıyla bir kademe daha küçük olmalıdır
• Görüntü/metin alt hizalama: metin ve görüntü blokları, sol/sağ görüntü düzenlerinde, sayfalama kontrollerinden uzak kalarak altta hizalanmalıdır
• Görüntü yuvaları: görüntüler, şablon tanımlı data-image-slot bölgelerine yerleştirilmelidir, genellikle 21:9 veya 16:10 oranında oluşturulur
• Sert doğrulama: doğrulayıcı, ortalanmış gövde başlıklarını, deneysel düzenleri, görünür SVG metnini ve yuvaların dışına yerleştirilmiş görüntüleri yakalar

İsviçre doğrulaması:

node scripts/validate-swiss-deck.mjs path/to/index.html

Codex Görüntü Akışı

Codex'te, ilk deste taslağı hazır olduktan sonra, ajan kullanıcının oluşturulmuş görseller isteyip istemediğini sorabilir. Onaylandıktan sonra, bir görüntü türü veya stili seçin. Yaygın türler şunlardır:

• Belgesel fotoğrafları: insan dokusu katan Fuji / Leica benzeri gerçek dünya sahneleri
• Bilgi grafikleri / akış diyagramları / karşılaştırma grafikleri / sistem haritaları: fotoğraflarla iyi açıklanamayan kavramlar için
• Ekran görüntüsü çerçeveleme / ekran görüntüsü yeniden tasarımları: önce ham ekran görüntülerini paketlenmiş arka plan varlıkları ve CleanShot X tarzı bir tuval ile koruyun; UI sahne oluşturmayı yalnızca ekran görüntüsünün yeniden yapılandırılması gerektiğinde kullanın
• Veri posterleri / grafikler: anahtar sayıları eklemeye hazır görsel varlıklara dönüştürün
• Çoklu görüntü kompozisyonları: birbiriyle ilgisiz üç 16:9 görüntünün ızgarayı bozacağı ultra geniş yuvalar için kullanışlıdır

Oluşturulan görüntüler dört temel kurala uymalıdır:

• Görüntüyü bağımsız bir slayt olarak değil, gömülü bir varlık olarak ele alın: alt bilgi, sayfa altı, başlık, sayfa numarası, köşe işareti, imza veya dekoratif kenarlık olmamalıdır
• Deste diline uyun: Çince desteler bilgi grafiklerinde Çince etiketler kullanır, İngilizce desteler İngilizce etiketler kullanır
• Oluşturmadan önce yuva oranına uyun: birçok İsviçre kahraman yuvası için 21:9, yaygın ana görseller için 16:9 / 16:10, UI sahneleri için 16:10, görüntü ızgaraları için sabit eşit yükseklikler
• Ham bir ekran görüntüsü sadık kalması gerektiğinde, önce references/screenshot-framing.md dosyasını okuyun ve varsayılan olarak ekran görüntüsünü yeniden çizmek yerine paketlenmiş assets/screenshot-backgrounds/ arka planlarını ve programatik ölçeklendirme, dolgu ve hizalamayı kullanın

Görüntü yönlendirmeleri references/image-prompts.md dosyasında bulunur. Ekran görüntüsü çerçeveleme ise references/screenshot-framing.md dosyasındadır.

Kapak Oluşturma

Beceri ayrıca bir makaleyi veya deste fikrini platform kapaklarına dönüştürebilir:

• WeChat ana kapağı: 21:9, başlık öncelikli, bir görsel çapa ile
• WeChat paylaşım kartı: 1:1, 21:9 kapakla görsel olarak eşleşir
• Xiaohongshu kapağı / karusel: 3:4, büyük başlık, bir parti boyunca tutarlı tip ölçeği
• Video küçük resmi: 16:9, başlık + alt başlık + bir odak görseli

Aynı kural geçerlidir: birkaç güçlü anahtar kelime kullanın, başlığı görsel merkez olarak koruyun ve tuvali gövde metniyle doldurmayın.

Örnek komutlar

Bu komutlardan herhangi birini ajanınıza kopyalayın, ardından makalenizi, Markdown dosyanızı veya görüntü varlıklarınızı ekleyin:

Bu makaleden, şablon görüntü yuvalarına uyan 3 oluşturulmuş görsel içeren 8 slaytlı İsviçre tarzı bir deste oluştur.

Bu ürün analizi belgesini güçlü bir anlatı ritmine sahip editoryal dergi tarzı bir desteye dönüştür.

Bu destenin ana fikrinden iki kapak oluştur: bir 21:9 ana kapak ve görsel olarak eşleşen bir 1:1 paylaşım kartı.

Bu ürün ekran görüntülerini tutarlı 16:10 slayt görsellerine yeniden tasarlayın. Anahtar UI bilgilerini koruyun; görüntülerin içine slayt başlığı veya alt bilgi eklemeyin.

Dizin

guizang-ppt-skill/
├── SKILL.md              ← ana beceri dosyası: iş akışı, prensipler, yaygın hatalar
├── README.md             ← Çince BENİOKU
├── README.en.md          ← bu dosya
├── assets/
│   ├── template.html         ← Stil A editoryal dergi şablonu
│   ├── template-swiss.html   ← Stil B İsviçre şablonu
│   └── screenshot-backgrounds/ ← paketlenmiş WebP ekran görüntüsü arka planları: 5 stil-a / 4 stil-b
├── scripts/
│   └── validate-swiss-deck.mjs ← İsviçre düzen doğrulayıcısı
└── references/
    ├── components.md     ← bileşen kataloğu (tür, renk, ızgara, simgeler, belirtme, istatistik, iş akışı)
    ├── layouts.md        ← 10 düzen iskeleti (yapıştırmaya hazır)
    ├── layouts-swiss.md  ← 22 kilitli İsviçre düzeni
    ├── swiss-layout-lock.md ← İsviçre aslına uygunluk ve düzen katı kuralları
    ├── themes.md         ← 5 tema ön ayarı (seçin, özelleştirmeyin)
    ├── themes-swiss.md   ← 4 İsviçre ana renk teması
    ├── image-prompts.md  ← GPT-Image 2.0 / GPT-M 2.0 görüntü türleri, oranlar ve temel yönlendirmeler
    ├── screenshot-framing.md ← CleanShot X tarzı ekran görüntüsü çerçeveleme semantiği
    └── checklist.md      ← kalite kontrol listesi (P0 / P1 / P2 / P3 seviyeleri)

Tema ön ayarları

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

Stil A Editoryal Temalar

Temaları değiştirmek yalnızca template.html dosyasının :root{} bloğunun üst kısmındaki 6 değişkeni değiştirmeyi gerektirir — diğer tüm CSS var(--...) üzerinden akar.

Stil B İsviçre Temaları

references/themes-swiss.md dosyasından seçin. Burada da özel hex değerlerine izin verilmez.

Kullanıcı renk belirtmeden İsviçre tarzı bir deste isterse, varsayılan olarak Uluslararası Klein Mavisi kullanın.

Temel tasarım prensipleri

1. Şatafat yerine ölçülülük — WebGL arka planlar yalnızca kahraman sayfalarında hafifçe görünür
2. Süsleme yerine yapı — bilgi hiyerarşisi yazı tipi boyutu + yazı tipi + ızgara boşluğu ile, gölgeler veya yüzen kartlarla değil
3. Görseller birinci sınıf vatandaşlardır — onları gövde içerik alanıyla hizalayın, oranları sabit tutun, yalnızca alttan kırpın ve üst/yanları koruyun
4. Oluşturulan görseller varlıklardır — yalnızca ana fotoğrafı / grafiği / UI'yi tutun; görüntünün içinde slayt başlığı, alt bilgi veya köşe işareti işlemeyin
5. Ritim kahraman sayfalarında yaşar — kahraman / kahraman olmayan değişimi gözün yorulmasını önler
6. Dinamik efektler isteğe bağlı olmalıdır — B tuşu statik modu açar, böylece animasyon asla bir okuma yükü haline gelmez
7. Terimler tutarlı kalır — Skills, Skills'tir; karışık çevirilere izin verilmez
8. İsviçre düzenleri kilitli kalır — Stil B, ilgisiz sayfalar icat etmek yerine orijinal 22 sayfalık düzen sistemini geri yüklemeli ve yeniden kullanmalıdır

Görsel referanslar

• Monocle dergi düzenleri
• YC Garry Tan — "Thin Harness, Fat Skills"
• Massimo Vignelli / Helvetica Forever / Swiss International Typographic Style
• Guizang'ın çevrimdışı konuşma deste serisi

Yol haritası

• Daha fazla gerçek dünya örneği ve açılabilir HTML deste demosu ekleyin
• Daha fazla yayın platformu için kapak formatlarını genişletin
• Daha fazla İsviçre düzen doğrulama kuralı ekleyin
• Ekran görüntüsü yeniden tasarımı ve bilgi grafiği oluşturma iş akışlarını iyileştirin
• WorkBuddy gibi pazar yeri odaklı varyantları hazırlayın
• Özel renkleri kısıtlı tutarken daha fazla seçilmiş tema paketi ekleyin

SSS

PPTX'e aktarabilir mi? Ana çıktı HTML'dir. Bir tarayıcıda sunabilir, ekran görüntüsü alabilir veya kaydedebilirsiniz. PPTX dönüşümü ayrı bir iş akışı olarak yapılabilir, ancak şu anda ana yol değildir.

Neden özel renklere izin verilmiyor? Beceri istikrarlı görsel çıktı için tasarlanmıştır. Rastgele renkler genellikle sistemi bozar, bu nedenle desteler seçilmiş ön ayarları kullanmalıdır.

Kendi düzenimi ekleyebilir miyim? Evet. Stil A düzenleri references/layouts.md dosyasında genişletilebilir. Stil B daha katıdır: template-swiss.html, layouts-swiss.md, swiss-layout-lock.md ve doğrulayıcıyı birlikte güncelleyin.

Codex görüntü oluşturma zorunlu mu? Hayır. Desteler oluşturulmuş görüntüler olmadan çalışır. Görüntü akışı yalnızca fotoğraflara, bilgi grafiklerine, UI sahnelerine veya kapaklara ihtiyacınız olduğunda kullanılır.

Beceriyi nasıl güncellerim? Yükleme komutunu tekrar çalıştırın veya yerel beceri dizininizde git pull komutunu çalıştırın.

Katkıda bulunma

Hatalar, düzen sorunları, yeni düzen talepleri — Issue ve PR'lar memnuniyetle karşılanır. Önceliklendirin:

• template.html dosyasına önce yeni sınıflar ekleyin; layouts.md dosyasının tanımsız sınıflara atıfta bulunmasına izin vermeyin
• template-swiss.html dosyasını değiştirirken, layouts-swiss.md ve swiss-layout-lock.md dosyalarını birlikte güncelleyin
• İsviçre kuralları eklerken, scripts/validate-swiss-deck.mjs dosyasını güncelleyin
• Karşılaşılan tuzakları karşılık gelen P0 / P1 / P2 / P3 seviyesinde checklist.md dosyasına kaydedin
• Yeni tema renkleri, önerilen bir kullanım durumu ile birlikte themes.md dosyasına gider

Lisans

MIT © 2026 op7418