Bugün, sağduyunuz aniden sarsılacak. Açıkçası, insanların %99'u hâlâ Claude Code ile Markdown kullanıyor. Anthropic'in Claude Code ekibinden bir içeriden öğrendiğimiz şey şu: "Bunu bırakın." Dedi ki, "Markdown yerine HTML çıktısı almak çok daha iyi."
Çünkü Claude Code'un çıktıları daha karmaşık hale geldikçe, Markdown okunması zor, anlaşılması güç ve paylaşılamaz hale geliyor.
Öte yandan, HTML ile:
- Görselleştirme yapabilirsiniz
- Renk kodlaması kullanabilirsiniz
- Sekmelerle düzenleyebilirsiniz
- Kaydırıcılar ve butonlar bile oluşturabilirsiniz
- Doğrudan tarayıcıda paylaşabilirsiniz
Yani, Claude Code'un gerçek değerini ortaya çıkarmak için sadece "ne çıktığı" değil, "hangi formatta çıktığı" da inanılmaz derecede önemli hale geliyor.
Bunu iddia ediyorum.
Claude Code döneminde en uygun çözüm sadece Markdown değil, HTML-öncelikli yaklaşımdır.
Aslında, bu makale yayınlanmadan önce bile, ClaudeCodeStudio bu yöntemi kullanarak slayt materyallerinin tek seferde bu kalitede çıkmasını sağlıyordu 👇
Bu makaleyi sonuna kadar okursanız, bunun neden mümkün olduğunu anlayacağınızı düşünüyorum, o yüzden lütfen okuyun!
Bu arada, hiç böyle bir deneyim yaşadınız mı?
- Claude Code'a bir plan yazdırdınız ama 100 satırı geçince ilginizi kaybettiniz.
- Takımınızla bir Markdown şartname paylaştınız ama kimse sonuna kadar okumadı.
- Bir ASCII sanatı diyagramına baktınız ve "...Bu ne?" diye düşündünüz.
- Bilgileri renkler veya düzenlerle organize etmek istediniz ama Markdown'da ifade edemediniz.
- Bir planı Slack'e yapıştırdınız ama bir ek dosyası olarak kaybolup gitti.
Bunların hepsi bir "çıktı formatı sorunu"ydu.
Claude Code geliştirme ekibinin bir üyesi olan Thariq (@trq212) tarafından yazılan "Claude Code Kullanmak: HTML'nin Mantıksız Etkinliği" başlıklı bir makale şu anda X'te 11 milyondan fazla görüntülenme ile viral oluyor 😳
Thariq, Anthropic'teki Claude Code ekibinin bir üyesi ve YC W20'den bir mühendis. Yani, her gün Claude Code'u ön saflarda kullanan birinin "Markdown kullanmayı bıraktım" dediği bir makale.
Bu sefer, içeriği belirli prompt örnekleri de dahil olmak üzere anlaşılır bir şekilde açıklayacağım 👇
Orijinal gönderi burada: https://x.com/trq212/status/2052809885763747935
■ Markdown'un sorunu nedir?
Markdown, yıllardır AI ajanları ve insanlar arasında bir iletişim aracı olarak kullanılıyor. Basit, her yerde kullanılabilir ve bir dereceye kadar zengin metin yazılabilir. Claude Code da elbette varsayılan olarak Markdown'da çıktı veriyor.
Ama dürüst olmak gerekirse, bu size tanıdık gelmiyor mu?
Claude Code daha karmaşık görevleri üstlenebilir hale geldikçe, ürettiği planlar ve şartnameler uzuyor. 100 satırı aşan bir Markdown dosyasını gerçekten sonuna kadar okuyor musunuz?
Thariq makalesinde şöyle yazıyor:
"Yüz satırdan fazla bir markdown dosyasını okumayı zor buluyorum."
Üstelik, bugünlerde dosyaları kendimiz elle düzenleme sıklığımız da azaldı. Bunları şartnameler için referans veya beyin fırtınası çıktısı olarak kullanıyoruz. Düzenleme yaparken bile Claude'a "bunu düzelt" diyoruz. Yani Markdown'ın en büyük avantajı olan "insanların elle düzenlemesinin kolay olması" artık anlamlı değil.
Bu, birçok Claude Code kullanıcısının bilinçsizce hissettiği bir sorunu mükemmel bir şekilde dile getiriyor.
■ HTML seçeneği neden "mantıksız derecede etkili"
Thariq'in önerdiği şey, Claude Code'un çıktı formatını Markdown'dan HTML'ye değiştirmek.
"HTML web sayfası yapmak için değil mi?" diye düşünebilirsiniz. Ancak HTML'nin ifade gücü Markdown ile kıyaslanamaz.
HTML ile özel olarak neler ifade edilebileceğine bakalım:
- Tablolar kullanarak yapılandırılmış veri
- CSS kullanarak tasarım ve renklendirme
- SVG kullanarak çizimler ve diyagramlar
- Script etiketleri kullanarak kod parçacıkları
- JavaScript ve CSS kullanarak etkileşim
- SVG ve HTML'yi birleştirerek iş akışı diyagramları
- Mutlak konumlandırma veya canvas kullanarak mekansal veri
- Görsel etiketleri kullanarak görsel yerleştirme
Thariq şunu iddia ediyor:
"Claude'un okuyabileceği ve HTML ile oldukça verimli bir şekilde temsil edemeyeceğiniz neredeyse hiçbir bilgi kümesi olmadığını söyleyebilirim."
Claude'a bir ASCII diyagramı çizdirmeye veya Unicode karakterlerle renk ifade etmeye çalışan herkes bu sözlerin ağırlığını anlayacaktır. "Bir Ferrari'yi bakkala götürmek" gibi bir verimsizlikten kurtulacaksınız.
■ Bilgi yoğunluğu ezici bir şekilde farklı
HTML'nin en büyük gücü "bilgi yoğunluğu"dur.
Aynı içerik Markdown ve HTML ile yazıldığında, HTML çok daha fazla bilgiyi çok daha okunabilir bir şekilde iletebilir. Sekmelerle geçiş yapabilir, renk kodlayabilir veya diyagramlar yerleştirebilirsiniz.
100 satırlık bir Markdown'u okumak istemeseniz bile, sekmeler ve renklerle düzenlenmiş aynı miktardaki bilgi HTML ile kafanıza doğrudan yerleşecektir.
Bu sadece bir "görünüş meselesi" değil. Okunmayan bir şartname, var olmayan bir şartnameyle aynıdır. Okunacak bir formatta çıktı almak, doğrudan işin kalitesiyle bağlantılıdır.
■ Paylaşım kolaylığı
Bir Markdown dosyasını birisiyle paylaşmaya çalıştığınızda, genellikle şöyle olur:
- Slack'e dosya olarak ekleyin → Kimse açmaz
- E-postaya ekleyin → Kimse açmaz
- GitHub'a koyun → Mühendis olmayanlar erişemez
HTML ile, sadece S3'e yükleyin ve bir link gönderin. Tarayıcısı olan herkes okuyabilir. Mobilde okunabilmesi için duyarlı (responsive) bile yapabilirsiniz.
Thariq'in orijinal metni:
"Birinin şartnamenizi, raporunuzu veya PR yazınızı gerçekten okuma olasılığı, HTML formatındaysa çok çok daha yüksektir."
Bu, pratikte ince ama kritik derecede önemli bir noktadır.
■ İki yönlü etkileşim devrimi
İşte HTML'nin gerçekten parladığı yer burası.
HTML sadece "okunacak" bir şey değildir. Üzerinde işlem yapılabilir.
Örneğin, bir tasarımı ince ayarlamak. Claude Code'a "kaydırıcılı bir HTML dosyası yap" derseniz, animasyon hızını, yumuşatmayı (easing) ve renkleri gerçek zamanlı olarak ayarlayabileceğiniz bir dosya çıktısı alırsınız. Beğendiğiniz parametreleri bulduğunuzda, sadece bir "kopyala" butonuna basar ve bunları Claude Code'a geri yapıştırırsınız.
Bu iki yönlü etkileşim, yalnızca metin promptlarıyla asla ulaşılamayacak bir hassasiyet seviyesinde ayarlamalar yapılmasını sağlar.
"Biraz daha sağa", "biraz daha hızlı" veya "bu renk değil" gibi şeyleri kelimelerle ifade etme stresinden kurtulursunuz. Sadece kaydırıcıyı hareket ettirirsiniz.
■ Özel kullanım durumları (prompt örnekleriyle)
Makalede Thariq, belirli prompt örnekleriyle HTML kullanım modellerini tanıtıyor. Bunlar o kadar pratik ki, olduğu gibi tanıtacağım.
𝟭. Tasarım, Planlama ve Keşif
Claude Code'da karmaşık görevler üzerinde çalışırken, tek bir Markdown planı yerine, birden çok HTML dosyası kullanarak bir "keşif ağı" oluşturun.
Prompt örneği:
"Karşılama ekranı için hangi yöne gideceğime karar veremiyorum. Düzen, ton ve yoğunluk açısından farklılık gösteren 6 tamamen farklı yaklaşım oluştur ve bunları karşılaştırabilmem için tek bir HTML dosyasında bir ızgaraya (grid) yerleştir. Her biri için ödünleşimleri (trade-offs) etiketlere yaz."
"Tek bir HTML dosyasında ayrıntılı bir uygulama planı oluştur. İncelemek için maketler (mockups), veri akışları ve önemli kod parçacıkları ekle. Okunabilir ve anlaşılması kolay olsun."
𝟮. Kod İncelemesi ve Anlama
GitHub'ın diff ekranından daha okunabilir kod incelemeleri oluşturabilirsiniz.
Prompt örneği:
"Bu PR'yi incelemek için bir HTML yapay ürünü (artifact) oluştur. Akış/geri basınç (streaming/backpressure) mantığına aşina değilim, bu yüzden ona odaklan. Gerçek diff'i, satır içi kenar notları ve önem derecesine göre renk kodlaması ile birlikte işle."
Thariq şöyle yazıyor: "Artık her PR'ye HTML formatında bir kod açıklaması ekliyorum."
𝟯. Tasarım ve Prototipleme
Claude Design'ın temeli HTML olduğu gibi, HTML tasarım ifadesinde son derece iyidir. Nihai uygulama React veya Swift olsa bile, önce HTML'de eskiz yapıp sonra yeniden yazma iş akışı etkilidir.
Prompt örneği:
"Yeni bir ödeme butonu için bir prototip yapmak istiyorum. Tıklandığında mora dönüp animasyon yapmalı. Her animasyon parametresini kaydırıcılar ve seçeneklerle deneyebileceğim bir HTML dosyası oluştur. İyi çalışan parametreleri kopyalamak için bir buton ekle."
𝟰. Raporlar, Araştırma ve Öğrenme
Claude Code, birden çok veri kaynağındaki bilgileri sentezleme ve bunları okunabilir bir raporda özetleme konusunda iyidir. Slack'te, kod tabanında, git geçmişinde ve internette arama yaparak liderlik raporları veya olay raporları oluşturmasını sağlayabilirsiniz.
Prompt örneği:
"Hız sınırlayıcının (rate limiter) nasıl çalıştığını anlamıyorum. İlgili kodu oku ve tek bir HTML açıklama sayfası oluştur. Bir token kovası (token bucket) akış diyagramı, açıklamalı 3-4 önemli kod parçacığı ve son olarak bir 'tuzaklar' bölümü ekle. Tek okuyuşta anlayabileceğim şekilde optimize et."
𝟱. Özel Düzenleme Arayüzleri
Benim için kişisel olarak en şok edici kullanım durumu buydu. Tek kullanımlık bir HTML düzenleyici ile bir metin kutusunda aktarılması zor olan işlemleri gerçekleştirmek.
Prompt örneği:
"30 Linear ticket'ının önceliğini yeniden düzenlemek istiyorum. Her ticket'ın sürüklenebilir bir kart olduğu ve dört sütuna yerleştirildiği bir HTML dosyası oluştur: Şimdi / Sonra / Daha Sonra / İptal. Başlangıçta tahminine göre düzenle. Nihai sırayı, her kova için bir satır gerekçeyle dışa aktarmak üzere 'Markdown Olarak Kopyala' butonu ekle."
"Bu sistem prompt'unu ayarlıyorum. Yan yana bir düzenleyici oluştur. Solda, düzenlenebilir bir prompt (değişken yuvalarını vurgulayarak) ve sağda, şablonun gerçek zamanlı olarak yansıması için üç örnek girdi olsun. Bir karakter/token sayacı ve bir kopyalama butonu ekle."
Bu fikir harika değil mi? Sadece o görev için, anında gerekli UI'ı oluşturmak. Yeniden kullanılması gerekmez. Mükemmel olması gerekmez. Ancak yalnızca metinle yapmaktan 100 kat daha verimlidir.
■ Sık sorulan sorulara yanıtlar
Makalede Thariq, HTML hakkında sık sorulan soruları da yanıtlıyor.
"Token açısından verimsiz değil mi?"
→ Markdown'dan daha fazla token kullandığı doğru. Ancak ifade gücü ve "gerçekten okunma olasılığı" göz önüne alındığında, toplamda verimlidir. Opus 4.7'nin 1 milyon token bağlamı ile artış önemsiz bir seviyededir.
"Oluşturması zaman almıyor mu?"
→ Markdown'dan 2-4 kat daha uzun sürüyor. Ancak Thariq'in kendisi sonucun buna değdiğini düşünüyor.
"Versiyon kontrolü ne olacak?"
→ Bu dürüst olmak gerekirse bir dezavantaj. HTML diff'leri Markdown'dan daha fazla gürültüye sahiptir ve incelenmesi daha zordur. Şu anda bu, HTML'nin en büyük zayıflıklarından biridir.
"Tasarım sonuçta ucuz mu görünüyor?"
→ Claude Code'un ön uç tasarım eklentisini kullanırsanız iyileşir. Ayrıca, Claude Code'a şirketinizin kod tabanını okutarak bir "tasarım sistemi HTML dosyası" oluşturmasını ve bundan sonra bunu referans olarak kullanmasını sağlarsanız, şirketinizin stiliyle birleştirebilirsiniz.
■ Neden HTML "şimdi"?
Bu makalenin yankı bulmasının nedeni zamanlamadır.
Artık Claude Code karmaşık görevleri üstlenebildiğine göre, çıktılar uzun ve yoğun. Bunu, sadece "biraz süslenmiş metin" olan bir formatta, Markdown'da almaya devam etmek artık bir darboğaz haline geldi.
Thariq'in sonucu şudur:
"HTML kullanırken kendimi hiç olmadığım kadar sürecin içinde hissediyorum."
Her şeyi Claude Code'a bırakmak yerine, çıktıyı HTML yaparak bir "insanın anlaması, yargılaması ve geri bildirim vermesi" döngüsü oluşuyor. AI ile işbirliğinin özü budur.
■ Uygulama noktalarının özeti
- Zor beceriler veya ayarlar gerekmez. Sadece Claude Code'a "bir HTML dosyası yap" deyin.
- Baştan bir beceri dosyası yapmaya çalışmayın. Önce ham promptlarla deneyin.
- İnsanların okumasını istediğiniz şeylerle başlayın: planlar, incelemeler, raporlar ve prototipler.
- Kaydırıcılar ve kopyalama butonları gibi "etkileşimliliğin" bilincinde olduğunuzda etki ikiye katlanır.
- Oluşturulan HTML'yi bir tarayıcıda açın veya paylaşmak için S3'e yükleyin.
Markdown kötü değil. Ancak Claude Code'un çıktısı bu kadar gelişmiş hale geldiğine göre, alıcının formatını da yükseltmenin zamanı geldi.
Bir dahaki sefere Claude Code'a bir plan oluşturttuğunuzda, bir satır eklemeyi deneyin: "HTML olarak yap." Farkı görünce şaşıracaksınız.
Bu makaleyi biraz olsun faydalı bulanlar için:
𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 𝗦𝘁𝘂𝗱𝗶𝗼 @ 𝗝𝗮𝗽𝗮𝗻 (@ClaudeCode_love
üç Claude Code meraklısı tarafından yönetilen bir hesaptır.
CLI kullanımı ve otomasyonu hakkında günlük olarak pratik paylaşımlar yapıyoruz.
Şu anda halka açık bir şirketle birlikte bir AI ajanı geliştiriyoruz.
Her zamanki gönderilerimiz 👇
- Claude Code ve Claude kullanarak gerçek ürün geliştirme vakaları
- Claude Code kullanımı / Vibe Coding / geliştirme trendlerini düzenleme
- Yurt dışından Claude Code hakkında en son bilgiler
Geliştirme felsefesinden tasarıma, uygulamaya ve iyileştirmeye kadar,
sadece "inşa etmeyi bitirmek" değil, çalışan bir ürünü dünyaya çıkarma noktasına kadar
yurt dışı ve birincil kaynakları özetliyoruz.
İlgileniyorsanız, takip edin ve göz atın 👀 Faydalı olacağını düşünüyorum!
