Impeccable Membuat Claude Mampu Membangun Situs yang Tidak Terlihat Seperti Buatan AI
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Ini adalah Impeccable, rangkaian alat kualitas desain yang memberikan harness Anda pengetahuan desain mendalam
00:00:05yang dibutuhkannya untuk membuat situs web yang tampak luar biasa dengan mendeteksi 37 anti-pola desain untuk menghentikan AI Anda
00:00:12menghasilkan desain generik yang sama yang sudah sering Anda lihat. Alat ini bahkan memiliki kemampuan bagi
00:00:17manusia untuk melakukan penyesuaian desain yang sangat presisi di peramban. Namun, apakah ini hanyalah alat AI yang terlalu dibesar-besarkan
00:00:22yang hanya memberi Anda berkas markdown dan menghabiskan token Anda, ataukah benar-benar berguna? Tekan subskripsi dan mari
00:00:28kita cari tahu. Jika Anda sudah menonton video saya tentang Superpowers, plugin yang membantu Claude menulis kode dengan lebih baik,
00:00:36nah, ini mirip seperti itu tetapi untuk desain dalam artian yang baik. Ini memberikan alur kerja terstruktur untuk membantu AI
00:00:42menghasilkan desain dan situs web yang luar biasa, apa pun agent atau harness yang digunakan. Dibuat oleh Paul Backhouse,
00:00:47seorang product engineer independen yang sebenarnya membuat JQUI, jika Anda cukup umur untuk mengingat apa itu,
00:00:53dan dia telah membagikan progres Impeccable di media sosial sejak lama sehingga saya yakin
00:00:58hal inilah yang membuatnya begitu populer. Jadi, mari kita coba. Saya akan membangun sebuah beranda
00:01:02untuk alat film sinematik saya menggunakan Impeccable untuk mengambil desain yang ada di kepala saya dan menuangkannya
00:01:08ke layar. Kita lihat bagaimana hasilnya. Saya akan menggunakan empat sub-perintah utama; teach, shape,
00:01:14craft, dan iterate. Sebenarnya iterate bukan sub-perintah, tetapi itu akan lebih masuk akal nanti di
00:01:19video ini. Ayo mulai. Jadi saya sudah menginstal skill Impeccable menggunakan for sales skill.sh dan saya sudah
00:01:25membuat direktori kosong tempat semua kode dan berkas desain akan disimpan. Jadi mari
00:01:29buka Claude Code dan hal pertama yang akan saya lakukan adalah menjalankan sub-perintah Impeccable teach yang
00:01:34akan mengajarinya untuk siapa produk ini dibuat dan ini akan membuat berkas project MD yang akan berisi
00:01:40hal-hal penting seperti tujuan produk, identitas merek, dan prinsip desain. Jadi jika kita tekan enter,
00:01:46ia memberitahu saya bahwa direktori produk kosong dan kita akan melalui beberapa pertanyaan putaran pertama. Sekarang,
00:01:51hal penting yang perlu disadari di sini sebelum melanjutkan adalah perbedaan antara merek dan
00:01:55produk. Gaya desain produk adalah sesuatu yang seperti ini, dengan fon sans-serif dan hierarki
00:02:00semi-bold yang sempurna untuk utilitas atau aplikasi, sedangkan gaya desain merek memiliki tampilan
00:02:05serif display, lebih banyak huruf miring, dan ideal untuk editorial atau majalah. Ada lebih banyak informasi
00:02:10tentang perbedaannya di situs web Impeccable, tetapi untuk kasus penggunaan spesifik saya, ini akan menjadi
00:02:15sebuah produk. Sekarang saya sudah menulis jawaban untuk tiga pertanyaan tersebut, saya akan tekan enter dan ia akan
00:02:19menyajikan beberapa pertanyaan lagi seperti kepribadian, referensi, dan audiens. Sekarang saya sudah
00:02:24menjawab tiga pertanyaan lanjutan ini dengan memberikan nama situs-situs yang saya sukai tampilannya serta
00:02:28audiensnya. Setelah Anda menjawab pertanyaan-pertanyaan itu, Impeccable membuat berkas product MD dan memberi kita
00:02:33ringkasan di sini. Sekarang pada tahap ini, ia menanyakan apakah kita ingin menjalankan Impeccable document untuk membuat
00:02:38berkas design MD atau memicu Impeccable shape yang akan membantu kita menyusun bahasa desain untuk
00:02:43beranda kita. Untuk saat ini saya akan langsung ke Impeccable shape karena saya ingin memiliki gambaran desainnya
00:02:48terlebih dahulu sebelum membuat dokumen desain. Jadi setelah kita tekan enter, kita memiliki putaran pertanyaan lain untuk
00:02:53membantu kita menyusun brief desain. Sekarang dalam beberapa kasus atau saat menggunakan harness tertentu, Impeccable akan
00:02:59membuat sesuatu yang disebut probe menggunakan model gambar dan ini akan digunakan untuk lebih meningkatkan
00:03:04desainnya, tetapi karena Claude Code tidak memiliki model gambar, saya akan mencoba menipu Impeccable
00:03:08untuk menggunakan GPT image 2. Mari kita lihat apakah itu berhasil. Jadi sekarang saya sudah menjawab pertanyaannya terkait gaya warna,
00:03:14tata letak halaman, dan tech stack yang akan digunakan. Saya sudah memberitahunya bahwa saya memiliki kunci OpenAI di shell saya
00:03:20dan saya ingin menggunakan GPT image 2 untuk membuat probe. Oke, jadi ia sebenarnya sudah selesai membuat probe
00:03:25dan kita bisa melihatnya untuk memilih mana yang kita inginkan antara A, B, dan C. Ini adalah A yang
00:03:30sangat saya sukai tampilannya. Ini adalah B yang juga terlihat bagus tetapi tidak sebagus A. Dan kemudian kita punya C yang
00:03:35telah melakukan pekerjaan luar biasa dalam menghasilkan gambar AI ini, tetapi menurut saya pemenangnya sudah pasti A.
00:03:40Jadi saya akan memberikan detail tersebut dan setelah beberapa saat, ia memberikan brief desain dengan ringkasan fitur,
00:03:45tindakan pengguna, dan begitu banyak informasi lainnya. Jadi saya akan menjawab pertanyaan yang diberikannya kepada saya
00:03:50di akhir dan semoga ia kemudian akan membuat desainnya. Jadi sekarang setelah selesai, langkah selanjutnya adalah
00:03:55bagi saya untuk menjalankan Impeccable Craft, tetapi ia menawarkan untuk melakukannya untuk saya jadi saya baru saja menekan ya
00:04:00dan sekarang ia benar-benar sedang membuat situs webnya menggunakan Astro dan Tailwind. Dan setelah sekitar lima menit,
00:04:06ia selesai mengode desainnya, membuat semua halaman Astro ini serta konfigurasi Tailwind
00:04:11dan memberi saya brief terperinci tentang apa yang sebenarnya telah dilakukannya yang terlihat sangat mengesankan. Saya suka
00:04:17fakta bahwa saya bisa menyalin URL di sini, kita mendapatkan versi alpha macOS terlebih dahulu, video uji coba yang belum
00:04:23berfungsi tetapi bagus karena ia menambahkannya, dan kita mendapatkan beberapa informasi tentang produk dengan efek di
00:04:28sini sehingga kita bisa menggeser sebelum dan sesudah yang merupakan sentuhan yang sangat bagus. Kami bahkan memiliki beberapa perintah untuk
00:04:33menginstalnya dan FAQ di bagian bawah dengan akordeon yang berfungsi. Tetapi ada beberapa masalah
00:04:37yang saya temukan, misalnya tombol tutup ini sangat kecil dan tata letak perintah di sini terlihat
00:04:43sangat aneh. Tetapi sekarang sebelum kita lanjut ke tahap iterasi, saya ingin membuat berkas DesignMD sehingga saya bisa melakukan
00:04:49penyesuaian di sesi lain dan ia tahu segalanya tentang desain saya. Jadi untuk melakukannya saya akan menjalankan Impeccable
00:04:54Document yang setelah selesai akan membuat dokumen desain yang berisi segalanya mulai dari warna
00:04:59hingga tipografi dan bahkan CSS serta gaya yang digunakan dalam proyek saya. Sekarang dari sini kita akan
00:05:06mengiterasi desain kita yang seperti saya sebutkan tadi bukan merupakan sub-perintah tunggal tetapi bisa berisi
00:05:10beberapa hal. Jadi jika saya ingin menambahkan animasi, saya bisa menambahkan sub-perintah animate ke bagian tertentu
00:05:15dari proyek ini, saya bisa menggunakan bolder untuk membuat bagian tertentu lebih tebal sehingga kita bisa melihat perbedaan sebelum
00:05:20dan sesudah, atau saya bisa menggunakan salah satu hal ini di bagian refine atau meminta Impeccable untuk secara otomatis
00:05:25memoles desainnya. Dan cara terbaik adalah melakukan tingkat iterasi ini alih-alih memberitahu harness saya
00:05:30bagian mana yang ingin saya ubah dan memberinya salah satu sub-perintah ini. Sebagai gantinya saya bisa menggunakan Impeccable
00:05:35Live yang masih versi alpha dan dipicu di Claude Code dengan menjalankan Impeccable Live. Namun, apa yang dilakukannya
00:05:39adalah menginstal serangkaian skrip lalu terhubung ke situs saya menggunakan Astro dan memulai server pada port 800
00:05:46yang memantau setiap perubahan yang saya buat pada situs langsung saya. Jadi jika saya pergi ke peramban dan melihat situs saya, kita
00:05:52bisa melihat saya sekarang memiliki overlay merah muda ini dan jika saya mengklik pada suatu bagian, katakanlah bagian teks ini, maka saya punya
00:05:58opsi yang saya tunjukkan sebelumnya untuk membuat segalanya lebih tebal, lebih tenang, untuk memoles, dan sebagainya atau saya bisa cukup
00:06:03mengetikkan persis apa yang saya inginkan. Jadi saya bisa katakan buat teks di sini lebih besar dan jika saya tekan go, ini akan masuk
00:06:09langsung ke agent saya dan memperbarui kode di situs langsung saya. Kita bisa melihat bahwa prompt saya telah dikirim
00:06:15ke Claude Code: buat teks lebih besar dengan bagian spesifik dari situs yang membutuhkan perubahan ini.
00:06:20Dan saya bisa terus meninjau bagian-bagian situs dan membuat perubahan seperti itu sampai saya puas.
00:06:25Misalnya bagian di sini dengan teks pemrograman yang sulit dibaca, saya bisa memberinya prompt,
00:06:29memilih jumlah varian yang saya inginkan, dan membiarkan Impeccable melakukan tugasnya dan sekarang tampilannya jauh
00:06:34jauh lebih baik dan bahkan secara otomatis diterapkan ke setiap bagian situs yang menampilkan
00:06:39kode. Jadi begitulah, tinjauan singkat tentang cara membuat situs yang tampak mengesankan dari awal
00:06:44menggunakan Impeccable, Claude Code, dan GPT image 2. Sejujurnya, ini adalah alat untuk seseorang yang
00:06:50ingin membuat sesuatu yang indah tetapi tidak ingin terlalu mendalami detail desain. Untuk
00:06:55hal itu saya akan menyarankan penggunaan sesuatu seperti Pencil di mana Anda bisa sangat presisi mengenai posisi,
00:06:59border radius, dan segala hal lainnya dalam hal desain. Jika Anda ingin tahu lebih banyak tentang Pencil,
00:07:04tonton video yang saya buat sebelumnya. Sekarang meskipun Impeccable bersifat agnostik terhadap model dan harness,
00:07:10saya akan katakan Claude Code mungkin bukan harness terbaik untuk digunakan murni karena Impeccable
00:07:15menggunakan banyak token terutama jika Anda memiliki berkas product MD dan design MD yang besar yang digunakan di
00:07:21setiap sub-perintah Impeccable, dan Claude Code yang dikombinasikan dengan model Claude itu sangat mahal.
00:07:26Jika saya punya kesempatan untuk menjalankan eksperimen ini lagi, saya kemungkinan besar akan menggunakan Codex CLI atau Codex GUI
00:07:32yang memungkinkan pembuatan gambar sehingga saya tidak perlu menentukan penggunaan model GPT image 2
00:07:38karena Impeccable akan melakukannya secara otomatis karena ia menyadari kemampuan harness-nya
00:07:43dan Codex atau model GPT jauh lebih dermawan dengan batas penggunaannya. Sekarang saya akan mencoba
00:07:47sesuatu yang sudah sering saya lihat dilakukan banyak YouTuber yaitu mengarahkan Anda ke video yang telah
00:07:53direkomendasikan oleh algoritma YouTube berdasarkan riwayat tontonan Anda, jadi silakan tonton video itu.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video