نمونه‌های vibe coding: ۱۰ نوع اپ واقعی، پرامپت‌ها و آنچه خراب شد

رایج‌ترین نمونه‌های vibe coding اپ‌های وب کوچک و مفیدند: ردیاب‌ها، صفحه‌های رزرو، ابزارهای داخلی، پرتال مشتری، صفحه‌های فرود، آزمون‌ها، داشبوردها و ابزارهای ساده‌ی هوش مصنوعی. در ادامه ده تا از آن‌ها را می‌بینید. برای هر کدام می‌خوانید چه کسی می‌سازدش، پرامپت اول چیست، معمولاً چه چیزی خراب می‌شود و پرامپت بعدی که درستش می‌کند کدام است.

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

۱. ردیاب بودجه‌ی شخصی

چه کسی می‌سازد: افرادی که صفحه‌گسترده را امتحان کرده و رهایش کرده‌اند.

پرامپت اول:

یک ردیاب بودجه‌ی ماهانه بساز. هزینه‌ها را با مبلغ، دسته (غذا، اجاره، حمل‌ونقل، تفریح، سایر)، تاریخ و یادداشت اضافه می‌کنم. مجموع این ماه را برای هر دسته در یک نمودار میله‌ای و فهرست هزینه‌های اخیر را نشان بده. می‌توانم برای هر دسته بودجه تعیین کنم و ببینم چقدر مانده است.

چه چیزی خراب شد: نمودار همه‌ی هزینه‌هایی را که تا حالا وارد شده بود می‌شمرد، نه فقط این ماه را، پس در ماه دوم همه‌ی دسته‌ها بیش از بودجه به نظر می‌آمدند. همچنین مبلغ‌هایی که با ویرگول تایپ می‌شدند («1,200») به‌صورت 1 ذخیره می‌شدند.

پرامپت اصلاح:

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

درس: «این ماه» یک قاعده است. قاعده‌ها را بلند بگویید.

۲. صفحه‌ی رزرو برای یک سالن کوچک

چه کسی می‌سازد: صاحبان کسب‌وکار کوچک که از رزرو با تلفن و دایرکت خسته شده‌اند.

پرامپت اول:

یک صفحه‌ی رزرو برای سالنم بساز. مشتری یک خدمت، یک تاریخ و یک ساعت خالی را انتخاب می‌کند، بعد نام و تلفن را وارد می‌کند. من یک صفحه‌ی مدیریت خصوصی، پشت ورود، دارم که رزروها را به تفکیک روز نشان می‌دهد.

چه چیزی خراب شد: دو مشتری با فاصله‌ی کمتر از یک دقیقه ساعت ۱۰:۰۰ را رزرو کردند، چون صفحه فقط هنگام اولین بارگذاری آزاد بودن را بررسی می‌کرد. یک رزرو رنگ ۹۰ دقیقه‌ای هم ساعت‌های بعد از خودش را مسدود نمی‌کرد.

پرامپت اصلاح:

وقتی مشتری رزرو را ثبت می‌کند، روی سرور بررسی کن که همه‌ی ساعت‌هایی که پوشش می‌دهد هنوز آزادند، و اگر نبودند با «این ساعت همین حالا گرفته شد» ردش کن. هر خدمت کل مدت خودش را مسدود می‌کند، پس رزرو ۹۰ دقیقه‌ای ساعت ۱۰:۰۰، ساعت‌های ۱۰:۰۰، ۱۰:۳۰ و ۱۱:۰۰ را می‌بندد.

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

۳. منوی رستوران با کد QR

چه کسی می‌سازد: صاحبان کافه و رستوران که زیاد منو را دوباره چاپ می‌کنند.

پرامپت اول:

یک وب‌سایت منوی موبایلی برای کافه‌ام بساز. بخش‌های صبحانه، ناهار، نوشیدنی و دسر، هر قلم با نام، قیمت، توضیح کوتاه و برچسب‌های رژیمی (گیاهی، بدون گلوتن). یک صفحه‌ی مدیریت برای ویرایش اقلام و علامت‌گذاری «تمام شد» می‌خواهم. یک کد QR قابل چاپ نشان بده که به منو لینک شود.

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

پرامپت اصلاح:

عکس‌های منو سنگین‌اند. تصاویر آپلودشده را حداکثر به عرض ۸۰۰ پیکسل تغییر اندازه بده، فشرده کن و هنگام اسکرول بازدیدکننده تنبل (lazy) بارگذاری کن.

درس: روی اتصال کند تست کنید، نه فقط در دفتر خودتان.

۴. ردیاب تجهیزات یا موجودی انبار برای یک تیم

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

پرامپت اول:

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

چه چیزی خراب شد: تاریخچه به‌جای نام‌ها «کاربر ۳» نشان می‌داد، و کم کردن بیشتر از موجودی باعث می‌شد تعداد منفی شود.

پرامپت اصلاح:

در تاریخچه نام شخص را نشان بده، نه شناسه‌اش را. اجازه نده کاهشی که تعداد را زیر صفر ببرد انجام شود؛ به‌جایش «فقط ۴ عدد موجود است» نشان بده.

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

۵. پرتال مشتری برای یک فریلنسر یا استودیو

چه کسی می‌سازد: طراحان، حسابداران، مشاوران و آژانس‌ها.

پرامپت اول:

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

چه چیزی خراب شد: این مهم‌ترین خطای فهرست است. صفحه‌ها فقط پروژه‌های خود هر مشتری را نشان می‌دادند، اما سرور هر پروژه‌ای را برمی‌گرداند اگر عدد را در نوار آدرس عوض می‌کردید. گشتن در صفحه‌ها به‌عنوان یک مشتری هرگز این را آشکار نکرد.

پرامپت اصلاح:

هر مسیر سروری را که پروژه، فایل، نظر یا فاکتور برمی‌گرداند بررسی کن. هرکدام باید تأیید کند مشتری واردشده مالک رکورد است، وگرنه «پیدا نشد» برگرداند. بعد تست کن: به‌عنوان مشتری A وارد شو و سعی کن پروژه‌ی مشتری B را با شناسه‌اش باز کنی.

درس: پنهان کردن چیزی روی صفحه با محافظت از آن یکی نیست. بیشتر در آیا vibe coding امن است؟

۶. صفحه‌ی لانچ با لیست انتظار

چه کسی می‌سازد: بنیان‌گذارانی که پیش از ساختن، ایده را می‌آزمایند.

پرامپت اول:

یک صفحه‌ی فرود برای اپی بساز که به مدرس‌ها کمک می‌کند کلاس‌ها را زمان‌بندی و پول را دریافت کنند. تیتر اصلی، زیرعنوان، ثبت‌نام با ایمیل، سه مزیت، بخش نحوه‌ی کار و سؤالات متداول. ثبت‌نام‌ها را با تاریخ در پایگاه داده ذخیره کن و بگذار از یک صفحه‌ی خصوصی به‌صورت CSV دانلودشان کنم.

چه چیزی خراب شد: ظرف چند روز فهرست از ثبت‌نام‌های بی‌ارزش ربات‌ها پر شد، و صفحه عنوان و توضیحی نداشت، پس لینک‌های اشتراک‌گذاشته‌شده پیش‌نمایش خالی نشان می‌دادند.

پرامپت اصلاح:

به فرم ثبت‌نام حفاظت ساده در برابر ربات اضافه کن (یک فیلد مخفی honeypot و محدودیت ۵ ثبت‌نام در ساعت برای هر IP). عنوان صفحه، meta description و یک تصویر برای اشتراک‌گذاری در شبکه‌های اجتماعی اضافه کن.

درس: فرم عمومی پیدا می‌شود. ساخت صفحه‌ی لیست انتظار را ببینید.

۷. اپ آزمون برای یک معلم

چه کسی می‌سازد: معلم‌ها و مربیانی که چیزی سبک‌تر از LMS می‌خواهند.

پرامپت اول:

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

چه چیزی خراب شد: پاسخ‌های درست همراه سؤال‌ها به مرورگر فرستاده می‌شدند، پس یک دانش‌آموز کنجکاو می‌توانست آن‌ها را در سورس صفحه بخواند. دانش‌آموزان همچنین می‌توانستند تا رسیدن به ۱۰۰٪ دوباره ارسال کنند.

پرامپت اصلاح:

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

درس: مرورگر مال کاربر است. هر چیزی در آن قابل خواندن است.

۸. یک ابزار کوچک هوش مصنوعی

چه کسی می‌سازد: بازاریاب‌ها، نویسنده‌ها و بنیان‌گذارانی که یک دستیار هوش مصنوعی متمرکز می‌خواهند.

پرامپت اول:

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

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

پرامپت اصلاح:

فراخوانی هوش مصنوعی را به سرور ببر. کلید API را به‌عنوان secret نگه دار، هرگز در کد فرانت‌اند. هر بازدیدکننده را به ۲۰ تولید در روز محدود کن.

درس: کلیدها در secretهای سمت سرور جا دارند. نگه‌داری امن کلیدهای API و افزودن قابلیت‌های هوش مصنوعی به اپ را ببینید.

۹. وب‌سایت کسب‌وکار عربی و انگلیسی

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

پرامپت اول:

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

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

پرامپت اصلاح:

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

درس: راست‌به‌چپ یک چیدمان است، نه یک تراز. Mythex عربی و دیگر چیدمان‌های راست‌به‌چپ را پشتیبانی می‌کند و می‌توانید مستقیم به عربی پرامپت بدهید.

۱۰. ردیابی که به اپ موبایل تبدیل می‌شود

چه کسی می‌سازد: مربی‌ها، باشگاه‌ها و گروه‌های اجتماعی که کاربرانشان روی گوشی زندگی می‌کنند.

پرامپت اول:

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

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

پرامپت اصلاح:

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

درس: اگر مردم روی گوشی از آن استفاده می‌کنند، اول برای گوشی طراحی کنید. در Mythex Pro، اپ منتشرشده بعد می‌تواند به یک اپ اندروید برای Google Play و یک اپ آیفون برای ارسال به TestFlight تبدیل شود؛ اپ موبایل اپ منتشرشده شما را باز می‌کند، پس هر Publish آن را به‌روز می‌کند. صفحه‌ی اپ‌ساز موبایل را ببینید.

الگوهای پشت این نمونه‌ها

در هر ده نمونه، خطاها در چند گروه می‌گنجند:

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

خودتان یکی را امتحان کنید

نمونه‌ای را که به ایده‌تان نزدیک‌تر است انتخاب کنید، پرامپت اولش را کپی و جزئیات را عوض کنید. بعد پرامپت اصلاح را پیش از اشتراک‌گذاری به‌عنوان فهرست بازبینی به کار ببرید. برگه‌ی تقلب پرامپت‌های vibe coding ما ۳۰ پرامپت دیگر دارد، و ساخت اپ با vibe coding یک پروژه را از ایده تا اپ منتشرشده قدم‌به‌قدم می‌برد. وقتی آماده بودید، آن را در اپ‌ساز هوش مصنوعی شروع کنید یا برای شروعی سریع‌تر قالب‌ها را مرور کنید.

پرسش‌ها