Transcript
00:00:00"AI tidak punya selera dan itu kesalahan Anda."
00:00:03Alasan hasil visual Anda sangat biasa saja
00:00:05adalah karena perintah Anda sangat biasa saja.
00:00:08Anda tidak menggunakan jenis terminologi,
00:00:10bahasa, dan nomenklatur
00:00:11yang akan digunakan oleh seorang desainer sungguhan.
00:00:13Tapi untungnya bagi kita, saya menemukan solusinya.
00:00:16Namanya Impeccable.
00:00:17Dan ini adalah repositori GitHub sumber terbuka
00:00:20yang pada dasarnya merupakan satu keahlian
00:00:23yang bisa kita impor ke Cloud Code
00:00:25yang memperbaiki masalah ini.
00:00:27Ini memberikan Cloud Code bahasa desain
00:00:29yang mengajarkan seperti apa desain yang bagus sebenarnya
00:00:32sekaligus memberi tahu desain buruk apa yang harus dihindari.
00:00:36Dan hari ini saya tidak hanya akan menunjukkan cara kerja keahlian ini,
00:00:39kita akan menggunakannya untuk membangun situs web baru
00:00:42dan mengedit salah satu situs web saya yang sudah ada.
00:00:45Jadi di akhir video ini, Anda tidak punya alasan lagi
00:00:48untuk membuat desain front-end yang biasa saja.
00:00:51Jadi Impeccable adalah repositori GitHub sumber terbuka
00:00:54yang memberi kita satu keahlian
00:00:55yang memungkinkan kita membuat desain front-end
00:00:58yang tidak buruk.
00:01:00Ini memang satu keahlian,
00:01:01tapi itu sedikit meremehkannya
00:01:03karena satu keahlian ini mencakup 23 perintah yang berbeda.
00:01:07Ini memiliki tujuh file referensi khusus domain.
00:01:10Ini memberi tahu kita pola anti-apa yang harus dihindari
00:01:13dan bahkan memungkinkan kita untuk mengedit hal-hal di dalam browser.
00:01:17Jadi ini sebenarnya alat yang sangat kuat.
00:01:20Ini bukan sekadar keahlian desain front-end
00:01:22yang hanya berisi beberapa paragraf
00:01:24tentang apa yang harus dilakukan Cloud Code.
00:01:26Tapi kerumitan itu bisa sedikit membingungkan
00:01:28karena ada 23 perintah yang berbeda
00:01:31yang melakukan sejumlah hal yang berbeda
00:01:34terkait desain Anda.
00:01:35Mereka membedah semuanya di sini di dalam repo,
00:01:37tapi sebenarnya Anda tidak akan pernah mengingat semuanya.
00:01:40Tapi ada dua hal yang membantu di sini.
00:01:42Satu, tentu saja, Cloud Code akan melakukan pekerjaan yang cukup baik
00:01:44dalam mencari tahu mana yang harus Anda gunakan.
00:01:46Tapi kedua, mereka memiliki seluruh situs web
00:01:49yang juga menunjukkan kepada kita apa fungsi dari 23 keahlian ini.
00:01:53Jadi GitHub menautkan ke situs web tersebut,
00:01:54yaitu impeccable.style.
00:01:56Dan hal yang keren adalah untuk setiap keahlian yang bisa diterapkan,
00:01:59kita bisa melihat seperti apa tampilannya sebelumnya,
00:02:02yaitu Cloud Code biasa,
00:02:03dan seperti apa tampilannya setelah
00:02:05menggunakan perintah impeccable tersebut.
00:02:07Jadi cukup rapi.
00:02:09Impeccable benar-benar memiliki tujuh pilar desain,
00:02:12tipografi, warna, desain spasial, responsivitas,
00:02:15interaksi, gerak, dan penulisan UX.
00:02:17Jadi ini bukan hanya tentang warna dan hal-hal seperti itu.
00:02:21Ini cukup komprehensif.
00:02:22Dan di sini, kita bisa menelusuri
00:02:25semua perintah yang berbeda ini.
00:02:27Dan seperti yang saya katakan, lihat seperti apa tampilannya
00:02:29saat menggunakan keahlian dan tidak menggunakan keahlian.
00:02:31Jadi jika Anda bertanya, apa sebenarnya yang dilakukan ini?
00:02:34Bisakah saya melihatnya beraksi?
00:02:35Nah, ini tempat untuk melakukannya.
00:02:37Situs web ini juga menyertakan studi kasus
00:02:39yang menunjukkan bagaimana mereka membuat situs web ini
00:02:40dengan impeccable dan satu gambar.
00:02:42Dan menurut saya hasilnya cukup keren.
00:02:43Dan terakhir, mereka memamerkan mode langsung ini,
00:02:45yang akan kita coba mainkan sedikit,
00:02:47yang masih dalam versi alfa,
00:02:48dan memungkinkan kita benar-benar mengotak-atik situs web kita
00:02:51melalui browser seperti yang saya bicarakan sebelumnya.
00:02:53Ini juga memiliki ekstensi Chrome dan CLI,
00:02:56tapi sejujurnya,
00:02:56kita mendapatkan sekitar 99% nilainya melalui keahlian tersebut.
00:02:59Jadi itulah yang akan kita fokuskan hari ini.
00:03:01Nah, untuk menginstal benda ini, hanya perlu satu baris kode,
00:03:04yang harus Anda lakukan hanyalah menyalin ini,
00:03:06masuk ke terminal Anda dan tempel di sana.
00:03:07Nah, saat menggunakan impeccable,
00:03:09sebenarnya ada dua jalan yang bisa diambil.
00:03:11Satu adalah Greenfield,
00:03:12di mana kita membangun situs web dari awal,
00:03:14dan dua adalah mengedit situs yang sudah ada.
00:03:17Hari ini kita akan melakukan keduanya dan lebih banyak lagi
00:03:20karena saya tidak hanya akan menunjukkan kepada Anda
00:03:22cara membangunnya dari awal,
00:03:23saya juga akan menunjukkan seperti apa tampilannya
00:03:25ketika kita membangun dari awal dengan semacam gambar referensi
00:03:27dengan semacam mood board.
00:03:30Setelah kita melakukannya, kita akan masuk ke situs web saya yang sebenarnya
00:03:33dan kita akan melihat apa pendapat impeccable tentangnya
00:03:36dan sampah apa yang bisa kita perbaiki dari pekerjaan saya sendiri.
00:03:41Terakhir, kita akan melihat impeccable live,
00:03:43yang masih dalam tahap alfa,
00:03:44dan melihat seberapa bagus alat ini sebenarnya saat ini.
00:03:48Tapi sebelum kita menyelami pembuatan sebenarnya,
00:03:50sepatah kata dari sponsor favorit semua orang, saya.
00:03:54Bulan lalu saya merilis Masterclass Cloud Code saya,
00:03:56dan ini adalah cara nomor satu untuk beralih dari nol ke AI Dev,
00:03:59terutama jika Anda tidak memiliki latar belakang teknis.
00:04:02Saya memperbarui kursus ini setiap minggu,
00:04:05jadi ini adalah tempat terbaik untuk mencari tahu
00:04:07cara menggunakan alat yang luar biasa ini.
00:04:10Kami fokus pada kasus penggunaan nyata.
00:04:12Saya baru saja mengeluarkan rencana pelajaran
00:04:13Cloud Code Agenic OS saya secara lengkap.
00:04:16Jadi jika Anda ingin mendapatkannya,
00:04:18Anda bisa menemukannya di dalam Chase AI Plus.
00:04:20Ada tautan ke sana di komentar yang disematkan.
00:04:23Jadi mari kita mulai,
00:04:24dan kita akan memulainya dengan proyek Greenfield.
00:04:27Jadi kita akan membangun situs web dari awal.
00:04:29Nah, sekali lagi, ada begitu banyak perintah,
00:04:31bisa jadi sedikit membingungkan.
00:04:32Jika Anda memulai sesuatu dari awal,
00:04:35saya sarankan untuk membuka dengan impeccable craft,
00:04:39karena ini akan menyertakan
00:04:41beberapa perintah anak seperti impeccable teach.
00:04:44Nah, apa arti dari semua ini?
00:04:45Yah, impeccable craft berarti
00:04:48ia akan melalui versinya sendiri dari mode rencana
00:04:50dan bertanya tentang situs web kita, produk kita,
00:04:53apa yang sebenarnya ingin kita bangun.
00:04:55Dan dalam proses itu, ia akan membuat dua file.
00:04:59Ini akan membuat product.markdown
00:05:01dan design.markdown.
00:05:02Nah, design.md kurang lebih sama dengan apa
00:05:07yang kita lihat di Google Stitch.
00:05:09Kalian ingat Google Stitch, kan?
00:05:11Alat desain gratis dari Google.
00:05:13Anda memiliki sistem desain ini,
00:05:14dan Anda memiliki file design.md ini,
00:05:16yang merupakan file markdown yang sangat mendalam,
00:05:20yang memberi tahu AI cara membangun sesuatu.
00:05:21Seluruh konstruksi design.md ini
00:05:24sedang menjadi standar industri, bisa dikatakan begitu.
00:05:27Anda melihat ini di mana-mana akhir-akhir ini.
00:05:29Dan impeccable mengikuti pendekatan itu.
00:05:31Jadi pada dasarnya ia akan mewawancarai kita
00:05:32dan mencari tahu apa yang kita bangun
00:05:34dan bagaimana kita ingin tampilannya.
00:05:36Dan setelah melakukan wawancara,
00:05:37ia akan membangun halaman arahan untuk kita.
00:05:39Jadi di dalam Cloud Code,
00:05:41saya berada di direktori baru bernama impeccable-test.
00:05:44Perintahnya adalah impeccable-spacecraft.
00:05:47Dan perintahnya adalah mari kita buat halaman arahan
00:05:49untuk produk SaaS palsu saya, Lighthouse.
00:05:51Ini adalah platform analitik untuk pendiri solo/tim kecil.
00:05:54Tanyakan apa saja pertanyaan yang Anda inginkan.
00:05:56Ini kurang lebih sama dengan perintah
00:05:58yang saya berikan kepada Huashu Design di video terakhir saya.
00:06:01Jika Anda belum memeriksanya, lakukanlah,
00:06:03yang pada dasarnya adalah tiruan desain cloud.
00:06:06Jadi akan menarik untuk melihat
00:06:08bagaimana impeccable bertahan dibandingkan sistem desain itu.
00:06:11Dan jika Anda belum memeriksa video itu,
00:06:13saya akan menautkannya di atas.
00:06:14Jadi ia kembali dengan 13 pertanyaan.
00:06:16Empat yang pertama semuanya tentang produk,
00:06:18seperti siapa pelanggan sebenarnya?
00:06:19Bagaimana Anda akan mendeskripsikan Lighthouse?
00:06:21Apa pola pikir pengunjungnya?
00:06:22Dan apa CTA utamanya?
00:06:23Apa tujuan sebenarnya dari halaman arahan ini?
00:06:25Beberapa pertanyaan berikutnya adalah tentang suara dan tampilan
00:06:28sebelum masuk ke ruang lingkup.
00:06:29Apakah kita hanya mengerjakan pahlawan saja?
00:06:30Gulir penuh, tangkapan layar nyata?
00:06:32Seperti, apakah Anda punya aset lain untuk saya?
00:06:34Dan yang saya suka di sini adalah kedalaman pertanyaannya.
00:06:36Ini lebih banyak pertanyaan daripada yang ditanyakan Huashu Design
00:06:40di video terakhir.
00:06:41Dan ini cukup mendekati jumlah pertanyaan
00:06:43yang akan Anda dapatkan dari sesuatu seperti Claude Design.
00:06:44Seperti ini sangat mendalam dan saya senang melihatnya.
00:06:46Jadi yang akan saya lakukan adalah saya hanya akan mengisinya.
00:06:49Saya akan membuatnya cukup standar.
00:06:50Saya tidak perlu melakukan hal yang gila.
00:06:52Dan kita akan meminta gulir penuh.
00:06:53Jadi inilah yang diberikan impeccable kepada kita pada percobaan pertamanya
00:06:56dengan panduan yang cukup minim.
00:06:57Yang benar-benar kami lakukan hanyalah menjawab pertanyaannya.
00:06:59Kami tidak memberinya aset apa pun atau bahkan contoh.
00:07:01Nah, langsung saja,
00:07:02saya pasti tidak berpikir sampah AI begitu melihat ini,
00:07:05meskipun Anda mulai melihat warna krem ini
00:07:08dan font Sarah di mana-mana dalam desain front end yang lebih modern ini,
00:07:11terutama hal-hal seperti Claude Design.
00:07:13Saya suka dasbor yang dihasilkannya ini,
00:07:16pasti suka ini.
00:07:18Saya suka karena saya tidak hanya melihat standar Anda, Anda tahu,
00:07:20empat kotak bento yang Anda lihat di setiap
00:07:23situs web desain AI.
00:07:25Bagian ini terlihat cukup bagus.
00:07:26Kami memiliki kutipan, harga penuh,
00:07:30dan kemudian seperti, hei, silakan berikan email Anda.
00:07:32Jadi untuk percobaan pertama, lumayan bagus.
00:07:35Tapi yang benar-benar suka saya lakukan akhir-akhir ini
00:07:37terkait desain web saya dengan Claude code adalah
00:07:40saya tidak membiarkannya hanya memberi saya satu hasil seperti ini.
00:07:44Jadi apa yang saya sampaikan kepada impeccable alias Claude code adalah
00:07:47saya tidak ingin hanya satu tata letak situs web.
00:07:50Seperti yang Anda lihat di sini, ini adalah hasil pertama yang diberikan.
00:07:52Saya ingin melihat tiga varian berbeda yang bisa saya pilih.
00:07:56Dan saya ingin semuanya cukup berbeda.
00:07:59Selain itu, saya ingin bisa mengeklik semuanya
00:08:01dan saya ingin melihat semuanya berdampingan.
00:08:03Jadi saya ingin melihat semacam tata letak makro
00:08:05sebelum kita benar-benar terjun ke detailnya
00:08:08dan mulai bermain dengan komponen.
00:08:09Lalu impeccable memberi saya ini.
00:08:11Jadi kita punya versi editorial yang baru saja kita lihat.
00:08:15Ia membuat satu yang disebut drenched di sini.
00:08:17Gaya yang jelas berbeda, lebih banyak warna.
00:08:20Dan kemudian ada gaya brutalist.
00:08:22Jadi ini tampilan untuk yang drenched,
00:08:24jelas jauh lebih berbeda.
00:08:26Saya harus katakan kita punya sedikit tumpang tindih di bagian depan,
00:08:29tapi ini terlihat cukup berbeda dari kebanyakan hasil AI.
00:08:34Saat kita melihatnya, Anda tahu, saya agak menyukai keberanian
00:08:39dari situs web ini, meskipun saya tidak terlalu tahu tentang warnanya.
00:08:43Tapi saya akan katakan saya menyukai yang brutalist ini.
00:08:44Sangat abu-abu,
00:08:46tapi saya suka cara penempatan angkanya.
00:08:48Saya suka bagaimana kotak-kotaknya agak bergeser.
00:08:52Seperti garis-garisnya yang tidak benar-benar sejajar.
00:08:54Saya benar-benar menyukai yang ini.
00:08:56Menurut saya ini terlihat sangat keren dan sangat berbeda.
00:08:58Dan jadi menurut saya yang akan kita lakukan adalah kita akan memilih
00:09:02yang satu ini untuk saat ini.
00:09:04Dan perlu Anda ketahui, keseluruhan hal tentang desain rangkap tiga ini
00:09:07dan melihat semuanya sekaligus,
00:09:08itu bukan sesuatu yang melekat pada impeccable.
00:09:12Ini adalah sesuatu yang saya lakukan.
00:09:13Ini hanya sebuah perintah tunggal.
00:09:14Dan saya sangat menyarankan Anda melakukan ini tidak peduli apa jenis
00:09:17desain atau keahlian yang Anda gunakan.
00:09:19Saya pikir ini sesuatu yang saya dapatkan dari Stitch
00:09:23karena Google Stitch membuatnya sangat mudah
00:09:25untuk melakukan hal semacam ini di mana Anda bisa melihat
00:09:26semua variasi berbeda ini pada halaman yang sama
00:09:29lalu membandingkan dan membedakannya.
00:09:30Dan bagi saya pribadi, saya harus melihat hal-hal visual ini
00:09:33untuk memiliki gambaran tentang ke mana saya ingin pergi.
00:09:37Jadi saya sangat menyarankan Anda melakukan ini.
00:09:38Anda tidak harus melakukan tiga.
00:09:39Anda bisa melakukan enam, Anda bisa melakukan satu juta.
00:09:41Dan juga saat Anda meminta Claude code
00:09:42untuk melakukan hal semacam ini, katakan saja,
00:09:44saya ingin bisa melihat ketiganya di halaman yang sama.
00:09:47Saya ingin bisa membukanya dalam layar penuh satu per satu.
00:09:50Dan Anda juga bisa memintanya untuk memberi Anda banyak
00:09:53pilihan makro yang berbeda,
00:09:55lalu Anda bisa memilih dari pilihan tersebut
00:09:57dan kemudian memintanya untuk membuatnya.
00:09:57Karena jelas butuh sedikit waktu untuk menghasilkan ini.
00:09:59Jadi sekarang kita sudah punya halaman landas yang kita sukai,
00:10:01sekarang waktunya untuk mulai mengedit beberapa hal,
00:10:03di mana Impeccable Live yang baru berperan.
00:10:06Jadi yang harus kita lakukan hanyalah mengatakan,
00:10:07hei, ayo jalankan Impeccable Live pada halaman Brutalist ini.
00:10:10Nah, setelah Anda menjalankan perintah itu,
00:10:12Claude code akan memberi tahu Anda bahwa mode live sudah aktif.
00:10:14Ia akan memberikan tautan ke localhost
00:10:18yang harus Anda buka, atau Anda bisa cukup segarkan peramban Anda.
00:10:20Dan jadi di dalam sini, Anda sekarang bisa melihat
00:10:22saat saya menggulir ke sana kemari, konten sekarang disorot.
00:10:26Dan di bagian bawah sini, kita punya beberapa hal juga.
00:10:29Jadi pertama-tama, kita punya design.md.
00:10:32Itu memunculkan bilah sisi di sebelah kanan.
00:10:35Dan jika saya menekan raw, saya bisa melihat semua yang sebenarnya dibuat.
00:10:39Nah, jika saya mengeklik komponen tertentu
00:10:41seperti salinan utama ini, ada beberapa opsi yang muncul.
00:10:45Pertama-tama, kita punya free form, yaitu,
00:10:47hei, saya berikan saja teks perintah,
00:10:50atau saya punya akses ke dasarnya
00:10:52semua perintah Impeccable yang berbeda ini.
00:10:54Jadi bolder, quieter, distill, polish, adapt.
00:10:56Ini semua hanyalah bagian dari 23 perintah Impeccable
00:11:00yang kita bicarakan tadi.
00:11:02Jadi katakanlah saya melakukan sesuatu seperti bolder.
00:11:04Jadi bolder pada dasarnya adalah perintah yang sudah dirancang sebelumnya.
00:11:09Dan jika kita lihat di sini di dalam dokumentasi Impeccable,
00:11:12apa yang akan dilakukan bolder adalah membuatnya lebih berani.
00:11:15Jadi ini sebelum, ini sesudahnya.
00:11:18Ini membuatnya hampir sedikit lebih mencolok.
00:11:21Jadi definisi tepatnya adalah mendorong desain yang aman
00:11:26menuju dampak tanpa meluncur ke dalam kekacauan,
00:11:28mengatakan kapan harus menggunakannya dan bagaimana cara kerjanya dan semua hal ini.
00:11:31Jadi jika kita melakukan bolder pada ini, dan sejujurnya,
00:11:32saya merasa ini sudah cukup berani.
00:11:34Saya tidak tahu apakah ini yang terbaik.
00:11:35Saya bisa menyempurnakannya lebih lanjut.
00:11:37Jadi saya bisa melakukan bolder ditambah perintah apa pun yang ingin saya lakukan.
00:11:40Katakanlah saya menulis add color.
00:11:43Saya lalu punya ini di sini yang mengatakan
00:11:46times three, times four, times two.
00:11:47Itu adalah berapa banyak variasi yang akan ditunjukkannya kepada saya.
00:11:50Dan kemudian kita tekan go.
00:11:51Jadi ini dalam arti tertentu semacam versi mikro
00:11:56dari apa yang kita lakukan di sini dalam hal variasi
00:11:58di mana saya seperti, baiklah, beri saya satu hal ini.
00:12:00Mari ubah, tunjukkan variasinya.
00:12:03Sekarang kita melakukan ini pada tingkat mikro
00:12:06dan kita bisa lebih spesifik
00:12:08dalam hal apa yang kita tuju, bukan?
00:12:09Dalam kasus ini, kita melakukan bolder.
00:12:10Kita bisa saja memilih salah satu dari 12 opsi tersebut
00:12:13dan inilah yang muncul.
00:12:14Jadi ya, sangat berani dibandingkan dengan opsi lainnya.
00:12:17Ini varian satu, varian dua,
00:12:21sedikit lebih tenang
00:12:22dan kemudian varian tiga agak liar, bukan?
00:12:25Juga kemampuan untuk menyetel varian ini.
00:12:27Jadi jika saya mengeklik tune, benar,
00:12:30kita bisa mengubah offset-nya.
00:12:31Contohnya ini, seperti yang liar, apakah Anda ingin terlihat?
00:12:36Seperti apa warna yang Anda inginkan?
00:12:39Jadi sekali lagi, jika kita berpikir kembali ke video terakhir saya
00:12:42atau Anda berpikir kembali ke Claude design, seperti penyesuaian,
00:12:44sekali lagi, ini hampir seperti penyesuaian mikro
00:12:47dan itu berlaku untuk semua varian.
00:12:50Sembunyikan kunci, tampilkan kunci, jadi banyak yang bisa kita lakukan.
00:12:53Katakanlah kita ingin menggunakan yang ini.
00:12:54Jadi jika saya ingin menggunakan itu, apa yang akan saya lakukan?
00:12:56Saya hanya harus menekan accept dan sekarang sudah diterapkan.
00:13:00Nah, jika Anda menekan accept dan itu mengalami gangguan seperti itu,
00:13:02hanya perlu memeriksa Claude code,
00:13:03pada dasarnya ia menerapkan perubahan Anda dan memuat ulang.
00:13:06Dan inilah tampilannya dengan perubahan yang diterapkan.
00:13:09Nah, satu hal yang belum saya bicarakan adalah detect.
00:13:10Jadi jika saya menekan detect di sini, apa yang dicarinya
00:13:13pada dasarnya adalah mencoba melihat, apakah ada sampah AI di sini?
00:13:17Apakah ia mendeteksi salah satu pola anti-desain
00:13:19yang kita bicarakan tadi?
00:13:20Nah, karena ini dibuat lengkap dengan impeccable,
00:13:24saya sangat ragu ia akan menemukan apa pun
00:13:26dan itulah mengapa kita tidak melihat apa pun muncul.
00:13:28Tapi kita akan lihat nanti saat kita melihat situs web saya sendiri,
00:13:31apakah itu masalahnya.
00:13:32Tapi begitulah cara sistem live bekerja.
00:13:34Dan menurut saya bagian ini sangat keren dan yang membedakannya,
00:13:37menurut saya dari keahlian dan repositori desain front end lainnya
00:13:41yang pernah Anda lihat di masa lalu,
00:13:42terutama fakta bahwa kita bisa membuat varian tambahan.
00:13:45Saya sangat optimis untuk bisa melihat
00:13:47semua varian berbeda ini sekaligus
00:13:49dan menyesuaikannya pada tingkat mikro, mikro, mikro ini.
00:13:52Jadi saya menyukai ini, tapi sekali lagi, ini masih versi alfa.
00:13:54Jadi, Anda tahu, mungkin Anda akan mengalami beberapa kesalahan.
00:13:57Ada beberapa hal kecil
00:13:59yang tampaknya sedikit kasar di bagian tepinya,
00:14:01seperti pemuatan ulang yang baru saja Anda lihat, tapi hei,
00:14:03menurut saya ini sangat keren.
00:14:04Jadi pastikan untuk memeriksa ini jika Anda menggunakan impeccable.
00:14:07Jangan hanya membuatnya dan selesai.
00:14:09Masuk ke live dan mainkan ini.
00:14:11Nah, setelah Anda mendapatkan halaman web ke tempat yang Anda sukai,
00:14:13ada lebih banyak perintah yang bisa Anda jalankan.
00:14:16Jadi kita bisa menjalankan sesuatu seperti polish
00:14:18di mana ia melakukan desain sistem final.
00:14:20Kita bisa melakukan sesuatu seperti harden
00:14:22di mana ia akan melihat kasus-kasus ekstrem dan kesalahan
00:14:24dan memastikan semuanya berfungsi.
00:14:25Seperti yang saya katakan, ini sangat, sangat canggih
00:14:28dan cukup dalam dalam hal jumlah perintah yang bisa kita jalankan.
00:14:30Tapi demi waktu, yang akan kita lakukan sekarang
00:14:33adalah saya akan menunjukkan kepada Anda cara membangun dari nol,
00:14:35tapi kali ini kita akan menggunakan
00:14:38pada dasarnya seperti papan suasana atau mock-up
00:14:40dari jenis visi yang ingin kita dorong ke impeccable.
00:14:43Karena saya ingin melihat seperti apa ini
00:14:45saat kita meniru apa yang mereka lakukan dalam studi kasus mereka,
00:14:48karena apa yang mereka lakukan adalah mereka mengambil gambar ini,
00:14:50memasukkannya ke Claude Code, memasukkannya ke impeccable,
00:14:52dan, baiklah, membuat situs web ini,
00:14:53dan mereka bisa mendapatkan sesuatu
00:14:54yang terlihat cukup mengagumkan.
00:14:55Jadi saya membuat beberapa gambar
00:14:58yang cocok dengan estetika yang digunakan impeccable dalam studi kasus mereka,
00:15:02tapi kita menggunakan Lighthouse sebagai gantinya,
00:15:04jadi setidaknya kita bisa mendapatkan tes
00:15:07yang merupakan perbandingan satu banding satu.
00:15:09Jadi saya cukup suka yang ini, jadi saya pikir kita akan memilih ini.
00:15:11Sama seperti sebelumnya, saya menjalankan impeccable craft sebagai keahliannya.
00:15:15Ia kemudian menanyakan serangkaian pertanyaan yang mirip dengan sebelumnya,
00:15:18dan saya cukup diberi tahu bahwa tetap saja dengan
00:15:21suasana dan getaran
00:15:22yang Anda dapatkan dari gambar yang saya berikan.
00:15:24Jadi ini yang dihasilkannya,
00:15:26dan sejujurnya, itu meninggalkan sedikit keinginan.
00:15:29Saya pikir hanya melemparkan semacam papan suasana ini padanya
00:15:33dan memberitahunya, "Hei, ayo buat situs web dari ini,"
00:15:35itu kesulitan.
00:15:37Saya pikir ia melakukan yang terbaik.
00:15:38Seperti, kita masih mendapatkan dasbor, warnanya ada,
00:15:41tapi hasilnya tidak sebagus yang mereka buat,
00:15:43karena menurut saya, karena saya hanya memberikannya aset itu
00:15:46dan saya tidak menyertakan aset tambahan,
00:15:48ia tidak benar-benar memotongnya dengan cara yang sama
00:15:51seperti yang dilakukan Impeccable pada studi kasus mereka,
00:15:52tapi mungkin ini masalah pemberian perintah (prompting).
00:15:55Namun meski begitu, Anda bisa melihat kerangka
00:15:57dari sesuatu yang akan berhasil di sini.
00:15:59Saya suka cara mereka membuat dasbornya.
00:16:01Jadi, menurut saya ini jelas tidak terlalu mengesankan
00:16:05seperti versi mentah yang kita buat di awal,
00:16:09tapi hei, saya pikir saya akan mencobanya.
00:16:11Sekarang mari kita lihat bagaimana hasilnya saat kita mengedit situs yang sudah ada.
00:16:14Jadi kita akan menggunakan situs web saya, situs agensi AI saya yang sebenarnya,
00:16:18dan kita akan menjalankan beberapa perintah padanya.
00:16:21Kita akan menggunakan dokumen Impeccable
00:16:23agar ia bisa melakukan rekayasa balik (reverse engineer) file design.md
00:16:26dari kode tersebut, lalu kita akan melakukan hal-hal seperti menjalankan audit
00:16:29dan melakukan kritik, dan kita akan benar-benar melakukan hal langsung lagi
00:16:32di situs web saya yang sebenarnya dan melihat
00:16:36iklan seperti apa yang bisa kita buat.
00:16:37Sebagai referensi, ini adalah situs web untuk agensi AI saya.
00:16:41Saya punya bagian hero yang standar.
00:16:43Saya masuk ke layanan, berbicara tentang filosofi saya
00:16:47tentang bagaimana kami melakukan implementasi AI
00:16:49sebelum ada semacam ajakan bertindak (call to action),
00:16:51tempat di mana orang bisa mengisi informasi mereka
00:16:54jika mereka ingin bekerja dengan saya.
00:16:55Saya punya beberapa halaman tambahan seperti blog saya,
00:16:57tapi kita akan tetap menggunakan halaman beranda untuk saat ini.
00:17:00Jadi hal pertama yang saya lakukan adalah saya berkata,
00:17:02mari jalankan dokumen Impeccable pada basis kode ini
00:17:05dan lihat apa yang dikatakan Impeccable tentang situs web saya saat ini.
00:17:08Jadi ia menelusuri seluruh basis kode
00:17:11dan akan membuat design.md untuk apa yang sudah kita miliki,
00:17:16dan dari fondasi itulah
00:17:18kita bisa mulai mengedit berbagai hal.
00:17:19Jadi setelah Impeccable menelusuri basis kode,
00:17:21ia menulis tiga file yang pada dasarnya seperti
00:17:23konteks strategis untuk apa yang terjadi.
00:17:26Ia berbicara tentang kemenangan, Bintang Utara,
00:17:29tetapi juga berbicara tentang tujuh pelanggaran berbeda yang ditemukannya.
00:17:33Jadi, bola biru, katanya mock-up kartu layanan
00:17:37pada dasarnya adalah paket klip art,
00:17:40kisi-kisi kartu yang disengaja.
00:17:43Ia benci glass morphism, jadi ia tidak menyukainya.
00:17:47Dikatakan bahwa kita telah memuat font tertentu, tetapi kita tidak pernah menggunakannya,
00:17:50serta hal-hal lain.
00:17:53Jadi ada beberapa fitur
00:17:54yang pada dasarnya ada dalam kode,
00:17:55tetapi sebenarnya tidak muncul di UI yang sebenarnya.
00:17:58Dan kemudian ada masalah dengan beberapa warnanya.
00:18:02Ia juga berbicara tentang kesenjangan strategis
00:18:04di mana saya pada dasarnya tidak menampilkan diri saya, orangnya, Chase,
00:18:07di situs web itu sendiri, yang mana itu adil.
00:18:10Sekarang kita sebenarnya bisa mendapatkan kritik yang lebih mendalam
00:18:12jika kita menjalankan perintah kritik.
00:18:15Jadi mari kita lakukan sekarang.
00:18:16Saya menyuruhnya menjalankan perintah kritik.
00:18:18Bahkan tidak mengeja perintah kritik dengan benar.
00:18:20Menyuruhnya menjalankan perintah kritik pada halaman arahan (landing page).
00:18:23Jadi ia menjalankan kritiknya dan vonisnya adalah,
00:18:25ya, mendekati sampah AI.
00:18:27Ia memberi saya skor kesehatan desain di 10 hal berbeda
00:18:33dan masing-masing dari empat
00:18:34dan tidak mendapatkan skor di atas tiga untuk salah satu di antaranya,
00:18:37tapi saya tidak mendapatkan satu pun, jadi itu bagus.
00:18:39Secara keseluruhan adalah 25 dari 40, yang dinilai dapat diterima.
00:18:43Untuk beban kognitif, ia memberi saya nilai lima dari delapan gagal.
00:18:46Dikatakan bahwa gerakan latar belakang bersaing dengan konten.
00:18:51Ya, menurut saya itu agak tenang,
00:18:54tapi saya mengerti dari mana asalnya.
00:18:56Dua CTA dengan bobot yang sama di sini dengan prioritas yang ambigu.
00:19:00Bagian layanan memiliki empat skema visual berbeda
00:19:03bersama dengan beberapa hal lainnya.
00:19:05Dan kesan keseluruhannya adalah bahwa ia memiliki kerangka yang bagus,
00:19:08tapi bisa melakukan lebih baik.
00:19:10Dan kemudian di akhir, ia memecahnya
00:19:11menjadi tiga tempat berbeda seminggu yang lalu.
00:19:14Jadi jujur, saya suka kritik ini.
00:19:16Ini sangat mendalam dan memberi kita banyak hal untuk dikerjakan
00:19:19dan menjadi cukup spesifik tentang apa yang menurutnya salah.
00:19:22Sekarang, setuju atau tidak dengan beberapa di antaranya,
00:19:24menurut saya itu di luar topik,
00:19:26tapi itu memberi kita hal-hal untuk dipikirkan.
00:19:29Anda tahu, saya tidak akan begitu saja berasumsi
00:19:31bahwa semua yang dikatakannya benar,
00:19:32tetapi kita bisa menelusuri ini, atau jika saya mau,
00:19:35saya bisa menelusuri semua ini.
00:19:36Saya seperti, baiklah, mari ubah ini dan itu.
00:19:37Jadi mari kita lihat apa yang terjadi jika kita melakukan B
00:19:40dan katakan kita ingin bermain-main
00:19:42dengan apa yang disebutnya disiplin dekorasi
00:19:44dan lihat perubahan apa yang dibuatnya.
00:19:46Dan setelah kita melihat perubahan apa yang dibuatnya,
00:19:48kita akan masuk ke sesi langsung,
00:19:51sama seperti yang kita lakukan pada halaman arahan pertama yang kita buat
00:19:54dan mengutak-atik itu.
00:19:55Jadi mari kita lihat beberapa perubahan yang dibuatnya.
00:19:57Dan perubahannya sangat halus.
00:19:59Jadi kita bisa lihat di sini di bagian layanan,
00:20:03ini adalah versi yang diperbarui.
00:20:04Mereka agak meredam warna dan mempertahankannya
00:20:07hanya pada semacam oranye terakota dan putih ini.
00:20:09Anda akan melihat tidak ada lagi semacam kabut biru
00:20:13di kiri bawah.
00:20:14Sebagai referensi, ini adalah yang sebelumnya
00:20:17di mana Anda memiliki warna biru di kiri bawah
00:20:18lalu biru dan kemudian hijau.
00:20:20Jadi, ia hanya mempertahankannya pada dua warna, kan?
00:20:23Semacam putih, yah sebenarnya tiga warna,
00:20:25Saya katakan seperti putih, abu-abu, dan kemudian oranye.
00:20:28Anda juga bisa melihatnya di bagian pendekatan di bawah ini.
00:20:32Jadi saat saya mengarahkan kursor ke kartu-kartu itu, kita masih memiliki kilau oranye itu,
00:20:36tetapi pada aslinya ada oranye di sini.
00:20:41Ia memiliki garis kartu di atas
00:20:43dan ia pikir itu semacam hal seperti sampah AI.
00:20:47Dan itu adalah sejauh mana perubahan disiplin dekorasi.
00:20:51Jadi cukup halus, ia memiliki beberapa yang lain
00:20:53yang ingin dicobanya juga.
00:20:54Mereka ada hubungannya dengan semacam kepercayaan dan konversi
00:20:56dan berpotensi menambahkan hal-hal seperti foto profil.
00:20:58Tapi apa yang akan kita lompat ke depan sekarang
00:21:00adalah masuk ke mode langsung.
00:21:02Jadi mari kita lihat situs web sekarang dalam mode langsung.
00:21:05Jadi katakanlah saya ingin mengubah kartu-kartu ini sedikit
00:21:08dan sama seperti sebelumnya, apa yang akan saya lakukan?
00:21:10Saya bisa melakukan bentuk bebas atau saya bisa
00:21:13pergi dan memilih salah satu dari perintah yang telah dimuat sebelumnya.
00:21:17Jadi mari coba delight untuk yang satu ini.
00:21:19Dan kemudian kita akan pergi dan memilih tiga varian.
00:21:22Dan apa yang dilakukan delight adalah menambahkan kepribadian nyata
00:21:26pada komponen tersebut.
00:21:27Ini adalah tampilan beberapa varian yang diberikannya kepada kita.
00:21:30Jadi yang satu ini sedikit lebih besar,
00:21:32memiliki semacam benda di kanan bawah ini.
00:21:35Ini mengubah teks yang sebenarnya di sini.
00:21:37Dan ini juga menambahkan sedikit hal ini.
00:21:40Dan jelas seperti ini, kita memiliki nada (tunes)
00:21:43untuk dimainkan juga.
00:21:45Itu seharusnya menjadi angka, agak sedikit meleset.
00:21:49Jadi ya, hampir sama persis skenarionya
00:21:53seperti situs web pertama yang kita buat.
00:21:55Menurut saya hal langsung untuk Impeccable ini
00:21:57adalah alatnya yang paling kuat sejauh ini.
00:22:00Fakta bahwa kita bisa melakukan penyesuaian mikro ini
00:22:02dari antarmuka grafis yang esensial
00:22:04daripada harus melakukan semuanya di baris perintah.
00:22:06Jadi saya senang melihatnya cukup mirip
00:22:08dengan pengaturan yang sama persis,
00:22:09bahkan ketika kita menggunakan basis kode yang sudah ada.
00:22:12Jadi secara keseluruhan, saya sangat menyukai Impeccable.
00:22:13Menurut saya ini 100% adalah keterampilan yang harus Anda tambahkan ke tumpukan Anda
00:22:17dan pastinya cobalah saat Anda melakukan putaran berikutnya
00:22:20desain front-end,
00:22:21baik untuk situs web yang Anda buat dari awal
00:22:23atau untuk sesuatu yang sudah ada.
00:22:26Dan 100% cobalah alat langsungnya.
00:22:29Ini adalah sesuatu yang baru saja mereka tambahkan,
00:22:31saya pikir sekitar seminggu yang lalu.
00:22:32Dan menurut saya ini adalah pembeda besar
00:22:34dari semua hal lainnya.
00:22:35Menurut saya ketika Anda menggabungkan penyesuaian mikro ini
00:22:38dengan tata letak makro yang saya beri tahu untuk dilakukan
00:22:41melalui pemberian perintah di awal,
00:22:43menurut saya Anda memiliki alur kerja yang sangat kuat.
00:22:45Seperti biasa, beri tahu saya apa pendapat Anda.
00:22:47Tautan ke repo ini akan ada di deskripsi.
00:22:49Ada juga tautan di komentar yang disematkan ke Chase AI+
00:22:52jika Anda ingin mendapatkan akses ke kelas master Cloud Code saya.
00:22:55Dan selain itu, sampai jumpa.