HTML to React & Figma - Ekstensi Chrome untuk mengubah situs web menjadi komponen React

• Alat yang dapat mengubah HTML halaman web menjadi kode React atau desain Figma
  • Pengguna dapat mengimpor desain yang sudah ada lalu mengubahnya menjadi kode React, atau mengubahnya menjadi desain yang bisa diedit di Figma
  • Menyediakan fitur untuk menyesuaikan dan memodifikasi desain yang sudah ada dengan menggunakan AI
• Fitur utama
  • Dapat langsung mengimpor desain yang disukai dan mengubahnya menjadi kode React yang siap digunakan dalam proyek sendiri
  • Dapat mengimpor, mengedit, dan mengerjakan desain yang sudah ada sehingga tidak perlu memulai dari nol
  • Dapat menyesuaikan dan memodifikasi desain dengan memanfaatkan AI

[charychary]

Ulasan
Sulit untuk menyalin seluruh situs sekaligus.
Semakin besar komponen yang disalin, semakin besar kemungkinan muncul error, jadi komponen utama seperti header, main, article, sidebar, dan footer harus disalin secara terpisah, lalu layout container harus dibuat sendiri oleh developer.

Fitur styling
Untuk inline dasar, tiap komponen membuat tag style atau memberi atribut style pada setiap html, tetapi dari sudut pandang developer ini terasa kurang terpisah dari js dan berantakan untuk maintenance.
Fitur konversi ke Tailwindcss benar-benar bagus.

Fitur pemisahan komponen
Memang ada, tetapi bisa dibilang nyaris tidak ada. Ditambah lagi, css-nya sangat banyak sampai bikin pusing, dan cukup banyak komponen yang tampak bisa dipakai ulang tetap digunakan begitu saja sebagai html.
Karena itu, kode jsx yang dihasilkan bisa mencapai ribuan baris.

Update AI
Konsep desain bisa diubah lewat chat AI, dan meski hasilnya tidak selalu sangat inovatif seperti yang dibayangkan, sekitar sekali dalam tiga percobaan muncul desain yang terasa segar.
Tetapi karena berbayar, saya tidak sempat banyak mencobanya.

Pembuatan file statis
Saya suka karena ikon-ikon digabungkan dengan teknik image sprite yang menyatukan file Svg atau png menjadi satu file

Kesimpulan
Seperti saat memakai AI generatif yang sudah ada,
ini menghasilkan "kode yang secara keseluruhan cukup bagus, tetapi masih kurang di detail sehingga perlu disentuh developer".
Terutama karena fitur pemisahan komponennya kurang, untuk saat ini tampaknya baru berguna sebatas "ekstraktor layout dan file statis".
Selama ini dengan AI seperti gpt, agak sulit menangani masalah layout desain css alih-alih business logic, jadi saya masih perlu mencoba lebih jauh apakah ini bisa menutupi sisi tersebut.

[iolothebard]

Mengapa HTML perlu dikonversi ke React(?)?

[yangeok]

Mencuri ide UI..

[bobross0]

Gila...

[roxie]

Berfungsi sangat baik..

[kws730]

Wah, bagus sekali

[GN⁺]

Opini Hacker News

• Produknya sendiri sangat menarik. Bahkan dengan pengujian dasar saja, terlihat bahwa alat ini menghasilkan desain yang jauh lebih rapi dibanding model LLM umum. Saya berencana memakainya untuk prototyping minggu ini

  • Saya penasaran perubahan apa yang dibuat dibanding LLM standar. Bisa dibayangkan mereka menambahkan guardrail, menyediakan komponen, atau melakukan fine-tuning berdasarkan korpus situs web yang bagus

• Alat ini adalah cara yang bagus untuk mendapatkan bagian halaman dalam HTML yang bersih dan bisa dicetak. Misalnya, UI web Claude tidak bisa mencetak seluruh riwayat chat dan hanya mencetak apa yang terlihat di layar

  • Dengan alat ini, Anda bisa memilih titik di antara dua bubble chat untuk menyeleksi seluruh riwayat
  • Saya pernah membuat ekstensi Chrome sederhana dengan fungsi serupa, tetapi kualitas output-nya lebih rendah

• Saya penasaran bagaimana status hak cipta untuk output dari alat seperti ini. Karena tidak semua situs web menyertakan lisensi, hal ini bisa jadi lebih tidak jelas dibanding LLM umum

• Ekstensi browser yang sangat berguna. Saya sangat suka bahwa style bisa dikonversi ke TailwindCSS. Sangat cerdas

• Alat ini benar-benar luar biasa. Saya sudah mencobanya di sekitar 10 situs web, dan alat ini bekerja dengan baik pada sekitar 80% elemen situs web

  • Saya juga mencobanya di situs kami, dan alat ini bisa mereplikasi komponen yang paling penting dengan sempurna
  • Beberapa situs tidak mengizinkan pemilihan. Saat mode seleksi diaktifkan dan kursor diarahkan ke elemen, tidak ada yang terpilih. Ini juga membuat kami berpikir tentang cara mencegah penyalinan di situs kami
  • Kerja yang luar biasa. Saya akan memakainya untuk waktu yang lama

• Alat yang keren. Sayang sekali pengembangan frontend belakangan ini menjadi begitu rumit sampai-sampai alat seperti ini diperlukan. Saya rindu masa view-source dan satu style.css

• Saya memeriksa font logo Hacker News, dan ternyata berbeda

  • Yang asli: Verdana, Geneva, sans-serif
  • Punya Anda: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  • Ini keren, tetapi saya tidak mengerti kenapa hal ini bisa terjadi

• Kerja bagus. Saya penasaran apakah ada rencana untuk membuatnya kompatibel dengan Firefox

• Saya penasaran apakah ini juga akan bekerja pada halaman Framer saya sehingga bisa saya host sendiri

• Cara yang sangat berguna untuk mendapatkan HTML dan CSS dari sebuah situs web