00:00:00Alat desain AI berkembang pesat dan meskipun banyak yang menjanjikan untuk merevolusi alur kerja Anda,
00:00:04hanya sedikit yang benar-benar memberikan hasil.
00:00:06Saya telah menghabiskan waktu yang cukup lama menguji berbagai alat untuk memisahkan mana yang benar-benar berguna dari yang hanya sekadar hiruk-pikuk.
00:00:13Dalam video ini,
00:00:14saya membagikan alat-alat yang memberikan dampak nyata pada proses desain saya.
00:00:17Ini mencakup berbagai hal mulai dari perencanaan dan pembuatan aset hingga animasi dan konversi desain.
00:00:22Beberapa gratis,
00:00:23beberapa berbayar dan beberapa memiliki alternatif gratis yang solid yang bekerja sama baiknya.
00:00:27Dimulai dengan alat perencanaan yang benar-benar powerful dan esensial yang dapat mengubah ide-ide berantakan Anda menjadi blueprint teknis yang terstruktur.
00:00:34Sebuah produk dari builder methods yang disebut Design OS.
00:00:37Ini benar-benar bagian yang hilang dalam proses Anda.
00:00:39Anda dapat mengakses repositori open source di GitHub dari mana Anda dapat mengunduh dan menggunakannya.
00:00:44Design OS dirancang khusus untuk meniru alur kerja pengembangan perangkat lunak.
00:00:47Anda bertindak sebagai stakeholder sementara Design OS menangani perencanaan produk,
00:00:51sistem desain,
00:00:52dan spesifikasi persyaratan.
00:00:53Akhirnya,
00:00:54ini mengonfirmasi rencana desain perangkat lunak Anda setelah itu Anda dapat mengekspornya.
00:00:58Alat ini cocok untuk builder teknis maupun non-teknis.
00:01:00Ini kompatibel dengan semua alat AI populer seperti Claude Code,
00:01:03Cursor dan Copilot..
00:01:05Instalasinya sederhana.
00:01:06Cukup salin perintah git clone,
00:01:07tempelkan ke dalam folder proyek Anda dan ubah nama default menjadi nama proyek Anda yang sebenarnya.
00:01:12Setelah terinstal,
00:01:13proyek akan memiliki akses ke serangkaian perintah dan keterampilan desain khusus.
00:01:17Ketika Anda menavigasi ke localhost 3000,
00:01:18semua langkah tercantum satu per satu sehingga Anda tidak bingung perintah mana yang harus diikuti terlebih dahulu..
00:01:24Ini mengajukan serangkaian pertanyaan untuk mengidentifikasi setiap detail dari ide proyek Anda.
00:01:29Ini menyempurnakan rencana seiring berjalannya waktu,
00:01:31menyediakan outline,
00:01:32meminta persetujuan Anda di tengah jalan dan mendokumentasikan semuanya dengan cara yang dioptimalkan untuk model AI.
00:01:37Ini adalah proses yang memakan waktu jadi Anda harus bersabar dan bertahan dengan pertanyaan konstan untuk mendapatkan hasil terbaik untuk website Anda.
00:01:44Setelah Anda melewati semua bagian,
00:01:46rencana akan siap untuk diekspor.
00:01:47Rencana yang diekspor berisi instruksi tentang cara menggunakannya bersama dengan model data,
00:01:51data sampel dan dokumentasi.
00:01:53Ini juga mencakup tipe TypeScript,
00:01:54token CSS dan semua file desain yang diperlukan.
00:01:56Anda dapat menemukan instruksi di sini tentang cara menggunakan ekspor untuk membangun aplikasi,
00:02:01baik Anda memilih metode incremental atau prompt one-shot.
00:02:03Secara keseluruhan,
00:02:04ini adalah alat yang sangat menarik yang membuat bagian perencanaan desain menjadi jauh lebih mudah dan lancar.
00:02:09Aset berkualitas tinggi adalah tulang punggung dari setiap website hebat dan jika Anda mencari cara untuk menghasilkan visual produk profesional dengan cepat,
00:02:17VSCOM adalah alat yang perlu Anda ketahui..
00:02:19Ini memiliki kemampuan yang mengesankan untuk menggunakan prompt untuk menghasilkan citra visual yang memukau,
00:02:24menggunakan sketsa untuk membuat render dan bahkan memodelkannya untuk Anda.
00:02:27Ini dikemas dengan alat-alat menakjubkan dan dapat memberikan animasi juga.
00:02:30Untuk menggunakannya,
00:02:31Anda cukup memberikan sketsa dan deskripsi dan AI menghasilkan visual berdasarkan input Anda.
00:02:35Anda dapat melakukan banyak hal dengannya,
00:02:37termasuk mengedit elemen individual,
00:02:38menggunakan AI untuk memodifikasinya dan mengunduh hasilnya dalam kualitas 4k untuk visual bagian hero Anda..
00:02:43VSCOM adalah alat berbayar tetapi Anda dapat memulai secara gratis.
00:02:46Paket gratis cukup murah hati dan menyediakan fitur-fitur yang berguna sementara paket bulanan menawarkan lebih banyak kemampuan.
00:02:52Ini menjadikannya pilihan yang bagus jika Anda sering perlu memodelkan produk Anda di berbagai area.
00:02:57Tetapi jika Anda tidak ingin menggunakan alat berbayar,
00:02:59Anda dapat menggunakan proyek Google yang underrated bernama Mixed Board.
00:03:02Ini masih dalam tahap eksperimental jadi saat ini gratis.
00:03:05Alat ini memungkinkan Anda membuat mood board dan menggunakan kekuatan kemampuan nano banana yang mengesankan untuk menghasilkan gambar untuk website Anda.
00:03:12Anda dapat menggunakan prompt untuk memodifikasi gambar dan itu akan menghasilkan yang baru persis seperti yang Anda inginkan.
00:03:18Anda juga dapat mengunggah gambar sampel dan itu akan menggunakan kemampuannya untuk menghasilkan visual yang cocok.
00:03:23Anda dapat membuat sebanyak mungkin generasi yang Anda suka dan bahkan membangun presentasi lengkap untuk memvisualisasikan konsep produk Anda semua menggunakan nano banana.
00:03:31Jika Anda tidak menyukai gambar,
00:03:32Anda dapat meregenerasinya,
00:03:33meminta model untuk membuat gambar serupa,
00:03:35menduplikasi gambar atau bahkan memberi anotasi untuk memberikan arahan lebih lanjut kepada model.
00:03:39Ini kemudian akan menghasilkan semua detail sesuai dengan spesifikasi Anda.
00:03:43Ini cukup luar biasa karena Anda dapat mengambil aset-aset ini dan mengunduhnya untuk digunakan langsung di website Anda.
00:03:48Akan selalu lebih baik untuk menganalisis bagaimana website kompetitor menyusun website mereka sebelum terjun ke dalam mendesain satu untuk Anda sendiri.
00:03:55Untuk tujuan ini saya menggunakan ekstensi bernama GoFullPage yang menangkap screenshot halaman penuh dari website mana pun.
00:04:01Ini memungkinkan saya mengunduh screenshot website lengkap sebagai referensi.
00:04:04Saya kemudian memberikan screenshot ini ke Claude bersama dengan prompt khusus yang dirancang untuk mengekstrak elemen UI.
00:04:10Prompt ini menginstruksikan Claude untuk mengidentifikasi semua constraint,
00:04:13penempatan objek dan detail tema UI dari gambar.
00:04:15Ketika saya memberikan Claude screenshot dengan prompt khusus ini,
00:04:18ia mengekstrak semua detail gaya UI secara komprehensif.
00:04:21Setelah saya memiliki pedoman gaya yang diekstrak,
00:04:23saya memberikannya ke Claude code di folder proyek yang berisi aset yang telah saya unduh untuk digunakan.
00:04:28Claude kemudian menghasilkan seluruh website dengan menerapkan semua gaya dan pedoman desain yang telah diekstraknya dari analisis kompetitor..
00:04:35Motion adalah kunci untuk retensi pengguna di mana Anda dapat menggunakan plugin Figma bertenaga AI untuk menganimasi semuanya dari logo hingga antarmuka lengkap hanya dalam beberapa klik.
00:04:44Magic Animator adalah website yang sangat keren dan powerful yang menggunakan AI untuk menganimasi semua desain Anda.
00:04:49Ini dapat menganimasi semuanya dari logo hingga postingan media sosial hingga antarmuka pengguna yang menciptakan micro interaction di aplikasi Anda yang membantu menjaga retensi dan minat pengguna.
00:04:59Magic Animator tersedia sebagai plugin Figma yang memungkinkan Anda dengan mudah menambahkan animasi ke desain UI Anda.
00:05:04Ketika Anda menjalankan plugin,
00:05:06ia secara otomatis mendeteksi layer di UI Anda dan menghasilkan empat animasi untuk Anda pilih.
00:05:10Anda kemudian dapat mengekspor animasi pilihan Anda sebagai file Lottie yang merupakan format JSON khusus untuk menambahkan animasi.
00:05:16Sekarang Magic Animator adalah alat berbayar tetapi jika Anda mencari alternatif serupa Anda dapat menggunakan Lottie files yang juga tersedia sebagai plugin Figma.
00:05:24Ini memungkinkan Anda untuk mengimplementasikan animasi dalam desain website Anda dan mengekspornya dalam berbagai format termasuk berbagai jenis file JSON Lottie.
00:05:32Anda bahkan dapat memberikan file animasi ke Claude code dan itu akan menerapkan animasi ke UI Anda untuk Anda.
00:05:37Jika Anda tidak ingin mendesain di Figma dari awal Anda dapat menggunakan plugin HTML to design untuk mengonversi website apa pun dalam HTML menjadi desain Figma yang dapat diedit sepenuhnya.
00:05:46Ini tersedia dalam paket gratis dan berbayar dan pada paket gratis Anda mendapatkan hingga 10 impor setiap 30 hari.
00:05:51Bagian kerennya adalah Anda dapat menggunakannya sebagai MCP dan mengakses kemampuan desain agen AI Anda langsung di dalam desain Figma Anda.
00:05:58Untuk melakukan ini Anda menghubungkannya ke alat AI Anda seperti Claude atau Cursor dan mengonfigurasi MCP dengan mengikuti panduan pengaturan..
00:06:05Kapan pun Anda ingin membuat desain,
00:06:07cukup beri perintah pada agen AI Anda dan gunakan kata kunci kirim ke Figma atau kirim ke HTML untuk mendesain.
00:06:12Ini akan menghasilkan JSON yang berisi desain dan mengirimkannya ke Figma setelah Anda menyetujuinya.
00:06:16Anda kemudian dapat melihat desain di Figma dan berkolaborasi dengan alat AI favorit Anda untuk membuat desain yang menakjubkan sambil mengedit apa pun yang tidak Anda sukai secara langsung.
00:06:24Sekarang mari kita bicara tentang Automata.
00:06:26Setelah mengajarkan jutaan orang cara membangun dengan AI,
00:06:29kami mulai menerapkan alur kerja ini sendiri.
00:06:31Kami menemukan bahwa kami dapat membangun produk yang lebih baik lebih cepat dari sebelumnya.
00:06:35Kami membantu mewujudkan ide Anda baik itu aplikasi maupun situs web.
00:06:38Mungkin Anda telah menonton video kami sambil berpikir saya punya ide yang bagus tetapi saya tidak punya tim teknologi untuk membangunnya.
00:06:44Di situlah kami hadir.
00:06:45Anggap kami sebagai co-pilot teknis Anda.
00:06:47Kami menerapkan alur kerja yang sama yang telah kami ajarkan kepada jutaan orang langsung ke proyek Anda,
00:06:51mengubah konsep menjadi solusi nyata yang berfungsi tanpa kerumitan merekrut atau mengelola tim pengembang..
00:06:57Siap mempercepat ide Anda menjadi kenyataan?
00:06:59Hubungi kami di hello@automata.dev.
00:07:00Itu mengantarkan kita ke akhir video ini.
00:07:02Jika Anda ingin mendukung channel dan membantu kami terus membuat video seperti ini,
00:07:06Anda dapat melakukannya dengan menggunakan tombol super thanks di bawah.
00:07:09Seperti biasa terima kasih telah menonton dan sampai jumpa di video berikutnya..