پرش به محتوا
آموزش

وایب کدینگ (Vibe Coding) چیست؛ ساخت اولین ابزار کوچک با هوش مصنوعی، قدم‌به‌قدم

وایب کدینگ یعنی ساختن ابزار با توصیف به زبان ساده و سنجیدنش با استفاده. یک ابزار واقعی تقسیم خرج را از توصیف تا آزمایش می‌سازیم و چرخه‌ای را می‌گوییم که خرابش نکند.

تیم گیسو ۱۳ دقیقه مطالعه
وایب کدینگ (Vibe Coding) چیست؛ ساخت اولین ابزار کوچک با هوش مصنوعی، قدم‌به‌قدم

بعد از هر سفر دوستانه، یک نفر یک شب کامل پای جدول می‌نشیند تا معلوم شود چه کسی به چه کسی چقدر بدهکار است. حالا یکی از همان دوستان که هیچ‌وقت کد ننوشته، ابزاری را که می‌خواهد در چند سطر فارسی برای یک مدل هوش مصنوعی توصیف می‌کند و کمتر از یک دقیقه بعد صفحه‌ای می‌گیرد که حساب را درست انجام می‌دهد. اسم این کار وایب کدینگ (Vibe Coding) است.

وایب کدینگ یعنی نرم‌افزار را با توصیف خواسته‌تان به زبان ساده بسازید و نتیجه را با استفاده کردن از آن بسنجید، نه با خواندن خط‌به‌خط کد. شما برنامه را توصیف می‌کنید، مثل یک کاربر معمولی اجرایش می‌کنید و هر ایرادی دیدید، به زبان ساده می‌گویید تا اصلاح شود. این اصطلاح در سال ۲۰۲۵ با آندری کارپاتی (Andrej Karpathy)، پژوهشگر سرشناس هوش مصنوعی، سر زبان‌ها افتاد. در این راهنما یک ابزار واقعی را از توصیف تا آزمایش می‌سازیم، کدش را با کمک خود مدل می‌سنجیم و چرخه‌ای را می‌گوییم که ابزار را بعد از چند تغییر خراب نکند.

ساخت ابزار با هوش مصنوعی کجا کاربرد دارد؟

برنامه‌نویسی با هوش مصنوعی بدون دانش برنامه‌نویسی برای همه‌چیز نیست. جدول زیر مرزش را نشان می‌دهد:

کجا خوب جواب می‌دهدکجا نباید استفاده کنید
ابزارهای شخصی و روزمره برای خودتانسیستم‌های مالی، درگاه پرداخت و کیف پول
ماشین‌حساب‌های اختصاصی و تبدیل‌گرهاصفحه‌هایی با ورود، ثبت‌نام و مدیریت کاربر
فرم‌ها یا گزارش‌های یک‌صفحه‌ایسرویس‌هایی که با داده‌های حساس مشتریان کار می‌کنند
نمونه‌های اولیه برای نمایش یک ایدهمحصولاتی که هزاران نفر در روز به آن وابسته‌اند
خودکارسازی یک کار کوچک و تکراریکدهایی که باید سال‌ها نگهداری و به‌روزرسانی شوند
ابزارهایی که اطلاعات را در مرورگر شما نگه می‌دارندهر چیزی که پایگاه داده و امنیت جدی لازم دارد

ابزار تک‌نفره‌ای که روی دستگاه خودتان کار می‌کند، جای وایب کدینگ است. پول و دادهٔ دیگران، جای برنامه‌نویس.

توصیف دقیق نیازها برای وایب کدینگ

ابزاری که می‌گیرید به اندازهٔ توصیفتان دقیق است. اگر فقط بنویسید «یک برنامه برای تقسیم خرج سفر بسازید»، مدل همهٔ جزئیات را خودش حدس می‌زند و نتیجه ممکن است به کارتان نیاید. برای یک خروجی تمیز، این شش چیز را در متن درخواست (پرامپت) روشن کنید:

  1. کاربر و دستگاه: بگویید چه کسی با ابزار کار می‌کند و قرار است روی نمایشگر بزرگ کامپیوتر باز شود یا روی صفحهٔ کوچک گوشی.
  2. ورودی و خروجی: دقیق بگویید کاربر چه چیزهایی وارد می‌کند و آخر کار چه چیزی باید روی صفحه ببیند.
  3. محدودیت ساختاری: بنویسید ابزار فقط در یک فایل ساخته شود و از هیچ کتابخانه یا فایل بیرونی استفاده نکند. این‌طور فایل را با یک دوبار کلیک باز می‌کنید و چیزی برای نصب نمی‌ماند.
  4. جای نگهداری داده‌ها: بخواهید داده‌ها در حافظهٔ خود مرورگر بماند تا با بستن صفحه پاک نشود.
  5. زبان و چینش: فارسی و راست‌به‌چپ بودن صفحه را روشن بنویسید؛ مدل‌ها بی این قید معمولاً صفحه را انگلیسی می‌سازند.
  6. نحوهٔ اجرا: بخواهید آخر پاسخ بنویسد فایلی را که ساخته چطور باز کنید و ببینید.

ما با همین شش بخش از gemini-3.8-flash یک ابزار تقسیم خرج خواستیم:

یک صفحهٔ وب تک‌فایلی (فقط یک فایل HTML که CSS و JavaScript هم داخل همان فایل باشد) برای تقسیم خرج یک سفر دوستانه بسازید.
- زبان صفحه فارسی و راست‌به‌چپ باشد و روی گوشی هم درست دیده شود.
- بتوانم نام چند نفر را اضافه کنم و برای هر خرج بنویسم چه کسی پرداخت کرده، چقدر و برای چه.
- پایین صفحه نشان دهد هر نفر در کل چقدر داده، سهمش چقدر است و چه کسی باید به چه کسی چقدر بدهد تا حساب صاف شود.
- عددها با جداکنندهٔ هزارگان نمایش داده شوند. در هیچ جای صفحه، حتی در متن راهنمای خانه‌های فرم، نام واحد پول ننویسید.
- داده‌ها در خود مرورگر (localStorage) بمانند تا با بستن صفحه پاک نشوند.
- از هیچ کتابخانه یا فایل بیرونی استفاده نکنید.
کد را کامل در یک بلوک بدهید و بعد از آن در سه سطر بگویید فایل را چطور باز کنم.

[یک فایل HTML کامل در ۶۱۹ سطر؛ متن کامل پاسخ، بدون هیچ تغییری: دانلود پاسخ کامل (متن)]

یک فایل جدید با نام دلخواه و پسوند html. (مثلاً index.html) بسازید و تمام کد بالا را داخل آن قرار داده و ذخیره کنید.
روی فایل ذخیره‌شده دوبار کلیک کنید تا در مرورگر کامپیوتر باز شود.
برای استفاده روی گوشی، فایل را به گوشی منتقل کنید و با لمس کردن، آن را با مرورگر گوشی (مانند Chrome یا Safari) باز کنید.

صفحهٔ ساخته‌شده در عرض گوشی: سه همسفر، سه هزینه، جدول وضعیت حساب و دستور تسویه
همان فایل، بدون تغییر، در Chrome با عرض گوشی؛ سه نفر و سه هزینه را خودمان وارد کردیم

مدل یک فایل ۶۱۹ سطری داد که ظاهر و منطق صفحه هر دو داخل همان فایل بود، و بعد از کد، سه سطر راهنما برای ذخیرهٔ فایل با نام index.html و باز کردنش در مرورگر نوشت. فایل را ذخیره کردیم و در Chrome با اندازهٔ صفحهٔ گوشی امتحانش کردیم. سه نفر (سارا، علی و مینا) و سه خرج مختلف وارد کردیم. صفحه همان بار اول کار کرد و جمع، سهم هر نفر، طلب و بدهی درست حساب شد. جملهٔ آخر هم درست می‌گفت مینا باید چه مبلغی به علی و چه مبلغی به سارا بدهد. صفحه را که دوباره بار کردیم، داده‌ها سر جایشان بودند. فقط یک ایراد کوچک ظاهری داشت: در جدول راست‌به‌چپ، علامت مثبت و منفی سمت اشتباه عددها نشسته بود. با یک توصیف دقیق، اسکلت ابزار در یک پیام ساخته می‌شود.

کد را پیش از اعتماد بسنجید

صفحه‌ای که ظاهر خوبی دارد هنوز امتحانش را پس نداده است. شما کد را نمی‌خوانید، پس از خود مدل بخواهید کدش را به زبان ساده توضیح دهد و بگوید کجا ممکن است خراب شود. این فهرست، نقشهٔ آزمایش شماست.

کد زیر را برای کسی بررسی کنید که برنامه‌نویسی بلد نیست. به زبان ساده و بدون اصطلاح فنی بگویید:
۱. این صفحه چه کار می‌کند، در سه جمله.
۲. کجاها ممکن است اشتباه حساب کند یا درست کار نکند (مثلاً عدد اعشاری، نام تکراری، حذف یک نفر بعد از ثبت هزینه).
۳. آیا اطلاعاتی از این صفحه به جایی فرستاده می‌شود؟
۴. دو تغییر کوچک که ارزش دارد بخواهم.
روی هم حداکثر ۱۲ مورد، هر کدام یک یا دو جمله. در پاسخ نام هیچ واحد پولی را نیاورید.
[کد کامل ۶۱۹ سطری نمونهٔ قبل، بدون تغییر، زیر همین سطرها آمده بود]

۱. این صفحه چه کار می‌کند؟
۱. این صفحه برای ثبت نام همسفران و یادداشت هزینه‌هایی است که افراد مختلف در یک برنامه یا سفر انجام می‌دهند.
۲. برنامه مجموع کل خرج‌ها را حساب کرده و سهم هر فرد را به‌طور مساوی محاسبه می‌کند تا طلبکارها و بدهکارها مشخص شوند.
۳. در پایان به زبان ساده مشخص می‌کند چه کسی باید به چه کسی پرداخت کند تا حساب همه با کمترین انتقال تسویه شود.

۲. کجاها ممکن است اشتباه کند یا درست کار نکند؟
۴. نام تکراری: اگر دو نفر نام یکسان داشته باشند، برنامه در جدول نهایی نمی‌تواند آن‌ها را تفکیک کند و معلوم نمی‌شود بدهی متعلق به کدام‌یک است.
۵. حذف همسفر: با حذف یک نفر، خریدهای خودش پاک می‌شود، اما سهمی که از خریدهای دیگران برده پاک نمی‌شود و سهم باقی‌مانده‌ها ناعادلانه تغییر می‌کند.
۶. عدد اعشاری: کادر ثبت هزینه طوری تنظیم شده که معمولاً فقط عددهای رند را قبول می‌کند و اجازه وارد کردن مبالغ اعشاری را نمی‌دهد.
۷. گرد کردن اعداد: محاسبات در بخش نمایش گرد می‌شوند و در تقسیم‌های اعشاری ممکن است جمع بدهی‌ها با جمع طلب‌ها یکی دو واحد اختلاف نشان دهد.

۳. اطلاعات به جایی فرستاده می‌شود؟
۸. خیر؛ تمام اطلاعات تنها روی حافظه داخلی مرورگر دستگاه خودتان ذخیره می‌شود و به هیچ سرور یا شخصی فرستاده نخواهد شد.

۴. دو تغییر کوچک و مفید
۹. اضافه کردن هشدار و تاییدیه قبل از حذف یک هزینه یا همسفر، تا با برخورد تصادفی دست اطلاعات پاک نشود.
۱۰. جلوگیری از ثبت نام‌های تکراری و اجازه دادن به تایپ مبالغ اعشاری در فرم ثبت هزینه.

ادعاهای مدل را یکی‌یکی در مرورگر امتحان کردیم. کار صفحه را درست توضیح داد و این را هم درست گفت که هیچ اطلاعاتی به اینترنت فرستاده نمی‌شود (در کد هیچ اتصالی به سرور نبود). هشدارش دربارهٔ نام تکراری درست بود: صفحه دو نفر با یک نام را می‌پذیرفت. هشدار عدد اعشاری هم درست بود و کادر مبلغ، عدد اعشاری قبول نمی‌کرد. ولی توضیحش دربارهٔ حذف یک نفر نیمه‌درست و درهم بود. وقتی «مینا» را پاک کردیم، خرج‌هایی که او ثبت کرده بود بی هیچ هشداری پاک شد؛ اما برخلاف حرف مدل، سهم او هم از حساب کنار رفت و خرج‌های باقی‌مانده بین دو نفر دیگر تقسیم شد. این را هم دیدیم که فقط برای پاک کردن کل اطلاعات تأیید می‌گیرد و حذف یک خرج یا یک نفر بی‌درنگ و بی هشدار انجام می‌شود. درس این بخش: بررسی خود مدل می‌گوید کجا را نگاه کنید، ولی امتحان کردن تک‌تک کارها با شماست.

چرخهٔ درست کار در برنامه‌نویسی با هوش مصنوعی

کدنویسی با چت رفت‌وبرگشت است و اگر بی‌حساب پیش برود، ابزار بعد از چند تغییر خراب می‌شود. این پنج قدم سالم نگهش می‌دارد:

  1. هر بار فقط یک تغییر بخواهید. بزرگ‌ترین اشتباه این است که در یک پیام پنج تغییر ظاهری و منطقی با هم بخواهید. مدل وقتی فهرست بلندی از تغییر جلویش باشد، معمولاً تکه‌هایی از کد قبلی را جا می‌اندازد یا منطقی را که کار می‌کرد به هم می‌ریزد. قدم‌به‌قدم پیش بروید.
  2. آنچه می‌بینید را بگویید، نه حدستان را. اگر دکمه‌ای کار نمی‌کند، لازم نیست بگویید مشکل از کدام خط کد است. رفتار صفحه را همان‌طور که می‌بینید بنویسید؛ مثلاً «وقتی مینا را حذف می‌کنم، خرجش هم پاک می‌شود؛ می‌خواهم اول بپرسد». مدل با همین توصیف ساده مشکل را بهتر از هر حدسی پیدا می‌کند.
  3. همیشه کد کامل را بگیرید. هر بار بخواهید کد کامل و به‌روزشده را در یک بلوک تازه بدهد. چسباندن چند سطر تازه لای کد قبلی، برای کسی که برنامه‌نویسی نمی‌داند، زود فایل را خراب می‌کند.
  4. نسخه‌ها را جدا ذخیره کنید. روی فایل قبلی ذخیره نکنید؛ نام فایل‌ها را مثلاً ابزار-نسخه۱ و ابزار-نسخه۲ بگذارید. اگر جایی صفحه از کار افتاد، راحت به نسخهٔ قبلی برمی‌گردید و درخواست را با جمله‌بندی دیگری تکرار می‌کنید.
  5. وقتی گفت‌وگو طولانی شد، گفت‌وگوی تازه باز کنید. هر پیام، پیام‌های قبلی همان گفت‌وگو را هم با خود می‌برد (در گیسو تا ۶۰ پیام آخر) و با چند نسخهٔ کد، مدل ممکن است نسخهٔ قدیمی و تازه را قاطی کند. آخرین کد سالم را کپی کنید، یک گفت‌وگوی تازه در گیسو باز کنید، کد را به مدل بدهید و تغییر بعدی را آن‌جا بخواهید.

از چت ساده به پروژه‌های واقعی

تا وقتی ابزارتان یک فایل است، کپی کردن کد از چت و چسباندنش در فایل کار ساده‌ای است. ولی ابزار بزرگ‌تری که از چند فایل و پوشه ساخته می‌شود، با کپی دستی جلو نمی‌رود و ابزار دیگری لازم دارد.

دستیارهای کدنویسی داخل ویرایشگر کد، فایل‌ها را مستقیم روی کامپیوتر شما می‌سازند و ویرایش می‌کنند. Claude Code، Cline و Cursor با کلید وب‌سرویس گیسو کار می‌کنند و هزینه‌شان از همان اعتبار کم می‌شود. راه‌اندازی قدم‌به‌قدم را در مقالهٔ Claude Code در VS Code و در مستندات اتصال ابزارهای برنامه‌نویسی به گیسو نوشته‌ایم. اگر هم فقط یک صفحهٔ معرفی برای کسب‌وکارتان می‌خواهید، راهش فرق دارد و در راهنمای طراحی سایت با هوش مصنوعی آمده است. و اگر می‌خواهید ساختن چنین ابزارهایی را به مشتری بفروشید، کسب درآمد از برنامه‌نویسی با هوش مصنوعی را بخوانید؛ کار برای مشتری بررسی کد و پشتیبانی می‌خواهد که ابزار شخصی نمی‌خواهد.

اصول ایمنی در کدنویسی با چت

رمز عبور، اطلاعات بانکی یا کلید دسترسی (API Key) خودتان را هرگز داخل کدی که از مدل می‌گیرید نگذارید. ابزاری که داده‌ها را فقط در مرورگر خودتان نگه می‌دارد، خطر کمی دارد. ولی اگر می‌خواهید ابزاری را روی اینترنت منتشر کنید که اطلاعات دیگران را می‌گیرد و نگه می‌دارد، حتماً یک برنامه‌نویس باید کدش را بازبینی کند. اگر هم از مدل می‌خواهید تکه‌کدهای آماده را برایتان کنار هم بگذارد، به مجوز استفادهٔ (License) آن کدها دقت کنید.

انتخاب مدل مناسب در گیسو برای نوشتن کد

در حالت سادهٔ اپ گیسو، از فهرست «پیشنهاد ما» گزینهٔ «کدنویسی» را بردارید؛ در حالت حرفه‌ای هر مدلی را می‌توانید انتخاب کنید. هر دو نمونهٔ این مطلب با gemini-3.8-flash ساخته شده‌اند.

هزینهٔ هر پاسخ زیر همان پاسخ نوشته می‌شود. هرچه گفت‌وگو طولانی‌تر شود، هر پیام گران‌تر می‌شود، چون مدل برای جواب دادن به پیام تازه، همهٔ کدهایی را که در پیام‌های قبلی ردوبدل شده دوباره می‌خواند. جدول زیر نشان می‌دهد بزرگ شدن پنجرهٔ زمینه چطور روی هزینه اثر می‌گذارد.

هزینهٔ یک پیام در گفت‌وگوی کوتاه و طولانی، به سکه با قیمت امروز
هزینهٔ یک پیام در گفت‌وگوی کوتاه و طولانی، به سکه
مدل پیام شمارهٔ ۱ پیام شمارهٔ ۱۰ پیام شمارهٔ ۲۰ پیام شمارهٔ ۳۰
GPT-5 nano OpenAI ۷۹ سکه ۱۸۴ سکه ۳۰۰ سکه ۴۱۷ سکه
GPT-5 mini OpenAI ۳۹۳ سکه ۹۱۷ سکه ۱٬۴۹۹ سکه ۲٬۰۸۱ سکه
DeepSeek Flash DeepSeek ۲۶۲ سکه ۸۹۱ سکه ۱٬۵۸۹ سکه ۲٬۲۸۷ سکه
Gemini 3.8 Flash Google Gemini ۷۸۶ سکه ۲٬۳۵۸ سکه ۴٬۱۰۳ سکه ۵٬۸۴۹ سکه
توکن ورودی همان پیام ۴۵۰ ۵٬۸۵۰ ۱۱٬۸۵۰ ۱۷٬۸۵۰

فرض جدول: دستور سیستمی ۳۰۰ توکن، هر پرسش ۱۵۰ توکن و هر جواب ۴۵۰ توکن؛ همهٔ پیام‌های قبلی در هر نوبت دوباره فرستاده می‌شوند. عدد هر خانه هزینهٔ همان یک پیام است، نه جمع گفت‌وگو.

چت گیسو از ۶۰ پیام آخر (حدود ۳۰ نوبت) قدیمی‌تر را دیگر نمی‌فرستد؛ در وب‌سرویس (API) هر چه خودتان بفرستید حساب می‌شود.

به‌روزرسانی: ۱۴۰۵/۰۷/۳۰ ۲۳:۵۳ مبلغ‌ها به سکه، با قیمت امروز همان مدل در گیسو

برای همین، شروع گفت‌وگوی تازه با آخرین فایل سالم هم مدل را از سردرگمی نجات می‌دهد و هم پیام‌ها را ارزان‌تر نگه می‌دارد.

اولین کار: یک کار تکراری هفتگی‌تان را انتخاب کنید، مثل حساب سود فروش یا مرتب کردن یک فهرست. ابزارش را در پنج سطر توصیف کنید، فایل را باز کنید، با آن کار کنید و فقط یک تغییر بخواهید. همین درخواست را در گیسو باز کنید؛ گفت‌وگویی با gemini-3.8-flash باز می‌شود که درخواست در آن نوشته شده. جای خالی را پر کنید؛ تا دکمهٔ ارسال را نزنید، چیزی فرستاده و حساب نمی‌شود.

امتحان در گیسو چت با هوش مصنوعی حساب رایگان است؛ برای استفاده از مدل‌ها اعتبار لازم دارید.

پرسش‌های پرتکرار

وایب کدینگ یعنی چه؟

یعنی ساختن نرم‌افزار با توصیف خواسته به زبان ساده و سنجیدن نتیجه با استفاده از آن، نه با خواندن خط‌به‌خط کد. این اصطلاح در ۲۰۲۵ با آندری کارپاتی (Andrej Karpathy) رایج شد.

برای وایب کدینگ باید برنامه‌نویسی بلد باشم؟

برای ابزار کوچک شخصی نه. باید بتوانید روشن بگویید چه چیزی وارد می‌شود و چه چیزی باید دیده شود، و هر تغییر را خودتان امتحان کنید. برای کاری که با پول یا دادهٔ دیگران سروکار دارد، برنامه‌نویس لازم است.

کدی که هوش مصنوعی می‌دهد را چطور باز کنم؟

کد را با «کپی کد» بردارید، در یک فایل متنی با نام index.html ذخیره کنید و با دوبار کلیک در مرورگر باز کنید. روی گوشی هم فایل را با Chrome یا Safari باز کنید.

چرا گفت‌وگوی طولانی کدنویسی گران‌تر می‌شود؟

چون هر پیام، پیام‌های قبلی همان گفت‌وگو را هم با خود به مدل می‌برد و کد بلند توکن زیادی دارد. با آخرین فایل سالم یک گفت‌وگوی تازه شروع کنید.

نوشتهٔ تیم گیسو همهٔ مطالب وبلاگ خوراک RSS