🚀 راهنمای ساخت پروژه واقعی SaaS
🛠️ مرحله اول — نصب ابزارها
این چهارتا رو نصب کن (اگه داری رد کن):
• 🟩 نودجیاس (Node.js) → nodejs.org/en/download
• 📦 نامپکیجمنیجر (npm) — خودکار با نصب Node.js نصب میشه
• 💻 ویژوال استودیو کُد (VS Code) → code.visualstudio.com/download
• 🐙 گیت (Git) → git-scm.com/install
🐙 مرحله دوم — ساخت ریپازیتوری گیتهاب
۱. برو به github.com و یه ریپازیتوری جدید بساز
۲. بعد توی ترمینال بزن:
🗄️ مرحله سوم — ساخت پروژه در Supabase
۱. برو به supabase.com و یه حساب رایگان بساز
۲. روی New project کلیک کن
۳. اسم و پسورد دیتابیس رو بذار
۴. کلیدهای SUPABASE_URL و SUPABASE_ANON_KEY رو نگهدار — بعداً لازمن
⚡ مرحله چهارم — نصب Taste Skill
توی ترمینال بزن:
این اسکیل به کلاد یاد میده طراحی سطحبالا بسازه — ریپوش بیش از ۳۰ هزار ستاره داره.
💬 مرحله پنجم — پرامپت اصلی برای Claude Code
داخل VS Code اکستنشن Claude رو باز کن، Plan Mode رو فعال کن، بعد این پرامپت رو بزن. اگه خواستی نسخه کاملتر رو ببینی، صفحهی SaaS Master Prompt Guide رو نگاه کن که توی همین پیج هست:
نکته مهم: کلاد کُد بعد از این پرامپت ازت سوال میپرسه — جواب بده، بعد کدنویسی شروع میشه.
🖼️ مرحله ششم — ساخت تصویر هیرو
بعد از اینکه کلاد سوالهاشو پرسید و پروژه رو ساخت، نوبت ساخت تصویر هیروئه. این دوتا پرامپت رو توی ابزارهای تولید تصویر هوش مصنوعی مثل ChatGPT Images، Gemini یا Midjourney استفاده کن:
نکته: قبل از استفاده، میتونی این پرامپتها رو به ChatGPT بدی و بگی بهشون بهتر کن — و حتی ازش بخوای یه نسخهی انیمیشنی هم برات بنویسه تا برای ساخت ویدیو استفاده کنی.
تصویر اول — محصول کامل:
تصویر دوم — نمای منفجره (Exploded View):
کلمهی CONTENT رو با توضیح محصول یا سرویس پروژهات جایگزین کن.
🎬 مرحله هفتم — ساخت ویدیوی هیرو
بعد از ساخت تصویر، نوبت ویدیوئه:
۱. پرامپت انیمیشنی که ChatGPT نوشت رو بردار
۲. توی Kling AI یا Veo3 (از Gemini) ویدیوی ۶ ثانیهات رو بساز
۳. ویدیو رو اکسپورت کن — فرمت MP4 با کیفیت بالا
بعد از دانلود ویدیو، داخل پروژهات این کار رو بکن:
یعنی یه فولدر به اسم video داخل فولدر public بساز و ویدیوت رو اون داخل بذار. کلاد کُد از همون اول پلیسهولدر رو با همین مسیر وصل کرده — فقط فایل رو کپی کن.
📤 مرحله هشتم — پوش به گیتهاب
👤 سازندهی این محتوا
این آموزش توسط ارتا بیدخوری (Arta Bidkhori) ساخته شده.
• 🌐 وبسایت: https://www.artabidkhori.com
• 📷 اینستاگرام: https://artabidkhori.com/instagram