Claude Design + Seedance 2.0 = Website Animasi yang LUAR BIASA

CChase AI
Computing/SoftwareAdvertising/MarketingSmall Business/StartupsInternet Technology

Transcript

00:00:00Hari ini Anda akan belajar cara menggabungkan kekuatan Clod design dan Seed Dance 2.0 yang baru
00:00:06untuk membuat situs web animasi seperti yang satu ini. Saya akan memandu Anda melalui seluruh alur kerja saya langkah
00:00:12demi langkah agar Anda dapat membuatnya kembali bahkan jika Anda belum pernah melakukan hal seperti ini sebelumnya. Dan sepanjang
00:00:17jalan, saya akan menunjukkan kepada Anda cara memaksimalkan alat baru Anthropix dengan beberapa tips dan
00:00:22trik. Sekarang, jika berbicara tentang membuat halaman web seperti ini, tempat pertama yang harus kita mulai adalah
00:00:28video latar belakang ini, dan untuk mendapatkan video latar belakang, pertama-tama kita memerlukan gambar awal. Sekarang kita akan
00:00:32membuat gambar awal tersebut menggunakan Nano Banana Pro, lalu kita akan mengambil gambar awal tersebut
00:00:37dan mengubahnya menjadi video menggunakan Seed Dance 2.0, dan semua itu akan terjadi di sini, di Higgsfield, yang
00:00:44merupakan toko serba ada saya untuk semua alat pembuatan konten AI. Jadi, sebagai permulaan, kita hanya akan pergi
00:00:49ke gambar dan menuju ke Nano Banana Pro, dan Anda akan langsung melihat beberapa gambar yang telah saya kerjakan
00:00:55dan itu akan terlihat sangat familiar dengan halaman web kita, khususnya gambar-gambar ini. Nah, prompt yang tepat
00:01:01yang saya gunakan dapat ditemukan di dalam sekolah gratis saya, dan akan ada tautan ke sana di deskripsi
00:01:05tetapi yang ingin saya fokuskan di sini saat kita berbicara tentang gambar adalah sedikit tentang spesifiknya
00:01:11prompt itu sendiri karena gambar yang akan Anda buat akan berbeda dari milik saya
00:01:15tapi lebih ke komposisinya. Mengapa gambar ini diatur sedemikian rupa? Nah, ketika kita melihat
00:01:21produk akhir di sini, itu agak jelas, kan? Kita memiliki gambar hero besar yang menempati sisi kanan
00:01:26layar tetapi kita masih memerlukan ruang kosong di sebelah kiri untuk teks kita, dan ketika saya meminta Nano Banana
00:01:31Pro membuat gambar ini, saya memikirkan komposisi semacam itu. Saya berpikir, oke, kita akan memiliki gambar
00:01:38di mana gambar itu agak terpotong menjadi dua, di sisi kanan kita akan memiliki gambar yang mencolok, lalu di
00:01:44sebelah kiri, di sinilah teks hero akan berada, jadi ini semacam tagline di sini
00:01:51kita akan memiliki semacam spanduk di bagian atas dengan bilah navigasi di mana orang bisa, Anda tahu, menekan
00:01:55beranda atau halaman yang berbeda, kita akan memiliki beberapa tombol di sini seperti, baiklah, daftar
00:02:00atau pelajari lebih lanjut, dan kemudian mungkin kita akan memiliki semacam ticker di bagian bawah. Saya sudah tahu itu sebelumnya
00:02:04dan itu adalah sesuatu yang perlu Anda ketahui sebelumnya saat meminta Nano Banana Pro untuk membuat gambar
00:02:10untuk Anda, karena apa pun komposisinya nanti dari pengaturan semacam ini, itu akan menentukan
00:02:17prompt Anda, dan sekarang pertanyaan Anda mungkin, "Nah, Chase, saya bahkan tidak tahu apa saja pilihan saya." Saya
00:02:22tidak tahu seperti apa komposisinya sejak awal, bagaimana cara mengetahuinya? Nah,
00:02:25cara termudah untuk melakukannya adalah dengan mencari beberapa situs web yang Anda sukai dan mulai membedah hero serta
00:02:30komposisi halaman arahan mereka dengan cara itu, dan tempat yang tepat untuk melihat contohnya adalah Dribbble. Jadi, itu
00:02:35Dribbble dengan tiga huruf B. Jika saya mencari 'landing page sass', Anda bisa mencari 'landing page'
00:02:40apa pun, Anda akan melihat apa yang saya bicarakan. Jadi, apa yang kita lihat di sini, kan? Yang ini di sini,
00:02:47nah, mereka agak meletakkan gambar di bagian bawah dan teks di bagian atas, kita bisa melakukan sesuatu yang mirip dengan
00:02:52ini, kita bisa memindahkannya ke bawah sini ke tengah, mungkin kita punya awan di sampingnya
00:02:56sebagai gantinya, lalu teksnya ditaruh di sini, sekali lagi mengubah komposisinya sepenuhnya, atau apakah kita ingin sesuatu
00:03:02seperti ini di mana gambarnya menjadi pusat perhatian dan teksnya berada di sekelilingnya, dan kita menambahkan elemen lain
00:03:07Anda tahu, saat Anda melihat-lihat dan menggulir ke bawah, Anda akan melihat ada jutaan cara berbeda yang bisa Anda
00:03:11lakukan ini, tetapi Anda harus tahu sebelumnya, atau setidaknya Anda harus memiliki dua atau tiga ide di
00:03:16saku Anda, dan kemudian ketika Anda pergi ke Nano Banana Pro, Anda bisa memberikan prompt yang mencerminkan gaya
00:03:22tersebut. Jadi, untuk merangkum, saat kita membuat gambar, hal nomor satu yang harus kita tentukan adalah
00:03:26komposisi, dan dengan komposisi, di mana ruang kosong akan berada, di mana teks itu akan berada,
00:03:32apakah di kiri, tengah, kanan, atas, tidak masalah, Anda hanya perlu memilih dan membuat
00:03:37prompt Anda mencerminkan hal tersebut, dan juga, jika menyangkut prompt, mintalah bantuan seperti Claude untuk
00:03:42menulisnya untuk Anda. Nah, untuk demo kita hari ini, kita akan menggunakan gambar ini, dan saya juga akan memiliki salinan
00:03:47ini di dalam komunitas jika Anda ingin meniru saya langkah demi langkah. Dan dengan gambar diam di
00:03:51tangan, sekarang kita akan menuju ke Claud design, dan alur umumnya adalah gambar yang dibuat di
00:03:56Nano Banana Pro, kita akan membuat tiruan situs web kita di sini di design, dan setelah kita mendapatkan situs web yang kita sukai,
00:04:01Anda tahu, desain yang kita sukai, halaman arahan, dan semua itu, baru kemudian kita akan mengambil gambar tersebut dan mengubahnya menjadi
00:04:05video karena sangat mudah untuk melakukannya sebagai langkah terakhir. Jadi, jika Anda baru mengenal Claud design,
00:04:10jangan khawatir, kita akan membahas hal-hal besar yang perlu Anda khawatirkan di video ini, tapi saya juga punya bahasan
00:04:14mendalam yang sedikit lebih teknis yang harus Anda tonton juga, dan saya akan menautkannya di atas. Namun, untuk
00:04:18tujuan kita, yang ingin kita lakukan adalah menuju ke sini ke sebelah kiri, buka prototype, dan kita akan
00:04:24memberikan semacam nama proyek, saya akan menyebut milik saya 'sd2' untuk sistem desain, Anda mungkin tidak akan memiliki
00:04:30sistem desain, Anda tidak membutuhkannya dalam kasus ini untuk saat ini. Sekali lagi, jika Anda ingin mempelajari lebih lanjut tentang desain
00:04:35sistem, tonton video pembahasan mendalam itu. Kita akan melakukan fidelitas tinggi, lalu kita akan membuatnya,
00:04:40itu kemudian akan membawa Anda ke halaman ini, dan hal pertama yang ingin kita lakukan adalah menambahkan konteks,
00:04:45dan konteks yang akan kita tambahkan adalah gambar yang kita unduh, jadi Anda bisa lihat di bawah sini di sebelah kiri,
00:04:49saya telah mengunggah tangkapan layar saya. Selanjutnya, kita ingin memberikan prompt, sekarang Anda dapat terus menambahkan lebih banyak
00:04:55tangkapan layar di sini, dan saya sangat menyarankan Anda melakukannya jika Anda memiliki contoh bagus dari seseorang seperti Dribbble. Jadi,
00:04:59jika Anda menemukan sesuatu di Dribbble yang Anda sukai dari segi komposisi keseluruhan, tambahkan itu juga.
00:05:04Nah, jika berbicara tentang prompt itu sendiri, saya sangat menyarankan Anda untuk meminta bantuan seperti Claud
00:05:09code untuk menulisnya untuk Anda, dan ini adalah tampilan prompt yang dibuat oleh Claud code yang akan saya
00:05:13tempel ke dalam Claud design. Ini untuk perusahaan SaaS palsu kita, Olympus, yang merupakan platform intelijen pasar,
00:05:19jadi ini membahas tentang apa perusahaan tersebut, cukup mendetail tentang hero, membahas
00:05:25bagian apa saja yang diinginkannya di halaman arahan, lalu menambahkan beberapa hal seperti, seperti gerakan. Sekarang,
00:05:30sangat penting, kita memiliki baris di akhir yang mengatakan 'ajukan pertanyaan apa pun sebelum Anda memulai'. Hal yang keren
00:05:36tentang Claud design adalah ia bisa bertindak seperti Claud code di mana ia akan membuat mode rencana,
00:05:42jadi saya akan memberikan prompt, yang persis seperti yang Anda lihat di sini, dan kemudian ia akan mengajukan beberapa
00:05:46pertanyaan kepada saya untuk lebih menggali apa yang sebenarnya saya coba bangun, dan hal hebat tentang itu
00:05:50fitur mode rencana di mana ia mengajukan pertanyaan kepada kita adalah fakta bahwa jika Anda datang dengan prompt yang buruk
00:05:54yang bahkan tidak sedetail ini, Anda bisa masuk ke Claud design dan mendapatkan hasil pertama yang cukup kuat
00:06:01karena Anda telah melalui seluruh tanya jawab dengan Claud. Jadi, saya sudah menempelkan semuanya di sana dan kita
00:06:06hanya akan menekan kirim. Sekarang, catatan singkat tentang penggunaan dengan Claud design, Claud design beroperasi pada
00:06:11batas penggunaannya sendiri, terpisah dari batas pro atau batas max 5 atau max 20 Anda dengan
00:06:18Claud, ini urusannya sendiri dan bisa menjadi pemakan sumber daya, jadi selalu perhatikan itu. Dalam kasus saya,
00:06:23saya sudah menghabiskannya karena saya sering menggunakannya, jadi saya menggunakan penggunaan tambahan saya.
00:06:28Sebagai referensi, ketika saya menjalankan semua ini yang Anda lihat hari ini sendiri dalam hal penggunaan tambahan,
00:06:33itu memakan biaya sekitar lima dolar untuk membuat halaman arahan tersebut, dan saya sebenarnya bisa mendapatkan yang lebih rendah lagi,
00:06:38tapi setidaknya Anda punya gambaran di mana posisi kita. Dan inilah pertanyaan yang kembali
00:06:43bersamanya: bagian tipografi, apa yang ingin kita lakukan? Mari kita lakukan palet warna mitis modern,
00:06:52mari kita lakukan terbalik, dan pada akhirnya kita akan memiliki lebih banyak opsi setelah ia benar-benar membuatnya menggunakan tweak
00:06:58seperti yang akan Anda lihat nanti. Suara salinan, mari kita lakukan mitis yang diselipkan karena jika Anda belum menyadari,
00:07:06kita melakukan seperti Olympus adalah nama perusahaannya, ini seperti aplikasi intelijen, jadi keseluruhan gambar ini
00:07:11yang kita tangani seharusnya seperti analogi api promethean ini, jadi hero
00:07:17komposisi gambar full bleed, mari kita lakukan gambar full bleed, urutan bagian, bum bum bum bum, dan Anda
00:07:26selalu bisa memutuskan untuk saya jika Anda bahkan tidak tahu, um, bukti sosial, putuskan untuk saya, putuskan untuk saya,
00:07:32dan inilah hal keren: tweak. Jadi, tweak akan lebih masuk akal di sini sebentar lagi, tapi saya selalu
00:07:39menyarankan gunakan tweak sebanyak mungkin dan kita selalu bisa menambahkan lebih banyak nanti. Jadi, kita akan menekan lanjutkan,
00:07:45dan sekarang ia akan mulai membuatnya untuk kita. Nah, gambaran singkat
00:07:50untuk Claud design saat ia membangun ini di bagian kanan atas di mana tertulis 'bagikan', jika saya mengklik ini,
00:07:56kita tidak terjebak di dalam Claud design selamanya, apa yang sangat keren tentang ini dan apa yang akan saya tunjukkan nanti
00:08:01adalah bahwa kita bisa mengekspor ini ke Claud code dan kemudian, seperti setelah kita memiliki solusi 89, kita selesai,
00:08:07kita hancur dalam hal penggunaan, kita bisa membawanya ke Claud code dan mengerjakannya sesuai keinginan kita,
00:08:12kita juga bisa mengekspornya sebagai HTML, mengirimnya ke Canva, ekspor sebagai PowerPoint atau PDF untuk
00:08:17mengunduh berbagai hal, jadi kita juga bisa membawa rekan satu tim, jadi Anda bisa menjadikannya sebagai upaya kolaboratif. Jadi,
00:08:22banyak opsi, dan Claud design secara keseluruhan sangat serbaguna. Dan inilah yang Claud design berikan
00:08:27kembali, dan saya akan memindahkan ini ke seluruh tempat selama video ini. Nah, hal pertama yang menarik
00:08:33perhatian Anda adalah tweak di sebelah kanan, jadi tweak adalah menu di halaman ini yang memungkinkan kita
00:08:40untuk mengubah elemen mikro halaman kita dengan sangat cepat, jadi saya bisa mengubah aksen, saya bisa mengubah
00:08:48tema dari terang ke gelap, yang lebih jelas di sini di bawah, Anda bisa mengubah headline, logo mark,
00:08:54nama harga, segala jenis gerakan, jadi itu membuat iterasi antara berbagai versi situs kita menjadi sangat sangat mudah.
00:09:03Selain itu, saya memiliki kemampuan untuk mengedit berbagai hal pada tingkat granular, jika saya datang ke sini ke
00:09:07kanan atas dan tekan edit, saya bisa mengklik berbagai hal seperti tombol di atas ini dan saya bisa mengubah
00:09:13warnanya secara langsung, saya bisa mengubah font, Anda tahu, padding, opasitas, semuanya, dan saya juga memiliki
00:09:19kemampuan untuk berkomentar, jadi saya bisa mengklik tombol yang sama dan bukannya mengubah
00:09:25nilai spesifik, saya bisa meninggalkan komentar seperti 'buat lebih besar', 'buat lebih kecil', atau saya bisa menggambarnya, jadi saya
00:09:30bisa menggambar di benda ini, Anda tahu, pilih semua ini dan katakan 'hei, pindahkan ke kiri' lalu kirim itu ke
00:09:39Claud di bawah sini, dan itu sebenarnya akan mengambil tangkapan layar dari apa yang baru saja saya tulis
00:09:44dan akan menjadi, 'oh oke, mari kita pindahkan itu sedikit ke kiri' dan kita bisa melihatnya sekarang memindahkannya ke kiri dan
00:09:49ia memiliki benda mengerikan yang terjadi di sana yang juga bisa kita hapus. Tetapi yang harus Anda lakukan pada
00:09:55titik ini adalah, pertama-tama, Anda tahu, lihat sekilas seperti, oke, apa pendapat saya tentang desain keseluruhan,
00:10:02lulusan pertama tampaknya baik-baik saja. Yang terpenting dalam hal gambar kita, apakah kita perlu kembali ke dalam
00:10:09Nano Banana Pro dan mengedit gambar ini? Apakah kita perlu membuatnya lebih kecil, lebih besar, apa pun? Jika itu terlihat
00:10:14bagus, saran saya saat kita di Claud design adalah kita menggunakan semacam proses dua langkah. Satu, apa yang ingin
00:10:21saya lakukan adalah saya ingin melihat varian berbeda dari halaman web saya, dan saya tidak berbicara tentang perubahan kecil,
00:10:26saya ingin melihat setidaknya dua tata letak yang benar-benar berbeda lagi untuk mendapatkan ide jalur mana yang
00:10:32ingin saya ambil, dan setelah kita menemukan varian yang kita sukai pada tingkat makro, baru kemudian kita memfokuskannya dan kita
00:10:37menampilkan lebih banyak tweak, bukan hanya lima tweak, saya berbicara seperti 15 tweak, jadi kita bisa benar-benar mendapatkan
00:10:43sesuatu yang kita sukai karena tujuannya adalah untuk mencapai solusi 90 sebelum kita membawa video masuk dan kemudian
00:10:48sebelum kita membawanya ke Claud code untuk menjadikannya milik kita. Dan untuk melakukannya sangat mudah, yang perlu kita lakukan
00:10:53hanyalah memberi prompt pada Claud design, jadi saya akan berkata 'bisakah Anda membuat dua varian tata letak tambahan untuk
00:10:58halaman web kita yang bisa saya klik selain yang saat ini?' Jadi, hanya beberapa desain baru yang bisa kita
00:11:03sertakan. Dan ide membuat varian makro ini dan kemudian setelah kita memutuskan varian, membuat banyak
00:11:09tweak, inilah yang benar-benar memisahkan Claud design dari Claud code. Nah, lurus saja, prompt
00:11:16demi prompt dalam ruang hampa, saya pikir desain sedikit lebih baik daripada Claud code di front end, tetapi
00:11:20semacam variasi dan iterasi visual ini yang bisa kita lakukan dengan sangat sangat cepat, saya pikir itulah kunci besarnya
00:11:27dengan Claud design, dan di situlah letak nilainya, karena jika kita mencoba melakukan hal yang sama di dalam
00:11:32Claud code, itu agak melelahkan. Jadi, inilah yang saya bicarakan, di atas kita memiliki versi sinematik
00:11:37yang merupakan yang asli, dan sekarang ia memberi kita arsip serta versi terminal, dan Anda bisa
00:11:45melihat mereka semua cukup unik, dan ini juga berlaku untuk bagian halaman lainnya, bukan hanya bagian hero
00:11:53tapi semuanya. Dan sejujurnya, melihat ini, saya pikir terminal sebenarnya terlihat cukup keren. Kita harus
00:12:01mengubah gambar di sini dan kita pasti harus menjauh dari video, tapi langsung saja
00:12:09Anda melihat ini dan saya pikir ini terlihat sangat keren dan jelas terlihat berbeda dari
00:12:13halaman web standar sehari-hari yang dibuat AI. Jadi inilah yang saya bicarakan ketika berbicara tentang
00:12:20benar-benar memanfaatkan kekuatan Claud design, melihat variasi-variasi ini karena saya tidak akan
00:12:24pernah berpikir untuk melakukan sesuatu seperti ini atau bahkan tahu cara memberikan prompt agar ia memberi saya ini. Saya sangat
00:12:29suka ini. Tapi untuk menjaga video ini tetap pada jalurnya, yang akan kita lakukan adalah kita akan tetap dengan
00:12:35sinematik, tapi saya ingin menunjukkan itu kepada Anda karena idenya adalah Anda melakukan ini, pilih yang Anda sukai, lalu
00:12:40Anda beralih ke langkah dua dari proses Claud design, yaitu tweak, tweak, tweak. Dan jadi kita punya semua
00:12:46tweak ini di sini, tetapi sama seperti bagaimana saya meminta Claud design tadi untuk memberi saya beberapa variasi lagi, sekarang
00:12:51saya akan memintanya untuk sangat agresif dengan tweak yang ia berikan kepada saya. Saya tidak harus tahu tweak apa
00:12:56yang saya inginkan, saya tidak harus tahu, 'oh saya ingin bisa mengubah tema atau headline atau logo', saya
00:13:00tidak tahu, berikan saja saya banyak dan kita akan mengetahuinya. Jadi saya menulis di bawah sini, 'mari kita tetap dengan
00:13:04sinematik, Anda dapat menghapus dua lainnya dan juga secara agresif menambah jumlah tweak yang tersedia'
00:13:11dan kita akan melihat apa yang ia hasilkan. Sekarang kita bisa melihat semua tweak tambahan yang ia tambahkan, jadi kita
00:13:15pergi dari sekitar lima tweak menjadi sekitar 15 atau lebih, yang mana bagus, jadi kita punya tweak asli ini
00:13:22dengan aksen, tema, tanda logo, itu terlihat bagus, font, font tubuh, font mono, skala tipe
00:13:36tunggu, intinya adalah saya sekarang bisa terus melakukan semua ini berulang kali, saya bahkan bisa
00:13:42mengubah kegelapan overlay CTA, cahaya bara, seperti itu tidak berhenti, tidak berhenti. Jadi saya menjalankan
00:13:51semua tweak di pihak saya, menyingkirkan bara api, dan inilah yang akhirnya kita dapatkan. Sekarang saya memiliki
00:13:56kemampuan untuk melihatnya layar penuh jika saya pergi ke present di atas, layar penuh, sehingga kita bisa mendapatkan ide yang lebih baik tentang
00:14:02seperti apa jadinya, dan untuk saat ini, bagi saya ini terlihat cukup bagus. Ingat, kita tidak memerlukan solusi 100
00:14:08di dalam Claud design, kita ingin sedekat mungkin, kita ingin membuat semua keputusan desain
00:14:14yang kita bisa, dan kemudian apa yang ingin kita lakukan akhirnya adalah membawanya kembali ke Claud code dan melakukan perubahan kecil
00:14:18karena ingat Claud design adalah pemakan sumber daya, Anda hanya mendapatkan penggunaan terbatas, jadi kita ingin membuatnya
00:14:23berarti. Jadi sekarang kita bisa mentransisikannya ke bagian video di mana kita mengambil latar belakang ini dan benar-benar
00:14:29menganimasikannya. Nah, catatan samping, penting bahwa kita melakukan semua ini dengan latar belakang diam karena
00:14:35ketika kita berbicara tentang pengguna seluler, kita tidak ingin pengguna seluler kita terkena beberapa video raksasa yang
00:14:39bisa memperlambat mereka, jadi jika seseorang menggunakan seluler dan mereka pergi ke situs web kita yang kita atur di sini, mereka
00:14:43hanya akan melihat gambar diam. Jadi kita akan menggunakan CDance untuk ini. Jadi sekali lagi saya kembali ke sini di dalam
00:14:47Higgsfield, saya akan pergi ke CDance 2.0. Anda tidak harus menggunakan CDance, CDance hanyalah yang terbaik di luar sana
00:14:52saat ini, pilihan lain termasuk Kling 3.0, Anda juga bisa menggunakan sesuatu seperti Vo 3.1, dan pengaturan videonya
00:14:58sangat mudah, secara harfiah Anda hanya akan mengambil gambar Anda dan Anda akan menjatuhkannya ke sini,
00:15:04jadi Anda benar-benar hanya menarik dan menjatuhkannya di sini sebagai bingkai awal, lalu kita hanya memberikannya
00:15:08sebuah prompt. Nah, promptnya sangat dasar, yang saya tulis hanyalah 'jaga gerakan sangat lambat, awan hampir tidak
00:15:15bergerak, bara dari api di tangannya perlahan melayang', dan kita mendapatkan sesuatu seperti ini. Kita ingin
00:15:21halus, kita tidak ingin gila, Anda tidak ingin itu terlihat seperti video game liar, Anda ingin itu hampir
00:15:26hanya tampak seperti GIF animasi yang santai, dan itu karena gambar hero hanya memberikan kita beberapa
00:15:32bakat ke situs kita, Anda tidak ingin itu mengambil alih segalanya, dan kedua, seperti yang akan Anda lihat di sini, itu
00:15:37akan berputar karena paling banyak Anda akan mendapatkan 15 detik dari benda ini, idealnya Anda dapat membuat
00:15:43perulangan yang sempurna, tetapi itu bisa agak sulit, jadi taruhan terbaik adalah melakukan apa yang kita lakukan di sini dan hanya memiliki
00:15:48video 15 detik yang kedengarannya seperti banyak di awal tapi sebenarnya tidak terlalu berat dan
00:15:54hal lain ketika kita memilih 15 detik, kemungkinan seseorang pergi ke situs web Anda dan mereka
00:15:59hanya duduk di sana di halaman hero Anda membaca selama 15 detik dan kemudian mereka terkejut dengan
00:16:04potongannya saat kembali ke putaran kecil tidak mungkin, apa yang paling mungkin terjadi adalah mereka pergi ke
00:16:10hero Anda, 'wah terlihat keren', 10 detik kemudian mereka sudah turun ke halaman arahan lainnya untuk melihat apa yang
00:16:15semua tentang Anda. Jadi, jaga prompt tetap sederhana, jaga agar tetap halus. Jika Anda ingin menjadi gila, silakan, buat itu
00:16:20selama mungkin, selama 15 detik, Anda ingin itu menjadi 16 kali 9 dan Anda ingin itu menjadi setidaknya
00:16:261080p. Beberapa model akan memberi Anda opsi untuk meningkatkan prompt di mana seperti hampir
00:16:30mengatakan, 'hei, Anda memasukkan prompt buruk Anda dan kami membuatnya lebih baik', jangan lakukan itu, Anda selalu menginginkan kontrol penuh
00:16:34atas prompt Anda dan berharap Anda harus melakukan beberapa variasi ini sampai Anda mendapatkannya
00:16:40dengan benar. Jadi kemungkinan untuk mendapatkan satu yang benar-benar berhasil, Anda harus melakukan ini empat atau lima kali
00:16:45sampai Anda akhirnya mendapatkan output yang Anda cari. Tapi setelah kita mendapatkan output itu, yang perlu kita lakukan hanyalah
00:16:50mengunduhnya, lalu kita kembali ke Claud design dan kita hanya akan menjatuhkan file mp4 itu ke dalam
00:16:57jendela prompt, jadi saya baru saja mengunggahnya di bawah sini di sebelah kiri lalu saya menulis 'bisakah kita menukar gambar diam
00:17:01untuk video yang baru saja saya unggah untuk latar belakang hero?' Dan kemudian ia akan memberi Anda sesuatu seperti
00:17:05ini, dan itu benar-benar sesederhana itu, dan pada titik inilah kita hampir selesai di dalam
00:17:12Claud design. Maksud saya jika Anda ingin melakukan lebih banyak perubahan, lakukan lebih banyak tweak, sepenuhnya terserah Anda, tapi jika
00:17:17Anda berada di tempat ini, saya akan mengatakan Anda siap untuk benar-benar keluar dari Claud design dan sekarang membawanya
00:17:22ke sesuatu seperti Claud code seperti yang kita bicarakan tadi. Sangat mudah untuk melakukannya, kita akan naik ke
00:17:26bagikan dan kita akan pergi ke 'serah terima ke Claud code'. Nah, karena ini termasuk video dalam mp4,
00:17:34jika Anda mencoba hanya melakukan perintah salin, itu mungkin mengalami kesulitan untuk benar-benar mengunduhnya, jadi apa yang
00:17:38Anda ingin lakukan sebagai gantinya adalah Anda hanya ingin mengunduh zip-nya, jadi itu akan mengambil
00:17:44semua file, semua video langsung itu, semua hal pengkodean di bawah kap, dan hanya memasukkannya ke dalam file zip
00:17:49dan jadi Anda bisa melakukan unduh zip, Anda kemudian ingin mengekstrak semua ini dan kemudian Anda hanya akan
00:17:56mengambil folder yang diekstrak itu, jatuhkan ke dalam Claud code, dan katakan 'unduh semuanya, kita sekarang akan
00:18:03membuat situs web menggunakan semua kode ini', dan Anda hampir selesai pada saat itu. Jadi saya menjatuhkannya di sana
00:18:10dan berkata 'ekstrak semua file ini untuk halaman web yang kita bangun', lalu putar server pengembangan, dan
00:18:14inilah halaman web di server pengembangan, sudah berputar, dan dengan itu transfer ke Claud code selesai,
00:18:19Anda telah mengatur bagian hero animasi, ia memiliki video, ia memiliki gambar diam, semuanya siap untuk
00:18:25Anda lakukan perubahan kecil, lalu dorong ke GitHub sebelum Anda mendorongnya ke Vercel dan benar-benar
00:18:29menhostingnya secara online. Jadi di situlah saya akan meninggalkan kalian untuk hari ini, saya harap ini dapat
00:18:33memberikan sedikit pencerahan tentang cara menggabungkan kekuatan Claud design dan CDance 2.0 untuk membuat semacam
00:18:39situs web animasi ini. Seperti biasa, beri tahu saya pendapat Anda, pastikan untuk memeriksa Chase AI jika
00:18:44Anda ingin mendapatkan semua sumber daya itu, dan sampai jumpa.

Key Takeaway

Alur kerja pembuatan situs web animasi dilakukan dengan menggabungkan desain tata letak berbasis referensi di Claude Design, animasi halus berdurasi 15 detik dari Seedance 2.0, dan finalisasi teknis di Claude Code.

Highlights

Pembuatan situs web animasi dimulai dengan menentukan komposisi tata letak hero menggunakan referensi dari Dribbble sebelum menghasilkan gambar di Nano Banana Pro.

Claude Design memungkinkan iterasi desain makro dengan membuat beberapa varian tata letak secara otomatis sebelum melakukan penyesuaian granular.

Proses penyesuaian detail atau 'tweak' di Claude Design mencakup perubahan elemen seperti aksen, tema terang-gelap, tipografi, dan overlay CTA untuk mencapai solusi desain 90% sebelum dipindahkan ke Claude Code.

Video latar belakang berdurasi 15 detik dihasilkan menggunakan Seedance 2.0 dengan mengunggah gambar hero sebagai bingkai awal dan menggunakan prompt yang membatasi gerakan agar tetap halus.

Situs web yang telah selesai dirancang di Claude Design dapat diekspor sebagai file ZIP dan dipindahkan ke Claude Code untuk pengembangan teknis lebih lanjut dan hosting di Vercel.

Penggunaan Claude Design untuk membuat satu halaman arahan memakan biaya sekitar lima dolar dalam bentuk penggunaan tambahan.

Timeline

Perencanaan Komposisi dan Pembuatan Gambar Awal

  • Komposisi halaman harus ditentukan sebelum membuat gambar di Nano Banana Pro untuk memastikan ruang kosong yang cukup bagi teks dan elemen UI.
  • Dribbble digunakan sebagai sumber referensi untuk membedah komposisi hero dan tata letak halaman arahan yang efektif.
  • Nano Banana Pro menghasilkan gambar awal berdasarkan prompt yang mencerminkan komposisi yang telah direncanakan sebelumnya.

Langkah pertama melibatkan perencanaan visual di mana gambar hero akan ditempatkan. Gambar harus menyisakan ruang untuk teks hero, bilah navigasi, dan elemen lainnya. Referensi dari situs seperti Dribbble membantu menentukan apakah teks harus diletakkan di samping atau di tengah gambar. Setelah komposisi jelas, gambar dibuat dan siap untuk diproses menjadi desain situs web.

Iterasi Desain di Claude Design

  • Claude Design menerima tangkapan layar gambar hero dan prompt detail untuk membangun prototipe situs web.
  • Fitur 'tweak' memungkinkan perubahan cepat pada elemen desain seperti palet warna, tipografi, dan tema tanpa harus menulis kode secara manual.
  • Variasi tata letak makro dibuat untuk memilih jalur desain yang paling tepat sebelum memfokuskan iterasi pada detail mikro.

Claude Design bertindak sebagai alat pembuat prototipe yang mampu menghasilkan desain fidelitas tinggi. Pengguna mengunggah gambar yang dibuat sebelumnya dan memberikan prompt detail tentang perusahaan dan elemen yang diinginkan. Sistem ini menawarkan mode rencana yang mengajukan pertanyaan untuk menyempurnakan hasil. Iterasi dilakukan dengan memilih varian tata letak terlebih dahulu, lalu menerapkan berbagai tweak secara agresif untuk mematangkan desain.

Animasi Latar Belakang dan Finalisasi Teknis

  • Seedance 2.0 menganimasikan latar belakang gambar diam dengan prompt yang membatasi gerakan agar tetap halus seperti GIF santai.
  • Video 15 detik digunakan sebagai latar belakang hero untuk menghindari penggunaan bandwidth berlebih pada pengguna seluler.
  • Proyek dari Claude Design diekspor sebagai file ZIP dan diimpor ke Claude Code untuk penyelesaian teknis dan hosting.

Setelah desain web disetujui, gambar hero diam diubah menjadi video animasi halus menggunakan Seedance 2.0. Prompt yang digunakan sangat spesifik untuk menjaga gerakan tetap lambat dan subtil. File MP4 yang dihasilkan kemudian diintegrasikan kembali ke dalam proyek Claude Design. Langkah terakhir adalah mengunduh seluruh aset proyek dan memindahkannya ke Claude Code untuk pengembangan server lokal dan penyebaran ke GitHub atau Vercel.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video