Bir anda yüksek kaliteli wireframe (tel çerçeve) oluşturmak istiyorum.
Bu sefer bu tür promptları tek bir kılavuzda derledim.
Claude'a wireframe kurallarını öğretmek size önemli miktarda zaman kazandıracak.
İçindekiler
- "Skill" kuralı olarak kaydetme
- Kopyala-yapıştır promptu
- Her kuralın açıklaması
- Çok sayfalı siteler için Claude Code kullanın
"Skill" kuralı olarak kaydetme
Promptu yapıştırdığınızda, Claude skill için bir dosya hazırlayacak. Kaydettikten sonra, o andan itibaren sadece "wireframe oluştur" diyebilirsiniz.
- Aşağıdaki "Kopyala-yapıştır promptunu" Claude'a iletin, bir ZIP dosyası oluşturulacaktır.
- Sohbette görüntülenen "Kaydet düğmesine" basın.
Bu, promptu her seferinde yapıştırma ihtiyacını ortadan kaldırır.
*Skill özelliği, Pro ve Max gibi ücretli planlarda mevcuttur.
Kopyala-yapıştır promptu
Skill kaydına (kural olarak hatırlamak için kayıt) başlamak için aşağıdakini Claude sohbetine yapıştırın.
Sohbet talimatlarını takip edin ve ✔️ Kaydet düğmesine basın.
Aşağıdaki bir wireframe promptudur. Bunu bir skill haline getirin.
HTML'de bir wireframe oluşturun. Lütfen aşağıdaki tüm kurallara uyun.
[Düzen] ・Bir bakışta anlaşılması kolay, okuma yükü hissettirmeyen bir düzen oluşturun. ・Sofistike, kentsel ve minimalist bir düzen oluşturun. ・Sayfanın tamamını kenar boşlukları ve denge için iyi kullanın. ・Yazı tipi olarak Noto Sans JP kullanın ve biraz küçük yapın.
[Tasarım] ・Renkler için yalnızca "beyaz, siyah ve gri" kullanın. ・Arka planı temel olarak beyaz tutun. Tamamen siyah sayfalar oluşturmayın. ・Gereksiz İngilizce, çizgi, gölge veya diğer süslemeleri kullanmayın. ・Diyagram veya görsel gereken kısımlar için gri kutular kullanın. ・Simgeler için "Font Awesome"ın ücretsiz sürümünü kullanın.
[Yazım] ・Her cümleyi biraz kısa tutun. Cümle başına en az bir virgül kullanın. ・Her 1-2 cümlede bir paragrafı ayırın. ・Doğal olduğu yerlerde Kanji yerine Hiragana kullanın (örneğin, 行う'yı おこなう olarak değiştirin). ・Vurgulamak istediğiniz isimler veya diyaloglar için 「」 köşeli parantezleri kullanın. ・Yazım hatalarını veya eksik karakterleri düzeltin ve tonu kibar (Desu/Masu) olarak birleştirin.
Her kuralın açıklaması
Kuralların dökümünü bilmek isteyenler için.
1. Düzen ve Tasarım
"Anlaşılması kolay bir düzen", bilgilerin önceliğini düzenler. Renkleri "beyaz, siyah ve gri" ile sınırlayarak tasarım kontrolden çıkmaz.
https://x.com/hiroho150cm/status/2061576024878633393
2. Simgeler
Simgeler için "Font Awesome" belirtmek görünümü önemli ölçüde iyileştirir.
https://x.com/hiroho150cm/status/2062376294688387540
3. HTML ile Oluşturma
HTML kullanmak oluşturmayı ve değişiklik yapmayı sorunsuz hale getirir.
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. Yazma
Okunabilirlik, iç metni olduğu gibi kullanabilecek kadar yüksek hale gelir.
https://x.com/hiroho150cm/status/2063750350776287429
Çok sayfalı siteler için Claude Code kullanın
Şu ana kadar bu, LP'ler (tek sayfalar) ile ilgiliydi. Çok sayfalı siteler için yaklaşımı değiştiriyoruz.
Sohbet önizlemeleri birden fazla HTML dosyası arasında geçişi iyi yönetmez. Bu nedenle "Claude Code" kullanıyoruz.
Masaüstünüzde bir klasör hazırlayın ve her şeyi içinde yönetin. Bu şekilde Claude Code birden fazla HTML dosyasını düzgün bir şekilde düzenleyebilir.
https://x.com/hiroho150cm/status/2065267853922898022
Claude kullanarak web prodüksiyonu ve yönlendirmesi için zaman kazandıran teknikler paylaşıyorum.
Faydalı bilgiler sunmaya devam edeceğim, beğendiyseniz beni takip edin.
