نکات کلیدی
- هدف تمرین، یادگیری چرخهٔ توصیف، ساخت، بررسی و اصلاح است.
- قبل از ساخت، خروجی مطلوب و چیزهای خارج از دامنه را بنویس.
- پاسخ AI با نتیجه‌ای که خودت آزمایش کرده‌ای یکسان نیست.
- فورج برای گفتگو و پیشنمایش برای بررسی رفتار پروژه است.
- تصاویر تازه‌اند؛ ساخت و اصلاح تازه یا مصرف اعتبار اندازه‌گیری نشده است.
برای یادگیری وایب کدینگ، یک مسئلهٔ کوچک را توضیح بده، نسخهٔ اولیه را با AI بساز، رفتار آن را بررسی کن و هر بار یک تغییر مشخص بده. مهارت اصلی فقط نوشتن پرامپت نیست؛ باید بتوانی بفهمی خروجی چه کاری انجام می‌دهد، چه چیزی هنوز دمو است و تغییر بعدی دقیقاً چه باید باشد.
در این آموزش وایب کدینگ با کُندا، مسیر را روی پنل واقعی میبینی: کادر شروع در داشبورد، گفت‌وگوی فورج، پیشنمایش و بررسی دکمهٔ اصلی یک سایت خدماتی. اگر «آموزش Vibe Coding» جست‌وجو کرده‌ای و می‌خواهی از دیدن فهرست ابزارها به انجام یک تمرین برسی، این راهنما برای همین قدم است.
این آموزش در وبلاگ کُندا منتشر شده است. تصاویر داشبورد و محیط کار در ۳۰ مهر ۱۴۰۵ ثبت شده‌اند. برای نمایش مراحل، یک پروژهٔ نمونهٔ موجود را باز کردیم و مسیر خانه تا تماس را بررسی کردیم؛ ساخت تازه، ویرایش با AI یا انتشار تازه اجرا نشده است. پرامپت‌ها تمرین پیشنهادی‌اند، نه گزارش یک اجرای جدید یا هزینهٔ آن.
بعد از این آموزش چه چیزی یاد می‌گیری؟
هدف، تسلط به همهٔ ابزارها یا ساخت هر نوع اپ نیست. در پایان باید بتوانی یک درخواست قابل بررسی بنویسی، کنترل مناسب را در پنل پیدا کنی، یک مسیر را در خروجی آزمایش کنی و مشکل را برای اصلاح بعدی دقیق توضیح بدهی.
برای دیدن همهٔ ستون‌ها، جدول را افقی جابه‌جا کن.
| مهارت | نشانهٔ یادگرفتن |
|---|---|
| تعریف نسخهٔ کوچک | می‌توانی بگویی چه چیزی فعلاً ساخته نمی‌شود |
| نوشتن پرامپت | مخاطب، صفحه‌ها، رفتار اصلی و محدودیت‌ها مشخص‌اند |
| خواندن نتیجه | پیام AI را از نتیجه‌ای که خودت دیده‌ای جدا میکنی |
| بررسی پیشنمایش | یک کار را از ابتدا تا انتها انجام می‌دهی |
| اصلاح محدود | نام صفحه، مشکل و نتیجهٔ مطلوب را می‌نویسی |
| تصمیم برای انتشار | می‌دانی چه داده یا اتصالی هنوز تأیید نشده است |
برای تمرین، یک سایت معرفی خدمات انتخاب می‌کنیم. اگر خروجی مورد نیازت فایل نصب موبایل یا افزونهٔ وردپرس است، اول تفاوت ابزارها و خروجی‌ها را بخوان؛ این تمرین دربارهٔ سایت و وب‌اپ در مرورگر است.
قبل از شروع چه چیزهایی لازم است بدانی؟
برای دنبال‌کردن این مسیر در کُندا، مرورگر، دسترسی به حساب و اعتبار کافی برای اقدام مورد نظر لازم است. اگر ثبت‌نام محدود باشد، شرایط دعوت یا پذیرش را دنبال کن. دسترسی یک حساب آزمایشی یا دعوت ویژه را به همهٔ حساب‌ها تعمیم نده. راهنمای شروع کار و اعتبار کُندا جزئیات همین مرحله را توضیح می‌دهند.
سه مفهوم را هم از هم جدا کن:
- رابط کاربری: چیزی که میبینی؛ مثل دکمه، منو و فرم.
- داده و منطق: چیزی که تصمیم می‌گیرد درخواست کجا ذخیره شود و چه کسی آن را ببیند.
- انتشار: در دسترس قرارگرفتن نسخه‌ای از پروژه روی لینک عمومی، با شرایط حساب و سرویس‌هایش.
مثلاً فرم خوش‌ظاهر، ارسال واقعی ایمیل را ثابت نمی‌کند. لازم نیست برای تمرین اول همهٔ کد را بلد باشی، اما لازم است بتوانی این تفاوت را تشخیص بدهی. هر وقت پای دادهٔ مشتری، پرداخت یا مجوز دسترسی وسط آمد، بازبینی فنی هم بخشی از کار است.
قدم اول: مسئله را قبل از پرامپت کوچک کن
به‌جای «یک سایت کامل برای کسب‌وکارم بساز»، این برگه را پر کن:
برای دیدن همهٔ ستون‌ها، جدول را افقی جابه‌جا کن.
| سؤال | پاسخ نمونهٔ این تمرین |
|---|---|
| چه کسی وارد سایت می‌شود؟ | فردی که دنبال خدمات استودیو است |
| قرار است چه کاری تمام کند؟ | خدمات را ببیند و به صفحهٔ درخواست مشاوره برسد |
| چه صفحه‌هایی لازم‌اند؟ | خانه، خدمات، نمونه‌کار و تماس |
| دادهٔ واقعی داریم؟ | نه؛ محتوا و هویت کسب‌وکار نمونه‌اند |
| چه چیزی فعلاً بیرون از تمرین است؟ | ارسال واقعی فرم، پرداخت، پیامک و حساب مشتری |
| موفقیت را چطور می‌سنجیم؟ | دکمهٔ مشاوره به تماس برسد و دمو بودن فرم روشن باشد |
این برگه، معیار قبول یا رد نسخهٔ اول است. اگر خروجی زیبا بود ولی مسیر مشاوره بن‌بست داشت، هنوز تمرین تمام نشده است. برای شروع از نمونهٔ موجود هم می‌توانی قالب‌های کُندا را ببینی؛ راهنمای انتخاب قالب تفاوت آن مسیر با پروژهٔ تازه را توضیح می‌دهد.
قدم دوم: درخواست را در داشبورد بنویس و بازبینی کن
کادر «ایده‌ات را بساز» محل شروع پروژهٔ تازه است. پیش از ارسال، متن را یک بار با برگهٔ بالا مقایسه کن. چیزی را که برای نسخهٔ اول نمی‌خواهی هم بنویس؛ اضافه‌کردن امکانات بی‌نیاز، بررسی خروجی را سخت‌تر می‌کند.
پرامپت شروع پروژهٔ تازه؛ برای نیاز خودت تغییر بده
برای «استودیو نمونه»، سایت فارسی و راست‌به‌چپ با خانه، خدمات، نمونه‌کار و تماس بساز. اقدام اصلی «درخواست مشاوره» به صفحهٔ تماس برود. داده‌ها نمایشی باشند؛ قیمت، سابقه و نظر مشتری نساز. فرم تماس را دمو معرفی کن و ارسال واقعی، پرداخت و ورود مشتری لازم نیست. متن و منو در موبایل خوانا باشند.
این متن چهار چیز را روشن می‌کند: ساختار، رفتار اصلی، مرز محتوای نمونه و چیزهایی که فعلاً نباید ساخته شوند. عبارت‌هایی مثل «خیلی حرفه‌ای» به‌تنهایی چنین معیاری نمی‌دهند. راهنمای رسمی پرامپت‌نویسی Lovable هم برنامه‌ریزی پیش از درخواست و تقسیم کار به بخش‌های کوچک را توصیه می‌کند؛ در اینجا آن الگو را به تمرین فارسی و پنل کُندا تبدیل کرده‌ایم.
قدم سوم: ساخت را یک بار شروع کن و وضعیت را بخوان
اگر درخواست آماده است، به حساب درست وارد شده‌ای و شرایط مصرف را بررسی کرده‌ای، «بساز» را یک بار بزن. این مرحله میتواند اعتبار مصرف کند. نمایش پیشرفت را زمان‌سنج یا تضمین پایان حساب نکن؛ پیام مرحله و نتیجهٔ نهایی مهم‌ترند.
اگر ارتباط قطع شد، به همان حساب و پروژه برگرد و وضعیت جاری را بررسی کن. پیش از فرستادن دوبارهٔ درخواست، مطمئن شو ساخت قبلی فعال نیست. پیام کمبود اعتبار، محدودیت دسترسی و خطای ساخت، علت‌های یکسانی ندارند؛ تکرار پرامپت به همهٔ آن‌ها پاسخ نمی‌دهد.
در این مقاله برای این مرحله ساخت تازه‌ای اجرا نکردیم. پس از عدد اعتبار، مدت ساخت یا تعداد تلاش موفق نتیجه‌گیری نمی‌کنیم. برای تمرین شخصی، متن درخواست، ماندهٔ قبل و بعد و وضعیت نهایی را یادداشت کن. راهنمای شروع رایگان و مصرف برگهٔ ثبت مفصل‌تری دارد.
قدم چهارم: در محیط کار، گفتگو را از نتیجه جدا کن
در فورج، درخواست‌ها و پاسخ‌های پروژه را می‌خوانی و اصلاح بعدی را می‌نویسی. در پیشنمایش، رفتار خود سایت را بررسی میکنی. در نمای گوشیِ حساب بررسی‌شده، این دو زبانه جدا هستند؛ چیدمان و قابلیت‌های قابل مشاهده ممکن است با عرض صفحه و دسترسی حساب تو فرق داشته باشند.
این سؤال را بعد از هر پاسخ بپرس: «کدام بخش را خودم دیده و بررسی کرده‌ام؟» اگر AI نوشته «مسیرها مستقل‌اند»، فقط جابه‌جایی با منو کافی نیست؛ بازشدن مستقیم مسیر هم یک آزمون جداست. اگر نوشته «فرم کار می‌کند»، معلوم کن منظور اعتبارسنجی ورودی است یا ارسال به یک سرویس واقعی.
برای پیدا‌کردن کنترل‌های دیگر، راهنمای محیط کار را کنار دستت نگه دار. برای پروژهٔ تکرارشونده، قواعد ثابت مثل زبان و استفاده از دادهٔ نمونه را در صورت دسترسی در دانش پروژه ثبت کن؛ کلید خصوصی و رمز را داخل آن نگذار.
قدم پنجم: یک سناریو را در پیشنمایش تا انتها برو
در پروژهٔ نمونه، زبانهٔ «پیشنمایش» را باز کردیم. صفحهٔ اصلی، دکمهٔ «درخواست مشاوره» داشت. با انتخاب همان دکمه، صفحهٔ تماس و توضیح دمو ظاهر شد. این مشاهده، رسیدن از خانه به تماس را تأیید می‌کند؛ ارسال واقعی، ذخیرهٔ داده یا انتشار عمومی را تأیید نمی‌کند.
برای خروجی خودت این سه دسته را جدا بنویس:
برای دیدن همهٔ ستون‌ها، جدول را افقی جابه‌جا کن.
| دسته | مثال |
|---|---|
| مشاهده شد | دکمهٔ اصلی صفحهٔ تماس را باز کرد |
| هنوز بررسی نشده | فرم خالی، ورودی نامعتبر و بازشدن مستقیم هر مسیر |
| بیرون از دامنهٔ تمرین | ارسال پیامک، ثبت در CRM و پرداخت واقعی |
بعد منوی گوشی، خوانایی متن و برگشت به خانه را بررسی کن. فقط تصویر صفحهٔ اول را به‌عنوان نتیجهٔ تمرین ذخیره نکن. اگر می‌خواهی جزئیات نمونهٔ خدماتی را ببینی، بررسی ساخت سایت با هوش مصنوعی مسیر تخصصی همان موضوع است؛ اینجا مهارت هدایت و بررسی AI را تمرین میکنی.
قدم ششم: یک ایراد را با پرامپت قابل آزمون اصلاح کن
گفت‌وگوی همان پروژه را باز کن. درخواست تازه در داشبورد را با ادامهٔ پروژهٔ فعلی اشتباه نگیر. برای اولین اصلاح، یک رفتار یا یک بخش را انتخاب کن و بگو چه چیزی باید ثابت بماند.
برای دیدن همهٔ ستون‌ها، جدول را افقی جابه‌جا کن.
| درخواست مبهم | درخواست قابل بررسی |
|---|---|
| ظاهرش را بهتر کن | در صفحهٔ تماس، برچسب فیلدها روی گوشی بالای ورودی قرار بگیرد و از کادر بیرون نزند |
| فرم را درست کن | هنگام خالی‌بودن نام، پیام کنار همان فیلد دیده شود؛ ارسال واقعی اضافه نکن |
| سایت را کامل کن | دکمهٔ مشاوره در خانه به مسیر تماس موجود برود؛ متن خدمات و صفحه‌های دیگر تغییر نکنند |
پرامپت تمرینی برای پروژه‌ای که مشکل مربوط را دارد:
«در صفحهٔ تماس، حالت خالی نام را بررسی کن. اگر پیام روشن ندارد، پیام «نام را وارد کن» را کنار همان فیلد نشان بده. فرم همچنان دمو بماند؛ اتصال خارجی یا فیلد تازه اضافه نکن. صفحه‌های دیگر را تغییر نده. در پایان محل تغییر و سناریوی بررسی آن را بگو.»
این اصلاح در مقاله اجرا نشده است. پیش از ارسال، تأیید کن مشکل در نسخهٔ تو وجود دارد. بعد از پایان، همان ورودی و همان مسیر را دوباره بررسی کن؛ سپس مطمئن شو رفتارهای قبلی خراب نشده‌اند. اصلاح و بازیابی پروژه برای ادامهٔ این مرحله است.
اگر خروجی اشتباه بود یا گیر کردی، از کجا ادامه بدهی؟
برای دیدن همهٔ ستون‌ها، جدول را افقی جابه‌جا کن.
| نشانه | اقدام بعدی |
|---|---|
| پاسخ AI می‌گوید انجام شد، اما تغییری نمی‌بینی | صفحه و نسخهٔ درست را بررسی کن؛ رفتار مشاهده‌شده و نتیجهٔ مطلوب را دقیق بنویس |
| چند اصلاح پشت سر هم مشکل را مبهم‌تر کرده‌اند | ارسال را متوقف کن؛ آخرین وضعیت قابل قبول و اولین تغییر ناموفق را مشخص کن |
| فرم پیام موفقیت دارد اما چیزی دریافت نمی‌کنی | اتصال واقعی را جدا بررسی کن؛ پیام دمو را رسید ایمیل یا ثبت پایگاه داده ندان |
| درخواست هنوز در حال اجراست | وضعیت همان پروژه را دنبال کن؛ ساخت تازه را جای بررسی درخواست فعال نگذار |
| محدودیت اعتبار یا دسترسی میبینی | پیام و وضعیت حساب را بخوان؛ کوتاه‌کردن متن لزوماً محدودیت حساب را رفع نمی‌کند |
| باید از پشتیبانی کمک بگیری | شناسهٔ پروژه، زمان، متن خطا و قدم‌های تکرار را بفرست؛ رمز، کلید و دادهٔ مشتری لازم نیست |
برای آزمون‌های مربوط به نقش‌ها و داده، چک‌لیست دسترسی وب‌اپ را ببین. تمرین مقدماتی قرار نیست این بخش‌ها را با یک جملهٔ «امن باشد» تمام کند.
چه زمانی آمادهٔ انتشار و تمرین بعدی هستی؟
پیشنمایش قابل استفاده با نسخهٔ عمومیِ آماده یکی نیست. پیش از انتشار، محتوای نمونه، مقصد لینک‌ها، اتصال فرم، شرایط حساب و دادهٔ قابل مشاهده را بررسی کن. دکمهٔ «انتشار» را فقط برای گرفتن عکس آموزشی نزن؛ بعد از انتشار هم همان مسیر را روی لینک عمومی آزمایش کن. تفاوت پیشنمایش و انتشار چک‌لیست این مرحله را دارد.
برای پایان تمرین، یک یادداشت کوتاه بساز: «درخواست من چه بود؟ چه چیزی را دیدم؟ چه چیزی هنوز بررسی نشده؟ اصلاح بعدی چیست؟» اگر به این چهار سؤال جواب روشن می‌دهی، یک مهارت قابل تکرار یاد گرفته‌ای.
قدم بعد: همین تمرین را با اطلاعات نمونهٔ خودت انجام بده یا پرامپت زیر را برای پروژهٔ تازه تغییر بده. بعد فقط یک معیار جدید اضافه کن؛ مثلاً فیلتر خدمات یا یک حالت خطای روشن. هدف آموزش وایب کدینگ، هدایت بهتر و بررسی دقیق‌تر هر دور است، نه جمع‌کردن صفحه‌ها و امکانات بیشتر.
اگر هنوز نمی‌دانی چه چیزی را در نسخهٔ اول بسازی، راهنمای ساخت MVP با هوش مصنوعی کمک می‌کند فرضیه، جریان محدود و تصمیم دور بعد را پیش از کار با پنل مشخص کنی.
از خواندن به ساختن با کُنداتمرین اولت را با یک درخواست روشن شروع کن
برای پروژهٔ تازه، متن را با مسئله و معیار پذیرش خودت تغییر بده. برای اصلاح پروژهٔ موجود، در فورج همان پروژه بنویس. انتقال متن ساخت را شروع نمی‌کند.
کادر واقعی شروع کُندا؛ پیش از ارسال، ۳۰ مهر ۱۴۰۵ پرسش‌های پرتکرار
وایب کدینگ را از کجا شروع کنم؟
یک مسئلهٔ کوچک و معیار پذیرش روشن انتخاب کن. سپس درخواست را بنویس، خروجی را در پیشنمایش بررسی کن و هر بار یک اصلاح محدود بده. این راهنما همین چرخه را در پنل کُندا نشان می‌دهد.
برای آموزش Vibe Coding باید برنامه‌نویسی بلد باشم؟
برای شروع این تمرین لازم نیست همهٔ کد را بنویسی، اما باید تفاوت رابط، داده و انتشار را بفهمی و نتیجه را آزمایش کنی. دادهٔ حساس، پرداخت و مجوزها به بررسی فنی نیاز دارند.
آموزش وایب کدینگ رایگان است؟
خواندن این راهنما هزینهای ندارد. اجرای ساخت، اصلاح با AI و انتشار میتواند اعتبار یا شرایط حساب لازم داشته باشد. قیمت و ماندهٔ حساب را پیش از اقدام بررسی کن.
فورج و پیشنمایش چه فرقی دارند؟
در فورج گفتگو و درخواست تغییر را دنبال میکنی؛ در پیشنمایش رفتار خود پروژه را میبینی. در نمای گوشیِ ثبتشده، این دو زبانه جدا هستند.
اگر AI گفت انجام شد اما خروجی درست نبود چه کنم؟
صفحه و نسخهٔ درست را بررسی کن. نام صفحه، رفتار فعلی و نتیجهٔ مطلوب را بنویس؛ یک اصلاح محدود بخواه و همان سناریو را دوباره آزمایش کن.
آیا پروژهٔ این آموزش از نو ساخته شده است؟
نه. داشبورد و یک پروژهٔ نمونهٔ موجود در ۳۰ مهر ۱۴۰۵ بازبینی و تصویربرداری شدند. مسیر خانه تا تماس مشاهده شد؛ ساخت، اصلاح با AI، ارسال فرم یا انتشار تازه انجام نشد.
منابع
- اولین پروژه در کُندا (۲٬۰۲۶)
- راهنمای محیط کار کُندا (۲٬۰۲۶)
- اصلاح و بازیابی پروژه (۲٬۰۲۶)
- دانش پروژه (۲٬۰۲۶)
- اعتبار و ماندهٔ حساب (۲٬۰۲۶)
- پرامپت‌نویسی در مستندات رسمی Lovable (۲٬۰۲۶)
بنیان‌گذار کُندا و راوی تجربهٔ ساخت.
