AI Agent and WordPress MCP Workshop

Prompt masuk. Website berubah.

Control room workshop untuk menyalin instruksi, mengeksekusinya lewat AI Agent, lalu membuka hasil WordPress secara langsung di depan audiens.

Buka Prompt Lab Lihat Alur Workshop

Dua target demo nyata
Prompt siap salin
Verifikasi frontend langsung

Workshop route Two live targets

Visual landing page Lumera Skin

CofiMart SimulatorDefault scenario

Rp31.392.000

Profit operasional per bulan pada skenario demo saat ini.

46,7%Margin

23 cupBEP harian

prompt → agent → frontend

Copy instruction Execute through MCP Verify the result

Dua prompt eksperimen, siap dipakai saat workshop.

Keduanya sengaja membatasi perubahan agar eksekusi tetap cepat dan aman, tetapi hasilnya cukup jelas untuk langsung dilihat audiens.

Target: Skincare Demo

Rose Dawn Highlight

Eksperimen visual ringan pada hero dan produk unggulan Lumera, tanpa mengubah struktur utama atau informasi produk.

Kicker workshop baru pada hero
Aksen muted rose yang tetap sesuai brand
Hover lembut dan CTA yang mudah dibandingkan

Expected: subtle visual edit

Kembali ke halaman https://husnibaradja.com/skincare-demo/ dan buat eksperimen visual kecil bernama "Rose Dawn Highlight".

Kerjakan langsung di WordPress melalui Elementor dan XPRO. Sebelum mengubah, buat backup atau revisi. Jangan merombak struktur, produk, harga, header, footer, atau copy utama. Ubah hanya hero dan kartu produk Calm Glow Serum:

1. Ganti kicker hero menjadi "WORKSHOP EXPERIMENT: ROSE DAWN".
2. Gunakan token muted rose yang sudah tersedia pada desain Lumera sebagai aksen sekunder untuk underline headline, badge Calm Glow Serum, dan hover tombol hero. Pertahankan ivory, champagne gold, dan espresso sebagai warna utama.
3. Tambahkan hover lembut pada foto hero dan kartu Calm Glow Serum: naik maksimal 6px dan scale maksimal 1.015 selama sekitar 300ms, tanpa glow.
4. Ubah teks CTA utama hero menjadi "Lihat Rose Dawn Edit".
5. Tambahkan catatan kecil di bawah CTA: "Perubahan demo workshop, bukan klaim produk."

Scope hanya halaman ini. Hormati prefers-reduced-motion, pastikan responsif, dan jangan mengubah halaman lain. Setelah selesai, verifikasi frontend desktop dan mobile, lalu laporkan objek yang diubah.

Target: CofiMart Simulator

Barista Focus

Eksperimen presentasi pada area skenario dan KPI utama. Seluruh rumus, preset, slider, serta data chart harus tetap sama.

Kicker workshop baru pada hero
Profit card memperoleh fokus visual yang lebih jelas
Tautan cepat menuju pemilih preset

Current demo scenario 46,7% margin

Kembali ke halaman https://husnibaradja.com/cofimart-sim/ dan buat eksperimen visual kecil bernama "Barista Focus".

Kerjakan langsung di WordPress melalui Elementor atau struktur halaman yang sudah dipakai. Sebelum mengubah, buat backup atau revisi. Jangan mengubah rumus, nilai input, preset, slider, data chart, skenario default, atau state simulator. Ubah hanya presentasi hero, panel skenario saat ini, dan KPI utama:

1. Ganti kicker hero menjadi "WORKSHOP EXPERIMENT: BARISTA FOCUS".
2. Gunakan token CofiMart yang sudah ada, khususnya --cm-accent dan --cm-accent-soft, untuk memberi border fokus dan background lembut pada panel skenario saat ini serta metrik profit utama.
3. Tambahkan label kecil "Workshop Focus" di atas angka profit dan catatan singkat: "Perhatikan dampak penjualan harian terhadap profit dan BEP."
4. Tambahkan hover pada kartu KPI: naik maksimal 5px dengan shadow netral yang sudah ada, selama sekitar 250ms, tanpa glow.
5. Tambahkan text link "Bandingkan Preset" di area hero yang menggulir ke pemilih preset yang sudah tersedia.

Scope hanya halaman ini dan hanya presentation layer. Hormati prefers-reduced-motion, pastikan responsif, dan jangan mengubah halaman lain. Setelah selesai, verifikasi bahwa seluruh kalkulasi dan chart masih bekerja, lalu laporkan objek yang diubah.

Alur workshop yang menjaga momentum presentasi.

Setiap langkah dibuat singkat. Prompt sudah tersedia, target halaman jelas, dan perubahan dibatasi agar proses demonstrasi tetap mudah diikuti.

Pilih Prompt Buka Target Demo

Copy

Salin salah satu prompt langsung dari kartu tanpa merapikan instruksi lagi.

Execute

Jalankan melalui AI Agent yang sudah terhubung ke WordPress dan Novamira MCP.

Open target

Buka halaman Skincare atau CofiMart pada tab terpisah untuk melihat hasilnya.

Compare

Tunjukkan perubahan visual dan verifikasi bahwa fungsi inti halaman tetap aman.

Satu halaman untuk mengarahkan seluruh demo.

Mulai dari prompt, lanjut ke eksekusi, lalu tunjukkan perubahan frontend tanpa kehilangan konteks workshop.

Salin Prompt Pertama Kembali ke Atas