Verification receipt Claude Code: buktikan perubahan AI dengan build, URL publik, CTA, dan screenshot

Mengapa perlu verification receipt

Claude Code bisa mengubah artikel, landing page, tautan, dan contoh kode dengan cepat. Risiko utamanya bukan karena file berubah, tetapi karena diff yang terlihat masuk akal sering membuat kita terlalu cepat percaya bahwa pekerjaan sudah selesai. Untuk artikel publik atau halaman yang punya jalur revenue, build lokal belum cukup. URL publik bisa masih versi lama, CTA bisa menuju produk yang salah, dan teks terjemahan yang panjang bisa membuat tombol rusak di mobile.

Verification receipt adalah catatan bukti singkat. Isinya: file apa yang berubah, kenapa berubah, command apa yang dijalankan, URL publik mana yang dibuka, CTA mana yang dicek, screenshot apa yang disimpan, dan risiko apa yang tersisa. Ini bukan administrasi berat. Ini cara paling ringan agar sesi berikutnya tidak menebak dari ingatan.

Gunakan alur ini bersama triage error build, checklist review, dan checklist permission. Satu membantu saat build gagal, satu untuk membaca diff secara kritis, dan satu untuk menjaga batas akses Claude Code.

Template verification receipt

Salin template ini ke komentar PR, catatan publish, atau prompt terakhir untuk Claude Code. Aturannya sederhana: tulis bukti, bukan rasa yakin. “Sepertinya aman” tidak cukup. “npm.cmd run build sukses”, “h1 publik sesuai judul”, dan “CTA membuka halaman Gumroad yang benar” adalah bukti.

Verification Receipt

Scope:
- changed files:
- user-facing behavior:
- out of scope:

Diff summary:
- what changed:
- why it changed:
- what should not change:

Proof commands:
- git status --short:
- git diff --stat:
- npm.cmd run build:

Public URL checks:
- article URL:
- expected h1:
- canonical:
- no fallback page:

Revenue and CTA checks:
- free PDF CTA:
- Gumroad product link:
- consultation link:
- thanks page or next step:

Screenshot checks:
- desktop screenshot:
- mobile screenshot:
- visible CTA:
- text overflow or broken layout:

Remaining risk:
- risk 1:
- risk 2:
- risk 3:

Baris out of scope mencegah tugas kecil melebar. Jika tugasnya memperkuat artikel, jangan sekaligus mengubah navigasi, upgrade package, atau refactor komponen. Baris what should not change melindungi slug, canonical, author, tanggal publish, tautan produk, dan route konsultasi.

Contoh build, URL publik, CTA, dan screenshot

Mulai dari bukti lokal. Pastikan file yang berubah memang target, lihat ukuran diff, lalu jalankan build. Di Windows, npm.cmd biasanya lebih stabil.

git status --short
git diff --stat
cd site
npm.cmd run build

Setelah itu cek URL publik. Jangan berhenti di HTTP 200, karena fallback page juga bisa mengembalikan 200. Cari teks yang spesifik untuk halaman: h1, frasa artikel, dan teks CTA atau produk.

const checks = [
  {
    url: "https://claudecode-lab.com/id/blog/claude-code-verification-receipt-workflow/",
    mustInclude: ["Verification receipt Claude Code", "Template verification receipt", "Gumroad"],
  },
  {
    url: "https://claudecode-lab.com/en/products/",
    mustInclude: ["Claude Code", "Products"],
  },
  {
    url: "https://claudecode-lab.com/id/training/",
    mustInclude: ["konsultasi"],
  },
];

for (const check of checks) {
  const res = await fetch(check.url, { redirect: "follow" });
  const html = await res.text();
  const missing = check.mustInclude.filter((text) => !html.includes(text));
  console.log(check.url, res.status, missing.length === 0 ? "ok" : `missing: ${missing.join(", ")}`);
}

Lanjutkan dengan bukti visual. Teks bisa ada di HTML, tetapi tombol tetap bisa terlalu panjang, code block bisa melebar, atau CTA akhir bisa terlihat seperti tempelan. Jika Playwright tersedia, simpan screenshot desktop dan mobile.

import { chromium } from "playwright";
import { mkdir } from "node:fs/promises";

const outDir = "tmp-verification/claude-code-verification-receipt-workflow";
await mkdir(outDir, { recursive: true });

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 1100 } });
await page.goto("https://claudecode-lab.com/id/blog/claude-code-verification-receipt-workflow/", {
  waitUntil: "networkidle",
});
await page.screenshot({ path: `${outDir}/desktop-id.png`, fullPage: true });

await page.setViewportSize({ width: 390, height: 1200 });
await page.screenshot({ path: `${outDir}/mobile-id.png`, fullPage: true });

await browser.close();
console.log(`screenshots saved to ${outDir}`);

Saat melihat screenshot, cek viewport pertama, code block pertama, bagian tengah yang berisi template, dan CTA akhir. Di artikel panjang, masalah sering muncul di jarak antarbagian, line break tombol, dan link internal yang terlalu rapat di mobile.

Contoh 1: memperkuat artikel yang terlalu tipis

Artikel tipis tidak cukup diperbaiki dengan menambah kalimat umum. Pembaca perlu alat yang bisa dipakai: definisi verification receipt, template yang bisa disalin, command build, cek URL publik, cek CTA, cek screenshot, dan contoh kegagalan.

Receipt untuk perubahan seperti ini harus mencatat section yang ditambahkan, link internal, link eksternal, jenis code block, dan risiko tersisa. Ia juga perlu memastikan jalur komersial terasa wajar. Mulai dari PDF gratis untuk membangun kebiasaan, lanjut ke Gumroad untuk template dan setup, lalu konsultasi saat pembaca butuh aturan tim untuk review, deploy, permission, dan revenue path.

Contoh 2: mengubah CTA atau link produk

CTA terlihat kecil, tetapi langsung memengaruhi download, pembelian, dan permintaan konsultasi. Jangan tulis hanya “CTA sudah diubah”. Tulis label tombol, href, judul halaman tujuan, dan aksi berikutnya yang diharapkan.

Untuk PDF gratis, pastikan pembaca paham apa yang akan didapat dan halaman berikutnya masuk akal. Untuk Gumroad, cek nama produk, awal deskripsi, dan kecocokan dengan janji artikel. Untuk konsultasi, cek apakah konteksnya natural. Dalam artikel tentang operasi Claude Code, konsultasi wajar ketika pembaca mulai memikirkan aturan tim, review, permission, deploy, dan jalur revenue.

Contoh 3: menerbitkan artikel multi-bahasa

Artikel multi-bahasa perlu receipt sendiri. Versi Inggris bisa pendek, tetapi bahasa lain bisa membuat CTA lebih panjang. Istilah “verification receipt” juga perlu dijelaskan agar tidak terdengar seperti bukti pembayaran. Tiap bahasa harus punya pembuka yang natural, template yang jelas, contoh kegagalan, dan jalur menuju materi atau konsultasi.

Screenshot membantu menemukan masalah yang tidak terlihat dari source. Ia menunjukkan tombol yang terlalu panjang, daftar yang terlalu padat, code block yang melebar, dan CTA akhir yang terasa memaksa. Untuk konten yang mendukung revenue, ini bagian dari kualitas, bukan sekadar tampilan.

Kegagalan umum dan cara menghindarinya

Pertama, menganggap HTTP 200 sebagai bukti publish. Cek h1, canonical, dan frasa unik halaman.

Kedua, berhenti setelah build sukses. Build membuktikan source bisa compile, bukan bahwa production sudah update.

Ketiga, hanya melihat link ada. Tujuan link juga harus sesuai.

Keempat, tidak menyimpan screenshot. Tanpa gambar, cek mobile hanya bergantung pada ingatan.

Kelima, meminta Claude Code “tolong verifikasi” tanpa format. Beri template dan minta command, URL, CTA, screenshot, serta risiko tersisa.

Jalur materi belajar dan konsultasi

Jika bekerja sendiri, mulai dari cheatsheet Claude Code gratis untuk mengunci command dan prompt verifikasi harian. Saat workflow mulai berulang, gunakan 50 prompt template dan Setup Guide untuk membuat CLAUDE.md, hooks, dan permission menjadi rutinitas.

Jika bekerja dengan tim yang menerbitkan artikel, landing page, produk Gumroad, atau form konsultasi, verifikasi menjadi aturan operasional. Siapa yang cek URL publik, di mana screenshot disimpan, CTA mana yang termasuk revenue path, dan kegagalan apa yang menghentikan publish harus jelas. Konsultasi menjadi langkah natural ketika aturan itu perlu dirancang bersama.

• Cheatsheet Claude Code gratis
• 50 template prompt Claude Code
• Claude Code Setup Guide
• Produk
• Konsultasi

Yang saya verifikasi untuk artikel ini

Artikel ini memisahkan diff check, build, URL publik, CTA, dan screenshot ke dalam satu receipt. Manfaat praktisnya jelas: jika build sudah dilakukan tetapi URL publik belum dibuka, jika CTA sudah dilihat tetapi link konsultasi belum dicek, atau jika desktop screenshot ada tetapi mobile belum ada, kekosongan itu langsung terlihat. Kecepatan Claude Code perlu ditemani bukti yang sama cepatnya.