Bina aplikasi web dari nota suara dengan Claude Code & Vercel | Alpha | PandaiTech

Bina aplikasi web dari nota suara dengan Claude Code & Vercel

Workflow lengkap untuk menukar idea kasar kepada aplikasi web yang berfungsi. Ketahui cara memindahkan context dari Claude (web) ke Claude Code (terminal) menggunakan fail 'claude.md' untuk membina dan deploy projek ke Vercel dengan pantas.

Learning Timeline
Key Insights

Kelebihan Input Suara (Verbal)

Prompt yang sangat terperinci dan mendalam lebih mudah dihasilkan secara lisan berbanding menaip. Gunakan mod suara untuk 'bermain' dengan idea sebelum menukarnya kepada kod.

Tips Perpindahan Konteks

Fail 'claude.md' bertindak sebagai 'memori' projek. Ia sangat kritikal apabila anda beralih dari fasa perancangan di Claude Web ke fasa pembinaan di terminal menggunakan Claude Code bagi mengelakkan kehilangan maklumat penting.
Prompts

Memulakan Konteks Projek

Target: Claude (Web)
I'm going to be a guest on [Nama Podcast/Event] today. You're going to be assisting me with putting together strong content angle, strong ideas, and strong strategy for delivering the most value to his audience. This is currently the most popular episode I've done: [Link/Detail].

Mengekstrak Arahan untuk Claude Code

Target: Claude (Web)
This was great. Now, I want you to give me a pasteable set of instructions that I can put into your instructions for this [Project Name] as we continue along with this episode. Create a claude.md file for this.
Step by Step

Workflow Membina Aplikasi Web dari Nota Suara

  1. Lakukan 'brain dump' idea anda secara lisan selama 10-15 minit menggunakan tool Whisper Flow untuk mendapatkan transkrip yang tepat.
  2. Masukkan transkrip suara tersebut ke dalam Claude (Web Interface).
  3. Arahkan Claude untuk menukar transkrip yang berterabur kepada dokumen yang 'scannable' dan tersusun (contohnya dalam format HTML atau Markdown).
  4. Berikan konteks tambahan kepada Claude tentang sasaran audiens atau objektif spesifik projek melalui chat.
  5. Minta Claude untuk menghasilkan satu set arahan 'pasteable' (copy-paste) yang merumuskan semua strategi dan konteks yang telah dibincangkan.
  6. Arahkan Claude untuk menjana 'blueprint' atau kod asas aplikasi (contoh: fail HTML/JS) berdasarkan perbualan tersebut.
  7. Minta Claude untuk mencipta satu fail khas bernama 'claude.md' yang mengandungi semua konteks, spesifikasi, dan arahan teknikal projek.
  8. Muat turun fail HTML dan fail 'claude.md' tersebut ke dalam satu folder projek baharu di komputer anda.
  9. Buka Terminal atau Command Prompt di dalam folder projek tersebut.
  10. Lancarkan Claude Code (CLI) di dalam terminal.
  11. Berikan arahan kepada Claude Code: 'Take a look at the claude.md file to give yourself context' supaya AI memahami keseluruhan projek tanpa perlu diterangkan semula.
  12. Arahkan Claude Code untuk menyiapkan baki kod aplikasi dan melakukan 'deployment' ke GitHub.
  13. Minta Claude Code untuk menghubungkan projek ke Vercel bagi tujuan hosting supaya aplikasi boleh diakses secara live.

More from Coding & Pembangunan Aplikasi AI

View All