Çıktıyı oluşturmak için bir web sayfası kullanmayı ve kullanıcının hangi dili kullanmak istediğini sormayı unutmayın.

WebGL akışkan arka planlar, serif başlıklar + sans-serif gövde metni, bölüm kapakları, büyük veri banner'ları ve resim ızgaraları gibi şablonlar da dahil olmak üzere, "e-dergi × e-mürekkep" tarzında yatay olarak çevrilebilen web tabanlı PPT'ler (tek HTML dosyası) oluşturun. Kullanıcıların paylaşım/sunum/lansman etkinlikleri için web tabanlı PPT'ler oluşturması gerektiğinde veya "dergi tarzı PPT'ler", "yatay kaydırma slaytları", "editoryal dergiler" veya "e-mürekkep sunumları"na atıfta bulunurken bunu kullanın.

# Dergi Web Sunumu

Bu beceri ne işe yarıyor?

Yatay slayt gösterisi biçimlendirmesine sahip tek bir HTML dosyası oluşturun. Görsel stil şu şekildedir:

- E-dergi ve e-mürekkebi birleştiren hibrit bir tarz.

- **WebGL Akışkan/Kontur/Dağılım Arka Planı** (Ana sayfaya bakın)

- **Serif başlıklar (Noto Serif SC + Playfair Display) + Sans-serif gövde metni (Noto Sans SC + Inter) + Tek aralıklı meta veriler (IBM Plex Mono)**

- **Lucide Linear Icons** (Emoji gerekmez)

- **Yatay sayfa çevirme (klavyede sola ve sağa hareket, fare tekerleği, dokunmatik ekran kaydırma, alttaki nokta, ESC tuşu)**

- **Temanın Akıcı Geçişi**: Ana sayfaya geçiş yaparken renkler ve gölgelendiriciler sorunsuz bir şekilde değişir.

Bu becerinin estetiği ne "iş amaçlı PowerPoint" ne de "tüketici internet arayüzü" gibi; üzerine kod yapıştırılmış bir *Monocle* dergisi gibi.

## Ne zaman kullanılır

**Uygun senaryolar:**

- Çevrimdışı paylaşım oturumları / Sektör konuşmaları / Özel toplantılar

- Yapay Zeka Yeni Ürün Lansmanı/Tanıtım Günü

- Güçlü bir kişisel üsluba sahip bir konuşma

- Sayfa çevirme araçlarına gerek kalmadan tek seferde tamamlanabilen, web tabanlı bir slayt sunumuna ihtiyacımız var.

**Uygunsuz senaryolar:**

- Büyük tablo verileri ve üst üste bindirilmiş grafikler (standart PowerPoint sunumları kullanılarak)

- Eğitim materyalleri (yetersiz bilgi yoğunluğu)

- Birden fazla kişinin ortak düzenlemesini gerektirir (bu statik HTML'dir)

### Adım 1 · Gereksinimleri Belirleyin (**Başlamadan önce şart**)

Kullanıcı zaten eksiksiz bir taslak ve görseller sağlamışsa, 2. adıma geçebilirsiniz.

Kullanıcı yalnızca bir konu veya belirsiz bir fikir verirse, başlamadan önce bunu bu 6 soruyla tek tek eşleştirin. Tahminlere dayanarak slayt yazmaya başlamayın; yapı yanlış olduğunda, daha sonraki revizyonlar çok maliyetli olur. Sorular sorarken askUserQuestion aracını kullanabilirsiniz.

#### 6 Açıklama Sorusu

| # | Soru | Neden soruluyor? |

|---|------|-----------|

| 1 | **Hedef kitle kim? Paylaşım senaryosu nedir?** (Sektör uzmanları/İşletme lansmanı/Tanıtım günü/Özel toplantı) | Dil stilini ve derinliğini belirler |

| 2 | **Paylaşım Süresi?** | 15 dakika ≈ 10 sayfa, 30 dakika ≈ 20 sayfa, 45 dakika ≈ 25-30 sayfa |

| 3 | **Orijinal materyalleriniz var mı?** (Belgeler/Veriler/Eski PPT'ler/Makale Bağlantıları) | Materyalleriniz varsa kullanın; yoksa, onlardan başka bir şey oluşturun. |

| 4 | **Resim var mı? Nereye yerleştirilmeliler?** | Aşağıdaki "Resim Kuralları" bölümüne bakın |

| 5 | **Hangi tema rengini istiyorsunuz?** | @themes.md adresine bakın, 5 ön ayardan birini seçin |

| 6 | **Kesin kısıtlamalar var mı?** (XX verisi mutlaka dahil edilmeli / YY verisi görünemez) | Yeniden çalışma gerektirmemek için |

#### Taslak Yardımı (kullanıcının taslağı yoksa)

"Anlatı akışı" şablonunu kullanarak çerçeveyi oluşturun, ardından içeriği doldurun:

```

Giriş → Sayfa 1: İnsanların dikkatini çekmek için bir zıtlık/soru/somut veri sunun.

Giriş (Bağlam) → Sayfa 1-2: Arka planı açıklayın / Kim olduğunuzu / Neden bu konuda konuştuğunuzu anlatın

Ana içerik (Çekirdek) → Sayfa 3-5: Çekirdek içerik, 4/5/6/9/10 sayfalarındaki düzenlerle serpiştirilmiştir.

Shift → Sayfa 1: Beklentileri Kırmak / Yeni Bir Bakış Açısı Sunmak

Özet → Sayfa 1-2: Önemli Alıntılar / Gerilim Dolu Sorular / Eylem Önerileri

```

Anlatım akışı + sayfa numarası planlaması + tema ritmi tablosu (bkz. @layouts.md ), 2. adıma geçmeden önce **üç tabloyu da hizalayın**.

Sonraki yinelemeleri kolaylaştırmak için taslağı `proje kaydı` veya `taslak-v1` olarak kaydetmeniz önerilir.

#### Görsel Kuralları (Kullanıcıları Bilgilendirme)

İşleme devam etmeden önce kullanıcıya aşağıdakileri açıklayın:

- **Resim Konumu**: Panodaki hangi resim veya yüklenen hangi resim?

- **Görsel yoksa ne olacak?**: Kullanıcının düzenine uyum sağlamak için, öncelikle yer tutucu renk blokları kullanarak yapıyı oluşturabilir ve daha sonra görseller ekleyebilirsiniz; ancak, görsel efektin görseller olmadan doğrulanamayacağını düzen 4/5/10 ve diğer karışık metin ve görsel sayfalarına bildirmeniz gerekir.

### Adım 2 · Referans Şablonu

@template.txt, **eksiksiz ve işlevsel** bir HTML dosyasıdır; CSS, WebGL gölgelendiricileri, sayfalama JS'si ve yazı tipi/simge CDN'si önceden ayarlanmıştır; yalnızca `<main id="deck">` etiketi 3 örnek slayt (kapak, bölüm kapağı ve boş doldurma sayfası) içerir.

#### 2.1 · Değiştirilmesi gereken yer tutucular (**Kolayca gözden kaçabilir**)

Kopyalama işleminden hemen sonra aşağıdaki yer tutucuları değiştirin; aksi takdirde, tarayıcı sekmelerinizde "[Gerekli] PPT başlığıyla değiştirin" şeklinde garip bir metin görüntülenecektir:

| Konum | Orijinal | Değiştirilmesi gerekiyor |

|------|------|--------|

| `` | `[Gerekli] PPT başlığıyla değiştirin · Sunum Başlığı` | Gerçek sunum başlığı (ör. `Yeni Bir Çalışma Şekli · Luke Wroblewski`) |

#### 2.2 · Tema Rengini Seçin (5 ön ayar · Özel renklere izin verilmiyor)

Bu özellik **yalnızca özenle seçilmiş 5 ön ayardan seçim yapılmasına izin verir** ve kullanıcı tanımlı onaltılık değerleri kabul etmez; uyumsuz renkler görüntüyü anında çirkin gösterir; estetiği korumak özgürlük vermekten daha önemlidir.

| # | Tema | Uygunluk |

|---|------|------|

| 1 | 🖋 Klasik Mürekkep | Genel/Ticari Yayın/Emin değilseniz Varsayılan |

| 2 | 🌊 İndigo Porselen | Teknoloji/Araştırma/Veri/Teknoloji Tanıtım Konferansı |

| 3 | 🌿 Orman Mürekkebi | Doğa/Sürdürülebilirlik/Kültür/Kurgusal Olmayan Eserler |

| 4 | 🍂 Kraft Kağıdı | Nostalji/Beşeri Bilimler/Edebiyat/Bağımsız Dergi |

| 5 | 🌙 Kum Tepeleri | Sanat/Tasarım/Yaratıcılık/Galeri |

**işletmek**:

1. Temaya uygun bir içerik seti önerin veya kullanıcıya doğrudan hangi seti seçmek istediğini sorun.

2. @themes.md dosyasını açın ve ilgili temaya ait `:root` bloğunu bulun.

3. @template.txt dosyasının başındaki `:root{` bloğu içindeki "tema rengi" olarak işaretlenmiş satırların **tamamen değiştirilmesi** (`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`).

4. Diğer tüm CSS kodları `var(--...)` kullanır ve başka bir değişiklik gerektirmez.

**Kesin kurallar**:

- Her deste için yalnızca bir tema kullanın; renk şemasını yarıda değiştirmeyin.

- Kullanıcı tarafından sağlanan rastgele onaltılık değerleri kabul etmeyin; kibarca reddedin ve seçim için 5 seçenek gösterin.

- Farklı mürekkep türlerini bir arada kullanmayın (örneğin, Ink Classic için aynı mürekkebi, Dune için aynı kağıdı kullanmak gibi) - tamamen uyumsuz görünecektir.

### Adım 3 · İçeriği doldurun

#### 3.0 · Ön Kontrol: Sınıf adları @template.txt dosyasında tanımlanmalıdır (**En Önemli**)

Bu, tüm üretim sorunlarının kökenidir. `@layouts.md` dosyasının iskeleti birçok sınıf adı kullanır (`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5`, vb.). `assets/template.html` dosyasının `<style>` bölümünde karşılık gelen bir tanım yoksa, tarayıcı varsayılan stile geri döner; başlıklar sans-serif olur, veri kartları birbirine sıkışır, işlem hatları tek bir satıra dönüşür ve resimler sayfanın altına yığılır.

**Herhangi bir slayt kodu yazmadan önce:**

1. **Öncelikle, @template.txt dosyasını okuyun** (en azından `<style>` bloğunun sonuna kadar).

2. Kullanmak istediğiniz her sınıfın `<style>` etiketinde mevcut olduğundan emin olmak için **@layouts.md dosyasındaki Ön kontrol listesine bakın.**

3. Eğer bir sınıf eksikse: **@template.txt dosyasının `<style>` bölümüne ekleyin**, her slaytta satır içi olarak yeniden yazmayın.

4. **@template.txt, sınıf adlarının tek kaynağıdır**—yeni sınıf adları oluşturmayın; bunları özelleştirmeniz gerekiyorsa, satır içi olarak `style="..."` kullanın.

Genellikle gözden kaçan dersler (varlıkları önceden teyit edilmelidir):

`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `meta-row` / `stat-card` / `stat-label` / `stat-nb` / `stat-unit` / `stat-note` / `pipeline-section` / `pipeline-label` / `pipeline` / `step` / `step-nb` / `step-title` / `step-desc` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-8-4` / `grid-3-3` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `krom` / `ayak`

#### 3.0.5 · Tema Hızının Planlanması (**Sınıf ön tespiti kadar önemlidir**)

Bir düzen seçmeden önce, her sayfa için tema sınıfını (`hero dark` / `hero light` / `light` / `dark`) listelemeli ve belge veya taslakta hizalamalısınız. Ayrıntılı kurallar için @layouts.md ile başlayan "Tema Ritmi Planlaması" bölümüne bakın.

**Zorunlu Kurallar**:

- Her sayfa bölümünde mutlaka `ışık`, `karanlık`, `ışıklı kahraman` veya `karanlık kahraman` ifadelerinden biri bulunmalıdır; sadece `kahraman` yazmayın.

- Aynı konu hakkında art arda 3'ten fazla sayfa = görsel yorgunluk, izin verilmez.

- 8 veya daha fazla sayfada en az bir "karanlık kahraman" ve en az bir "aydınlık kahraman" bulunmalıdır.

- Deste yalnızca "açık" metin sayfalarından oluşamaz; nefes alma alanı yaratmak için "koyu" metin sayfaları da içermelidir.

- Her 3-4 sayfada bir kahraman sayfası ekleyin (kapak/arka kapak/soru/büyük alıntı).

**Oluşturma sonrası öz denetim: `grep 'class="slide' index.html` komutu tüm konuları listeler; teslimattan önce makul bir hızın manuel olarak doğrulanması gereklidir.**

#### 3.1 · Bir Yerleşim Planı Seçme

**Slaytları sıfırdan yazmayın.** 10 adet hazır düzen iskeleti içeren ve her biri eksiksiz ve yapıştırılabilir bir `<section>` kod bloğu olan `@layouts.md` dosyasını açın:

| Yerleşim Planı | Amaç |

|---|---|

| 1. Açılış Kapağı | Sayfa 1 |

| 2. Bölüm Kapağı | Her Perdenin Başlangıcı |

3. Veri Odaklı Posterler | Somut Verilerin Sunumu |

| 4. Sol Metin, Sağ Resim (Alıntı + Resim) | Kimlik Zıtlığı / Hikaye |

| 5. Görüntü Izgarası | Çoklu Görüntü Karşılaştırması / Ekran Görüntüsü Kanıtı |

6. İki Aşamalı | İş Akışı |

| 7. Gerilim sona eriyor/Soru sayfası | Bölümlerin sonu/Final |

8. Büyük Alıntı | Serifler/Önemli Noktalar |

| 9. Paralel Karşılaştırma (Önce / Sonra) | Eski Mod vs. Yeni Mod |

| 10. Görüntü ve Metin Kombinasyonu | Bilgi Yoğun Görüntü ve Metin Sayfaları |

İlgili şablonu seçin, yapıştırın ve metin ile resim yollarını değiştirin. **Öncelikle 3.0 ön kontrolünü tamamlayın.**

#### 3.2 Görüntü En Boy Oranı Standartları

Her zaman **standart en boy oranını** kullanın, asla orijinal görüntünün alışılmadık en boy oranlarını (örneğin `2592/1798`) kullanmayın:

| Senaryolar | Öneri Oranı |

|------|---------|

| Solda metin, sağda resim (ana resim) | 16:10 veya 4:3 + `max-height:56vh` |

| Görüntü ızgarası (çoklu görüntü karşılaştırması) | **Sabit `height:26vh`**, en boy oranına gerek yok |

| Solda küçük resim + sağda metin | 1:1 veya 3:2 |

| Tam ekran ana görsel | 16:9 + `max-height:64vh` |

| Karışık metin ve görsel düzeninde küçük illüstrasyonlar | 3:2 veya 3:4 |

**Resimlerde asla `align-self:end` kullanmayın**—resimler hücrenin altına kayacak ve tarayıcı araç çubuğu tarafından gizlenecektir. Resimleri üstte tutmak için `align-items:start` (şablonda önceden tanımlanmıştır) özelliğine sahip bir ızgara kapsayıcı kullanın; resimleri sol sütunda altta tutmak için ise `justify-content:space-between` özelliğine sahip bir esnek sütun kullanın.

Bileşen detayları (yazı tipleri, renkler, ızgaralar, simgeler, açıklama kutuları, istatistik kartları vb.) @components.md dosyasında yer almaktadır.

### Adım 4 · Kontrol listesine göre kendi kendini değerlendirme

Kontrol listesini oluşturduktan sonra, @checklist.md dosyasını açıp her bir maddeyi talimatlara göre kontrol ettiğinizden emin olun. Bu dosya, gerçek yineleme sürecinde karşılaşılan tüm tuzakları özetler ve tüm P0 seviyesi sorunları (emojiler, aşırı resim kullanımı, başlık satır sonları, yazı tipi bölünmesi) çözülmelidir.

Özellikle dikkat edilmesi gereken birkaç nokta:

1. **Ana başlıklar serif yazı tipinde olmalıdır**—Eğer sans-serif olarak görüntüleniyorsa, 3.0 Adım ön kontrolünün başarısız olma olasılığı %99'dur ve template.html dosyasında `h-hero` sınıfı eksiktir.

2. **Resim ızgarasında yalnızca `height:Nvh` kullanın, `aspect-ratio` kullanmayın (ızgaranın bozulmasına neden olur).**

3. **Görseller sayfanın en altına itilmemelidir** — `align-self:end` kullanmayın, bunun yerine grid + `align-items:start` kullanın (bkz. Adım 3.2)

4. **Görüntüler standart en boy oranlarında olmalıdır** (16:10 / 4:3 / 3:2 / 1:1 / 16:9). Alışılmadık en boy oranlarına sahip görüntüleri kopyalamayın.

5. **Çince ana başlıklar en fazla 5 karakterden oluşmalı ve `nowrap` (satır başına 1 karakterden kaçınma) kullanılmalıdır.**

6. **Emoji yerine Lucide kullanın.**

7. **Başlıklar için serifli, gövde metni için sans-serifli ve meta veriler için sabit genişlikli yazı tipi kullanın.**

### Adım 5 · Yineleme

Kullanıcı geri bildirimlerine göre değiştirildi; şablonun CSS'si artık yüksek oranda parametrelendirilmiş olup, ayarlamaların %90'ı satır içi stillerde (font-size:Xvw / height:Yvh / spacing:Zvh) yapılan değişikliklerden oluşmaktadır.

## Temel Tasarım Prensipleri (Felsefe)

Bu ilkeler, tek kişilik bir şirket için PowerPoint sunumları oluşturma sürecinin beş yinelemesinin sonucudur. Bunlardan herhangi birinin ihlal edilmesi, görsel çekiciliği bozacaktır.

1. **Teknik mükemmellikten ziyade ölçülülük** — WebGL arka planları yalnızca ana sayfalarda görünür ve normal sayfalarda neredeyse görünmezdir.

2. **Dekorasyondan ziyade yapı** — Gölge yok, havada duran kartlar yok, dolgu kutuları yok; tüm bilgiler **büyük yazı tipi boyutu + yazı tipi kontrastı + ızgara aralığı** ile iletilir.

3. **İçerik hiyerarşisi yazı tipi boyutu ve yazı tipi türü ile tanımlanır** — Maksimum serif = ana başlık, orta serif = alt başlık, büyük sans-serif = giriş, küçük sans-serif = gövde, sabit genişlik = meta veri

4. **Görseller ilk vatandaştır** — Görüntünün yalnızca alt kısmını kırpın, üst ve sol/sağ kenarlarının bozulmamasına dikkat edin; ızgarayı `height:Nvh` ile sabitleyin, genişletmek için `aspect-ratio` kullanmayın.

5. **Kahraman Sayfalarıyla Okuma Hızını Ayarlayın** — Kahraman ve kahraman olmayan sayfalar arasında geçiş yapmak göz yorgunluğunu önlemeye yardımcı olur.

6. **Terminoloji Tutarlılığı** — Beceriler, Çince ve İngilizce karışımı yerine yalnızca Beceriler olarak çevrilmelidir.

## Referanslar

Bu yeteneğin görsel stili şunlardan ilham almıştır:

- "Tek Kişilik Şirket: Yapay Zeka Tarafından Kapatılan Organizasyonlar" başlıklı makalenin paylaşımı (22 Nisan 2026, Sayfa 27)

- *Monocle* dergisinin sayfa düzeni

- YC Başkanı Garry Tan'ın "İnce Koşum Takımı, Gelişmiş Beceriler" başlıklı blog yazısının bir tanıtımı.

Bunlar stil belirleyici unsurlar olarak kullanılabilir.