راهنمای جامع نوشتن پرامپت‌های هوش مصنوعی برای طراحی رابط کاربری (UI) حرفه‌ای در سال ۲۰۲۶

چرا پرامپت خوب این‌قدر مهم است؟

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

جمله‌ای مثل «یک اپلیکیشن خوب طراحی کن» فضای زیادی برای حدس‌زدن باقی می‌گذارد. مدل هم ناچار است سراغ انتخاب‌های امن و عمومی برود. هرچه درباره کاربر، محتوا، حال‌وهوا و محدودیت‌های فنی روشن‌تر بنویسید، احتمال رسیدن به طرحی که واقعاً به درد پروژه بخورد بیشتر می‌شود.

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

برای تدوین این راهنما، نکته‌های مطرح‌شده در پژوهش‌های Nielsen Norman Group، چارچوب TC-EBC فیگما و راهنمای پرامپت‌نویسی v0 ورسل را کنار تجربه‌های عملی گذاشته‌ایم. هدف این نیست که یک فرمول خشک حفظ کنید؛ قرار است یاد بگیرید هنگام نوشتن پرامپت به چه چیزهایی فکر کنید.

چرا بیشتر رابط‌های کاربری تولیدشده با هوش مصنوعی عمومی و بی‌کیفیت هستند؟

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

۱. مشکل "چیدمان فرانکنشتاین"

پژوهشگران NN/g الگویی را شناسایی کرده‌اند که آن را «چیدمان فرانکنشتاین» می‌نامند. این وضعیت زمانی رخ می‌دهد که هوش مصنوعی اجزای نامرتبط را کنار هم قرار می‌دهد و صفحه‌ای می‌سازد که هر جزء آن آشناست، اما مجموعه نهایی هماهنگی ندارد؛ برای مثال، صفحه ورود موبایل با نوار کناری دسکتاپ، داشبوردی با تب‌های هم‌زمان در بالا و پایین یا صفحه محصولی با سه سبک متفاوت برای دکمه‌ها.

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

۲. چرا "تمیز و مدرن" بدترین پرامپت است؟

عبارت «تمیز و مدرن» به هوش مصنوعی می‌گوید که ترجیح طراحی مشخصی ندارید. مدل هم معمولاً با عمومی‌ترین انتخاب‌ها پاسخ می‌دهد: رنگ اصلی آبی، فونت ساده sans-serif، فاصله‌گذاری استاندارد و بدون هویت بصری متمایز.

تقریباً هر اپلیکیشنی می‌تواند خود را «تمیز و مدرن» بنامد. این عبارت به‌تنهایی اطلاعات کافی برای رسیدن به یک خروجی متمایز ارائه نمی‌دهد.

۳. سه دلیل رایج برای ضعیف‌شدن خروجی

خبر خوب این است که برای حل این مشکلات لازم نیست طراح حرفه‌ای باشید. کافی است اطلاعات درست را در زمان درست به مدل بدهید. چارچوب PROMPT دقیقاً برای همین کار ساخته شده است.

چارچوب PROMPT چیست؟

PROMPT یک چک‌لیست شش‌بخشی است. لازم نیست در هر درخواست، هر شش بخش را با جزئیات پر کنید؛ اما مرور آنها کمک می‌کند نکته مهمی از قلم نیفتد.

P — Platform & Device (پلتفرم و دستگاه)

چه بنویسیم؟ مشخص کنید خروجی برای iOS، Android یا وب است و در چه اندازه یا دستگاهی دیده می‌شود.

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

مثال‌ها:

اپلیکیشن iOS برای آیفون ۱۶

اپلیکیشن Android با پیروی از Material Design 3

داشبورد وب برای دسکتاپ (عرض ۱۴۴۰ پیکسل)

برنامه وب واکنش‌گرا، ابتدا برای موبایل

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

R — Role & User (نقش و کاربر)

چه بنویسیم؟ بگویید چه کسی از صفحه استفاده می‌کند، دنبال انجام چه کاری است و در چه موقعیتی قرار دارد.

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

مثال‌ها:

مورد استفاده طراح فریلنسر که مهلت‌های پروژه و فاکتورهای مشتری را پیگیری می‌کند

برای والدینی پرمشغله که در زمان ناهار سریع مواد غذایی سفارش می‌دهند

برای کاربری که به‌تازگی اپلیکیشن را نصب کرده و باید برای نخستین بار پروفایل خود را تنظیم کند

برای کاربر حرفه‌ای که روزانه ۱۰+ بار این را بررسی می‌کند

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

O — Output Specification (مشخصات خروجی)

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

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

مثال‌ها:

صفحه اصلی نمایش‌دهنده: موجودی کل (۱۲,۴۵۰ دلار)، نمودار دسته‌بندی هزینه‌ها، ۵ تراکنش اخیر، و دکمه‌های اقدام سریع برای ارسال، درخواست و واریز

صفحه تنظیمات با بخش‌های: حساب (نام، ایمیل، عکس)، اعلان‌ها (۳ کلید)، ظاهر (کلید حالت تاریک، اندازه قلم)، حریم خصوصی (۲ کلید)، درباره (نسخه، قوانین)

صفحه جزئیات محصول شامل تصویر بزرگ، نام «AirFlow Pro»، قیمت ۱۸۹ دلار، امتیاز ۴٫۷ از ۵ (بر اساس ۲۳۴ نظر)، انتخابگر رنگ با چهار گزینه، انتخابگر اندازه و دکمه افزودن به سبد خرید

اگر خروجی را توضیح ندهید: مدل جاهای خالی را با حدس‌های خودش پر می‌کند و این حدس‌ها لزوماً با پروژه شما هماهنگ نیستند.

M — Mood & Style (حالت و سبک)

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

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

سبک‌های طراحی نام‌گذاری‌شده که مؤثرند:

Glassmorphism (شیشه مات، افکت‌های محو)

Neobrutalism (حاشیه‌های ضخیم، رنگ‌های جسورانه، حس خام)

Minimal (فضای سفید، ملایم، محدود)

Dark premium (نزدیک به مشکی، گرادیان، لهجه‌های طلایی/نقره‌ای)

Bento grid (چیدمان کارتی مدولار)

iOS native (راهنمای HIG اپل، فونت‌های سیستمی، رنگ‌های سیستمی)

Material Design 3 (سیستم طراحی گوگل)

Skeuomorphic (بافت‌های واقع‌گرایانه، افکت‌های سه‌بعدی)

گزینه‌های مشخص‌کردن رنگ:

کدهای هگز: "رنگ اصلی #6366f1، پس‌زمینه #0a0a0a"

رنگ‌های نام‌گذاری‌شده: "آبی تیره دریایی با لهجه‌های مرجانی"

مرجع برند: «رنگ‌هایی مانند اسپاتیفای؛ پس‌زمینه تیره با رنگ تأکیدی سبز»

حال‌وهوا: «طیف‌های خاکی و گرم؛ سفالی، مریم‌گلی و کرم»

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

P — Patterns & Components (الگوها و کامپوننت‌ها)

چه بنویسیم؟ اگر الگوی مشخصی برای پیمایش، چیدمان یا کامپوننت‌ها در نظر دارید، نام آن را صریح بنویسید.

چرا مهم است؟ عبارت‌هایی مثل «نوار پیمایش پایین»، «شبکه کارت‌ها» یا «دکمه اقدام شناور» کوتاه‌اند، اما اطلاعات ساختاری زیادی به مدل می‌دهند.

الگوهای ناوبری:

ناوبری تب پایین با ۵ تب

ناوبری نوار کناری با بخش‌های گروه‌بندی‌شده

منوی کشویی همبرگری

نوار تب بالا با تب‌های قابل پیمایش

الگوهای چیدمان:

فید مبتنی بر کارت مانند اینستاگرام

شبکه محصولات ۲ ستونی

چیدمان فهرست و جزئیات (Master–Detail)

داشبورد با کارت‌های متریک + نمودار + جدول

مراجع کامپوننت:

از کامپوننت‌های shadcn/ui استفاده کن

کامپوننت‌های بومی iOS با نمادهای SF

کامپوننت‌های Material Design 3

اگر الگوها را مشخص نکنید: ممکن است مدل سراغ ساختاری برود که با پلتفرم یا عادت کاربران شما جور نیست.

T — Technical Constraints (محدودیت‌های فنی)

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

چرا مهم است؟ محدودیت فنی جلوی بسیاری از اصلاحات بعدی را می‌گیرد. برای نمونه، ذکر WCAG AA روی انتخاب رنگ‌ها اثر می‌گذارد و درخواست Tailwind CSS شکل کد خروجی را از همان ابتدا مشخص می‌کند.

مثال‌ها:

مطابق با WCAG AA با حداقل کنتراست ۴.۵:۱

خروجی HTML + Tailwind CSS

طراحی واکنش‌گرا، ابتدا برای موبایل

پشتیبانی از حالت‌های روشن و تاریک

حداقل هدف لمسی ۴۴ پیکسل

از فونت Inter استفاده کن

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

یک مثال کامل از چارچوب PROMPT

برای اینکه تفاوت روشن‌تر شود، یک درخواست کوتاه را با نسخه دقیق‌تر همان درخواست مقایسه کنیم:

پرامپت مبهم:

داشبورد یک اپلیکیشن تناسب‌اندام طراحی کن

پرامپت با چارچوب PROMPT:

[P] اپلیکیشن iOS برای آیفون ۱۶. [R] مناسب افراد علاقه‌مند به سلامت در بازه سنی ۲۰ تا ۴۰ سال که هر روز صبح روند تناسب‌اندام خود را بررسی می‌کنند. [O] صفحه اصلی شامل تعداد گام‌های روزانه (۸٬۴۳۲ با حلقه پیشرفت دایره‌ای)، کالری مصرف‌شده (۳۴۰)، دقیقه‌های فعالیت (۴۵)، نمودار میله‌ای فعالیت هفتگی و کارت تمرین امروز («تمرین HIIT، ساعت ۵:۳۰ بعدازظهر»). [M] تم تیره و لوکس با رنگ تأکیدی نعنایی (#4ade80)، فونت Inter و فضای خالی مناسب. [P] نوار پیمایش پایین شامل خانه، تمرینات، پیشرفت و پروفایل. حلقه پیشرفت دایره‌ای به‌عنوان عنصر اصلی. [T] خروجی HTML و Tailwind CSS، مطابق با WCAG AA.

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

ده الگوی آماده برای شروع

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

۱. صفحه اصلی/داشبورد

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

مثال:

صفحه اصلی اپلیکیشن iOS برای مدیریت مالی شخصی. نمایش موجودی کل (۱۲٬۸۴۷٫۳۲ دلار با فونت درشت و ضخیم)، نمودار دونات هزینه‌های این ماه (غذا ۳۵٪، حمل‌ونقل ۲۰٪، تفریح ۱۵٪ و سایر موارد ۳۰٪) و فهرست چهار تراکنش اخیر همراه با نام فروشگاه و مبلغ. نوار پیمایش پایین شامل خانه، بودجه، حساب‌ها و پروفایل. طراحی سفید و ساده با رنگ تأکیدی آبی دریایی (#1e3a5f).

۲. صفحه ورود

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

مثال:

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

۳. صفحه پروفایل

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

مثال:

پروفایل یک شبکه اجتماعی iOS برای عکاس غذا به نام «Marcus Chen». تصویر کاور بزرگ، تصویر پروفایل دایره‌ای با هم‌پوشانی روی کاور، نام، زندگی‌نامه کوتاه دوخطی و آمار فعالیت (۲٫۴ هزار دنبال‌کننده، ۸۹۲ دنبال‌شونده و ۱۵۶ پست). نوار تب شامل عکس‌ها، دستورها و ذخیره‌شده‌ها، به‌همراه شبکه سه‌ستونی تصاویر. سبک بصری گرم و شبیه اینستاگرام با پس‌زمینه کرم.

۴. صفحه تنظیمات

[پلتفرم] تنظیمات با بخش‌های: [لیست ۴-۶ بخش با گزینه‌های خاص در هر کدام]. [سبک مخصوص پلتفرم].

مثال:

صفحه تنظیمات iOS با بخش‌های حساب (تصویر پروفایل، نام «Sarah Kim» و ایمیل)، اعلان‌ها (کلید اعلان‌های پوش، ایمیل و خلاصه هفتگی)، ظاهر (حالت تاریک و تنظیم اندازه قلم)، حریم خصوصی (اشتراک‌گذاری داده و تحلیل استفاده)، ذخیره‌سازی (۳٫۲ گیگابایت از ۱۰ گیگابایت و دکمه پاک‌کردن حافظه پنهان) و درباره (نسخه ۲٫۴٫۱، قوانین و سیاست حریم خصوصی). استفاده از سبک فهرست گروه‌بندی‌شده بومی iOS با فونت SF Pro.

۵. جزئیات محصول

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

مثال:

صفحه جزئیات محصول iOS برای یک فروشگاه هدفون لوکس. تصویر بزرگ محصول شامل هدفون مشکی مات، نام «Studio Pro Max»، قیمت ۳۴۹ دلار، امتیاز ۴٫۸ از ۵ بر اساس ۱٬۲۳۴ نظر، انتخابگر رنگ شامل مشکی، نقره‌ای و آبی نیمه‌شب، دکمه تمام‌عرض «افزودن به سبد خرید» و مشخصات کلیدی شامل عمر باتری ۴۰ ساعته، ANC و صدای فضایی. تم تیره و لوکس با رنگ تأکیدی طلایی (#d4a574).

۶. پیام‌رسانی/چت

[پلتفرم] صفحه پیام‌رسانی بین [چه کسانی]. نمایش [تعداد پیام] با [استایل فرستاده/دریافت‌شده]. [موضوع محتوای پیام]. [توضیح نوار ورودی].

مثال:

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

۷. لیست محصولات فروشگاهی

[پلتفرم] لیست محصولات برای [نوع فروشگاه]. نمایش [تعداد محصول] در [چیدمان شبکه/لیست] با [چه اطلاعاتی در هر محصول]. [گزینه‌های فیلتر/مرتب‌سازی]. [سبک].

مثال:

فهرست محصولات iOS برای یک فروشگاه مبلمان مینیمال. نمایش شش محصول در شبکه‌ای دو‌ستونی همراه با تصویر، نام و قیمت محصول و نشان «جدید» روی دو مورد. نوار جست‌وجوی ثابت در بالا و تراشه‌های فیلتر شامل همه، صندلی‌ها، میزها، روشنایی و ذخیره‌سازی. گزینه‌های مرتب‌سازی شامل محبوب‌ترین، قیمت از کم به زیاد و جدیدترین. طراحی سفید و خلوت با رنگ‌های تأکیدی گرم و چوبی.

۸. خوش‌آمدگویی/راه‌اندازی

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

مثال:

صفحه خوش‌آمدگویی iOS، مرحله دوم از چهار مرحله، برای اپلیکیشن پیگیری عادت‌ها. ۶۰ درصد بالای صفحه به تصویرسازی فردی اختصاص یابد که عادت‌های روزانه‌اش را بررسی می‌کند. عنوان اصلی: «عادت‌هایی بساز که ماندگار باشند». توضیحات: «یادآوری‌های روزانه تنظیم کنید، روند پیشرفت خود را پیگیری کنید و تداوم عادت‌ها را در طول زمان ببینید.» نشانگرهای نقطه‌ای مرحله دوم از چهار مرحله را نمایش دهند. دکمه «ادامه» و پیوند متنی «ردکردن» با ترکیب رنگ سبز آرام‌بخش (#4ade80) و سفید.

۹. داده/تحلیل

[پلتفرم] نمای تحلیل برای [چه داده‌ای]. نمایش [کارت‌های متریک با مقادیر]، [نوع نمودار] برای [دوره زمانی]، [جدول/لیست جزئیات]. [سبک].

مثال:

داشبورد تحلیل SaaS وب برای بازاریابی ایمیلی. نمایش ۴ کارت متریک: مشترکین ۴۸,۲۳۴ (↑۱۲٪)، نرخ باز ۳۴.۲٪ (↑۳٪)، نرخ کلیک ۸.۷٪ (↓۱٪)، درآمد ۱۲,۴۵۰ دلار (↑۸٪). نمودار خطی رشد مشترکین در ۶ ماه. جدول ۵ کمپین اخیر با نام، تاریخ ارسال، گیرندگان، نرخ باز، نرخ کلیک. ناوبری نوار کناری تیره. طراحی تمیز و داده‌محور مانند Postmark.

۱۰. حالت خالی

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

مثال:

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

چطور خروجی را یک مرحله بهتر کنیم؟

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

استفاده از مرجع بصری

مؤثرترین راه برای انتقال هدف بصری، ارائه یک مرجع مشخص است:

داشبوردی شبیه رابط Linear طراحی کن؛ چیدمان تمیز مبتنی بر کارت، نوار کناری ساده و تراکم اطلاعات بالا، اما برای ابزار پشتیبانی مشتری با معیارهای مربوط به تیکت‌ها.

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

ارجاع به یک سیستم طراحی مشخص

برای خروجی دقیق‌تر به سیستم‌های طراحی خاص اشاره کنید:

با پیروی از راهنمای Human Interface اپل: از فونت SF Pro، رنگ‌های سیستمی iOS (آبی)، نوار ناوبری عنوان بزرگ، لیست گروهی توکار برای تنظیمات، و فاصله‌گذاری ایمن مناسب برای آیفون ۱۶ استفاده کن.

با پیروی از Material Design 3، از فونت Roboto، پالت رنگی تونال تولیدشده از رنگ پایه #6366f1، دکمه‌های دارای تأکید متوسط، فیلدهای متنی پُرشده و نوار پیمایش پایین استفاده کن.

استفاده از داده‌های واقعی‌نما

داده‌های واقع‌گرایانه ارائه دهید تا چیدمان‌ها معنادار شوند:

تراکنش‌های اخیر: ۶۷.۲۳ دلار در Whole Foods (امروز، آیکون خواربار)، ۱۵.۹۹ دلار Netflix (دیروز، آیکون سرگرمی)، ۲۴.۵۰ دلار Uber (دیروز، آیکون حمل‌ونقل)، ۱,۲۹۹.۰۰ دلار Apple Store (۱۲ مارس، آیکون خرید)، ۵۲.۸۷ دلار Shell Gas (۱۱ مارس، آیکون حمل‌ونقل)

داده‌های واقعی، چیدمان‌های واقعی ایجاد می‌کنند. "۴۲.۵۰ دلار" فضای متفاوتی از "۱,۲۹۹.۰۰ دلار" اشغال می‌کند و هوش مصنوعی بر اساس آن تنظیم می‌کند.

اصلاح تدریجی در سه مرحله

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

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

مرحله ۲، سبک: طراحی بصری را اعمال کنید.

تم لوکس تاریک اعمال کن: پس‌زمینه #0f172a، کارت‌ها با حاشیه‌های ملایم و پس‌زمینه #1e293b، لهجه نیلی (#6366f1) برای عناصر تعاملی، فونت Inter.

مرحله ۳، پرداخت نهایی: جزئیات را اصلاح کنید.

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

نوشتن پرامپت برای یک کامپوننت

کامپوننت‌های جداگانه را همراه با مشخصات کامل همه حالت‌ها تولید کنید:

"یک کامپوننت دکمه با ۵ واریانت تولید کن:

اصلی: bg-indigo-600، متن سفید، rounded-lg، هاور تیره‌تر

ثانویه: bg-gray-100، متن تیره، rounded-lg، هاور تیره‌تر

طرح‌دار: پس‌زمینه شفاف، حاشیه نیلی، متن نیلی، هاور پر می‌شود

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

مخرب: bg-red-600، متن سفید، rounded-lg، هاور تیره‌تر

هر کدام در ۳ سایز: sm (ارتفاع ۳۲px، متن ۱۴px)، md (ارتفاع ۴۰px، متن ۱۶px)، lg (ارتفاع ۴۸px، متن ۱۸px). حالت غیرفعال را برای هر واریانت نشان بده."

مشخص‌کردن محدودیت‌ها

گفتن اینکه چه کاری انجام ندهد به اندازه گفتن اینکه چه کاری انجام دهد مفید است:

صفحه تنظیمات طراحی کن. محدودیت‌ها: بدون منوی همبرگری. حداکثر ۵ بخش در یک زمان قابل مشاهده. برچسب‌های کلید بیشتر از ۳ کلمه نباشند. اهداف لمسی حداقل ۴۴px باشند. کنتراست متن حداقل ۴.۵:۱ باشد.

یک روند کاری ساده و قابل‌تکرار

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

بازخورد با اسکرین‌شات

۱. یک صفحه اولیه تولید کنید

۲. از خروجی اسکرین‌شات بگیرید

۳. اسکرین‌شات را به‌عنوان مرجع به هوش مصنوعی بدهید: «این صفحه فعلی من است. این تغییرات را اعمال کن: [اصلاحات مشخص]»

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

استفاده از توکن‌های طراحی

یک فایل مارک‌داون تعریف‌کننده توکن‌های طراحی خود ایجاد کنید و در هر پرامپت بگنجانید:

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

این کار هماهنگی بصری را در تمام خروجی‌ها حفظ می‌کند.

ترکیب حال‌وهوا و مرجع بصری

۱. یک طراحی که دوست دارید پیدا کنید (Dribbble، اپلیکیشن رقیب، اپلیکیشن واقعی)

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

۳. از آن تحلیل در پرامپت خود استفاده کنید: "ویژگی‌های طراحی زیر را در [نوع صفحه شما] اعمال کن: [تحلیل هوش مصنوعی را پیست کن]"

این روش، سلیقه بصری را به ویژگی‌های مشخص و قابل‌توصیف در پرامپت تبدیل می‌کند.

تولید چندمرحله‌ای

برای صفحات پیچیده، تولید را لایه‌به‌لایه انجام دهید:

۱. مرحله چیدمان: وایرفریم ساختاری را تولید کنید

۲. مرحله تم: رنگ‌ها، تایپوگرافی و استایل را اعمال کنید

۳. مرحله محتوا: صفحه را با داده‌ها و متن‌های واقع‌گرایانه تکمیل کنید

۴. مرحله حالت‌ها: حالت‌های بارگذاری، خالی و خطا را تولید کنید

۵. مرحله واکنش‌گرا: طرح را با اندازه‌های مختلف صفحه تطبیق دهید

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

اشتباه‌هایی که نتیجه را ضعیف می‌کنند

جمع‌بندی

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

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

مطالب مرتبط

• ۱۰ پرامپت برای بررسی و بهبود وب‌سایت
• راهنمای پرامپت‌نویسی برای برنامه‌نویسان
• راهنمای طراحی وب با هوش مصنوعی از ایده تا انتشار
• ۱۶ پرامپت آماده برای طراحی UI/UX با هوش مصنوعی
• نمونه وب‌سایت‌های ساخته‌شده با پرامپت در گالری ThinkFlow
• ساخت وب‌سایت با هوش مصنوعی در ThinkFlow

شروع استفاده از چارچوب PROMPT

ایده خود را با شش بخش چارچوب PROMPT بنویسید و نتیجه را در ThinkFlow به‌صورت زنده و رندرشده بررسی کنید.

شروع ساخت سایتبازگشت به وبلاگ