طراحی سایت و پرامپت‌نویسی
پرامپت طراحی سایت؛ ۱۲ نمونهٔ کاربردی برای چیدمان، محتوا و UX
این گزیده از پرامپت‌های طراحی سایت، نمونه‌هایی برای ساختار صفحه، رابط کاربری، محتوا، دسترس‌پذیری و عملکرد دارد. هر الگو را با هدف واقعی سایت، اطلاعات تأییدشده و محدودیت‌های پروژهٔ خود کامل کنید.
چرا جزئیات پرامپت در طراحی وب مهم است؟
پرامپتی مثل «یک سایت برایم بساز» دربارهٔ مخاطب، هدف صفحه، بخش‌های لازم، فناوری یا شکل خروجی چیزی نمی‌گوید. در مقابل، درخواست دقیق‌تر به ابزار کمک می‌کند بفهمد چه چیزی باید پیشنهاد دهد و چه چیزهایی را نباید حدس بزند. نتیجه همچنان پیش‌نویس است و لازم است آن را با محتوای واقعی و نیاز کاربر بسنجید.
پنج اصل برای نوشتن پرامپت مؤثرتر
- از فعل روشن استفاده کنید: بگویید «طرح کلی را مشخص کن»، «کد را بازبینی کن» یا «دو گزینه پیشنهاد بده»؛ نه صرفاً «کمک کن».
- زمینه بدهید: دربارهٔ محصول، مخاطب، محتوای واقعی و محدودیت‌های پروژه توضیح دهید. اگر نمونه یا کد موجود دارید، فقط بخش مرتبط و مجاز را ضمیمه کنید.
- دقیق باشید: نام بخش‌ها، رفتار مورد انتظار، نوع خروجی و اندازه‌های هدف را مشخص کنید؛ ترجیحاً یک صفحه یا جزء را در هر بار.
- کار پیچیده را خرد کنید: ابتدا ساختار، بعد طراحی، سپس پیاده‌سازی و بازبینی؛ درخواست تولید کل سایت در یک گام، اصلاح خطاها را دشوار می‌کند.
- نمونه و معیار بدهید: یک مرجع بصری یا نمونهٔ محتوا نشان دهید و توضیح دهید چه ویژگی آن برای پروژه مناسب است. نمونه را عیناً کپی نخواهید.
گزیدهٔ پرامپت‌های چیدمان و رابط کاربری
نمونه‌های زیر از ایده‌های متن ارسالی انتخاب و با تغییر عبارت و محدودیت‌ها بازنویسی شده‌اند. واژه‌های داخل کروشه را با مشخصات پروژه جایگزین کنید.
۱. ساختار صفحهٔ اصلی واکنش‌گرا
۲. نوار ناوبری موبایل
۳. شبکهٔ واکنش‌گرا با اولویت موبایل
۴. ساخت یک کامپوننت HTML و CSS
پرامپت‌های منتخب برای محتوا و تجربهٔ کاربری
۵. الگوی مقالهٔ وبلاگ
۶. صفحهٔ معرفی کسب‌وکار
۷. فرم تماس با اعتبارسنجی
۸. ارزیابی یک صفحهٔ فرود
پرامپت‌های دسترس‌پذیری، امنیت و عملکرد
۹. پیشنهاد پالت رنگ و کنتراست
۱۰. چک‌لیست بازبینی دسترس‌پذیری
۱۱. بررسی عملکرد و Core Web Vitals
۱۲. راهبرد بهینه‌سازی تصاویر
دو نمونهٔ دیگر از ایده‌های پیش‌نویس—چک‌لیست امنیت و توکن‌های یک سیستم طراحی—را می‌توان به همین شکل برای مسئلهٔ مشخص پروژه نوشت. آن‌ها را اینجا به فهرست اضافه نکرده‌ام تا مقاله روی پرامپت‌های مستقیم‌ترِ طراحی سایت و ارزیابی صفحه متمرکز بماند.
از نسخهٔ اول تا بازبینی: پالایش مرحله‌ای
بعد از ساخت پیش‌نویس، به‌جای تکرار «بهترش کن»، یک تغییر محدود درخواست کنید: «در نسخهٔ موبایل، ترتیب خدمات را بر اساس اطلاعات این بریف عوض کن» یا «فرم را با متن‌های واقعی و پیام خطاهای مشخص بازنویسی کن». سپس تغییر را در صفحه بررسی کنید و اگر مسئله‌ای باقی است، آن را در دور بعد جداگانه مطرح کنید.
برای استفادهٔ تکراری، پرامپت‌هایی را که در پروژه مفید بوده‌اند با نام پروژه، هدف، ورودی لازم، خروجی مورد انتظار و تاریخ آخرین بازبینی ذخیره کنید. آن‌ها را الگوی قابل ویرایش بدانید، نه دستور تضمین‌شده؛ کیفیت پاسخ به مدل، زمینه و صحت اطلاعات ورودی هم بستگی دارد.
محدودیت‌ها و منبع
نمونه‌ها نقطهٔ شروع هستند، نه پرامپت‌های آزمایش‌شده یا تضمین کیفیت. پیشنهاد دسترس‌پذیری، امنیت، سئو و عملکرد باید با ابزار مناسب، دادهٔ واقعی و بازبینی متخصص سنجیده شود. برای تعریف شاخص‌های Core Web Vitals از مستند web.dev استفاده کنید؛ نسخهٔ جاری این شاخص‌ها شامل LCP، INP و CLS است و خروجی مدل جای اندازه‌گیری صفحه را نمی‌گیرد. پیش‌نویس ارسالی، HubSpot و Builder.io را به‌عنوان منابع الهام نام می‌برد اما لینک و مشخصات دقیق مطالب را ندارد؛ به همین دلیل در این نسخه آمار، نقل‌قول Reddit، مقایسهٔ ابزارها و ادعای وابسته به آن منابع نیامده است. مثال‌ها بازنویسی گزیده‌ای از همان پیش‌نویس‌اند.
مطالب مرتبط
- نمونهٔ پرامپت خوب و بد طراحی سایت و روش اصلاح درخواست
- کتابخانهٔ پرامپت طراحی UI بر اساس نوع صفحه
- راهنمای استفاده از ThinkFlow و نمونه‌های زندهٔ وب‌سایت‌های گالری.
جمع‌بندی
یک پرامپت خوب، هدف و زمینهٔ کافی دارد، محدوده‌اش روشن است و خروجی آن امکان بازبینی دارد. از نمونه‌های این راهنما شروع کنید، جزئیات پروژه را جای‌گذاری کنید و پیش از استفاده یا انتشار، نتیجه را با نیاز واقعی مخاطب بسنجید.
دیدن نمونه‌های زندهٔ ThinkFlow