Claude Design'dan WordPress'e: bir tasarım nasıl temaya dönüştürülür

Claude Design sana hangi çıktıyı verdi?

Claude iki tür çıktı üretir ve her biri farklı bir yoldan gider. Başlamadan önce hangisinin sende olduğunu kontrol et, çünkü dönüştürmenin ne kadar süreceğini bu belirler.

Claude'un sana verdiği	Ne olduğu	Yol
HTML artifact	Kendi içinde eksiksiz bir .html dosyası: kod, stiller ve betiklerin hepsi içinde.	Bu yazı. Zaten düz HTML, dönüştürücünün tam olarak ihtiyaç duyduğu girdi.
React artifact	Bir bileşen. Sayfa ancak JavaScript çalıştıktan sonra görünür, çevresindeki HTML ise uygulamanın içine yerleştiği boş bir öğedir.	Lovable rehberi: aynı tür girdi, aynı ek adım.

Emin değilsen dosyayı aç ve <body> içine bak. Orada başlıklarını ve paragraflarını görüyorsan elinde bir HTML artifact var ve doğru yerdesin. Gövde boş bir <div> ve bir betik etiketinden ibaretse elinde diğer tür var.

Claude Design'dan görsellerle birlikte bir klasöre dışa aktar

Girdi her zaman diskindeki bir klasördür. Canlı bir sitenin adresi desteklenen bir girdi değildir ve bu bilerek böyle. Yayınlanmış bir sayfanın kopyası yalnızca görüntülenen sonucu tutar ve kaynak dosyanın bildiklerini kaybeder.

Bu yüzden tasarımı Claude'dan dışa aktar (artifact'i indir), bir klasör oluştur ve dosyayı içine index.html olarak kaydet. Tasarım dosyanın içinde olmayan görsellere bağlantı veriyorsa onları yanına, kodun beklediği göreli konumlara koy.

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

Bir sayfa mı, daha fazlası mı?

Bir artifact bir sayfadır ve tek sayfalık bir site sorunsuz dönüştürülür. Temanın ana sayfası olur. Hakkımızda ve İletişim sayfaları olan bir site istiyorsan onları da Claude'dan iste ve her birini aynı klasöre kendi .html dosyası olarak kaydet. Dosya adları önemlidir: analiz onları okur ve blog.html veya about.html adlı bir dosyayı adından anlar.

Beş dosya veya daha azında kalırsan tüm dönüştürme ücretsiz sürüme sığar.

Claude Design tasarımını WordPress'e dönüştürmek için bilgisayarının ihtiyaçları

Daha kısa yol da senin makinende çalışır ve gereksinimler azalmaz. Tarayıcı ve geçici WordPress sonucu üretmek için değil, kontrol etmek için oradadır:

• Node 20 veya daha yenisi ve Playwright ile Pillow paketleriyle Python 3.
• Docker, docker compose komutuyla birlikte. Bilgisayarında geçici bir WordPress başlatır ve dönüştürücü temayı sen görmeden önce oraya kurar.
• php-cli, çünkü her PHP dosyası ZIP'e girmeden önce bir sözdizimi kontrolünden geçer.
• jq, curl, bash ve tar. Hedef WordPress 6.6 veya daha yeni olmalıdır.

İlk adım bunların hepsini kontrol eder. Kendi klasörlerinin içine kendi başına kurabileceklerini senin karar vermen gerekenlerden ayırır. Sen istemedikçe Docker'ı senin için kurmaz.

Claude Design'dan WordPress'e dönüştürmeyi çalıştır

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

Ardından herhangi bir yerden şunu yaz:

/html2wp:html2wp

convert ./my-site

Klasör yolu talimatın tamamıdır. Hiçbir yapılandırma dosyası yazmaz ve derleme komutu seçmezsin. Codex'te convert ./my-site with html2wp yaz. Terminalde çalışmak istemezsen aynı klasörü html2wp masaüstü uygulamasında (ekran görüntülü bir rehber) açabilirsin.

Sayfa sayısına ve bilgisayarının hızına bağlı olarak Flash yaklaşık 30 dakika, Full yaklaşık bir saat sürer. Tek sayfalık bir artifact kısa uçta kalır, ama girdi ne kadar küçük olursa olsun kontroller her zaman eksiksiz çalışır.

Senin yerine neye karar verir, neyi sorar

Bir şey üretmeden önce dosyalarını ölçer. Sayfaları listeler ve kodun hangi kısımlarının ortak, hangilerinin benzersiz olduğunu çıkarır. Tasarım belirteçlerini (design tokens), blog gibi görünen her şeyi ve hangi sayfaların tek başına durduğunu da bulur. Sonra ne yapmayı planladığını yazar ve bu plana göre dönüştürür.

Üretilmiş bir tasarım çoğu zaman iki şeyle karşılaşır:

• Her tasarım varyantı korunur. Sayfaların aynı başlığı paylaşmıyorsa birini kazanan seçip diğerlerini düzleştirmez. Bunun yerine her varyant için bir şablon parçası oluşturur ve her sayfayı gerçekten kullandığı parçaya bağlar. Farklı Claude sohbetlerinden gelen artifact'ler çoğu zaman hatırladığından daha farklıdır.
• Metnindeki süslü parantezler korunur. Ara adım JSX benzeri bir biçim kullanır. Başka türlü metnindeki bir JSON veya CSS örneği derlemeyi bozar ya da sayfada { olarak görünürdü. Dönüştürücü bunları ele alır, böylece parantezler sayfada parantez olarak kalır.

Kartlar, referanslar veya bir SSS gibi tekrarlanan gruplar, sabit kodlanmış işaretleme yerine koleksiyon olarak kaydedilir. Bu sayede onları sonradan gerçekten düzenleyebilirsin, yalnızca düzenlenebilir görünmezler.

Atlayamayacağın inceleme

Dönüştürücü her sayfayı orijinalinin yanına tek bir görüntüde koyar ve sen her birini baştan sona okursun.

Bir dönüştürmede sayfanın aşağısındaki bir bölüm eksikti ve piksel karşılaştırması yalnızca %0,4 fark gösterdi, bu yüzden kontrolden geçti. Sayısal kontroller doğaları gereği üç tür kusuru göremez. Birincisi, kusursuz görünen ama hiçbir şey yapmayan bir kontrol öğesi. İkincisi, bir şablonun geldiği tek sayfadan sabit olarak kodlanmış bir değer. Üçüncüsü, yalnızca kaydırdıktan, tıkladıktan veya bir form gönderdikten sonra ortaya çıkan her şey.

İçeriği düzenleyip düzenleyemediğini de kontrol et. Bir sayfa pikseline kadar eşleşebilir, ama yine de kimse SSS'sini veya özellik ızgarasını wp-admin'den düzenleyemeyebilir. Bu oldu ve onu hiçbir otomatik kontrol değil, bu inceleme yakaladı.

Claude Design'dan WordPress'e dönüştürmeden sonra düzenleme: tema, Visual Edit veya sayfa oluşturucu

Klasörüne iki dosya gelir: tema ZIP'i ve yanında CONVERSION-REPORT.md. Rapor dönüştürmenin neyi kapsadığını, incelemenin ne bulduğunu ve hâlâ açık olanları listeler. Temayı her WordPress teması gibi kurarsın (Görünüm → Temalar → Yeni ekle → Tema yükle).

Tema tek başına ayakta durur. Sayfalar, blog, formlar, menüler, SEO ve yönlendirmelerin hepsi kendi kodudur. Çalışmak için hiçbir eklentiye ihtiyaç duymaz ve sunucumuzla asla iletişim kurmaz. Blog yazıları blok editöründe yazılır, sayfa metinleri ise HTML'de kalır. Sayfaları kod olmadan düzenlemek için iki seçenek var: Visual Edit ve bir sayfa oluşturucu.

Tasarım yalnızca bir başlangıç noktasıysa sayfa oluşturucu iyi bir seçimdir. Teslim ettiğin şey tasarımın kendisiyse kötü bir seçimdir. Üretilen tasarım WordPress'te korunsun diye dönüştürüyorsan, onu bileşenler olarak yeniden kurmak başlama nedenini ortadan kaldırır. Ama düzeni gelecek çeyrekte başka biri baştan yapacaksa, onun Elementor deneyimi sadık bir tasarımdan daha değerli olabilir.

Visual Edit'i seçersen Lite mı Pro mu

Yapay zekâ sohbeti senin API anahtarınla çalışır. Sana token satmayız, maliyetlerini sağlayıcınla kendin ödersin.

Fiyat ve dönüştürmenin neleri reddettiği

Anahtarsız ve kayıtsız, herkes için ücretsiz: her biri beş sayfalık üç dönüştürme ve toplam beş yeniden çalıştırma. İki sayı da IP adresi başına sayılır, yani tek adresi olan bir ofis tek bir hak alır. Ücretsiz sürüm aracı denemek, kişisel siteler ve ticari olmayan işler içindir.

Pro lisans sayfa sınırını kaldırır, dönüştürmeleri ve yeniden çalıştırmaları sınırsız yapar. Bir mağazayı WooCommerce'e dönüştüren adımın da kilidini açar. Bu adım asla ücretsiz değildir: uygulama, mağazası olan bir sitenin ücretsiz dönüştürmesini yarım yapmak yerine baştan reddeder. Pro'yu fiyatlandırma sayfasından aylık veya yıllık satın alabilirsin, beta boyunca ilk ödemede %30 indirim var.

Bir uyarı: bu bir beta. Kontroller farkların çoğunu yakalar, hepsini değil. Her sayfayı orijinalinin yanında okumanın isteğe bağlı bir cila değil, sürecin parçası olmasının nedeni bu. Ona güvenmeden önce kendine ait bir şeyi ücretsiz dönüştürmen gerekmesinin nedeni de bu.

Tüm sürecin adım adım rehberi html2wp uygulamasının dokümantasyonunda. Artifact'in React ise o yolu Lovable'dan WordPress'e rehberi anlatır.