Hasil akhir · enam section sekaligus
Tur 35 detik di halaman yang sama: tombol hero, logo klien, testimoni, lalu harga. Di kanan, tiap section itu sudah diganti snippet dari asset.inwebsite.online. Di bagian akhir kamu bisa menggulir dan mencoba kedua versinya sendiri.
Langkah 1 · Siapkan dulu
Mencari, melihat pratinjau, dan perencanaan lewat agent tidak memakai kuota.
Langkah 2 · Minta agent membaca web-mu
Untuk satu halaman penuh, jangan memilih snippet satu per satu dari katalog. Minta agent membaca kodenya dulu: daftar section, warna merek, sudut, dan gerak yang sudah ada. Hasilnya dikirim ke plan_upgrade, yang memberi kandidat per section. Langkah ini gratis dan tidak memakai jatah salinan.
styles.css.# plan_upgrade(sections, style: minimal + elegant, look) hero headline recommended gsap-animation/stagger-text-reveal subtle alternative hero-scenes/community-constellation-hero hero call to action recommended hero-scenes/community-constellation-hero alternative hero-scenes/botanical-grow-frame client logos recommended cards-sections/logo-cloud-marquee subtle testimonials recommended cards-sections/testimonial-stack medium alternative commerce/rating-summary-bars pricing recommended commerce/pricing-currency-switch subtle alternative commerce/pricing-spotlight-cards contact form recommended forms-inputs/password-strength subtle alternative forms-inputs/otp-code-input # tiap kandidat juga membawa: fits, differs, adapt # mis. "recolor blue/amber/emerald to the brand (red)"
Langkah 3 · Agent mengusulkan, kamu memutuskan
plan_upgrade mencocokkan kata dan gaya, bukan isi web-mu. Untuk form kontak ia mengusulkan pengukur kekuatan password, padahal form itu tidak punya kolom password. Baca alasannya, lihat pratinjaunya (preview_snippets), lalu pilih. Hanya snippet yang kamu setujui yang diambil kodenya.
| Section | Usulan plan_upgrade | Yang dipakai | Kenapa |
|---|---|---|---|
| Judul hero | stagger-text-reveal | Gradient Text Sweep | Judul sudah punya animasi masuk. Yang kurang adalah gerak setelah judul diam. |
| CTA hero | community-constellation-hero | Magnetic Button | Usulannya satu hero utuh, padahal hero sudah punya visual. Cukup tombolnya yang hidup. |
| Logo klien | logo-cloud-marquee | Logo Cloud Marquee | Sesuai usulan. |
| Testimoni | testimonial-stack | Testimonial Stack | Sesuai usulan. |
| Harga | pricing-currency-switch | Pricing Toggle Cards | Harganya hanya rupiah. Yang perlu dibandingkan pengunjung adalah lunas atau cicil. |
| Form kontak | password-strength | Submit Success Button | Form tidak punya password. Yang kurang adalah kabar setelah tombol kirim ditekan. |
Tiap baris punya tutornya sendiri, lengkap dengan prompt dan daftar penyesuaian. Klik nama snippet-nya.
Langkah 4 · Ambil kodenya
Agent mencari, memilih, dan memasang snippet sendiri. Buka halaman For agents, login, buat API key, lalu salin perintahnya.
Perintah di atas untuk Claude Code. Halaman itu juga punya versi Claude Desktop, Cursor, dan VS Code. Jangan pernah membagikan API key-mu.
Mencari dan perencanaan tanpa kunci. Kodenya (get_snippet) baru keluar dengan API key, dan memakai jatah 5 salinan akun gratis.
Login, buka halaman snippet, tekan Copy di tab Code. Simpan sebagai komponen, lalu pasang sendiri atau kirim ke agent.
Simpan sebagai src/components/*.jsx. Tiap Copy memakai 1 dari 5 jatah harian akun gratis.
Langkah 5 · Beri konteks ke agent
Prompt untuk satu halaman berbeda dengan prompt satu snippet. Minta agent membaca, merencanakan, dan berhenti untuk minta persetujuanmu sebelum mengambil kode apa pun.
Ini kode beberapa komponen dari asset.inwebsite.online. Pasang masing-masing di section yang saya sebut (judul hero, tombol CTA hero, logo klien, testimoni, harga, tombol kirim form kontak) tanpa mengubah bagian lain. Proyek saya React + CSS biasa tanpa Tailwind: pasang Tailwind v4 tanpa preflight. Pakai data yang sudah ada di src/data.js, aksen #e8461e, gerak tenang. <tempel kode di sini>
# sekali saja: sambungkan MCP $ claude mcp add --transport http InWebAsset https://asset.inwebsite.online/mcp --header "Authorization: Bearer <API key-mu>" # masuk ke folder proyek, jalankan agent $ claude > Pakai InWebAsset MCP. Baca src/pages/Home.jsx dan src/sections/, lalu tulis look situs dari styles.css (skema, warna merek, sudut, gerak). Panggil plan_upgrade untuk section: judul hero, CTA hero, logo klien, testimoni, harga, form kontak. Lihat pratinjaunya dengan preview_snippets, buang yang tidak cocok dengan isi section, lalu tampilkan rencana satu snippet per section beserta alasannya. Jangan ambil kode sebelum saya setuju. Setelah saya setuju, ambil kodenya dengan look yang sama dan pasang satu per satu, pakai data dari src/data.js.
Yang kamu dapat
Tiap snippet disesuaikan dengan cara yang sama: warna ikut aksen situs, gerak dibuat tenang, data diambil dari web, dan Tailwind dipasang sekali tanpa preflight.
Tailwinddipasang sekali untuk keenam snippet: theme + utilities, tanpa preflight.warnasemua warna contoh diganti aksen #e8461e dan warna tinta situs.easeback dan elastic diganti power3.out di semua snippet.datanama klien, testimoni, dan paket diambil dari src/data.js, tidak ada yang dikarang.herojudul dan tombol hero sama-sama diubah, jadi Hero.jsx memuat dua snippet sekaligus.boldtidak ada snippet mencolok. Yang paling ramai, confetti di tombol kirim, hanya muncul setelah diklik.Kode tiap komponen ada di tutornya masing-masing.
Langkah 6 · Bandingkan
Kedua kartu bisa digulir dan dicoba di layar lebar. Di HP kartu menampilkan rekaman turnya; buka versi sesudah ↗ untuk mencobanya penuh.
Mau seluruh halaman web-mu di-upgrade seperti ini? Tim InWebsite bisa mengerjakannya.
Lihat paket InWebsite →