Bagaimana Saya Membina MVP SaaS dalam 24 Jam Menggunakan AI (Panduan Langkah demi Langkah)

Ringkasan

Anda boleh pergi dari sifar ke MVP SaaS yang digunakan, dengan pengesahan, pangkalan data, pengebilan Stripe, dan halaman pendaratan dalam 24 jam. Bukan mainan — produk sebenar. Inilah pecahan jam demi jam dan setiap alat yang digunakan.

Jumlah kos: ~$60 (kebanyakannya domain + bulan pertama perkhidmatan) Stack: Next.js + Supabase + Stripe + Cloudflare, dibina dengan Claude Code dan Cursor, digunakan dengan Y Build.

---

Mengapa Ini Mungkin Sekarang

Dua tahun lalu, membina MVP dalam 24 jam bermakna mengambil jalan pintas di mana-mana — tiada pengesahan, tiada pembayaran, tiada backend sebenar. Anda melancarkan halaman statik dan memanggilnya MVP.

Pada 2026, alat pengekodan AI telah mengubah pengiraan. Claude Code menulis logik backend berkualiti penerbitan. Cursor mengendalikan iterasi frontend pada kelajuan perbualan. Y Build menggunakan infrastruktur edge tanpa DevOps. Bottleneck bukan lagi pengekodan — ia memutuskan apa yang hendak dibina.

Panduan ini mendokumentasikan proses tepat, jam demi jam.

---

Jam 1-2: Pengesahan Idea (Jangan Langkau Ini)

Kesilapan terbesar dalam pembinaan 24 jam ialah terus mula mengekod. Dua jam pengesahan menyelamatkan anda daripada membina sesuatu yang tiada siapa mahu.

Apa yang saya lakukan

1. Pengenalpastian masalah — Melayari Reddit, Indie Hackers, dan X untuk aduan tentang alat sedia ada. Menemui titik kesakitan berulang: pekerja bebas bergelut menjejak masa merentasi pelbagai klien tanpa bertukar antara 5 aplikasi berbeza.

1. Analisis persaingan pantas — Mencari penyelesaian sedia ada. Menemui Toggl, Harvest, Clockify. Semua memberi tumpuan kepada pasukan. Tiada yang mempunyai mod "pekerja bebas dulu" yang mudah dengan invois automatik.

1. Ujian halaman pendaratan — Menggunakan Claude Code untuk menjana halaman pendaratan satu muka dalam 15 minit. Menambah butang "Sertai senarai menunggu" dengan borang tangkapan e-mel mudah. Memuat naik ke 3 subreddit berkaitan dan 2 komuniti Slack.

1. Isyarat pengesahan — Dalam 2 jam, mendapat 23 pendaftaran e-mel dan 4 DM bertanya "bila ini lancar?" Isyarat yang mencukupi.

Alat yang digunakan

• Claude Code (penjanaan halaman pendaratan)
• Supabase (tangkapan e-mel — hanya satu jadual)
• Reddit, Indie Hackers (pengedaran)

Kos: $0

---

Jam 3-6: Bina Produk Teras

Di sinilah alat pengekodan AI membuktikan nilainya. Empat jam untuk membina aplikasi SaaS yang berfungsi.

Jam 3: Persediaan projek dan model data

Membuka Claude Code dan menerangkan produk:

"Build a Next.js 15 app with Supabase auth and database. The app is a freelancer time tracker. Data model: users, clients, projects, time_entries, invoices. Time entries have start/stop timestamps and belong to a project. Projects belong to a client. Invoices aggregate time entries by client for a date range."

Claude Code menjana model data lengkap, migrasi Supabase, dan persediaan pengesahan dalam satu pas. Saya menyemak skema, membuat dua pelarasan kecil (menambah medan hourly_rate pada projek, menambah enum status pada invois), dan menjalankan migrasi.

Masa: 40 minit

Jam 4-5: Ciri-ciri teras

Beralih ke Cursor untuk iterasi frontend. Membina tiga skrin:

1. Skrin pemasa — Mula/henti pemasa, pilih klien dan projek, lihat jumlah hari ini. Menggunakan penyuntingan sebaris Cursor untuk iterasi UI dengan pantas. Bermula dengan susun atur asas, kemudian memperhalus jarak, warna, dan interaksi mikro melalui perbualan.

1. Papan pemuka — Ringkasan mingguan, pecahan setiap klien, carta menunjukkan jam mengikut hari. Claude Code menjana pertanyaan pengagregatan data. Cursor mengendalikan komponen carta.

1. Penjana invois — Pilih klien, julat tarikh, jana invois PDF. Menggunakan Claude Code untuk logik penjanaan PDF (html-to-pdf melalui rendering gaya Puppeteer pada pelayan).

Masa: 2 jam

Jam 5-6: Penggilapan dan kes tepi

• Menambah pengendalian ralat dan keadaan pemuatan
• Susun atur responsif mudah alih (Cursor menjadikan ini pantas — hanya menerangkan apa yang perlu berubah pada setiap titik putus)
• Keadaan kosong untuk pengguna baru
• Aliran penerimaan: pengguna kali pertama diminta menambah klien pertama mereka

Masa: 1 jam

Alat yang digunakan

• Claude Code (logik backend, model data, laluan API, penjanaan PDF)
• Cursor (iterasi UI frontend, reka bentuk responsif)
• Next.js 15, Supabase, Tailwind CSS

Kos: $0 (tahap percuma)

---

Jam 7-8: Guna dengan Y Build

Ini dahulunya bahagian yang menyakitkan. Menyediakan CI/CD, mengkonfigurasi pemboleh ubah persekitaran, DNS, SSL, CDN — mudah satu hari penuh kerja DevOps.

Apa yang saya lakukan

1. Menyambung repo — Menghubungkan repo GitHub ke Y Build. Mengesan automatik Next.js, mencadangkan penggunaan Cloudflare Workers.

1. Pemboleh ubah persekitaran — Y Build menarik pemboleh ubah env yang diperlukan daripada .env.local saya dan meminta saya mengesahkan setiap satu untuk penerbitan. Menambah URL Supabase, kunci anon, dan kunci peranan perkhidmatan.

1. Domain tersuai — Membeli domain ($12), menghala DNS ke pelayan nama Y Build. SSL diperuntukkan secara automatik.

1. Guna — Satu klik. Y Build membina projek, mengoptimumkan aset, menggunakan ke rangkaian edge Cloudflare merentasi 300+ lokasi. Jumlah masa penggunaan: 90 saat.

1. Persediaan AI SEO — Y Build menjana tag meta, imej Open Graph, dan peta laman secara automatik berdasarkan halaman aplikasi. Menambah data berstruktur untuk halaman pendaratan.

Masa: 45 minit (termasuk 20 minit menunggu penyebaran DNS)

Alat yang digunakan

• Y Build (penggunaan, DNS, SSL, SEO)
• Cloudflare (pengehosan edge melalui Y Build)

Kos: $12 (domain)

---

Jam 9-12: Tambah Pembayaran dan Persediaan Pelancaran

Jam 9-10: Integrasi Stripe

Menggunakan Claude Code untuk menambah Stripe:

• Halaman harga — Dua tahap: Percuma (3 klien, pemasa asas) dan Pro ($12/bln — klien tanpa had, invois, laporan)
• Aliran pembayaran — Penciptaan sesi Stripe Checkout, pengendalian webhook untuk acara langganan
• Portal pengebilan — Layan diri pelanggan untuk perubahan pelan dan pembatalan
• Pengekangan ciri — Middleware untuk menyemak status langganan dan mengehadkan ciri untuk pengguna percuma

Claude Code mengendalikan keseluruhan integrasi Stripe — pengesahan tandatangan webhook, pengurusan kitaran hayat langganan, persediaan portal pelanggan. Saya menyemak pengendali webhook dengan teliti (di sinilah pepijat wang tinggal) dan membuat satu pembetulan untuk mengendalikan acara customer.subscription.updated dengan betul. Masa: 1.5 jam

Jam 10-11: Naik taraf halaman pendaratan

Menggantikan halaman pendaratan pengesahan dengan yang sebenar:

• Seksyen hero dengan tangkapan skrin produk (mengambil tangkapan skrin aplikasi yang sedang berjalan)
• Grid ciri dengan ikon
• Jadual harga
• Seksyen Soalan Lazim
• Bukti sosial (menggunakan 23 pendaftaran senarai menunggu sebagai "23 pekerja bebas sudah menunggu")

Menggunakan Cursor untuk iterasi pantas pada salinan dan susun atur. Claude Code menjana kandungan Soalan Lazim berdasarkan ciri produk. Masa: 1 jam

Jam 11-12: Video demo produk

Menggunakan Y Build Demo Cut untuk menjana video demo produk:

1. Menghala Demo Cut ke URL aplikasi yang telah digunakan
2. AI menelusuri aplikasi — pemasa, papan pemuka, penjana invois
3. Menjana demo 60 saat dengan alih suara, peralihan, dan muzik latar
4. Mengeksport untuk galeri Product Hunt dan hero halaman pendaratan

Masa: 10 minit

Baki masa: menulis salinan penyenaraian Product Hunt, menyediakan siaran media sosial, menyediakan analitik melalui papan pemuka terbina dalam Y Build.

Alat yang digunakan

• Claude Code (integrasi Stripe)
• Cursor (halaman pendaratan)
• Y Build Demo Cut (video demo produk)
• Stripe

Kos: $0 (Stripe mengenakan caj pada transaksi, tiada kos pendahuluan)

---

Jam 13-18: Pelancaran

Penyerahan Product Hunt

• Memuat naik video demo, tangkapan skrin, dan salinan penyenaraian
• Menjadualkan pelancaran pada 12:01 PG PT (masa optimum)
• Menyediakan "komen pembuat" menerangkan kisah pembinaan 24 jam

Serangan media sosial

• Memuat naik kisah pembinaan di X dengan tangkapan skrin setiap peringkat
• Berkongsi dalam 5 komuniti Slack berkaitan (kumpulan pekerja bebas, kumpulan indie hacker)
• Memuat naik ke r/SaaS, r/Freelance, dan r/SideProject
• Menghantar e-mel kepada 23 pendaftaran senarai menunggu: "Ia sudah hidup. Anda yang pertama tahu."

Keputusan menjelang jam 18

• 47 undian naik Product Hunt
• 120 pelawat unik
• 8 pendaftaran (tahap percuma)
• 2 penukaran Pro ($24 MRR)

---

Jam 19-24: Iterasi Berdasarkan Maklum Balas

Pengguna pertama menimbulkan tiga isu:

1. Pemasa tidak kekal merentasi muat semula halaman — Claude Code membetulkan ini dalam 10 minit (menyimpan keadaan pemasa dalam localStorage + disegerakkan dengan pelayan)
2. Pemformatan PDF invois rosak pada nama projek panjang — pembetulan CSS 5 minit
3. Pengguna mahukan "tambah pantas" untuk entri masa tanpa menggunakan pemasa — Claude Code membina borang entri manual dalam 20 minit

Menggunakan pembetulan melalui Y Build — setiap penggunaan mengambil kurang dari 2 minit.

Menjelang jam 24:

• 12 jumlah pendaftaran


• 3 penukaran Pro ($36 MRR)


• Produk teras stabil dan boleh digunakan

---

Pecahan Kos Lengkap

---

Apa yang Akan Saya Lakukan Berbeza

1. Meluangkan 30 minit lagi pada model data — Saya perlu menambah dua medan kemudian yang jelas dengan lebih banyak pemikiran awal. AI pantas menjana kod, tetapi ia tidak boleh mengesahkan logik perniagaan anda.

1. Menyediakan analitik lebih awal — Saya tidak menambah penjejakan acara sehingga jam 15. Terlepas data tentang tingkah laku pengguna awal.

1. Menulis penyenaraian Product Hunt terlebih dahulu — Saya tergesa-gesa menulis salinan pada jam 11. Sepatutnya draf semasa fasa pengesahan.

1. Menguji webhook Stripe dengan lebih teliti — Sempat terkejut seketika pada jam 16 apabila webhook kemas kini langganan gagal secara senyap. Sentiasa uji kitaran hayat langganan penuh sebelum pelancaran.

---

Stack AI SaaS 2026

Jika anda membina MVP SaaS hari ini, inilah stack yang saya cadangkan:

---

Soalan Lazim

Perlukah saya menjadi pembangun untuk melakukan ini? Anda memerlukan literasi teknikal asas — memahami apa itu pangkalan data, apa yang API lakukan, bagaimana aplikasi web berfungsi. Tetapi anda tidak perlu menulis kod dari awal. Claude Code dan Cursor mengendalikan pelaksanaan. Anda adalah pengurus produk. Bagaimana jika idea saya tidak disahkan dalam 2 jam? Tinggalkan. Tujuan kekangan 24 jam adalah bergerak pantas. Jika 2 jam pengesahan tidak menunjukkan minat, pilih idea lain. Anda sentiasa boleh kembali. Adakah MVP 24 jam benar-benar boleh digunakan? Ya, jika anda menetapkan skop dengan ketat. Rahsianya ialah menyelesaikan satu masalah dengan baik, bukan membina produk yang lengkap ciri. Penjejak masa saya melakukan tiga perkara: menjejak masa, menunjukkan papan pemuka, menjana invois. Itu sahaja. Bagaimana mengendalikan penskalaan jika ia popular? Supabase dan Cloudflare (melalui Y Build) mengendalikan trafik yang besar secara lalai. Anda tidak akan menghadapi isu penskalaan sehingga beribu pengguna aktif harian. Pada ketika itu, anda akan mempunyai pendapatan untuk melabur dalam infrastruktur. Bagaimana dengan mudah alih? Web responsif dahulu. Aplikasi mudah alih khusus adalah masalah Minggu 2 — selepas anda mengesahkan bahawa orang benar-benar menggunakan produk.

---

Bersedia untuk pergi dari kod ke produk yang digunakan dalam beberapa minit? Y Build mengendalikan penggunaan, AI SEO, analitik, dan video demo — supaya anda boleh fokus pada pembinaan. Mula percuma.