وایب کدینگ سادهست: یه چیزی به AI میگی، میسازه. ولی وقتی میخوای یه چیز جدی بسازی — اپلیکیشنی که واقعاً مردم استفاده کنن — این کافی نیست. توی این پست میرم سراغ یه روششناسی کامل برای وایب کدینگ پیشرفته: از نوشتن PRD، طراحی با Stitch، اسکفولد با Antigravity، تا کدنویسی نهایی با Claude و یکپارچهسازی هوش مصنوعی با AI Pass. پروژهی نمونه: یه اپلیکیشن هوشمند بدنسازی.
چرا روششناسی مهمه؟
اگه وایب کدینگ مبتدی رو امتحان کردی، احتمالاً تجربهش رو داری: AI یه چیزی میسازه، خوب به نظر میاد، ولی وقتی میخوای فیچر دومو اضافه کنی همهچیز خراب میشه. کد ضدوضد شده. AI گیج میزنه. باگها روی هم تلنبار میشن.
دلیلش سادهست: AI خوب نمیسازه چون پلن بدی بهش دادی. اگه قبل از کد زدن یه پلن دقیق نداشته باشی، نتیجهت Frankenstein میشه.
روششناسی پیشرفته اینه:
- PRD — قبل از هر چیز، بنویس چی میخوای بسازی
- Design — قبل از کد، UI رو طراحی کن (با AI، نه فقط با Figma)
- Architecture — قبل از کد، معماری رو فکر کن
- Code — حالا بساز
مرحله ۱: PRD — قبل از کد، فکر
PRD = Product Requirements Document. سندی که توضیح میده محصول چی هست، برای کیه، چه فیچرهایی داره، چه فیچرهایی نداره.
برای اپ بدنسازی، PRD من شامل این بود:
- مخاطب: کسایی که میخوان حرکات بدنسازی رو درست انجام بدن
- فیچر اصلی: ویدئوی حرکات + توضیح متنی AI-generated
- فیچر فرعی: آپلود ویدئوی خودت → AI فرمت رو چک کنه
- بدون فیچر: فعلاً نه social، نه workout tracking — فقط آموزش
پیآرDی که به AI میدی، نقش system prompt پروژهت رو بازی میکنه. هر بار AI کد مینویسه، میتونه به این برگرده و بپرسه «این فیچر تو scope هست یا نه؟»
پیآرDی رو با Claude بنویس — یه ساعت وقت بذار، اول یه draft بده، بعد باهاش صحبت کن، تکرار کن. خروجی نهایی رو ذخیره کن — این document مهمترین فایل پروژهته.
مرحله ۲: Design با Stitch
Stitch (محصول Google) یه ابزار طراحی AI-محوره. میگی «یه اپ بدنسازی میخوام با این ویژگیها» — Stitch چندتا screen mockup میسازه که میتونی روشون iterate کنی.
چرا Stitch، نه Figma؟ بهخاطر اینکه سرعت تصمیمگیری. تو Figma باید خودت screen به screen بسازی. تو Stitch میگی «navigation در پایین، home screen ویدئوی روز رو نشون میده، صفحهی detail شامل توضیحات» — میسازه. میتونی ۱۰ ورژن مختلف رو در یه ساعت ببینی.
نکته: Stitch هنوز کامل نیست. خروجی همیشه ۱۰۰٪ نیست. ولی برای prototype کردن سریع و گرفتن feedback از تیم/کاربر اولیه، عالیه.
مرحله ۳: Architecture با Claude
قبل از یه خط کد، چندتا تصمیم معماری بگیر:
- Frontend چی؟ React با Vite (سریع، modern، خوب با AI کار میکنه)
- Backend چی؟ برای این پروژه: serverless functions روی Vercel
- Database چی؟ Supabase (Postgres با سادهترین setup)
- AI calls چطور؟ AI Pass — یه wallet برای همهی API calls، نمیخواد اکانت OpenAI/Claude/Gemini مدیریت کنی
- Auth چطور؟ AI Pass OAuth (یک کلیک)
این تصمیمها رو با Claude بحث کن — بپرس «برای این use case، Supabase بهتره یا Firebase؟»، «Vite vs Next.js؟». بحث کن، تصمیم بگیر، بنویس.
مرحله ۴: کد با Antigravity + Claude Code
حالا که PRD و design و architecture داری، شروع کن:
Antigravity برای اسکفولد اولیه
من Antigravity رو برای ساخت ساختار اولیه استفاده میکنم — folder structure، component skeletons، routing. Antigravity چون Gemini پشتشه، روی این کارای ساختاری سریع و خوب کار میکنه.
create a React + Vite + Tailwind app
add routing for: home, exercise detail, profile
add Supabase integration with TypeScript types
در چند دقیقه یه اسکفولد قابل اجرا داری.
Claude Code برای logic
برای کد واقعی — business logic، AI integration، edge cases — میرم سراغ Claude Code. کیفیتش روی منطق پیچیده بهتره.
implement the AI exercise form analyzer using AI Pass
input: video upload from user
output: structured feedback on form correctness
use AI Pass with the vision model
مرحله ۵: یکپارچهسازی AI با AI Pass
اینجاست که AI Pass درخششاش رو نشون میده. اگه میخواستی یه اپ بسازی که چندتا feature AI داره — text generation برای توضیحات حرکات، vision برای آنالیز فرم، TTS برای صوت — قبلاً باید جدا با OpenAI، Anthropic، Google API integration میگرفتی. تنظیم billing برای هر کدوم. مدیریت کلید برای هر کدوم.
با AI Pass:
- یه SDK =
AiPass.streamText(),AiPass.editImage(),AiPass.transcribeAudio() - یه wallet = هزینهی همهی اینها از یه جا کسر میشه
- OAuth یککلیکی = کاربرت نیاز به ساختن اکانت OpenAI نداره
- Revenue share برای developer = هر API call کاربرت، تو ۵۰٪ کمیسیون میگیری
این آخری مهمترین مزیتشه برای developerها: با AI Pass، اپ تو میتونه درآمد passive داشته باشه.
برای اپ بدنسازی، من این AI featureها رو اضافه کردم:
- توضیح متنی هر حرکت →
streamTextباgpt-5-mini - آنالیز فرم از ویدئو → vision model
- صوت تشریح حرکات →
tts-1
همه با یه SDK، یه auth flow.
درسهای واقعی این پروژه
درس ۱: کانتکست ویندوز رو مدیریت کن
برای پروژهی پیچیده، context window زود پر میشه. PRD رو همیشه در ابتدای هر چت پیست کن. ممکنه تکراری به نظر بیاد، ولی AI رو focused نگه میداره. وقتی context نزدیک پر شدنه (مثلاً ۸۰٪)، یه compaction کن: ازش بخواه که خلاصهی پیشرفت تا حالا رو بنویسه، بعد چت جدید بزن با اون خلاصه + PRD.
درس ۲: Antigravity برای UI، Claude برای logic
Antigravity (Gemini) خیلی خوبه برای ساختار، component، Tailwind. ولی روی منطق پیچیده Claude بهتره. هر دو رو داشته باش، بدون به کدومش وقتی نیاز داری.
درس ۳: Gemini مدلها برای کد عمومی خوب نیستن
برای کد business logic، Gemini رو اولویت آخر قرار بده. مدلهای Gemini واقعاً تلاش میکنن ولی تو کد زنی به پای Claude نمیرسن.
درس ۴: ابزار به اپ ربط داره، نه به برنامهنویس
برای back-end agent که function calling لازم داره، Gemini عالیه — function callingش قوی و قیمتش پایینه. اپهای صنعتی AI من از Gemini پشت میگیرن.
درس ۵: AI Pass = صرفهجویی واقعی در فرآیند توسعه
به جای ۳ ساعت setup برای OpenAI، Anthropic و Google API، یه ساعت AI Pass setup. به جای ۳ تا billing dashboard، یکی. به جای ۳ تا rate limit، یکی. این صرفهجویی روی هر اپ AI رو بهسرعت توجیه میکنه.
جمعبندی — روند کلی
1. PRD (با Claude) → مستند چی میخوای بسازی
2. Design (با Stitch) → mockupهای screen
3. Architecture (با Claude) → stack technology + معماری
4. Scaffold (با Antigravity) → ساختار اولیهی پروژه
5. Logic (با Claude Code) → کد business logic
6. AI integration (با AI Pass) → feature های AI
7. Test → Refine → Ship
ابزارهای استفادهشده
- Claude Code (claude.com/claude-code) — کد + PRD writing
- Google Stitch (stitch.withgoogle.com) — UI design
- Google Antigravity (antigravity.google) — UI scaffold
- Vite (vite.dev) — frontend build tool
- AI Pass (aipass.one) — یکپارچهسازی AI، billing، auth
بعدی چیه؟
تو پستهای بعدی این سری:
- ساخت AI features عمیقتر با AI Pass (vision، voice، embeddings)
- نشر و monitoring اپلیکیشن AI
- وایب کدینگ تیمی — چطور یه تیم چند نفره میتونه با AI کد بزنه
اگه میخوای یه پروژهی مشابه ببینی، تو کامنت بگو چه نوع اپی برات ساخته بشه.
دیدگاهتان را بنویسید