MASA by LabMu · Google Stitch Prompt Pack · 12 prompts

Stitch Prompt Pack

12 prompts siap paste ke stitch.withgoogle.com — generate UI untuk setiap cluster MASA. Setiap prompt sudah berisi context (brand, colors, font, tone) + screen specification. Klik "Copy" lalu paste ke Stitch.

Cara pakai: (1) Buka stitch.withgoogle.com → (2) Pilih "Mobile" → (3) Paste prompt → (4) Generate → (5) Iterate dengan follow-up prompt. Stitch menghasilkan UI mockup — bukan code. Hasilnya bisa di-export sebagai image atau Figma file.

Context penting: Setiap prompt sudah include brand context (warna, font, tone). Jika Stitch mengabaikan sebagian, tambahkan di follow-up: "Use Inter font, blue #1B77A6 primary, warm paper #FBF8F2 background, calm Islamic tone."

§1Design System

Design System — Token Overview

Colors · Typography · Spacing · Components

Design a mobile design system overview page for "MASA by LabMu" — an Islamic super app by Muhammadiyah Indonesia.

BRAND CONTEXT:
- Brand essence: "Guided Muslim Life in One Hand"
- Positioning: "The Most Trusted Islamic Digital Ecosystem in Indonesia"
- Personality: Wise, Calm, Modern, Clear stance, Non-preachy
- Visual style: Clean modern Islamic, NOT ornamental. Calm and warm.

COLOR TOKENS:
- Primary Blue: #1B77A6 (Muhammadiyah brand)
- Blue Dark: #005E8C
- Amber Warm: #F7B273 (sedekah/donation accent)
- Amber Dark: #A8541A
- Emerald: #2D6A4F (trust/habit)
- Gold: #B8924D (authority/trust badges)
- Paper Background: #FBF8F2 (warm, not pure white)
- Ink Text: #14110E
- Muted: #6E665B

TYPOGRAPHY:
- Font: Inter (single family for entire UI)
- Display: Inter 800 ExtraBold, letter-spacing -0.025em
- Headline: Inter 700, 28px
- Body: Inter 400, 14-16px
- Label: Inter 500, 13px
- Caption: Inter 400, 12px
- Arabic Quran: LPMQ Isep Misbah (or Amiri as fallback)

SPACING: 8pt grid (4, 8, 12, 16, 24, 32, 40, 48, 64)
RADIUS: 0, 2, 4, 8, 12, 16, 999 (pill)
SHADOWS: Paper-soft (subtle line + gentle blur, NOT material drop shadow)

Show the design system as one scrollable page with sections:
1. Color palette swatches with hex codes
2. Typography scale samples (display, headline, body, label, caption, Arabic)
3. Spacing visual bars
4. Button variants: Primary (blue), Secondary (outline), Sedekah (amber), Danger, Ghost — each in 3 sizes (sm/md/lg) with states (idle, hover, disabled, loading)
5. Input field states (idle, focus, error, disabled)
6. Toggle, Checkbox, Radio
7. Badge variants (blue, amber, emerald, gold, error)
8. Avatar sizes (sm/md/lg/xl) with initials
9. Card variants: Default, Elevated, Callout (blue), Sedekah (amber gradient)

Style: Professional design system documentation. Dark sidebar TOC, clean layout. Android-first (360dp width reference).

Output: Design system overview page · Follow-up: "Now show just the button component in all states" or "Show the card component variations"

§2Sitemap

Sitemap — Visual Information Architecture

62 pages · 5 clusters · tree diagram

Create a visual sitemap / information architecture diagram for "MASA" — an Islamic super app with 62 pages organized in 5 clusters.

Navigation: 4-tab bottom nav → Beranda · Ibadah · Beri (FAB center) · Saya

CLUSTER 0 — HOMEPAGE & PRE-APP (12 pages):
P-01 Splash → P-02 Onboarding thesis → P-03 3-Segment picker (Kader/Muslim/Habit) → P-04 Permission primer → P-05 Login M-ID → P-06 Verifikasi NBM
P-07 Homepage Kader · P-08 Homepage Muslim · P-09 Homepage Habit · P-10 Homepage Guest
P-11 Semua layanan (Explore grid) · P-12 Notifikasi inbox

CLUSTER 1 — HABIT HARIAN (12 pages, color: Emerald #2D6A4F):
H-01 Jadwal Salat → H-02 Detail waktu sholat
H-03 Indeks Surah → H-04 Al-Quran reader → H-05 Ayat action sheet → H-06 Quran outro (Bridge B → Sedekah) → H-07 Pengaturan baca
H-08 Doa hub (contextual) → H-09 Detail doa
H-10 Arah Kiblat · H-11 KHGT Kalender Hijriah · H-12 Pesan Hari Ini

CLUSTER 2 — TRANSAKSI AMAL (19 pages, color: Amber #F7B273):
T-01 Sedekah quick → T-02 Konfirmasi → T-03 Sukses+impact
T-04 LazisMu hub → T-05 Detail program → T-06 Payment universal → T-07 Kuitansi · T-08 Riwayat
T-09 Zakat hub → T-10 Zakat Fitrah → T-11 Zakat Maal+Kalkulator
T-12 Kurban hub → T-13 Kurban pembayaran → T-14 Kurban tracking
T-15 Auto-debit Sedekah Subuh setup
T-16 Iuran list → T-17 Iuran bayar → T-18 Iuran error+recovery → T-19 Iuran sukses

CLUSTER 3 — INFO & KONTEN (7 pages, color: Blue #1B77A6):
C-01 Berita hub → C-02 Detail berita
C-03 Video hub → C-04 Video player
C-05 Event list → C-06 Detail event
C-07 ChatHPT (Tanya Tarjih)

CLUSTER 4 — IDENTITAS (9 pages, color: Gold #B8924D):
I-01 e-KTAM card · I-02 Ranting Saya · I-03 Profil utama → I-04 Edit profil
I-05 Notifikasi setting · I-06 Sedekah Subuh settings · I-07 Bahasa · I-08 Tentang MASA · I-09 Bookmark

Style: Clean tree/node diagram, color-coded by cluster, page IDs visible, connections showing navigation flow. Dark background, modern aesthetic. Like a professional UX sitemap deliverable.

Output: Visual sitemap diagram · Follow-up: "Zoom into Cluster 2 Transaksi showing all connections" or "Show the 4-tab navigation structure"

§3User Flows

Flow — Continuity Loop (Salat → Quran → Sedekah)

Core retention flow · 5 steps

Create a user flow diagram for the core "Continuity Loop" in MASA app — the main retention mechanism.

FLOW (5 steps):
Step 1: JADWAL SALAT (H-01) — User opens app, sees "Subuh 04:42, 8 minutes away" countdown. Below: Bridge A card "Sambil menunggu — lanjut baca Quran →"
Step 2: AL-QURAN READER (H-04) — User taps Bridge A, resumes reading at last ayat (Al-Baqarah:23). Tafsir Tarjih appears inline.
Step 3: QURAN OUTRO (H-06) — After reading 10+ ayat, outro screen: "23 ayat pagi ini. Posisi tersimpan." Below: Bridge B → "Sedekah Subuh hari ini?" with nominal picker (2rb/5rb/10rb)
Step 4: SEDEKAH CONFIRM (T-02) — Slide-to-confirm. Trust badge "LazisMu resmi". Footer: "Sedekahmu antara kamu & Allah" (anti-riya)
Step 5: IMPACT (T-03) — "Tersimpan. Kamu + 1.243 jamaah subuh ini." Private. Kuitansi link.

TRIGGER: Push notification "Subuh sebentar lagi · 04:42 di Yogyakarta"
RE-TRIGGER: Same notification tomorrow morning → loop repeats

Style: Clean horizontal flow diagram with phone mockup at each step. Arrows between steps. Step numbers visible. Dark background, emerald accent for habit nodes, amber for sedekah nodes. Professional UX flow deliverable.

Output: Flow diagram with phone mockups · Follow-up: "Show the error/recovery branch at step 4 when payment fails"

Flow — Iuran KTAM Fix (Bug Recovery)

Payment fix · 3 steps + recovery

Create a user flow diagram for "Iuran KTAM" payment in MASA app — including the bug recovery path.

HAPPY PATH (3 steps):
Step 1: IURAN BAYAR (T-17) — "Partisipasi kader · Iuran Mei · Rp 25.000". Breakdown: "40% dakwah · 35% kaderisasi · 25% AUM". Payment method: QRIS default.
Step 2: PAYMENT — Processing with skeleton
Step 3: SUKSES (T-19) — "Iuran Mei selesai. KTAM aktif sampai Juni. Partisipasimu menggerakkan 3 program ranting." Kuitansi link.

ERROR BRANCH (from Step 2):
Step 2B: IURAN ERROR (T-18) — "VA gagal dibuat. Nomor rekening belum bisa dibuat sekarang." Recovery options inline: (1) Bayar dengan QRIS → back to payment, (2) Coba VA lagi → retry, (3) Transfer manual → instructions. NOT a dead-end.

KEY CONTEXT: This fixes a real bug where users see a blank screen when VA generation fails. The old UX = dead-end. New UX = always has recovery path.

COPY TONE: "Partisipasi" not "tagihan" (participation, not invoice). Calm, not urgent.

Style: Flow diagram showing happy path + error branch. Phone mockups at each step. Red accent for error node. Professional UX deliverable.

Output: Flow with error branch · Follow-up: "Show the Zakat flow (3 steps: hub → calculator → payment)" or "Show the Qurban flow with cicilan"

§4Wireframes & Hi-fi per Cluster

Homepage — 3 Segment Variants (Hi-fi)

Gojek-adapted · NOW zone + puck grid + content sections

Design 3 variants of the MASA app homepage for Android (360x800dp), one for each user segment. Gojek-inspired layout.

BRAND: MASA by LabMu. Colors: Blue #1B77A6, Amber #F7B273, Emerald #2D6A4F, Gold #B8924D, Paper BG #FBF8F2, Ink #14110E. Font: Inter. Tone: Calm Islamic, modern, non-preachy.

NAVIGATION: 4-tab bottom bar → Beranda (active) · Ibadah · FAB Sedekah (amber circle center) · Komunitas · Saya

VARIANT 1 — MUSLIM UMUM:
- Greeting: "Selamat subuh, kak 🌙"
- Pesan Hari Ini card (gold border): Hadits quote from Tarjih, italic serif
- NOW zone (blue card): "Subuh 04:42 · 8 menit lagi · Yogyakarta" + CTA "Lanjut baca Quran →"
- Promo banner: horizontal scroll (Qurban cicilan)
- Puck grid 4×2: Quran, Salat, Sedekah, Doa, Zakat, Qurban, Event, KTAM
- Resume card: "Al-Baqarah · ayat 23 · 12 menit lalu →"
- Berita section: "Berita Muhammadiyah · Semua →" + 3 horizontal scroll cards with thumbnails
- Video section: "Video Muhammadiyah · Semua →" + 2 YouTube thumbnails with duration badges
- Event section: "Event terdekat · Semua →" + 1 event card with date badge

VARIANT 2 — KADER MUHAMMADIYAH:
- Greeting: "Assalamualaikum, Pak Iqbal"
- Pesan Hari Ini (same gold card)
- Ranting card (amber): "Pengajian PCM Sabtu · Iuran Mei belum dibayar"
- NOW zone (same blue)
- Puck grid: e-KTAM, Iuran, Quran, Salat, Ranting, Event, Sedekah, Semua
- Berita + Video sections (same pattern)

VARIANT 3 — HABIT SEEKER:
- Greeting: "Hari ke-7, pertahankan 🌱"
- Pesan Hari Ini (same)
- Streak card (emerald): "7 hari · Quran + Sedekah Subuh" with fire icon + progress bar
- Target card: "Target hari ini: baca + sedekah · 2/2"
- Puck grid 4×1: Quran, Salat, Sedekah, Progress
- Challenge banner: "30 hari Quran →"
- Video section (inspiration category)

Show all 3 side by side. Hi-fi quality, pixel-perfect. Paper-soft shadows, warm background.

Output: 3 homepage variants side-by-side · Follow-up: "Now design the Guest variant (no login)" or "Show the homepage in dark mode"

Onboarding — 3-Segment Entry Flow

Splash → thesis → segment picker → permission → login

Design a 5-screen onboarding flow for MASA app (Android 360x800dp).

BRAND: MASA by LabMu. Primary Blue #1B77A6. Font: Inter. Warm paper BG #FBF8F2. Calm, wise, non-preachy.

SCREEN 1 — SPLASH:
- MASA logo center (blue circle with M)
- "by LabMu" small text below
- Warm paper background

SCREEN 2 — THESIS:
- "Sudah 100 tahun Muhammadiyah membimbing umat. Sekarang, dalam satu aplikasi."
- Large serif italic text, centered
- CTA: "Mulai" (blue button full-width)
- Skip link: "Lewati"

SCREEN 3 — 3-SEGMENT PICKER:
- Title: "MASA ingin menyesuaikan pengalamanmu"
- Subtitle: "Mana yang paling kamu rasakan?"
- 3 selectable cards:
  (1) "Saya warga Muhammadiyah" — sub: "KTAM, komunitas, ranting" (blue highlight when selected)
  (2) "Saya Muslim umum" — sub: "Ibadah & panduan harian"
  (3) "Saya ingin membangun kebiasaan ibadah" — sub: "Konsistensi & progress"
- Footer: "Bisa diubah nanti di Profil"

SCREEN 4 — PERMISSION PRIMER:
- Icons: 🔔 📍 large centered
- "Izinkan notifikasi & lokasi"
- "Untuk pengingat sholat sesuai kotamu & kebiasaan baik harian. Suara bisa kamu atur kapan saja."
- CTA: "Izinkan" (blue) + "Nanti saja" (link)

SCREEN 5 — LOGIN:
- "Masuk ke MASA"
- "Akun Muhammadiyah (M-ID)"
- Email input + Password input
- "Masuk" button (blue)
- "Daftar baru · Lupa password" links
- "Lanjut tanpa masuk" ghost button

Show all 5 screens in a horizontal row. Hi-fi quality.

Output: 5-screen onboarding flow · Follow-up: "Show the NBM verification screen after login"

Ibadah Cluster — Salat + Quran + Doa

8 screens · daily habit features

Design 8 screens for the "Ibadah" (worship) features of MASA app (Android 360x800dp).

BRAND: Blue #1B77A6, Emerald #2D6A4F, Amber #F7B273, Paper #FBF8F2. Font: Inter. Arabic: Amiri. Calm Islamic tone.

SCREEN 1 — JADWAL SALAT (H-01):
- Location: "Yogyakarta"
- Hero blue card: "Menuju Subuh · 04:42 · 12 menit lagi" (large countdown)
- Bridge A amber card: "Sambil menunggu — lanjut baca Quran →"
- Prayer times list: Imsak ✓ 04:11, Subuh ● 04:42 🔔, Dzuhur 11:35, Ashar 14:57, Maghrib 17:42, Isya 19:00
- Morning doa card (amber dashed): Arabic text "Allahumma bika asbahna"

SCREEN 2 — INDEKS SURAH (H-03):
- Title: "Panduan hidup harian"
- Resume card (blue border): "Terakhir dibaca · Al-Baqarah · ayat 23" + progress bar + "Lanjut →" button
- Search: "Cari surat / ayat"
- Segmented tabs: Surah (active) · Juz · Bookmark
- Surah list: numbered, with Arabic name, ayat count, Makkiyah/Madaniyah

SCREEN 3 — QURAN READER (H-04):
- Top bar: "← Al-Baqarah · 38%"
- Ayat with circled number (23), action icons (bookmark, play, more)
- Arabic text in large Amiri font, right-aligned
- Translation text below
- Tafsir card (gold border): "Tafsir · Tarjih" with explanation text

SCREEN 4 — QURAN OUTRO (H-06):
- Success icon (emerald circle ✓)
- "23 ayat pagi ini." + "Posisi tersimpan otomatis"
- Bridge B amber card: "Lengkapi pagimu — Sedekah Subuh?"
- Nominal chips: 2rb · 5rb (selected, amber) · 10rb
- CTA: "Sedekah Rp 5.000" amber button
- Dismiss: "Nanti saja"
- Footer italic: "Sedekahmu antara kamu & Allah"

SCREEN 5 — DOA HUB (H-08):
- Title: "Penguat kehidupan"
- Featured blue card: "Untukmu pagi ini · Doa pagi · Dzikir Subuh · 3 doa pilihan"
- Segmented tabs: Waktu (active) · Situasi · Favorit
- Situation grid (4×2 pucks): Sehat, Rezeki, Perjalanan, Ujian, Keluarga, Sedih, Syukur, Semua

SCREEN 6 — DETAIL DOA (H-09):
- Back nav + title + heart + play icons
- Arabic text large (Amiri)
- Latin transliteration
- Translation
- Audio player bar
- Bottom sheet style

SCREEN 7 — KIBLAT (H-10):
- "Penunjuk arah ibadah"
- Large compass circle with Kaaba icon pointing direction
- "Kiblat: 295° Barat Laut"

SCREEN 8 — KHGT KALENDER (H-11):
- "Kalender Hijriah"
- Today card: "17 Dzulhijjah 1447 · Selasa, 3 Juni 2026"
- KHGT trust badge (blue): "Kalender Hijriah Global Tunggal · standar Majelis Tarjih"
- Next event: "Idul Adha · 6 hari lagi"

Show all 8 screens. Hi-fi, Android-first.

Output: 8 Ibadah screens · Follow-up: "Show the ayat action bottom sheet" or "Show Quran reader in dark mode"

Transaksi Cluster — Sedekah + Iuran + Zakat + Qurban

12 key screens · 3-tap flows · trust framing

Design 12 screens for the "Transaksi" (transaction) features of MASA app (Android 360x800dp).

BRAND: Amber #F7B273 dominant for transactions, Gold #B8924D for trust. Blue #1B77A6 for payment. Paper #FBF8F2 BG. Inter font. Calm, not aggressive. Anti-riya (no boasting about charity).

SCREEN 1 — SEDEKAH QUICK (T-01):
- "Sedekah hari ini" · "Nominal kecil, konsisten. Disalurkan LazisMu."
- Nominal chips: 2rb · 5rb (selected amber) · 10rb · Bebas
- Inline defaults (not separate pages): "Untuk: Anak yatim ✓ · ubah" and "Bayar: Saldo ✓ · ubah"
- Auto-repeat toggle (amber dashed): "Ulangi tiap Subuh? ○"
- CTA: "Sedekah Rp 5.000" amber button

SCREEN 2 — SEDEKAH CONFIRM (T-02):
- Tag: "Konfirmasi"
- Amount card with checkmark: "Rp 5.000 · dari Saldo · ke anak yatim"
- Trust badge (gold): "LazisMu resmi · Kuitansi tersedia"
- Slide-to-confirm button: "⟶ Geser untuk sedekah"
- Footer italic: "Sedekahmu antara kamu & Allah"

SCREEN 3 — SEDEKAH SUKSES (T-03):
- Success icon (emerald ✓)
- "Tersimpan." · "Disalurkan ke anak yatim oleh LazisMu"
- Anonymous social proof: "Kamu + 1.243 jamaah subuh ini 🤲"
- "Lihat kuitansi" ghost button

SCREEN 4 — LAZISMU HUB (T-04):
- "Sedekah yang sampai"
- Trust badge (gold): "Resmi LazisMu · Lembaga zakat nasional Muhammadiyah"
- Filter chips: Semua (active) · Pendidikan · Dhuafa · Dakwah
- Program cards with real photo thumbnails: "Beasiswa santri · Yogya · 247 dibantu" etc.

SCREEN 5 — ZAKAT HUB (T-09):
- "Tunaikan zakat dengan benar"
- 3 option cards: Zakat Fitrah (per jiwa), Zakat Maal (harta), Zakat Penghasilan (gaji)
- Haul reminder: "Haul tabungan: 2 bulan lagi"

SCREEN 6 — ZAKAT KALKULATOR (T-11):
- "← Zakat Penghasilan"
- Input: "Penghasilan / bulan · Rp 8.000.000"
- Fatwa badge (gold): "Fatwa Tarjih · Nisab: setara 85g emas. Zakat 2,5%."
- Result card (emerald): "Zakatmu: Rp 200.000"
- CTA: "Tunaikan Rp 200.000"

SCREEN 7 — QURBAN HUB (T-12):
- "Kurban yang sampai ke yang tepat"
- Animal cards: Kambing Rp 2,5jt · Sapi 1/7 Rp 2,8jt
- Location picker: "Lokasi: NTT (prioritas) ✓ · ubah"

SCREEN 8 — QURBAN BAYAR (T-13):
- Payment options: "Bayar penuh ○" vs "Bertahap 3 bulan ◉ · Rp 834rb/bulan" (amber highlight)
- Disclaimer (gold): "Atur pembayaran sesuai kemampuan, tanpa mengurangi niat baik."
- NOT labeled "paylater"

SCREEN 9 — QURBAN TRACKING (T-14):
- Status steps: ✓ Dibeli & dibayar → ○ Disembelih Idul Adha → ○ Distribusi + foto
- Digital certificate badge (gold)

SCREEN 10 — IURAN BAYAR (T-17):
- Tag: "Partisipasi kader" (NOT "tagihan")
- "Iuran Mei · Rp 25.000"
- Transparency breakdown (gold): "40% dakwah · 35% kaderisasi · 25% AUM"
- Payment: "QRIS ✓ · ubah"

SCREEN 11 — IURAN ERROR (T-18) — BUG FIX:
- Error card (red): "VA gagal dibuat · Nomor rekening belum bisa dibuat sekarang."
- Recovery options (NOT dead-end): "▣ Bayar dengan QRIS →" (blue highlight) · "↻ Coba VA lagi →" · "Transfer manual →"

SCREEN 12 — IURAN SUKSES (T-19):
- Success ✓ · "Iuran Mei selesai · KTAM aktif sampai Juni"
- Impact (emerald): "Partisipasimu menggerakkan 3 program ranting 🤝"

Show all 12 screens. Hi-fi quality.

Output: 12 transaction screens · Follow-up: "Show the weekly digest screen" or "Show the LazisMu program detail with breakdown"

Info Cluster — Berita + Video + Event + ChatHPT

7 screens · content features

Design 7 screens for the "Info & Konten" features of MASA app (Android 360x800dp).

BRAND: Blue #1B77A6 accent. Paper #FBF8F2. Inter font. Source: muhammadiyah.or.id for news, YouTube Muhammadiyah for video.

SCREEN 1 — BERITA HUB (C-01):
- "← Berita Muhammadiyah"
- Filter chips: Terbaru (active) · Organisasi · Pendidikan · Sosial
- Featured card: large photo thumbnail + "Muhammadiyah dorong digitalisasi kurban lewat MASA · 2 jam lalu · muhammadiyah.or.id"
- List cards: thumbnail left (72px) + headline + timestamp

SCREEN 2 — DETAIL BERITA (C-02):
- Full-width header photo
- Headline, timestamp, source
- Article body (placeholder lines)
- "Bagikan ke WhatsApp" button
- Related articles section

SCREEN 3 — VIDEO HUB (C-03):
- "← Video Muhammadiyah"
- Category chips: Semua (active) · Khutbah · Kajian · Dakwah · Inspirasi
- Featured video: large 16:9 thumbnail with play icon + duration badge "12:34"
- List videos: thumbnail left (120px 16:9) + title + channel + views

SCREEN 4 — VIDEO PLAYER (C-04):
- Full-width YouTube embed area (dark, 16:9)
- Title + channel + views + timestamp
- Action row: Share · Simpan
- Related videos section

SCREEN 5 — EVENT LIST (C-05):
- "← Event"
- Filter chips: Terdekat · Yogya · Nasional
- Event cards: date badge (day+month) + title + location + organizer

SCREEN 6 — DETAIL EVENT (C-06):
- Header photo
- Title, date/time, location, organizer with trust badge
- "Daftar hadir" button
- Confirmation: "NBM auto-fill · QR check-in"

SCREEN 7 — CHATHPT (C-07):
- "Tanya Tarjih · Jawaban berdasar Putusan Majelis Tarjih"
- Suggestion chips: "Bolehkah qadha digabung sunnah?" etc.
- Chat bubble (user, blue): "Cara hitung zakat penghasilan?"
- Response bubble (white): Tag "Putusan Tarjih" + answer text + source citation "HPT Bab Zakat" + action link "→ buka kalkulator"
- Input field: "Tulis pertanyaanmu..."

Hi-fi quality, all 7 screens.

Output: 7 content screens · Follow-up: "Show the Berita detail with WhatsApp share sheet" or "Show ChatHPT with a longer conversation"

Identity Cluster — Profil + KTAM + Notif + Ranting

9 screens · includes bug fixes

Design 9 screens for the "Identitas" (identity & settings) features of MASA app (Android 360x800dp).

BRAND: Blue #1B77A6, Gold #B8924D for trust/identity. Paper #FBF8F2. Inter font.

SCREEN 1 — e-KTAM (I-01):
- Blue gradient card: "Aktif · s/d Jun 2026"
- Name: "Muhammad Iqbal" · NBM: 12.345.678
- Ranting: PCM Caturtunggal · QR code corner
- Warning banner (amber): "Iuran Mei belum dibayar · bayar →"

SCREEN 2 — RANTING SAYA (I-02) — NEW FEATURE:
- "Ranting saya" tag (amber)
- Ranting card: "PCM Caturtunggal · Pengurus: Ust. Ahmad · 1.240 jamaah"
- Event section: "Pengajian Akbar · Sabtu 7 Jun"
- Donasi section: "Rp 2,3jt dari jamaah bulan ini → 3 program"

SCREEN 3 — PROFIL (I-03):
- Avatar (blue circle initials) + name + segment + ranting
- Menu list: e-KTAM & Iuran · Riwayat sedekah · Ranting Saya · Pengaturan · Sedekah Subuh settings
- Footer badge (gold): "MASA by LabMu · Muhammadiyah Software Labs"

SCREEN 4 — EDIT PROFIL (I-04):
- "← Data diri"
- NBM sync indicator (emerald): "✓ NBM tersinkron · 12.345.678"
- Form fields: nama, email, HP
- Segment picker: "Segmen: Kader ✓ · ubah kapan saja"
- Save button

SCREEN 5 — NOTIF SETTING (I-05) — BUG FIX:
- "Notifikasi"
- Per-category toggles: 🕌 Adzan & sholat (on) · 🤲 Sedekah Subuh (on) · 💳 Iuran (off) · 📣 Event ranting (off)
- Trust confirmation (emerald): "✓ Yang kamu matikan, benar-benar mati."

SCREEN 6 — SEDEKAH SUBUH SETTINGS (I-06):
- "Sedekah Subuh"
- Nominal default: Rp 5.000
- Auto-debit toggle (on)
- Jendela ± 90 menit
- "Jeda sebentar" option
- "Hentikan Sedekah Subuh" (red text)
- Footer: "Konsistensi tidak harus sempurna. Cukup mulai lagi."

SCREEN 7 — BAHASA (I-07):
- Bahasa: Indonesia ✓
- Font Quran: LPMQ ✓
- Tema gelap toggle

SCREEN 8 — TENTANG MASA (I-08):
- MASA logo + "by LabMu · v3.2.1"
- Manifesto quote card (gold): "MASA hadir bukan sekadar aplikasi. MASA adalah jembatan."
- Links: muhammadiyah.or.id · labmu.id

SCREEN 9 — BOOKMARK (I-09):
- Segmented tabs: Ayat (active) · Doa
- Bookmarked items list with surah name, ayat number, saved date

Hi-fi quality, all 9 screens.

Output: 9 identity screens · Follow-up: "Show the notification setting with per-waktu detail (Subuh adzan / Ashar vibrate / Maghrib off)"

§5Extras & Recommended

Empty States + Error States + Loading

8-state framework · skeleton · permission primer

Design 8 state variations for MASA app screens (Android 360x800dp). Show the same screen (e.g., "Lanjutkan baca Quran" card on homepage) in all 8 states:

BRAND: Blue #1B77A6, Emerald #2D6A4F, Amber #F7B273, Paper #FBF8F2. Inter font.

STATE 1 — IDLE (normal): Quran resume card with surah name, ayat number, progress bar, arrow.
STATE 2 — LOADING: Skeleton shimmer placeholder matching card shape (no spinner).
STATE 3 — EMPTY: Illustration area + "Mulai baca Al-Quran" + "Belum ada posisi yang disimpan. Buka surah untuk mulai." + "Buka daftar surah" link button.
STATE 4 — ERROR: Error icon (red) + "Tidak bisa memuat" + "Posisi terakhir tidak terbaca. Anda tetap bisa buka manual." + "Coba lagi" button.
STATE 5 — PERMISSION: Bell icon (amber) + "Izinkan notifikasi" + "Untuk mengingatkan Anda di waktu Subuh." + "Izinkan" blue button.
STATE 6 — OFFLINE: Wifi-off icon + "Tidak ada koneksi" + "Mushaf tetap terbaca offline. Bookmark disinkronkan saat online."
STATE 7 — PAUSED: Pause icon (amber) + "Auto-debit dijeda" + "Sedekah Subuh harian dijeda sejak 12 Mei." + "Lanjutkan" amber button.
STATE 8 — SUCCESS: Checkmark (emerald) + "Pembayaran berhasil" + "Iuran KTAM Mei · Rp 25.000 · kuitansi tersedia." + "Lihat kuitansi" link.

Show all 8 as cards in a 2×4 grid with state label below each. Professional design system documentation style.

Output: 8-state grid · Follow-up: "Show loading skeletons for the full homepage" or "Show permission primer as a bottom sheet"

Weekly Impact Digest + Push Notifications

Trust building + engagement touchpoints

Design 2 screens + 4 push notification mockups for MASA app (Android 360x800dp).

SCREEN 1 — WEEKLY IMPACT DIGEST:
- Tag (emerald): "Kabar pekan ini"
- Title: "Sedekahmu pekan ini" · "1–7 Juni 2026 · disalurkan oleh LazisMu"
- Total card (amber gradient): "Total pekan ini · Rp 110.000 · menjangkau 14 keluarga di 3 program"
- Breakdown list: 📚 Beasiswa santri Rp 25.000 · 🌅 Sedekah Subuh Rp 35.000 · 🤲 Bantuan dhuafa Rp 50.000
- Distribution note (dashed): "Foto penyaluran dari ranting dikirim akhir bulan"
- CTA: "Lihat semua riwayat"
- Privacy footer: "Tenang — ini privat, hanya kamu yang melihat"

SCREEN 2 — NOTIFIKASI INBOX:
- "Notifikasi"
- Filter tabs: Semua (active) · Ibadah · Sedekah · Iuran
- Notification cards:
  🕌 "Subuh sebentar lagi · 04:42 Yogyakarta · 2 menit"
  ❤️ "Sedekah Subuh tersimpan · Rp 5.000 LazisMu · 1 jam"
  🪪 "Iuran Mei jatuh tempo · 3 hari lagi · Rp 25.000"

PUSH NOTIFICATIONS (Android style, 4 variants):
1. Adzan Subuh: "MASA · Subuh sebentar lagi · 04:42 di Yogyakarta. Semoga hari ini terarah. · 04:30"
2. Sedekah reminder: "MASA · Subuh sudah datang · Anda bisa lanjutkan kebiasaan baik kapan pun siap. · 05:00"
3. Iuran: "MASA · Partisipasi Mei · 3 hari lagi. Rp 25.000 — untuk dakwah, kaderisasi, AUM. · 10:00"
4. Event: "MASA · Pengajian di ranting-mu, Caturtunggal · Sabtu, 25 Mei · 16:00. Pengurus: Ust. Iqbal. · 14:00"

Tone: Calm, factual, not guilt-trip. No emoji overload. Max 2 lines per notification.

Output: Digest + inbox + 4 push mocks · Follow-up: "Show the push notification in iOS style" or "Show the weekly digest with photo of distribution"

§6Cara pakai di Stitch

Step-by-step

Buka stitch.withgoogle.com
Pilih "Mobile" sebagai platform (MASA = mobile-first)
Klik "Copy" pada prompt yang diinginkan di halaman ini
Paste ke input Stitch → klik Generate
Stitch akan generate beberapa varian — pilih yang paling mendekati
Gunakan follow-up prompt di note untuk iterate/refine
Export sebagai image atau import ke Figma

Tips optimasi

Jika warna tidak tepat: follow-up "Use exactly these colors: primary #1B77A6, accent #F7B273, background #FBF8F2"
Jika font salah: follow-up "Use Inter font for all text, weight 400/500/600/700"
Jika terlalu ornamental: follow-up "Simpler, cleaner. No Islamic ornaments. Modern minimalist with warm paper background"
Jika terlalu generic: follow-up "This is a trusted Islamic app backed by Muhammadiyah (100+ year organization). Add subtle trust signals — not decorative"
Untuk dark mode: follow-up "Now show this in dark mode with #14110E background and #FBF8F2 text"
Untuk Android vs iOS: Stitch defaults to Material Design. For iOS: "Show this in iOS style with SF Pro font"

Urutan yang direkomendasikan

Prompt 01 — Design System (establish visual language first)
Prompt 05 — Homepage 3 variants (most important screens)
Prompt 06 — Onboarding (entry flow)
Prompt 07 — Ibadah cluster (daily use, highest frequency)
Prompt 08 — Transaksi cluster (revenue-critical)
Prompt 09 — Info cluster (Berita/Video — content)
Prompt 10 — Identity cluster (settings/profile)
Prompt 11 — States (polish, completeness)
Prompt 12 — Digest + Push (engagement touchpoints)
Prompt 02 — Sitemap (documentation)
Prompt 03-04 — Flows (documentation)

← IndexMASA by LabMu · Stitch Prompt Pack · 12 prompts · 7 Juni 2026