Windsurf ve Vibe Coding ile AI Sunumu Nasıl Oluşturulur

Sürekli yenilikçi araçlar peşinde koşan bir teknoloji meraklısı olarak, yakın zamanda FlowHunt.io AI iş akışları üzerine 6 saatlik bir eğitim oturumu için profesyonel bir PowerPoint sunumu oluşturma projesine başladım. Bu deneyimi benzersiz kılan şey, Windsurf’u Claude 4 Sonnet LLM ile birleştirerek pptxgenjs kütüphanesini kullanıp sadece tek bir komut ve iyi yapılandırılmış bir taslak ile 24 slayttan oluşan bir sunum oluşturmamdı. İşte her şeyin nasıl bir araya geldiği.

Hedef: Uygulamalı, Görsel Bir Eğitim Sunumu

Amacım, FlowHunt.io üzerinde AI iş akışları oluşturma konusunda 6 saatlik bir atölye için ilgi çekici, etkileşimli bir sunum hazırlamaktı. Sunumun:

• Uygulamalı ve görsel olması, kısa açıklamaları pratik gösterimlerin takip etmesi
• Finans, İK, uyumluluk ve proje yönetimi gibi gerçek dünya kullanım senaryolarını içermesi
• Öğrenmeyi pekiştirmek için her 30 dakikada bir görevler veya quiz gibi etkileşimli öğeler barındırması
• Temel iş akışlarından ileri düzey modüler süreç bileşenlerine (MPC’ler) kadar her şeyi kapsayan yapılandırılmış iki oturumdan oluşması gerekiyordu

Netlik sağlamak için önce Claude 4 Sonnet’i kullanarak sunum için ayrıntılı bir taslak oluşturdum; bu taslak, iki adet 3 saatlik oturuma ve belirli konu ile zamanlara bölündü. Taslak, hem slayt içerikleri hem de yapısı için projenin temelini oluşturdu.

Araç: pptxgenjs ve Claude 4 Sonnet Destekli Windsurf

pptxgenjs kütüphanesini seçtim çünkü kod ile programlı olarak PowerPoint sunumları oluşturmada güçlü bir JavaScript aracı. Slayt oluşturma, metin, görsel ve biçimlendirme ekleme yeteneği sayesinde otomasyon için idealdi. Bu vizyonu hayata geçirmek için, Claude 4 Sonnet tarafından desteklenen Windsurf’u kullanıp taslağıma göre kodu yazdırdım ve sunumu ürettim.

Süreç, şu komut ile kütüphaneyi kurmakla başladı:

npm install pptxgenjs

Bu komut, saniyeler içinde kütüphaneyi ve bağımlılıklarını yükleyerek sunum oluşturmak için zemin hazırladı.

Komut: Tek Bir Talimat, Kapsamlı Bir Çıktı

Kütüphane kurulduktan sonra, Windsurf üzerinden Claude 4 Sonnet için ayrıntılı tek bir komut oluşturdum. Komut şunları içeriyordu:

• pptxgenjs için kurulum komutu
• 6 saatlik eğitim oturumunun tam taslağı, iki slayt paketi halinde (Oturum 1 ve Oturum 2)
• Uygulamalı öğrenme, görsel unsurlar ve gerçek vakalar vurgusunu içeren sunum kriterleri
• Her modül için tanıtım, canlı demo, kullanım vakası ve final challenge slaytlarını oluşturma talimatları

Komutun sadeleştirilmiş yapısı şöyleydi:

npm i pptxgenjs kur. pptxgenjs kütüphanesini kullanarak 6 saatlik FlowHunt.io AI iş akışları eğitimi için bir sunum oluştur. Şu taslağı takip et: [ayrıntılı oturum dökümü]. Sunumun uygulamalı, görsel, gerçek dünya kullanım senaryaları (finans, İK, uyumluluk) içermesini ve her 30 dakikada bir etkileşimli görevler olmasını sağla. Şu modüller için slaytlar oluştur: Hoşgeldiniz, FlowHunt Tanıtımı, İş Akışı Kanvası, Canlı Demo, Araç Bağlantıları, İterasyon, Kullanım Vaka, MPC’ler, Mantık, API’ler, İzleme, Uyumluluk, Dağıtım, Final Challenge ve Soru&Cevap.

Bu komut ile Claude 4 Sonnet, pptxgenjs kullanan ve 24 slayttan oluşan bir sunum oluşturan eksiksiz bir JavaScript dosyası (flowhunt-training.js) üretti. Script, slayt düzenlerinden FlowHunt renk düzeniyle tutarlı markalamaya kadar her detayı ele aldı.

Süreç: Koddan Slaytlara

Oluşan scripti çalıştırmak oldukça kolaydı. Şu komutu girdim:

node flowhunt-training.js

Script sorunsuz çalıştı, ancak birkaç geçersiz renk kodu uyarısı ile karşılaştım (“70AD4720 geçerli bir şema rengi veya hex RGB değil! ‘000000’ yerine kullanıldı”). Bunlar, çıktıyı etkilemeyen küçük sorunlardı; kütüphane siyah olarak varsayılanı kullandı. Çok kısa sürede, script 24 profesyonel biçimde hazırlanmış slayttan oluşan FlowHunt-AI-Workflows-Training.pptx adlı dosyayı üretti.

Sunum otomasyonun bir başyapıtıydı:

Oturum 1 (10 slayt): FlowHunt.io temelleri, iş akışı oluşturmanın canlı demosu, araç bağlantıları (CSV, Google Sheets), iterasyon ipuçları, finans (bütçe doğrulama) ve İK (otomatik işe alım botu) için kullanım senaryoları ele alındı. Ayrıca basit bir LEGO benzetmesiyle MPC’ler tanıtıldı.

Oturum 2 (8 slayt): Gelişmiş konulara odaklandı: MPC oluşturma, koşullu mantık, API entegrasyonları (Google Search, CRM, Slack), yönetişim, uyumluluk botları ve dağıtım. Mini hackathon tarzı bir görev için final challenge slaytıyla sona erdi.

Ek Slaytlar: Hoşgeldiniz, gündem, mola, Soru&Cevap ve teşekkür slaytları ile sunumun akışı profesyonelce tamamlandı.

Slaytlarda tutarlı marka renkleri, net başlıklar ve GIF ya da video için yer tutucularla görsel unsurlar yer aldı. Adım adım demo yönergeleri ve grup görevleri gibi etkileşimli unsurlar akıcı biçimde entegre edildi.

Sonuç: Kullanıma Hazır Bir Sunum

Nihai çıktı, herhangi bir uyumlu yazılımda açılmaya hazır, 239KB’lık bir PowerPoint dosyasıydı. Sunumun yanında, Claude 4 Sonnet projeyi belgeleyen, kullanım talimatları ve sunumun öne çıkan noktalarını içeren bir README.md dosyası da oluşturdu. Sonuç; kriterlerime tam olarak uyan, profesyonel, etkileşimli ve görsel açıdan zengin bir sunum oldu.

Yansımalar: AI Tabanlı Geliştirmenin Gücü

Bu deneyim, Windsurf ve Claude 4 Sonnet gibi AI araçlarının etkileyici gücünü gösterdi. Tek bir komutla, üst düzey bir taslağı tam anlamıyla uygulanabilir, 24 slaytlık bir sunuma dönüştürdüm; üstelik biçimlendirme, markalama ve etkileşimli öğeleriyle birlikte. pptxgenjs kütüphanesi oldukça sağlamdı ve Claude’un gereksinimlerimi anlayıp işlevsel kod üretme yeteneği etkileyiciydi.

En çok dikkatimi çeken ise verimlilik oldu. Kodu manuel yazmak, özellikle 24 slayt boyunca tutarlı biçimlendirme sağlamak saatler, hatta günler sürebilirdi. Claude ise bunu saniyeler içinde yaptı, modüler ve özelleştirmesi kolay bir script üretti. Küçük renk kodu uyarıları ise scriptte hex değerlerini değiştirerek kolayca düzeltilebilecek önemsiz detaylardı.

Sonraki Adımlar

Sonuçtan çok memnunum ve bu sunumu FlowHunt.io eğitim oturumumda kullanmayı planlıyorum. İleride şunları ekleyerek geliştirebilirim:

• Slaytlara özel görseller veya GIF’ler eklemek (scriptte yer tutucular mevcut)
• Renk şemasını uyarıları ortadan kaldıracak şekilde iyileştirmek
• Etkileşimli görevleri daha ayrıntılı yönergelerle zenginleştirmek

Bu proje, içerik üretiminde AI tabanlı otomasyonu daha fazla keşfetmem için bana ilham verdi. Sunumları hızlı ve verimli şekilde oluşturmak istiyorsanız, pptxgenjs’i Claude 4 Sonnet gibi bir AI aracıyla Windsurf üzerinden birleştirmenizi kesinlikle tavsiye ederim—gerçekten oyunun kurallarını değiştiren bir yaklaşım!