HTML to React & Figma - Web sitelerini React bileşenlerine dönüştüren Chrome uzantısı

• Web sayfasının HTML'ini React koduna veya Figma tasarımına dönüştürebilen bir araç
  • Kullanıcılar mevcut tasarımları içe aktararak React koduna dönüştürebilir veya Figma'da düzenlenebilir tasarımlara çevirebilir
  • Yapay zeka kullanarak mevcut tasarımları özelleştirme ve düzenleme özelliği sunar
• Başlıca özellikler
  • Beğendiğiniz mevcut bir tasarımı içe aktararak kendi projenizde kullanabileceğiniz React koduna anında dönüştürebilirsiniz
  • Mevcut tasarımları içe aktarıp düzenleyebilir ve üzerinde çalışabilirsiniz; böylece sıfırdan başlamanız gerekmez
  • Yapay zeka ile tasarımları özelleştirmek ve düzenlemek mümkündür

[charychary]

İnceleme
Siteyi bütünüyle tek seferde kopyalamak zor.
Kopyalanan bileşen büyüdükçe hata çıkma olasılığı arttığı için header, main, article, sidebar, footer gibi ana bileşenleri ayrı ayrı kopyalayıp container layout’unu geliştiricinin kendisinin kurması gerekti.

Stil özellikleri
Temel inline yapı, her bileşen için style etiketi oluşturuyor ya da her HTML’ye style niteliği veriyordu; bu da geliştirici açısından bakım yaparken kodun JS’ten yeterince ayrılmadığı ve dağınık olduğu hissini veriyordu.
Tailwindcss’e dönüştürme özelliği ise gerçekten çok iyiydi.

Bileşen ayırma özelliği
Var denebilir ama neredeyse yok sayılmalı. Buna ek olarak çılgın miktarda CSS üretiyor ve yeniden kullanılabilecek pek çok bileşen de olduğu gibi HTML olarak kullanılıyor.
Bu yüzden ortaya binlerce satırlık JSX kodu çıkıyor.

Yapay zeka güncellemesi
Yapay zeka sohbetiyle tasarım konsepti değiştirilebiliyordu; beklendiği kadar çok sıra dışı sonuçlar çıkmasa da yaklaşık her üç denemeden birinde taze bir tasarım çıkıyordu.
Ama ücretli olduğu için çok fazla deneyemedim.

Statik dosya üretimi
Svg ve png dosyalarını tek bir dosyada birleştiren image sprite tekniğiyle ikonları birleştirmesi hoşuma gitti.

Sonuç
Mevcut üretken yapay zeka araçlarında olduğu gibi,
"Genel olarak iyi ama detay eksikleri yüzünden geliştiricinin el atması gereken kod" üretiyor.
Özellikle bileşen ayırma özelliği yetersiz olduğu için, şimdilik ancak "layout ve statik dosya çıkarıcı" kadar faydalı görünüyor.
Daha önce GPT gibi yapay zekalarla iş mantığından ziyade tasarım CSS’inin layout sorunlarını ele almak biraz zordu; bunun o tarafı tamamlayıp tamamlayamayacağını görmek için biraz daha kurcalamak gerekiyor.

[iolothebard]

HTML'i neden React'e dönüştürmek(?) gerekiyor?

[yangeok]

arayüz fikirlerini çalmak..

[bobross0]

Çılgınca...

[roxie]

Fazla iyi çalışıyor..

[kws730]

Ah, çok iyi ya.

[GN⁺]

Hacker News yorumları

• Gerçek ürün oldukça etkileyici. Sadece temel testlerle bile sıradan LLM modellerinden çok daha rafine tasarımlar üretebildiği görülebiliyor. Bu hafta prototiplemede kullanmayı planlıyorum

  • Standart LLM'e ne tür değişiklikler yapıldığını merak ediyorum. Guardrail'ler eklemek, bileşenler sağlamak veya iyi web sitelerinden oluşan bir korpus üzerinde ince ayar yapmak gibi şeyler yapılmış olabileceğini hayal edebiliyorum

• Bu araç, bir sayfanın bölümlerini temiz ve yazdırılabilir HTML olarak almak için iyi bir yöntem. Örneğin Claude web arayüzü tüm sohbet geçmişini yazdıramıyor, yalnızca ekranda görünen kısmı yazdırıyor

  • Bu araçla iki sohbet balonu arasındaki noktayı seçerek tüm geçmişi seçebiliyorsunuz
  • Benzer işlevi olan basit bir Chrome uzantısı yapmıştım, ancak çıktı kalitesi düşüktü

• Bu tür araçların çıktılarında telif hakkının nasıl işlediğini merak ediyorum. Tüm web siteleri lisans içermediği için, durum genel LLM'lere kıyasla daha da belirsiz olabilir

• Çok kullanışlı bir tarayıcı uzantısı. Stilleri TailwindCSS'e dönüştürebilmesini gerçekten çok beğendim. Oldukça zekice

• Bu araç gerçekten harika. Yaklaşık 10 web sitesinde denedim ve web sitesi öğelerinin yaklaşık %80'inde iyi çalıştı

  • Kendi sitemizde de denedik ve en önemli bileşeni tamamen kopyalayabildi
  • Bazı siteler seçime izin vermiyor. Seçim modunu etkinleştirip öğelerin üzerine fareyle geldiğimde hiçbir şey seçilmiyor. Bu da bana kendi sitemizin kopyalanmasını önlemenin yollarını düşündürdü
  • Harika iş çıkarmışsınız. Uzun süre kullanacağım

• Harika bir araç. Günümüzde frontend geliştirme o kadar karmaşık hale geldi ki böyle bir araca ihtiyaç duyulması üzücü. Eski view-source ve tek bir style.css dönemini özlüyorum

• Hacker News logosundaki yazı tipine baktım, farklı

  • Orijinali: Verdana, Geneva, sans-serif
  • Sizinkisi: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  • Güzel görünüyor ama bunun neden olduğunu anlayamıyorum

• Eline sağlık. Firefox ile uyumlu hale getirme planınız var mı, merak ediyorum

• Benim Framer sayfamda da çalışıp çalışmayacağını ve kendi kendine host edilip edilemeyeceğini merak ediyorum

• Bir web sitesinin HTML ve CSS'ini elde etmek için çok kullanışlı bir yöntem