🎵 New Song Release: Ajizak – Gaza Terluka feat. Zara 🇵🇸  – ▶️Play Now

Dreamsands: Convert Gambar Desain UI/UX ke HTML dan CSS Otomatis dengan AI

Teksnologi

Untuk merancang desain UI atau landing page suatu website, umumnya para desainer menggunakan software UI/UX seperti Figma, Adobe XD, Sketch, Penpot, dan masih banyak lagi.

Namun hasil desain yang sudah dibuat tersebut umumnya hanya berupa kumpulan gambar.

Untuk menerapkan hasil desain UI tersebut menjadi sebuah template website, diperlukan pemahaman mengenai bahasa pemrograman yang digunakan untuk kebutuhan website, mulai dari yang paling mendasar seperti bahasa markup HTML, CSS, ataupun JavaScript.

Untuk itu, biasanya hasil desain dari web designer akan diteruskan ke bagian web developer untuk diimplementasikan menjadi halaman website yang bisa diakses secara online.

Namun, baru-baru ini teknologi AI hadir untuk mempersingkat proses tersebut. Dreamsands, adalah tool terbaru yang dirancang untuk mengkonversi gambar menjadi sebuah script code.

Sehingga hanya dengan bermodalkan gambar ataupun screenshot, siapa pun akan bisa menghasilkan sebuah template HTML website secara utuh dengan instan dan cepat.

Kita hanya perlu menyiapkan gambar screenshot yang ingin dikonversi menjadi kode HTML.

Dalam contoh di atas, hasil screenshot dari website notion.so bisa dikonversi dengan mudah menjadi template HTML website yang baru dengan tampilan elemen yang sudah diubah.

Hasil screenshot tinggal kita upload ke Dreamsands dan tunggu beberapa detik.

notion-ui-convert-dreamsands

Setelah itu pengguna hanya tinggal memasukkan instruksi atau perintah tertentu sebagai prompt yang akan diproses oleh Dreamsands.

Menariknya, Dreamsands juga mendukung beberapa framework populer, di antaranya:

  • React.js
  • Angular.js
  • Next.js
  • Vue.js
  • Ember.js
  • Serta basic HTML/CSS/JS

Setelah parameter sederhana ini dipilih, maka secara otomatis Dreamsands akan mengkonversinya menjadi script HTML lengkap dengan CSS dan JavaScript-nya yang bisa kita download.

Seperti inilah hasil generate dari screenshot sebelumnya dengan beberapa tampilan elemen dan ilustrasi yang sudah diganti menjadi lebih berbeda.

notion-ui-todoapp-clone

Cukup menarik, karena teknologi ini seakan bisa menggantikan peran seorang web developer untuk kebutuhan yang lebih sederhana dengan proses yang cepat.

Saat ditulisnya artikel ini, Dreamsands baru saja dirilis dan masih dalam tahap Beta. Pengguna yang ingin mencoba tools ini bisa melakukan pendaftaran sebagai early access di website Dreamsands.

📌 Bacaan selanjutnya:

Follow:
Follow us on Instagram: @Teksnologi
Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *