Geçen hafta, Öğretmen Li Jigang tarafından yapay zeka ve organizasyonlar hakkında özel bir paylaşım oturumu röportajı yapmaya davet edildim.
Oturumdan sonra en sık sorulan soru şuydu: "Bu PPT hangi araçla yapıldı? Açık kaynak olarak paylaşabilir misiniz?"
Yan ürünün ana ürün haline gelmesini beklemiyordum.
Bu yüzden onu açık kaynak yapmaya karar verdim ve adını guizang-ppt-skill koydum (https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill)).
Bugünkü yazı, bu Skill'in neye benzediğinden ve on yıldır tasarımcı olan biri olarak neden iyi göründüğünü düşündüğümden bahsedecek.
Neye Benziyor
Skill tarafından oluşturulan bir PPT'yi açtığınızda ilk izlenim muhtemelen şu olur: bu yapay zeka tarafından yapılmış gibi görünmüyor.
Birkaç sezgisel özellik:
- Kapak: Mürekkep renkli arka plan + serif ana başlık, arkasında yavaşça akan hafif bir WebGL akışkanı.
- Gövde: Arka plan rengi kağıt beyazına dönüyor ve üzerine mürekkep renkli metin basılıyor, açık bir basılı dergi gibi.
- Sayfa Çevirme: Yatay soldan sağa kaydırma, klavye, kaydırma tekerleği ve dokunma hareketlerini destekler—standart PowerPoint "sonraki slayt" değil.
- Meta Veri: Her sayfanın dört köşesinde "Act II · 15 / 25" gibi gazete sayfa numaralarına benzeyen küçük, tek aralıklı metinler bulunur.
Bu görsel tona bir isim verdim: "Elektronik Dergi × E-Mürekkep."
İlham, Monocle, The Guardian ve NYT gibi basılı dergilerin düzen geleneklerinden, Kindle elektronik kağıdının okuma estetiğinden geliyor ve hepsi çağdaş Web etkileşim sözdizimiyle bir araya getiriliyor.
Ne Yapabilir
Skill şu anda 10 sayfa düzeni, 5 tema rengi ön ayarı ve eksiksiz bir sayfa çevirme etkileşimleri seti sağlar.
10 Düzen, 15-30 sayfalık bir paylaşım oturumunda kullanılan neredeyse tüm sayfa türlerini kapsar:
Açılış kapağı, bölüm ayırıcıları, veri posterleri, metin-sağ-resim-sol, resim ızgaraları, ardışık süreçler, merak uyandıran sorular, büyük alıntılar, Önce/Sonra karşılaştırmaları ve karışık metin-resim düzenleri.
Her biri doğrudan yapıştırılabilen bir HTML iskeletidir; kullanmak için sadece metni ve resimleri değiştirin.
5 Tema, farklı senaryolara karşılık gelir:
- Ink Classic — İş lansmanları, genel varsayılan
- Indigo Porcelain — Teknoloji, araştırma, AI konferansları
- Forest Ink — Doğa, sürdürülebilirlik, insani bilimler
- Kraft Paper — Nostalji, edebiyat, bağımsız dergiler
- Dune — Sanat, tasarım, yaratıcılık
Her tema, :root içindeki 6 CSS değişkeni için farklı bir değer setidir. Temayı değiştirmek, sadece bu 6 satır kodu değiştirmeyi gerektirir.
Kullanıcıların özel onaltılık renk kodları belirlemesine izin verilmez; nedenini daha sonra açıklayacağım.
Sayfa çevirme etkileşimleri klavye sol/sağ oklarını, fare tekerleğini, dokunma kaydırmayı, alt nokta atlamalarını ve ESC tuşu ile bir küçük resim indeksi açmayı destekler.
Amaç, bir tarayıcıda gerçek bir dergiyi çevirme deneyimine mümkün olduğunca yaklaşmaktır.
Çıktı, tek dosyalı bir HTML'dir. Çift tıklayarak tarayıcıda görüntüleyin. Başkalarına göndermek sadece bir dosyadır, böylece başka birinin bilgisayarında yazı tiplerinin veya animasyonların bozulması konusunda endişelenmenize gerek kalmaz.
Nasıl Kullanılır
Aslında, bu Skill'in gerçek değeri şablonun kendisinde değil, İnsan × AI işbirliğiyle PPT yapımı için bir arayüz tanımlamasıdır.
İşte bir hafta boyunca kendim kullandıktan sonra başkalarına anlatmaya en değer bulduğum üç şey.
Önce AI ile bu 6 şeyi netleştirin
Skill kurulduktan sonra, sadece "Bana bir dergi tarzı PPT yap" demeniz yeterlidir ve Claude size proaktif olarak 6 soru soracaktır:
- Hedef kitle ve senaryo nedir? (Kurum içi / İş lansmanı / Özel paylaşım)
- Paylaşım ne kadar sürecek? (15 dk ≈ 10 sayfa, 30 dk ≈ 20 sayfa)
- Orijinal materyal var mı? (Belgeler, veriler, eski PPT'ler, makale bağlantıları)
- Resimler var mı ve nerede bulunuyor?
- Hangi tema rengini istiyorsunuz? (5 ön ayar arasından seçim)
- Katı kısıtlamalar var mı? (XX verisi dahil edilmeli / YY gösterilmemeli)
Hepsini birden söylemek zorunda değilsiniz; tek tek soracaktır. Cevapladıktan sonra size bir taslak ve bir tema ritim tablosu verecektir. Önce uyum sağlayın, sonra kod yazmaya başlayın—bu adım, işimin %80'inin yeniden yapılmasını önlüyor.
Daha önce AI kullanarak PPT yapmanın en büyük sorunu, hemen yazmaya başlaması ve yönün yanlış olduğunu 10. sayfada fark etmenizdi. Bu netleştirme süreci, "uyumu" en başa taşır.
Resimler nasıl eklenir
Resimler, index.html ile aynı seviyede bir images/ klasörüne yerleştirilir ve belirli adlandırma kuralları vardır:
1ppt/2├── index.html3└── images/4 ├── 01-cover.jpg5cover.jpg6 ├── 03-figma.png7 └── 05-dashboard.png
- Sıfır dolgulu sayfa numaraları + İngilizce anlamlandırma—01, 1 yerine; cover, fengmian yerine. Bu, sıralamayı kolaylaştırır ve AI referansını netleştirir.
- Fotoğraflar için JPG, ekran görüntüleri için PNG kullanın—Ekran görüntüleri metin içerir; PNG onları keskin tutar.
- Tek resim genişliği ≥ 1600 piksel—Böylece büyük ekran projeksiyonlarında bulanık görünmez.
Tek yapmanız gereken Claude'a "3. sayfa bir Figma arayüz ekran görüntüsü" demek ve otomatik olarak images/03-figma.png yazacaktır. Aynı ada sahip dosyayı klasöre bırakmanız yeterlidir.
Kayıpsız resim değiştirmenin sırrı: Aynı adla üzerine yazın
Bu, karşılaştığım en büyük tuzaktı—kopya tamamlandıktan sonra bir resmi değiştirmek istiyorum, sonra yolları küresel olarak aramam ve değiştirmem gerekiyor ve bu genellikle HTML'yi bozuyor.
Doğru yol sadece bir cümle: Yeni resmi aynı adla eski resmin üzerine yazın ve HTML'de tek bir karakteri değiştirmeyin.
Neden Böyle Görünüyor
Kullanım kısmını anlattıktan sonra, şimdi neden böyle olduğundan bahsedelim.
İyi tasarım gizem değildir; bir dizi parçalanabilir karardır. Yaptığım şey, dergi endüstrisinin yüz yılı aşkın bir süredir biriktirdiği düzen dilini HTML'ye taşımak.
Tipografinin üç seviyeli bölümü
- Serif → "Görüşler". Ana başlıklar için serif kullanın; okuyucular hemen "bu ciddiye alınması gereken bir cümle" hissine kapılır.
- Sans-serif → "Bilgi". Gövde metni için yüksek yoğunluklu, okunması kolay.
- Monospace → "Meta veri". Bölüm numaraları, tarihler ve altbilgi/üstbilgideki sayfa numaraları, dergi altbilgileri veya bir terminaldeki kod gibi.
Okuyucuların fazla düşünmesi gerekmez; gözleri otomatik olarak bir cü bir cümlenin ana metin mi yoksa dipnot mu olduğunu bilir.
Renk Disiplini
Kağıt beyazı, mürekkep rengi ve bir vurgu rengi yeterlidir.
Saf beyaz göz alıcıdır ve saf siyah saldırgandır; basım endüstrisi bunu asla yapmaz ve Kindle da yapmaz.
Skill'in 5 temasında hiçbir arka plan rengi #FFFFFF ve hiçbir metin rengi #000000 değildir.
Her set sadece 6 CSS değişkeni gösterir ve SKILL.md açıkça belirtir: Kullanıcıların özel onaltılık renk kodları belirlemesine izin verilmez; beşinden birini seçmelidirler.
Kısıtlamalar ne kadar katı olursa, stil o kadar istikrarlı olur. Estetiği korumak, kullanıcılara özgürlük vermekten daha önemlidir.
Izgara ve Ritim
7:5, 6:6 ve 8:4 gibi sabit ızgaralar, tek bir sayfada düzeni sağlar.
Kahraman sayfalar ve kahraman olmayan sayfalar dönüşümlü olmalı ve tüm destenin ritmini sağlamalıdır.
Bir sayfa yoğun, bir sayfa seyrek—bu, bir dergiyi çevirirken aldığınız "nefes" hissidir.
Skill'e katı bir kural yazılmıştır: art arda üç sayfadan fazla aynı temanın kullanılması P0 hatası olarak kabul edilir.
Ritmi olmayan bir PPT, sadece PDF'ye yığılmış slaytlardan ibarettir.
Son Sözler
Yukarıdaki kuralların hiçbiri bana ait değil.
On yıldır tasarımcıyım, UI, etkileşim ve AI efektleri yapıyorum; bunlar aslında sektörün genel geçer bilgileri.
Sadece hepsini tek tek SKILL.md ve checklist.md dosyasına yazdım, böylece AI benim için yürütebilsin.
Başka bir deyişle, bu Skill, on yıllık estetik birikimimin sıkıştırılmış bir paketidir.
Daha önce, düzgün bir PPT yapmak için iki gün harcamam gerekiyordu; ızgaraları elle ayarlamak, yazı tipi boyutlarını seçmek ve renk değerlerini almak için.
Şimdi, sadece malzemeleri AI'ya atıyorum, bu kurallara göre birleştiriyor ve ben sadece kontrol ediyorum.
Bu yüzden, açık kaynak yapmaya cesaret ediyorum.
Kurallar bana özel değildi; Monocle tasarımcıları benden on yıllar önce kullanıyordu. Ben sadece onları 2026 HTML'sine kopyaladım.
Skill zaten GitHub'da: github.com/op7418/guizang-ppt-skill
README'de "AI için kurulum istemi" bulunur. Claude Code'unuza veya başka bir AI Agent'a kopyalayıp yapıştırın, kurulumu otomatik olarak tamamlayacaktır. Kurulduktan sonra, tetiklemek için "Bana bir dergi tarzı PPT yap" deyin.
Ayrıca Bloome Agent içinde de kullanabilirsiniz, şu anda ücretsizdir:
https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G
Bu içeriği faydalı bulduysanız, lütfen beğenin veya ihtiyacı olan arkadaşlarınızla paylaşın.
Ayrıca bu Skill ile yaptığınız PPT'leri yorumlarda paylaşabilirsiniz.
