طراحی رابط کاربری و هوش مصنوعی
کتابخانه پرامپت طراحی UI؛ الگوهای آماده برای رابطهای واقعی
این صفحه مجموعهای از خلاصههای طراحی قابل کپی برای داشبورد، لندینگ، موبایل، ورود، قیمتگذاری و تنظیمات است. مهمتر از خود نمونهها، روشی است که کمک میکند پرامپتهای موفق را ذخیره، شخصیسازی و در پروژههای بعدی دوباره استفاده کنید.
کتابخانه پرامپت طراحی چیست؟
پرامپت طراحی در عمل یک brief کوتاه است: میگوید چه صفحهای برای چه کاربری ساخته میشود، چه الگوها و کامپوننتهایی لازماند و خروجی باید از چه محدودیتهایی پیروی کند. کتابخانه پرامپت، نسخههای موفق این briefها را بر اساس نوع صفحه نگه میدارد تا هر بار از یک صفحه سفید شروع نکنید.
ارزش کتابخانه فقط در سرعت کپیکردن نیست. وقتی فاصلهگذاری، تایپوگرافی، رفتار موبایل و حالتهای رابط را در الگوهای ثابت ثبت میکنید، صفحههای مختلف یک محصول کمتر از هم فاصله میگیرند. بااینحال، هیچ پرامپتی بدون داده واقعی، متن محصول و بازبینی طراح آماده انتشار نیست.
روش «پیشفرض ← محدودیت ← اصلاح جزئی»
ابتدا نوع صفحه و زبان طراحی را در یک جمله روشن نام ببرید. سپس سه تا شش تصمیم مهم را از حالت حدس خارج کنید: اجزای صفحه، الگوی ناوبری، سیستم بصری، تراکم، پلتفرم و چیزی که نباید تولید شود. پس از دیدن خروجی، فقط تغییر تازه را درخواست کنید؛ بازنویسی کامل brief معمولاً ویژگیهای خوب نسخه قبلی را هم از بین میبرد.
| مرحله | نمونه | هدف |
|---|---|---|
| پیشفرض | داشبورد تحلیلی آرام برای محصول B2B | تعیین نوع صفحه و جهت کلی |
| محدودیت | نوار کناری، چهار KPI، جدول چسبان، یک accent | کاهش تصمیمهای حدسی |
| پرهیز | بدون گرادیان، تصویر تزئینی و سایه سنگین | حذف کلیشههای نامرتبط |
| دلتا | همان صفحه، اما ردیفها متراکمتر و فیلتر sticky باشد | اصلاح کنترلشده نسخه موجود |
الگوهای رابط را با نام دقیق بنویسید: «master-detail»، «نوار تب پایین»، «هدر جدول چسبان»، «stepper» یا «فرمان جستوجو». عبارت «ناوبری را بهتر کن» معیار مشخصی برای طراحی ایجاد نمیکند.
بلوک زمینهای که بالای همه پرامپتها میآید
در ابزارهای کدنویسی، مسیر فایلها و کامپوننتهای واقعی پروژه را نیز بدهید. در ابزارهای بصری، مرجع تصویری میتواند ریتم و ساختار را روشن کند؛ اما لوگو، متن و هویت بصری یک برند دیگر نباید کپی شود.
کتابخانه پرامپتهای آماده طراحی UI
عبارتهای داخل کروشه را با اطلاعات محصول خود جایگزین کنید. هر نمونه را همراه بلوک زمینه بالا بفرستید.
۱. داشبورد و تحلیل
۲. صفحه فرود
۳. صفحه اصلی اپلیکیشن موبایل
۴. ثبتنام و ورود اولیه
۵. بخش Hero
۶. صفحه قیمتگذاری
۷. صفحه تنظیمات
۸. ایمیل تراکنشی
دو افزونه که کیفیت خروجی را بالا میبرند
افزونه حالتها و دسترسپذیری
پرامپت بازبینی نهایی
چطور کتابخانه خودتان را بسازید؟
- نسخه موفق را همانطور که اجرا شده ذخیره کنید. پاکسازی زودهنگام ممکن است محدودیت مؤثر را حذف کند.
- اطلاعات پروژه را با کروشه جایگزین کنید. بخش ثابت باید تصمیم طراحی باشد، نه نام مشتری.
- بر اساس نوع صفحه دستهبندی کنید. داشبورد، قیمتگذاری و ورود پیدا کردن را آسانتر از دستههایی مانند «مدرن» میکنند.
- بانک پرهیزها بسازید. کلیشهها و خطاهای تکرارشونده هر ابزار را ثبت کنید.
- پرامپتهای اصلاح جزئی را نگه دارید. تغییر تراکم، ناوبری موبایل یا کنتراست قابل استفاده مجدد است.
- نتیجه را همراه پرامپت ذخیره کنید. تصویر یا لینک نسخه و یادداشت آزمون مشخص میکند الگو واقعاً کجا موفق بوده است.
- نسخه و تاریخ ثبت کنید. تغییر مدل یا runtime میتواند خروجی همان متن را عوض کند.
برای یادگیری مبانی نوشتن brief، راهنمای پرامپتنویسی طراحی رابط کاربری را بخوانید. اگر به نمونههای عمومیتر نیاز دارید، مقاله پرامپتهای طراحی UI/UX مراحل تحقیق، وایرفریم و بازبینی را پوشش میدهد. خروجیهای ساختهشده را نیز میتوانید در گالری ThinkFlow ببینید.
چه چیزهایی را نباید به مدل واگذار کرد؟
- مدل بدون تحقیق، نیاز واقعی کاربر و اولویت کسبوکار را نمیداند.
- متن، قیمت، آمار، لوگوی مشتری و شواهد اعتماد باید واقعی و مجاز باشند.
- کد تولیدشده به تست امنیت، عملکرد، مرورگر و دسترسپذیری نیاز دارد.
- مرجع تصویری مجوز کپی لوگو، دارایی یا هویت یک برند دیگر نیست.
- رابط فروشگاه، پرداخت یا احراز هویت تا زمان اتصال backend عملیاتی محسوب نمیشود.
پرسشهای متداول
کتابخانه پرامپت طراحی UI چیست؟
مجموعهای نسخهبندیشده از briefهای قابل استفاده مجدد است که بر اساس نوع صفحه دستهبندی میشوند و پیشفرضها، اجزا، محدودیتها و معیار بازبینی هر رابط را نگه میدارند.
چه چیزی یک پرامپت طراحی UI را کاربردی میکند؟
نامبردن نوع صفحه و الگوی رابط، تعیین اجزای دقیق، سیستم بصری، پلتفرم، حالتهای خالی و خطا، دسترسپذیری و مواردی که باید از آنها پرهیز شود. ویژگی مشخص از صفتهایی مانند «مدرن و زیبا» مفیدتر است.
آیا این پرامپتها در همه ابزارها کار میکنند؟
منطق اصلی قابل انتقال است، اما قالب خروجی و واژگان باید با ابزار هماهنگ شود. ابزار کدنویسی به stack و فایلهای پروژه نیاز دارد و ابزار ماکت بیشتر از مرجع تصویری و شرح چیدمان استفاده میکند.
چرا خروجی رابط هوش مصنوعی عمومی به نظر میرسد؟
درخواست کلی تصمیمهای زیادی را به مدل واگذار میکند. مشخصکردن نوع صفحه، الگوهای نامدار، داده واقعی، حالتها و چند محدودیت سخت فضای حدسزدن را کاهش میدهد.
منبع و روش تدوین
این مقاله با الهام از نوشته UI Design Prompts: A Copy-Paste Library for Real Interfaces (2026) اثر Jason Zhou در Superdesign، منتشرشده در ۱۳ ژوئیه ۲۰۲۶، تدوین شده است. تیم هوش عمیق متن را برای مخاطب فارسی بازنویسی کرده و بلوک زمینه، حالتهای رابط، دسترسپذیری، پرامپت بازبینی، نسخهبندی و محدودیتهای پیادهسازی را به نمونهها افزوده است. تاریخ دسترسی: ۱۶ مرداد ۱۴۰۵.
مطالب مرتبط
یک الگو را انتخاب و با محصول خودتان کامل کنید
نوع صفحه، کاربر، اجزای ضروری و محدودیتها را جایگزین کروشهها کنید. سپس نتیجه را در ThinkFlow بسازید، پیشنمایش را بررسی کنید و اصلاحها را بهصورت مرحلهای ادامه دهید.