Contoh 1 dari 2
Website
Riung Connect
Tempat orang cari jadwal ngariung dan mulai kolaborasi.
Kita lihat langkah Research dan Frame.
Ryoo · Startup Cafe #104
08
Observe
Research
Frame
Context
Generate
Critique
Ship
Let AI explore. You choose what fits.
Nggak semua perlu mulai dari nol. Cari pola yang sudah familiar, seperti filter di Google Calendar.
PROMPT EXAMPLE
Bandingkan 3 cara website komunitas menampilkan jadwal acara. Catat: tampilan, filter, dan info yang muncul saat tanggal dipilih. Sertakan link sumbernya.
AI: cari & bandingkan referensi
Saya: pilih yang paling relevan
Contoh nyata · Kalender Riung Connect
09
Observe
Research
Frame
Context
Generate
Critique
Ship
Build the site around two main goals
Dibangun dengan AI · sudah live
Dari problem tadi, kita tentukan dua CTA utama di hero section:
Cari jadwal acara
Mulai kolaborasi
Prioritas kontennya
1 Kalender: Hari ini, Semua, WFC, Event
2 Riung Pass & kafe partner: alasan kembali
3 Arsip kegiatan, komunitas, ajakan kolaborasi
Contoh nyata · Website Riung Connect
11
Contoh 2 dari 2
Poster
WFC mingguan
Workflow yang sama, sekarang untuk poster yang tayang tiap Selasa dan Kamis.
Kita lihat langkah Context, Generate, dan Critique.
Ryoo · Startup Cafe #104
13
Observe
Research
Frame
Context
Generate
Critique
Ship
Same checklist, now for a poster
Konteks poster WFC 22 September
01
Siapa penggunanya
Peserta WFC dan calon peserta baru
02
Tujuannya
Orang tahu jadwalnya, lalu datang
03
Brand
Logo dan warna biru Riung
04
Konten asli
Foto bersama, Selasa 22 Sept, Jati Kopi, alamat
05
Requirements
Ukuran feed 4:5, info acara mudah dibaca
06
Referensi
Poster WFC minggu sebelumnya
07
Hindari
Teks menutupi foto, info acara dikarang
Hasilnya: poster yang langsung terasa "Riung"
Contoh nyata · Poster WFC Riung Connect
14
Figma + AI · Riung Connect
AI that draws inside Figma
1 · The prompt
Bikin poster WFC Selasa 6 Okt di Tradisi. Gaya tiket, pakai foto kegiatan, diskon 10%.
→
2 · The bridge
MCP
MCP menghubungkan AI dengan tools di Figma.
→
3 · The result
Draft muncul di file kita: layer rapi dan bisa diedit. Saya tinggal rapikan, cek data, lalu putuskan.
Figma · Content Riung Connect / Post / WFC
6 poster WFC yang sudah tayang
AI
Ryoo · Startup Cafe #104
15
MCP basics
What is MCP?
A bridge between AI and your tools.
MCP = Model Context Protocol. Standar terbuka supaya AI bisa tersambung ke aplikasi dan data kita. Seperti colokan USB: satu bentuk, bisa ke banyak alat.
Tanpa MCP
Tanpa koneksi ke tools, kita perlu copy-paste manual.
Dengan MCP
AI bisa bekerja lewat tools yang terhubung, sesuai akses yang kita izinkan.
Kita yang memilih aplikasi mana yang boleh disambung, dan bisa memutusnya kapan saja.
AI
Claude · ChatGPT
MCP
Figma
menggambar desain
Google Drive
membaca dokumen
Google Calendar
melihat jadwal acara
Gmail
menyiapkan balasan
Ryoo · Startup Cafe #104
16
MCP setup
Connect your tools
Claude
claude.ai
1 Buka Customize, lalu tab Connectors
2 Pilih aplikasinya (Figma, Google Drive), klik +
3 Login, cek akses yang diminta, lalu gunakan di chat
ChatGPT
chatgpt.com
1 Buka Plugins di menu kiri
2 Pilih aplikasinya (Figma, Google Drive), klik +
3 Login, cek akses yang diminta, lalu gunakan di chat
Tampilan per November 2026, bisa berubah · Punya link MCP sendiri? Pakai menu Add di halaman yang sama
17
Observe
Research
Frame
Context
Generate
Critique
Ship
Ask for options, not one answer
Satu brief, satu prompt, 6 opsi desain poster WFC untuk 22 September di Jati Kopi.
PROMPT EXAMPLE
Pakai konteks Riung Connect di atas. Buat 6 opsi desain poster WFC untuk 22 September di Jati Kopi, ukuran feed 4:5. Eksplorasi gaya yang berbeda untuk tiap opsi. Info acara tetap sama.
AI: memberi pilihan
Saya: memilih & memoles
Contoh nyata · Poster WFC Riung Connect
18
Observe
Research
Frame
Context
Generate
Critique
Ship
Treat the first output as a starting point
Versi 1
Kurang pas
→
Arah 2 · Arch Editorial
Arah 3 · Photo Bold
PROMPT EXAMPLE
Foto kegiatan belum jadi fokus di versi ini. Buat 2 opsi baru dengan layout yang berbeda. Info acara tetap sama, dan jadikan foto sebagai fokus utama.
AI: membuat ulang
Saya: menilai
Contoh nyata · Poster WFC Rutin Selasa & Kamis
19
Observe
Research
Frame
Context
Generate
Critique
Ship
Check what’s real before you ship
Cek sebelum posting
Hari & tanggal
Selasa, 22 September 2026
Kafe & alamat
Jati Kopi, Jl. Talaga Bodas No.44
Jam
10:00 sampai selesai
Foto
Foto acara yang benar, bukan minggu lalu
Logo & ukuran
Logo Riung jelas, feed 4:5
Contoh nyata · Poster WFC Riung Connect
20
Ready to scale
Build once, reuse every week
Satu template untuk poster Selasa dan Kamis
01
Bikin sekali, pakai berkali-kali
Tiap minggu tinggal ganti tanggal, kafe, dan foto. Nggak perlu desain ulang.
02
Simpan prompt yang berhasil
Prompt yang hasilnya bagus disimpan, jadi minggu depan tinggal dipakai lagi.
03
Alurnya selalu sama
Duplikat, ganti isi, cek, posting. Urutannya nggak berubah tiap minggu.
04
Bisa dijalankan siapa saja
Langkahnya tertulis, jadi teman tim bisa jalan tanpa harus nunggu saya.
Siap scale artinya bisa diulang tiap minggu, dan nggak harus selalu kita yang mengerjakan.
Contoh nyata · Riung Connect
21