Alur Kerja 4-Gate: Jangan Langsung ke Kode
Kenapa agent tidak boleh langsung coding. Pahami alur Brief → Konsep → Storyboard & TASTE.md → Build & Review.
Kunci palet warna, skala tipografi, kurva easing, dan aturan musik agar iterasi versi berikutnya selalu seragam.
Minta versi kedua ke agent, dan biasanya ia mulai dari nol: biru yang lain, font yang lain, easing yang lain. MotionMind menyimpan gaya di sebuah file, bukan di chat. Setiap campaign punya satu TASTE.md. Agent mengisinya setiap kali Anda menyetujui keputusan, lalu membacanya sebelum merencanakan atau membangun versi baru.
motionmind init membuat TASTE.md di projects/<brand>/<campaign>/ saat pertama kali membuat versi untuk campaign itu. Isinya enam bagian:
| Bagian | Isinya |
|---|---|
| 1. Brief | konsep, format, audiens, CTA, urutan beat |
| 2. Feel | kata suasana, tempo, referensi, yang harus dihindari |
| 3. Visual system | palet (hex → peran), tipografi, layout dan safe area, finishing |
| 4. Motion | easing, animasi teks, gerakan khas, transisi |
| 5. Sound | musik, SFX, loudness |
| 6. Feedback rules | preferensi Anda yang berlaku seterusnya, hanya ditambah |
Satu aturan untuk setiap nilai: harus bisa langsung dipakai. Kode hex, bukan "biru hangat"; power3.out 0.5 s, bukan "halus".
Saat Anda menyetujui storyboard di Gate 2, agent menulis gayanya ke TASTE.md dan mengubah statusnya dari draft menjadi approved. Agent juga menjaga plan/design.html tetap sama isinya: contoh warna dan huruf yang bisa Anda buka dari halaman run di Studio (design.html). Seperti ini file yang sudah terisi untuk promo Demo Coffee; salin sebagai titik awal untuk milik Anda:
# TASTE – demo/launch-6s
Updated: 2026-10-31 12:00 · by: claude · current version: v1-steam
Status: approved
## 1. Brief
- **Concept (one line):** Steam rises: the cup wakes up, the line lands, the logo closes.
- **Platform / format:** Reels 9:16 1080×1920, 30 fps, 6 s
- **Audience · goal · CTA:** morning commuters · visit the shop · demo.example
- **Story beats (seconds):** 0–1.5 cup · 1.5–4.5 headline · 4.5–6 CTA + logo
- **Brand inputs:** shared/brands/demo/ (brand.json, logos)
## 2. Feel
- **Mood words (3–5):** warm, awake, simple
- **Pacing:** one idea per beat, hero words held ≥ 1 s
- **References:** none
- **Avoid:** stock coffee photos, a second message
## 3. Visual system
- **Palette (hex → role):** #0B0F17 background · #3F6BFF primary · #FFEA00 hero words / CTA only · #F4F5F2 text
- **Type:** display Outfit 800 · headline 120 px, CTA 48 px · tracking −0.03em
- **Layout:** safe area y 285–1635, everything centred
- **Finish:** soft radial glow behind the cup, no grain
## 4. Motion
- **Easing:** entrances power3.out 0.5 s · exits power2.in 0.3 s
- **Text animation:** words rise 40 px, 0.4 s apart
- **Signature devices (repeat across scenes):** steam lines rising above the cup
- **Transitions · camera:** none, one locked frame
## 5. Sound
- **Music:** motionmind music --out src/assets/audio/music.wav --duration 6 --bpm 120
- **SFX:** cup in → pop · headline → whoosh · CTA → chime
- **Loudness:** −14 LUFS integrated, true peak ≤ −1.0 dBFS
## 6. Feedback rules (append-only)
- 2026-10-31: CTA text ≥ 64 px, held ≥ 1.5 s
Saat Anda bilang "CTA-nya terlalu kecil", agent memperbaikinya. Kalau catatan itu preferensi, bukan sekali saja, agent juga menambahkan satu baris ke §6, dan setiap versi berikutnya membacanya sebelum membangun. Untuk melanjutkan campaign, sebut namanya; agent membaca TASTE.md, lalu PROGRESS.md, lalu bagian akhir LOG.md sebelum mengusulkan apa pun:
Continue demo/launch-6s: make v3 with a new hook; keep the style from TASTE.md.
Anda juga bisa menambahkan aturan secara langsung:
Add to the feedback rules in TASTE.md: never put yellow text on the blue background.
Mengganti gaya dengan sengaja juga boleh. Hasilnya versi baru, dan TASTE.md diubah lebih dulu:
Continue demo/launch-6s: make v3 in a lighter style (paper background, blue text).
Update TASTE.md first and show me what changed.
Prompt boleh juga ditulis dalam bahasa Indonesia.
TASTE.md untuk campaign baru diambil dari template. Kalau workspace Anda punya templates/TASTE.md, MotionMind memakainya sebagai pengganti template bawaan, jadi palet, tipografi, dan motion Anda sudah ada sejak v1. Salin file yang Anda suka:
mkdir -p templates
cp projects/demo/launch-6s/TASTE.md templates/TASTE.md
Lalu buka templates/TASTE.md, kembalikan baris pertama menjadi # TASTE – {{project}} (MotionMind mengisinya dengan nama campaign), dan kosongkan bagian yang hanya berlaku untuk satu video: brief dan feedback rules khusus video itu. templates/design.html bekerja dengan cara yang sama untuk halaman desain.
Kenapa agent tidak boleh langsung coding. Pahami alur Brief → Konsep → Storyboard & TASTE.md → Build & Review.
Motion graphics berbasis HTML + GSAP yang presisi tiap frame, deterministik, dan dapat diedit visual tanpa coding.
Hindari nilai random dan jam komputer dalam kode animasi untuk menjamin hasil render selalu identik 100%.
Buka terminal, jalankan motionmind ui, lalu pasang skill ini ke AI agent Anda.