Brobri
    Gabung AI Circle

    AI Prototype Kit · Figma di era AI

    AI bikin penjelasan visual jadi gampang. Sekarang feedback-nya juga.

    Minta AI bikin halaman penjelas atau prototype yang bisa diklik, bagiin link-nya, dan orang bisa komentar langsung di bagian yang dimaksud, kayak di Figma.

    Prototype pesan kopi diklik dari menu ke pilihan ukuran, lalu satu komentar ditempel di bagian ukuran dan muncul di daftar komentar
    Contoh prototype dari kit-nya: diklik sebagai presenter, dikomentari langsung di bagian ukuran, lalu komentarnya muncul di daftar. Komentar ini yang nanti dibaca AI lo buat revisi.
    Lihat alurnya
    GratisBaruVersi 0.1.0Apa yang baru

    Kabar baiknya

    Cara terbaik ngejelasin sesuatu sekarang.

    Bukan dokumen panjang, bukan slide isi kotak-kotak, bukan nunggu file desain. Minta AI bikin sesuatu yang bisa dilihat dan diklik. Jadinya hitungan menit.

    • Contoh halaman penjelas: alur lima langkah dan tabel sebelum dan sesudah

      /artifact

      Halaman penjelas

      Satu halaman yang ngejelasin satu hal, enak dibaca di HP.

      • Sistem ke tim
      • Proposal ke klien
      • Laporan analisa
    • Contoh prototype pesan kopi: layar pilih ukuran dan susu

      /mockup

      Prototype yang bisa diklik

      Tiap layar bisa dipencet, ada mode presenter buat demo.

      • Alur fitur
      • Demo ke klien
      • Demo ke investor

    Masalahnya

    Tapi pas dibagiin, orang bingung komentarnya gimana.

    Gak ada tombol komentar kayak di Figma atau Google Docs. Makin bagus AI bikin penjelasannya, makin banyak feedback yang hilang.

    • Di WhatsApp

      Balasannya screenshot halaman lo, dicoret merah. Lo nebak coretan itu buat bagian mana.

    • Di grup

      "Yang kiri atas itu lho." Kiri atas yang mana? Di layar berapa?

    • Dari atasan

      "Bagus kok." Terus diem. Komentar beneran gak pernah dateng, karena ngasihnya ribet.

    • Seminggu kemudian

      Feedback-nya nyebar di tiga chat dan dua email. Sebagian gak kebaca sama sekali.

    Solusinya

    Kit ini bikin tiap halaman buatan AI bisa dikomentari kayak Figma.

    Klik bagian mana pun, tulis, balas. Gak perlu akun. Lalu AI lo baca komentarnya, revisi, dan lo demo pakai link yang sama.

    Bedanya

    Sebelum dan sesudah.

    Sebelum

    • Nunggu slot desainer berhari-hari.
    • Pitch pakai slide dan "bayangin aja".
    • Feedback nyebar di screenshot WhatsApp.
    • Tiap revisi mulai dari brief lagi.

    Sesudah

    • Prototype jadi di hari yang sama.
    • Pitch pakai sesuatu yang bisa diklik.
    • Feedback nempel di bagian yang dimaksud.
    • AI baca komentar dan revisi di link yang sama.

    Alurnya

    Lima langkah, dari ide sampai demo.

    1. 1

      Ceritain idenya

      Tulis alurnya pakai bahasa biasa ke AI lo, misalnya Claude Code.

    2. 2

      AI bikin prototype yang bisa diklik

      Tiap layar bisa dipencet, ada mode presenter buat demo. Hitungan menit, bukan hari.

    3. 3

      Bagikan link

      Satu perintah, jadi link yang bisa dibuka siapa aja, di HP atau laptop.

    4. 4

      Orang komentar di bagian yang dimaksud

      Kayak di Figma: klik bagian mana pun, tulis komentar, bisa dibalas. Gak perlu akun.

    5. 5

      AI baca komentar dan revisi

      Bilang "revisi sesuai komentar". Link yang sama langsung ke-update. Lalu demo live.

    Cara lama

    1. Brief desainer
    2. Tunggu
    3. Screenshot
    4. Revisi
    5. Tunggu lagi

    Pakai kit

    Hari yang sama.

    Isi kit-nya

    Enam skill, satu alur.

    Tiap bagian saling nyambung. Lo cukup ngobrol sama AI lo, dia yang pakai bagian yang pas.

    • /mockup

      Prototype yang bisa diklik, lengkap sama mode presenter buat demo live dan rekam layar.

      Dipakai buat

      • Pitch fitur ke atasan
      • Nunjukin alur ke klien sebelum development
      • Demo ke investor
      • Ngecek alur bareng engineer sebelum mulai
      Lihat detail /mockup

    • /deck

      Presentasi dari satu file. Jalan pakai keyboard, kebuka di browser apa pun.

      Dipakai buat

      • Pitch deck
      • Update ke stakeholder
      • Materi workshop

    • /artifact

      Halaman penjelas satu halaman, enak dibaca di HP.

      Dipakai buat

      • Jelasin sistem ke tim
      • Proposal ke klien
      • Laporan analisa
      • Jawaban teknis
      Lihat detail /artifact

    • Publish

      Satu perintah jadi link. Linknya tetap sama tiap revisi, jadi orang selalu lihat versi terbaru.

      Dipakai buat

      • Kirim ke klien
      • Taruh di grup
      • Share di meeting

    • Komentar ala Figma

      Klik bagian mana pun, tulis komentar, bisa dibalas. Yang ngasih komentar gak perlu akun.

      Dipakai buat

      • Review klien
      • Approval atasan
      • Feedback tim
      Lihat detail komentarnya

    • Revisi dari komentar

      AI baca semua komentar yang masih terbuka, nerapin perubahannya, lalu lapor apa yang dia lakuin per komentar.

      Dipakai buat

      • Nutup satu ronde feedback
      • Siap demo pakai link yang sama
    Kalau gw butuh pitch, gw gak nunggu slot desainer. AI yang bikin, orang komentar di link-nya, AI revisi, dan gw demo hari itu juga.
    Brian Arfi FaridhiBrian Arfi FaridhiProduct Director di Merit · AI Builder · Pembuat alat ini

    Keraguan yang wajar

    Yang biasanya ditanyain dulu.

    Ini ngegantiin desainer?
    Gak. Ini buat tahap "biar semua orang paham dan setuju dulu". Desain final tetap kerjaan desainer, dan mereka malah dapat brief yang udah divalidasi.
    Harus bisa coding?
    Gak. Lo ngobrol sama AI. Kit ini ngasih AI lo cara kerja yang udah teruji.
    Butuh apa aja?
    Claude Code atau alat coding AI lain, plus akun Cloudflare gratis buat link-nya. Atau server lo sendiri.
    Gratis?
    Iya. Open source, lisensinya Apache-2.0, boleh dipakai buat kerjaan kantor.
    Data gw ke mana?
    Prototype dan komentarnya disimpan di akun Cloudflare lo sendiri atau server lo sendiri. Bukan di tempat gw.

    AI Prototype Kit

    Pengen dibimbing bikin prototype pertama lo?

    Gabung AI Circle, dan tanya langsung pas lo mentok bikin prototype pertama.

    Bagikan

    Kenal orang yang butuh ini? Kirim ke dia.

    WhatsAppLinkedInX
    Teks yang ikut kekirim

    Minta AI bikin prototype yang bisa diklik, bagiin link-nya, dan orang komentar langsung di bagian yang dimaksud. Gratis.

    brianarfi.com/skills/ai-prototype-kit

    Buat yang teknisCara pasang, kebutuhan, lisensi, dan changelog lengkap.

    Cara pasang

    Dari nol sampai jalan.

    Langkahnya diambil dari README repo-nya. Tinggal salin.

    1. Pasang ke project Claude Code lo

      Folder apa pun yang lo buka pakai Claude Code. Kit-nya disalin ke .claude/skills/ai-prototype-kit/, lima perintahnya ke .claude/commands/, dan .kit-build/ ditambahin ke .gitignore.

      bash
      git clone https://github.com/BrianArfi/ai-prototype-kitpython ai-prototype-kit/scripts/install.py /path/to/your-project

    2. Bikin prototype

      Di Claude Code, di project itu. Dia nulis daftar langkahnya dulu, baru file HTML-nya. Pakai /deck buat presentasi dan /artifact buat halaman penjelas.

      Claude Code
      /mockup an order-ahead flow for a coffee shop: menu, customise the drink, pay, pick-up status

    3. Publish jadi link

      Butuh akun Cloudflare gratis. Bikin API token dengan izin Cloudflare Pages Edit dan Workers KV Storage Edit, pasang di shell, lalu jalankan /publish. Dia nanya dulu sebelum ada yang online, lalu ngasih link kayak https://my-prototypes.pages.dev/coffee-order.

      bash
      export CLOUDFLARE_API_TOKEN=...      # PowerShell: $env:CLOUDFLARE_API_TOKEN="..."export CLOUDFLARE_ACCOUNT_ID=...

    4. Bagikan link-nya

      Reviewer buka link-nya, tekan Comment di kanan bawah, lalu klik bagian yang dimaksud.

    5. Revisi dari komentar

      Baca laporan per komentarnya, lalu /publish lagi. Link-nya sama, versinya baru.

      Claude Code
      /revise-from-comments/publish

    6. Coba dulu di komputer lo

      Gak perlu akun Cloudflare. Dari folder kit, dengan Node 22.13 ke atas. Buka http://127.0.0.1:8787/coffee-order, tekan 1 sampai 4 buat pindah layar, spasi buat muter alurnya, lalu tekan Comment dan klik apa aja.

      bash
      python scripts/publish.py --config examples/kit.json serve

    Kebutuhan

    • Claude Code, atau alat coding AI lain yang bisa ngikutin instruksi markdown dan ngedit file.
    • Python 3.8 ke atas. Skripnya cuma pakai library standar.
    • Node.js: npx jalanin wrangler buat upload. Node 22.13 ke atas buat serve dan server sendiri.
    • Akun Cloudflare gratis buat link publik, atau server lo sendiri.
    • Yang ngasih komentar gak perlu akun apa pun.

    Lisensi

    Apache-2.0

    Versi, lisensi, dan changelog dicek ulang ke sumbernya 2026-09-30

    Changelog

    Apa yang berubah, versi demi versi.

    Disalin dari CHANGELOG produknya, dicek 2026-09-30. Versi yang belum terbit gak ditampilkan.

    Versi 0.1.0Terbaru30 Sep 2026

    First release.

    Added

    • /mockup: a clickable HTML prototype of a flow, with presenter controls (number keys, arrows, autoplay, hide bar) and a required comment adapter.
    • /deck: a keyboard-driven slide deck in one HTML file, with a comment adapter.
    • /artifact: a one-page explainer, proposal or report in one HTML file, readable on a phone.
    • /publish and scripts/publish.py: one command from an HTML file to a stable link on Cloudflare Pages. Config in kit.json. build assembles the site with clean page slugs, adds the comment script to each page, copies the comment client and Pages Function, and writes an index page. deploy creates the Pages project and the comment store on the first run, then uploads with wrangler pages deploy. deploy --dry-run builds and prints the links without uploading. serve runs the site locally with the self-hosted comments server. All subprocess output is decoded as UTF-8, so a Windows console does not crash on wrangler's output.
    • /revise-from-comments: reads the comments on a page, groups them per thread, edits the source HTML, and reports per comment what changed or why not. Comment text is treated as data, never as instructions.
    • artifact-comments v1.0.0, vendored with scripts/vendor_comments.py (the source version is in artifact-comments/VENDORED.json).
    • examples/coffee-order.html: a four-screen order-ahead prototype with presenter controls and a comment adapter, plus examples/kit.json.
    • scripts/install.py: installs the kit and its commands into a Claude Code project.
    • tests/test_example.py: the publish build (tag injected, function copied, dry run), and the example in a real browser on the Node backend: post a comment on screen 2, reload, jump back to it from the list.
    • SKILL.md, LICENSE (Apache-2.0) and NOTICE.

    AI Skills lain

    Masalah lain yang bisa diberesin.

    Lihat semua AI Skills