۳۰ پرامپت Vibe Coding برای کپی کردن (برگه تقلب)

بهترین پرامپت‌های vibe coding کوتاه، دقیق و درباره رفتار هستند: چه کسی از اپ استفاده می‌کند، چه کاری می‌تواند انجام دهد، چه چیزی را نگه می‌دارد و ظاهرش چطور است. در ادامه ۳۰ پرامپت آماده کپی و پیست را می‌بینید که بر اساس مرحله‌ای که در آن هستید دسته‌بندی شده‌اند، از ساخت اولیه تا انتشار. بخش‌های داخل [کروشه] را با جزئیات خودتان جایگزین کنید.

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

چطور از این برگه استفاده کنید

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

پرامپت‌های ساخت اولیه

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

۱. یک ردیاب ساده

یک ردیاب [عادت] برایم بساز. می‌توانم یک [عادت] را با نام و رنگ اضافه کنم، روزی یک بار تیکش بزنم و یک شبکه ۳۰ روزه و شمارش روزهای پیاپی فعلی‌ام را ببینم. همه چیز را ذخیره کن تا بعد از رفرش هم باقی بماند. طراحی تمیز و مینیمال که روی گوشی کار کند.

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

یک صفحه رزرو برای [آرایشگاه زنانه] من بساز. مشتری‌ها یک خدمت ([کوتاهی ۳۰ دقیقه، رنگ ۹۰ دقیقه]) و یک تاریخ و یک بازه زمانی آزاد بین [۹:۰۰ تا ۱۸:۰۰] را انتخاب می‌کنند و بعد نام، شماره تلفن و ایمیل را وارد می‌کنند. دو نفر نباید یک بازه را هم‌زمان رزرو کنند. به یک صفحه مدیریت خصوصی پشت ورود نیاز دارم که رزروهای آینده را به تفکیک روز فهرست کند.

۳. یک ابزار داخلی

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

۴. صفحه فرود با لیست انتظار

یک وب‌سایت یک‌صفحه‌ای برای [محصول من: اپ برنامه‌ریزی غذایی برای والدین شلوغ] بساز. بخش اصلی با عنوان، یک زیرعنوان یک‌جمله‌ای و ثبت‌نام با ایمیل. بعد سه مزیت، یک بخش کوتاه «چطور کار می‌کند» و یک FAQ. ایمیل‌های ثبت‌نام را در یک پایگاه داده ذخیره کن و فهرست را در یک صفحه مدیریت خصوصی به من نشان بده.

۵. پورتال مشتری

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

۶. ماشین‌حساب یا ابزار قیمت‌گذاری

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

پرامپت‌های برنامه‌ریزی

پیش از یک ویژگی بزرگ، یا هر وقت مطمئن نیستید چطور چیزی را توصیف کنید، از این‌ها استفاده کنید.

۷. قبل از ساختن برنامه‌ریزی کن

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

۸. یک ایده آشفته را به نسخه اول تبدیل کن

ایده من این است: [یادداشت‌ها را بچسبانید]. کوچک‌ترین نسخه اولیه‌ای را که هنوز مفید است در ۵ تا ۸ نکته پیشنهاد کن. فهرست کن چه چیزهایی را برای بعد می‌گذاری و دلیلش چیست.

۹. بپرس چه چیزی کم است

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

۱۰. اول یک تغییر بزرگ را بررسی کن

می‌خواهم [حساب‌های تیمی که چند نفر یک فضای کاری مشترک دارند] را اضافه کنم. توضیح بده در داده، صفحه‌ها و دسترسی‌ها چه چیزی باید تغییر کند و چه چیزی ممکن است خراب شود. هنوز چیزی را تغییر نده.

پرامپت‌های طراحی

۱۱. یک سبک روشن تعیین کن

ظاهر اپ را عوض کن: پس‌زمینه سفید گرم، متن تیره، یک رنگ تأکیدی [#1F6F50]، گوشه‌های گرد، فاصله‌گذاری باز و یک فونت sans-serif مدرن. چیدمان و هر ویژگی را دقیقاً همان‌طور که هستند نگه دار.

۱۲. حس یک مرجع را کپی کن

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

۱۳. چیدمان گوشی را درست کن

روی گوشی با عرض ۳۷۵ پیکسل، جدول [صفحه سفارش‌ها] به‌صورت افقی اسکرول می‌شود و دکمه‌ها روی هم می‌افتند. هر ردیف را در صفحه‌های کوچک به یک کارت عمودی تبدیل کن. چیدمان دسکتاپ را تغییر نده.

۱۴. حالت‌های خالی، بارگذاری و خطا

حالت‌های مناسب به [فهرست پروژه‌ها] اضافه کن: یک حالت خالی دوستانه با دکمه افزودن اولین پروژه، یک اسکلت بارگذاری هنگام گرفتن داده، و یک پیام روشن با دکمه تلاش دوباره اگر بارگذاری شکست خورد.

۱۵. پشتیبانی از راست‌به‌چپ

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

پرامپت‌های داده و ویژگی

۱۶. داده را ماندگار کن

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

۱۷. ورود اضافه کن

ثبت‌نام و ورود با ایمیل و رمز عبور اضافه کن. هر کاربر فقط [ورودی‌های] خودش را ببیند و ویرایش کند. ایمیل کاربر را در نوار بالا نشان بده و یک دکمه خروج داشته باشد.

۱۸. نقش اضافه کن

دو نقش اضافه کن: مدیر و عضو. مدیرها می‌توانند [محصولات] را اضافه، ویرایش و حذف کنند؛ اعضا فقط می‌توانند ببینند. این را روی سرور اعمال کن، نه فقط با پنهان کردن دکمه‌ها.

۱۹. جستجو و فیلتر اضافه کن

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

۲۰. آپلود فایل اضافه کن

به کاربران اجازه بده تا [۵] تصویر به هر [آگهی] پیوست کنند، هر کدام حداکثر [۵ مگابایت]. تصویر کوچک را روی آگهی و نمای بزرگ‌تر را با کلیک نشان بده. فقط صاحب آگهی بتواند تصاویرش را حذف کند.

۲۱. از یک صفحه گسترده وارد کن

یک دکمه Import اضافه کن که یک CSV با ستون‌های [نام، ایمیل، تلفن، یادداشت] را بگیرد، پیش‌نمایش ۱۰ ردیف اول را نشان دهد و اجازه دهد قبل از ذخیره تأیید کنم. ردیف‌های بدون ایمیل را رد کن و تعداد ردیف‌های ردشده را به من بگو.

پرامپت‌های رفع خطا

۲۲. یک خطا را روشن گزارش کن

وقتی روی [Save در فرم ویرایش کلیک می‌کنم]، «[متن دقیق خطا]» را می‌بینم و تغییر ذخیره نمی‌شود. انتظار دارم تغییر ذخیره شود و به فهرست برگردم. علت را پیدا کن، در یک یا دو جمله توضیح بده، بعد درستش کن.

۲۳. یک حلقه رفع خطا را متوقف کن

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

۲۴. اثرات جانبی را برگردان

آخرین تغییرت انتخاب‌گر تاریخ را درست کرد، اما [نوار کناری] ناپدید شد. نوار کناری را دقیقاً مثل قبل برگردان و رفع انتخاب‌گر تاریخ را نگه دار.

۲۵. قبل از تغییر توضیح بده

الان [مجموع پرداخت] چطور محاسبه می‌شود، گام به گام و با اشاره به فایل‌های درگیر توضیح بده. هیچ چیزی را تغییر نده.

پرامپت‌های آزمایش و بازبینی

۲۶. حالت‌های مرزی

۱۰ راهی را فهرست کن که یک کاربر واقعی می‌تواند [فرم رزرو] را خراب کند: فیلدهای خالی، متن خیلی بلند، کلیک‌های دوبار پشت هم، دو نفر هم‌زمان، منطقه زمانی اشتباه. هر کدام را آزمایش کن و آنچه شکست می‌خورد را درست کن. بگو چه تغییری داده‌ای.

۲۷. تغییرات اخیر را خلاصه کن

هر تغییری را که در [پنج] قدم گذشته داده‌ای با کلمات ساده خلاصه کن و هر چیزی را که ممکن است روی داده‌های موجود اثر بگذارد علامت بزن.

پرامپت‌های امنیتی

این‌ها را با صفحه ما درباره آیا vibe coding امن است؟ همراه کنید.

۲۸. دسترسی به داده را بررسی کن

کد سرور را بررسی کن: آیا یک کاربر واردشده می‌تواند با تغییر یک شناسه در درخواست، [رکوردهای] کاربر دیگری را بخواند یا تغییر دهد؟ نشان بده دسترسی کجا بررسی می‌شود و هر شکافی را برطرف کن.

۲۹. کلیدهای افشا‌شده را بررسی کن

هر کلید API، رمز عبور یا توکنی را که این اپ استفاده می‌کند فهرست کن و بگو هر کدام کجا ذخیره شده است. مطمئن شو هیچ‌کدام در کدی که در مرورگر اجرا می‌شود یا در فایل‌های commit شده نیستند. اگر هستند، به secrets منتقلشان کن.

پرامپت‌های انتشار

۳۰. بازبینی پیش از راه‌اندازی

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

پرامپت‌هایی که بهتر است استفاده نکنید

برخی پرامپت‌ها به‌طور قابل پیش‌بینی نتیجه بدتری می‌دهند:

• «بهترش کن.» بهتر یعنی چه؟ صفحه و تغییر را نام ببرید.
• «همه چیز را درست کن.» هوش مصنوعی خیلی چیزها را عوض می‌کند و شما نمی‌دانید چه چیزی جابه‌جا شده.
• «از [کتابخانه] و [فریم‌ورک] و [الگو] استفاده کن.» مگر دلیل خاصی داشته باشید، رفتار را توصیف کنید و بگذارید ابزار پشته را انتخاب کند.
• «این کلید API من است: …» هرگز رمز یا کلید را در چت نچسبانید. از تنظیمات secrets ابزار استفاده کنید.
• ده ویژگی در یک پیام. آن‌ها را تقسیم کنید.

تبدیل پرامپت‌ها به عادت

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

اگر برای پرامپت اول گیر کرده‌اید، مولد پرامپت اپ رایگان یک ایده یک‌خطی را به یک پرامپت شروع کامل‌تر تبدیل می‌کند. و برای دیدن نتیجه این پرامپت‌ها در عمل، نمونه‌های vibe coding ما را بخوانید، یا پرامپت شماره ۱ را در AI app builder بچسبانید و کروشه‌ها را با ایده خودتان عوض کنید.

پرسش‌ها