وایب کدینگ چیست؟ آموزش ساخت یک سایت ساده با هوش مصنوعی
با توضیح فارسی ایده، یک سایت کوچک بسازید و قدم‌به‌قدم اصلاحش کنید؛ همراه با پرامپت‌های آماده، روش تست و مرز میان نمونه اولیه و محصول قابل اعتماد.
وایب کدینگ چیست؟ روشی برای ساخت نرمافزار با توضیح خواسته‌ها به زبان طبیعی است؛ هوش مصنوعی کد را می‌نویسد و شما با دیدن نتیجه و درخواست اصلاح، پروژه را جلو می‌برید. در معنای اولیه، کاربر حتی ممکن است کد را نخواند؛ همین فاصله میان «کار میکند» و «می‌فهمم چرا کار میکند» مهم‌ترین محدودیت این روش است.
اگر می‌خواهید یک صفحه معرفی خدمات، نمونه‌کار یا ابزار شخصی کوچک بسازید، این راهنما نقطه شروع عملی شماست. ابتدا مفهوم را روشن می‌کنیم، سپس با چند پرامپت فارسی یک سایت کوچک می‌سازیم و مشخص می‌کنیم چه زمانی باید سراغ یادگیری برنامه‌نویسی یا کمک متخصص بروید.
وایب کدینگ چیست و این اصطلاح از کجا آمد؟
آندری کارپاتی (Andrej Karpathy) اصطلاح vibe coding را در فوریهٔ ۲۰۲۵ / بهمن ۱۴۰۳ مطرح کرد. او در توصیف تجربه خود، از سپردن نوشتن کد به هوش مصنوعی و پیش بردن کار با مشاهده و اجرا گفت؛ توصیفی از یک شیوه کار که خواندن دقیق کد در آن کمرنگ می‌شود. منبع اصلی این نام‌گذاری پست کارپاتی است.
پاسخ ساده به «vibe coding یعنی چی» این است: به‌جای نوشتن همه دستورهای فنی، نتیجه مطلوب را شرح می‌دهید. مثلاً می‌گویید «یک صفحه فارسی برای معرفی کلاس نقاشی بساز که روی موبایل خوب دیده شود» و بعد درباره رنگ، دکمه‌ها و رفتار صفحه بازخورد می‌دهید.
در این مقاله، تمرین را با چند کنترل ساده همراه می‌کنیم: تغییر کوچک، اجرای دوباره و نگه داشتن نسخه سالم. هرچه کد را بیشتر بفهمید و بررسی کنید، از معنای اولیه وایب کدینگ فاصله می‌گیرید و به توسعه با کمک هوش مصنوعی نزدیک‌تر می‌شوید؛ این پیشرفت مفیدی است.
وایب کدینگ چطور کار میکند؟
چرخه معمول شامل توضیح مسئله، تولید کد، اجرا، مشاهده و اصلاح است. مدل از شرح شما و اطلاعاتی که درباره پروژه دارد، کد پیشنهاد می‌دهد؛ اما کامل بودن نیازها، درست بودن خروجی و مناسب بودن آن برای استفاده واقعی باید بررسی شود.
۱. خواسته را مشخص می‌کنید: مخاطب، قابلیت‌ها و محدودیت‌ها را می‌نویسید. ۲. نسخه کوچک می‌گیرید: فقط بخش لازم برای آزمایش ایده ساخته می‌شود. ۳. آن را اجرا می‌کنید: ظاهر و رفتار واقعی را می‌بینید. ۴. اشکال را دقیق گزارش می‌کنید: مرحله بازتولید و نتیجه مورد انتظار را می‌گویید. ۵. نسخه اصلاح‌شده را دوباره می‌سنجید: هم اشکال قبلی، هم بخش‌های سالم را بررسی می‌کنید.
مثلاً «سایت حرفه‌ای بساز» معیار روشنی ندارد. «در عرض ۳۶۰ پیکسل اسکرول افقی نباشد و دکمه تماس با صفحه‌کلید قابل انتخاب باشد» قابل بررسی است. کیفیت این چرخه به وضوح درخواست و دقت مشاهده شما وابسته است.
فرق وایب کدینگ با برنامه‌نویسی معمولی چیست؟
تفاوت اصلی میزان فهم و کنترل بر کد است. استفاده از هوش مصنوعی به‌تنهایی کاری را وایب کدینگ نمی‌کند؛ برنامه‌نویس می‌تواند پیشنهاد مدل را بخواند، رد کند، آزمایش کند و مسئولیت ساختار آن را بپذیرد.
| موضوع | وایب کدینگ در معنای اولیه | توسعه با کمک هوش مصنوعی | برنامه‌نویسی عمدتاً دستی |
|---|---|---|---|
| نقطه تمرکز | نتیجه قابل مشاهده | نتیجه و کیفیت پیاده‌سازی | پیاده‌سازی مستقیم |
| خواندن کد | محدود یا کنار گذاشته‌شده | بخش ضروری بررسی | بخش اصلی کار |
| رفع اشکال | درخواست اصلاح از مدل | تحلیل همراه با کمک مدل | تحلیل و اصلاح مستقیم |
| کاربرد مناسب | آزمایش کم‌خطر ایده | پروژه با مسئول فنی | پروژه با مسئول فنی |
| مسئولیت خروجی | همچنان با سازنده است | با سازنده و تیم است | با سازنده و تیم است |
برای نمونه، تغییر رنگ یک کارت کم‌خطر است؛ تغییر منطق دسترسی به پرونده مشتری نیازمند فهم دقیق است. اگر هنوز می‌پرسید «vibe coding چیست»، این مرز را به خاطر بسپارید: سادگی ساخت رابط، نشانه سادگی مسائل پشت آن نیست.
برای شروع چه ابزارهایی لازم است؟
برای پروژه این راهنما، یک گفت‌وگوی متنی با مدل کدنویسی، ویرایشگر متن ساده و مرورگر کافی است. مدل کد می‌دهد، شما آن را در فایلها ذخیره می‌کنید و صفحه را باز می‌کنید. این روش عمداً نصب بسته و تنظیم سرور ندارد.
ابزارهای داخل محیط کدنویسی برای کار مستقیم روی پروژه گزینه دیگری هستند. طبق مستندات رسمی بررسی‌شده در اکتبر ۲۰۲۶، Cursor برای فهم کد، ساخت قابلیت، رفع اشکال و بررسی تغییرات به کار می‌رود؛ جزئیات در مستندات Cursor آمده است. برای مسیر استفاده، راهنمای Cursor را ببینید.
Cline نیز تنظیم ارائه‌دهنده سازگار با OpenAI را با آدرس پایه، کلید و شناسه مدل مستند کرده است؛ این قابلیت در راهنمای رسمی Cline توضیح داده می‌شود. برای اتصال به 1ai، راهنمای Cline را دنبال کنید و کلید را فقط در تنظیمات ابزار وارد کنید.
وان ای آی (1ai) برای گرفتن کد، توضیح خطا و بازبینی اولیه، دستیار برنامه‌نویسی با هوش مصنوعی دارد. برای انتخاب آگاهانه‌تر هم راهنمای بهترین هوش مصنوعی برای کدنویسی و راهنمای Claude Code را بخوانید. پروژه زیر را میتوانید با گفت‌وگوی متنی پیش ببرید؛ لازم نیست از ابتدا چند ابزار نصب کنید.
آموزش وایب کدینگ: چطور یک سایت کوچک بسازیم؟
پروژه پیشنهادی، سایت تک‌صفحه‌ای یک مدرس خیالی نقاشی است: معرفی، سه خدمت، پرسش‌های متداول و دکمه رفتن به بخش تماس. سایت حساب کاربری، پرداخت و ارسال فرم ندارد؛ بنابراین برای تمرین، داده واقعی کسی را دریافت نمی‌کنیم.
خروجی مورد انتظار سه فایل در یک پوشه است: index.html برای ساختار، style.css برای ظاهر و script.js برای باز و بسته شدن پاسخ پرسش‌ها. هدف این آموزش ساخت سایت با هوش مصنوعی، رسیدن به یک نمونه قابل بررسی است؛ انتشار عمومی مرحله جداگانه‌ای دارد.
قدم اول: محدوده پروژه را با پرامپت مشخص کنید
پیش از درخواست کد، از مدل بخواهید برنامه کوتاهی بدهد. این کار کمک میکند قابلیت‌های اضافه مثل ثبت‌نام و پایگاه داده ناخواسته وارد پروژه نشوند.
می‌خواهم یک سایت تک‌صفحه‌ای فارسی و راست‌به‌چپ برای مدرس خیالی نقاشی بسازم.
بخش‌ها: معرفی کوتاه، سه کارت خدمات، سه پرسش متداول و اطلاعات تماس نمایشی.
فقط HTML و CSS و JavaScript ساده؛ بدون کتابخانه، نصب بسته، سرور یا منبع خارجی.
هیچ فرم ارسال اطلاعات، پرداخت، ثبت‌نام یا ذخیره داده نداشته باشد.
دکمه اصلی به بخش تماس همان صفحه برود. اطلاعات تماس واقعی نساز.
فعلاً کد ننویس. طرح صفحه، نقش سه فایل و معیارهای تست را کوتاه توضیح بده.پاسخ را بخوانید. اگر مدل پیشنهاد رزرو آنلاین داد، آن را از محدوده حذف کنید. متن خدمات را خودتان تعیین کنید؛ برای مثال «آموزش مقدماتی»، «تمرین رنگ» و «بررسی نمونه‌کار». نقل‌قول مشتری، سابقه تدریس یا مدرک ساختگی را نپذیرید.
قدم دوم: فایل‌های نسخه اول را بگیرید
بعد از تأیید طرح، درخواست ساخت بدهید. از مدل بخواهید هر فایل را کامل و جدا ارائه کند تا قطعه‌های ناقص را اشتباه کنار هم نگذارید.
طبق طرح تأییدشده، نسخه اول را بساز.
محتوای کامل index.html، style.css و script.js را در سه بلوک جدا بده.
همه فایلها در یک پوشه هستند و صفحه باید با باز کردن index.html اجرا شود.
زبان صفحه فارسی و جهت آن راست‌به‌چپ باشد. از فونت موجود روی دستگاه استفاده کن.
سایت روی موبایل تک‌ستونه و روی نمایشگر بزرگ خوانا باشد.
پرسش‌های متداول با دکمه قابل دسترس باز و بسته شوند.
لینک‌ها و دکمه‌ها کار مشخص داشته باشند؛ دکمه نمایشی بی‌عمل نگذار.
آخر پاسخ بگو هر بلوک را کجا ذخیره کنم و چه نتیجه‌ای باید ببینم.یک پوشه تازه روی دستگاه بسازید. هر بلوک را بدون علامت‌های حصار کد در فایل هم‌نام ذخیره کنید. پسوندها را بررسی کنید؛ نامی مثل index.html.txt درست نیست. در ویرایشگر متن، ذخیره با UTF-8 را انتخاب کنید تا متن فارسی به‌هم نریزد.
قدم سوم: سایت را باز کنید و نتیجه را ببینید
فایل index.html را در مرورگر باز کنید. باید عنوان معرفی، کارت‌ها و بخش تماس دیده شوند. اگر صفحه بی‌استایل بود، ابتدا مطمئن شوید نام فایل CSS و مسیر نوشته‌شده در HTML یکسان است؛ بازنویسی کل پروژه اولین راه‌حل نیست.
پنجره را باریک کنید و با کلید Tab میان عناصر حرکت کنید. دکمه اصلی باید شما را به بخش تماس ببرد. پرسش‌های متداول را هم با کلیک و هم با صفحه‌کلید باز کنید. اگر برای این کار به نصب برنامه یا اجرای فرمان ناشناس نیاز پیدا کردید، از مدل بخواهید به محدودیت نسخه بدون وابستگی برگردد.
قدم چهارم: اشکال را قابل بازتولید گزارش کنید
گزارش «خراب است» اطلاعات کافی ندارد. بگویید کجا، با چه کاری و برخلاف چه انتظاری اشکال دیده می‌شود. اگر فایل را خودتان تغییر داده‌اید، نسخه فعلی همان فایل را هم به مدل بدهید.
در نسخه فعلی، وقتی پنجره حدود ۳۶۰ پیکسل عرض دارد، کارت خدمات از صفحه بیرون می‌زند.
انتظار دارم بدون اسکرول افقی همه کارت‌ها زیر هم قرار بگیرند.
فقط علت این مشکل را پیدا کن و کمترین تغییر لازم را پیشنهاد بده.
متن‌ها، رنگ‌ها و رفتار پرسش‌های متداول را تغییر نده.
قبل از کد، علت احتمالی را توضیح بده؛ سپس محتوای کامل فایل تغییرکرده را بده.
در پایان بگو چطور مطمئن شوم بخش‌های قبلی خراب نشده‌اند.بعد از هر اصلاح، همان حالت را دوباره امتحان کنید. اگر مشکل برطرف نشد، نتیجه واقعی را گزارش کنید؛ تأیید مدل درباره درست بودن کد، جای اجرای آن را نمی‌گیرد. چند اصلاح هم‌زمان نیز تشخیص علت تغییر رفتار را دشوار میکند.
قدم پنجم: پیش از اضافه کردن قابلیت، نسخه سالم نگه دارید
وقتی نسخه اول کار کرد، یک کپی مشخص از پوشه نگه دارید. در ادامه مسیر، یادگیری Git برای ثبت تغییرات و برگشت به نسخه‌های قبلی مفید است. فایل سالم را با ده‌ها اصلاح آزمایشی بی‌ردپا جایگزین نکنید.
این نسخه پایه سایت است. پیش از تغییر بعدی، یک فهرست تحویل کوتاه بده:
نقش هر فایل چیست؟ متن خدمات را کجا عوض کنم؟ رنگ اصلی کجا تعریف شده؟
کدام رفتارها را باید بعد از تغییر دوباره امتحان کنم؟
چه چیزهایی هنوز پیاده‌سازی نشده‌اند؟
فعلاً هیچ قابلیت جدیدی اضافه نکن و هیچ فایلی را بازنویسی نکن.قدم ششم: نمونه را با معیار روشن تحویل بگیرید
پروژه زمانی برای پایان این تمرین کافی است که معیارهای زیر را خودتان بررسی کرده باشید. این فهرست ادعای اجرای پروژه در این مقاله نیست؛ معیار آزمون نسخه‌ای است که شما تولید می‌کنید.
| بررسی | نتیجه قابل قبول |
|---|---|
| نمایش موبایل | متن و کارت‌ها بدون بیرون‌زدگی دیده شوند |
| نمایش دسکتاپ | عرض متن خوانا و فاصله‌ها مناسب باشند |
| راست‌به‌چپ | چینش و ترتیب متن فارسی درست باشد |
| دکمه اصلی | به بخش تماس برود |
| صفحه‌کلید | دکمه‌ها قابل انتخاب و فعال‌سازی باشند |
| پرسش‌های متداول | باز و بسته شدن قابل پیش‌بینی باشد |
| کنسول مرورگر | خطای مرتبط با صفحه ثبت نشود |
| محتوا | اطلاعات تماس و ادعای ساختگی منتشر نشود |
برای انتشار، اطلاعات نمایشی را جایگزین کنید، همه لینک‌ها را دوباره بسنجید و نسخه سالم را نگه دارید. انتخاب میزبان، دامنه و تنظیمات انتشار بیرون از محدوده این تمرین است؛ صرف داشتن سه فایل به معنای آنلاین شدن سایت نیست.
چطور پرامپت بنویسیم که اصلاحات بی‌پایان نشوند؟
پرامپت مفید چهار جزء دارد: وضعیت فعلی، تغییر خواسته‌شده، محدودیت و معیار پذیرش. به‌جای «قشنگ‌ترش کن»، بنویسید «فاصله بین کارت‌ها بیشتر شود، رنگ اصلی ثابت بماند و در موبایل فاصله از کناره صفحه حفظ شود».
اگر مکالمه طولانی شد، خلاصه وضعیت را از مدل بگیرید و با فایل‌های فعلی تطبیق دهید. تصمیم‌های قبلی، اشکال‌های باقی‌مانده و قابلیت‌های حذف‌شده را مشخص کنید. مدل نباید از روی نسخه قدیمی درباره فایل تازه شما حدس بزند.
برای نوشتن شرح دقیق‌تر، میتوانید از ابزارهای نوشتن با هوش مصنوعی کمک بگیرید؛ اما تصمیم درباره مخاطب و نتیجه مطلوب را خودتان بگیرید. توضیح روشن مسئله معمولاً از تعویض مداوم ابزار مفیدتر است.
خطرهای وایب کدینگ چیست و چطور آن‌ها را کم کنیم؟
خطر اصلی این است که خروجی ظاهراً درست، خطای پنهان داشته باشد. صفحه زیبا درباره امنیت، حفظ اطلاعات یا دوام پروژه چیزی ثابت نمی‌کند. هرچه پیامد خطا بزرگ‌تر باشد، نیاز به بررسی فنی بیشتر می‌شود.
امنیت و کلیدها: کلید API، رمز، اطلاعات مشتری و فایل خصوصی را داخل کد صفحه یا پرامپت عمومی نگذارید. کدی که به مرورگر کاربر فرستاده می‌شود محل نگهداری راز نیست. اگر بعداً قابلیت هوش مصنوعی اضافه کردید، مدیریت کلید باید در بخش سرور با کنترل دسترسی و هزینه انجام شود.
دستورهای اجرایی: فرمان نصب، حذف فایل یا تغییر تنظیمات را بدون فهم اثر آن اجرا نکنید. از مدل بخواهید هر فرمان را توضیح دهد. برای تمرین در پوشه جدا کار کنید و دسترسی غیرضروری به فایلها ندهید.
امنیت محصول: ورود کاربر، پرداخت و مجوز مشاهده اطلاعات به بررسی تخصصی نیاز دارند. پنهان کردن یک دکمه در ظاهر سایت، مانع دسترسی غیرمجاز به داده نیست. پیش از دریافت داده واقعی، طراحی دسترسی و رفتار سرور را بررسی کنید.
نگهداری و هزینه: اصلاح‌های پی‌درپی ممکن است کد تکراری یا وابستگی اضافی ایجاد کنند. برای هر قابلیت بپرسید چه تغییری لازم است و چه بخشی باید دوباره تست شود. هزینه تولید کد را هم از هزینه میزبانی، پیامک، پشتیبانی و اصلاح جدا حساب کنید.
ساخت اپلیکیشن با هوش مصنوعی چه فرقی با این تمرین دارد؟
ساخت اپلیکیشن با هوش مصنوعی می‌تواند از یک نمونه رابط شروع شود، اما برنامه دارای حساب کاربری، همگام‌سازی یا پرداخت، مسئله‌های بیشتری دارد. باید قطع اینترنت، خطای سرور، سطح دسترسی، بازیابی داده و به‌روزرسانی نسخه‌های قبلی را هم در نظر بگیرید.
برای نمونه، فهرست کارهای شخصی روی یک دستگاه با سامانه مدیریت سفارش چند کاربر یکسان نیست. در دومی باید مشخص باشد چه کسی چه اطلاعاتی را می‌بیند و هنگام ثبت هم‌زمان دو تغییر چه اتفاقی می‌افتد. این تصمیم‌ها با یک پرامپت کلی حل نمی‌شوند.
چه زمانی باید برنامه‌نویسی واقعی یاد بگیریم؟
از وقتی می‌خواهید پروژه را نگه دارید، تغییرش دهید یا به دیگران تحویل دهید، یادگیری مبانی ارزش پیدا میکند. لازم نیست پیش از اولین صفحه همه‌چیز را بدانید؛ اما برای مسئولیت یک محصول باید بتوانید رفتار آن را توضیح دهید و خطا را پیگیری کنید.
برای همین پروژه، ابتدا ساختار HTML، چینش CSS و رویدادهای JavaScript را یاد بگیرید. سپس کار با ابزار توسعه مرورگر و ثبت نسخه‌ها را تمرین کنید. وقتی سراغ داده و کاربر واقعی رفتید، درخواست و پاسخ شبکه، اعتبارسنجی و مجوزها اولویت دارند.
یک تمرین خوب این است که از مدل بخواهید یک تابع را توضیح دهد، سپس خودتان تغییر کوچکی در آن بدهید و نتیجه را پیش‌بینی کنید. اگر نمی‌توانید بگویید داده کجا ذخیره می‌شود یا دکمه چه کاری انجام می‌دهد، پیش از گسترش محصول همان بخش را یاد بگیرید.
سوالات متداول
وایب کدینگ چیست و آیا بدون دانش فنی ممکن است؟
وایب کدینگ یعنی پیش بردن ساخت نرمافزار با توضیح خواسته و بازخورد به هوش مصنوعی. برای یک نمونه کوچک میتوان با دانش محدود شروع کرد، ولی اجرا و بررسی نتیجه همچنان با شماست.
آیا با پرامپت فارسی میتوان سایت ساخت؟
میتوانید خواسته، متن صفحه و گزارش خطا را فارسی بنویسید. معیار روشن، نام دقیق فایلها و توضیح نتیجه مورد انتظار، درخواست را قابل پیگیریتر میکند.
آیا وایب کدینگ برای فروشگاه واقعی مناسب است؟
برای نمایش اولیه ایده مفید است. فروشگاه دارای پرداخت و اطلاعات مشتری پیش از استفاده واقعی به بررسی امنیت، منطق سفارش و نگهداری توسط فرد دارای دانش فنی نیاز دارد.
آیا استفاده از هوش مصنوعی نیاز به یادگیری کدنویسی را حذف میکند؟
خیر؛ فهم کد برای عیبیابی، تغییر و تحویل مسئولانه لازم است. میتوانید یادگیری را از همان فایلهایی شروع کنید که در پروژه کوچک ساختهاید.
هزینه شروع وایب کدینگ چقدر است؟
به ابزار، مدل، تعداد اصلاحات و نیاز به میزبانی بستگی دارد. در 1ai هزینه مصرف پیش از اجرا نمایش داده می‌شود و اعتبار رایگان روزانه برای برخی مدل‌های چت وجود دارد؛ جزئیات را در صفحه تعرفه‌ها ببینید.
برای شروع، پرامپت قدم اول را در 1ai امتحان کنید و فقط یک صفحه کوچک بسازید. نتیجه را اجرا کنید، یک ایراد مشخص پیدا کنید و همان را اصلاح کنید؛ این چرخه، شروع ملموسی برای یادگیری است.
