مهندسی پرامپت برای طراحان: از بریفهای مبهم تا خروجی AI قابل استفاده
پنج بخش یک پرامپت که خروجی قابل ارائه به طراح میدهد. مثالهای عملی از تولید تصویر، نمونهسازی UI، و عاملهای کدنویسی.
اگر خروجی AIات شبیه عکسهای استوک است، پرامپتت مثل یک آرزو خوانده میشود.
این تمام مشکل نحوهای است که اکثر طراحان یاد گرفتند از ابزارهای AI استفاده کنند. «یک hero image برای یک استارتاپ فینتک بساز» یک پرامپت نیست. یک حس و حال است. پرامپت چیزی است که میگویید اگر داشتید به یک مصور فریلنسر که ساعتی ۴۰۰ دلار میگیرد و سوالهای تیز میپرسد، بریف میدادید.
طراحان این کار را از قبل بلدند. در دانشگاه بریف نوشتید. هر هفته سر کار بریف مینویسید. میدانید وضوح، رفرنس و محدودیت وقتی روی کاغذ میآیند چه شکلی دارند. پرامپتهای AI همان مهارت است، با مخاطبی متفاوت.
پرامپت یک بریف طراحی در قالب نثر است
دیگر به پرامپتها به عنوان کلمات جادویی فکر نکنید. آنها را اول پاراگراف یک بریف خلاقانه فکر کنید، به اضافه مشخصات نهایی در پایین.
یک بریف خوب به سازنده میگوید که کی هستند، این چیز برای چه است، قوانین کدامند، به چه چیزی باید رجوع کرد، و تحویلی چه شکلی است. هر کدام را حذف کنید و کاری دریافت میکنید که از نظر فنی در محدوده است اما از نظر احساسی اشتباه. از یک جونیور بخواهید «یک لوگو برای یک کافه طراحی کن» و دوازده دانه قهوه دریافت میکنید. از آنها بخواهید «یک لوگو برای یک کافه موج سوم که برای فریلنسرهاست طراحی کن، با wordmark، geometric sans، بدون pictogram، الهام گرفته از خویشتنداری Blue Bottle» و جایی میرسید.
پرامپتها هم همینطور کار میکنند. غریزه مبهم بودن چون مدل باهوش است، گرانترین اشتباه در کار طراحی با کمک AI است. مشخص بودن پدانتیک نیست. تمام بازی همین است.
یک پرامپت خوب مثل یک بریف طراحی خوانده میشود. یک پرامپت بد مثل یک آرزو.
پنج بخشی که هر پرامپت قابل استفاده دارد
هر پرامپتی که خروجی طراحی قابل ارائه تولید میکند پنج بخش دارد. میتوانید آنها را حفظ کنید، در یک قالب بگذارید، یا روی یک برچسب چاپ کنید. بخشها:
- نقش. AI دارد چه کسی را بازی میکند؟ («شما یک مصور ادیتوریال ارشد با ده سال سابقه در The New Yorker هستید.»)
- زمینه. این چیز برای چه است و برای چه کسی؟ («این تصویر hero یک پست وبلاگ درباره یادگیری کار با ابزارهای AI توسط طراحان است. مخاطب طراحان شاغل است، کاربران اولیه، شکاک اما کنجکاو.»)
- محدودیتها. قوانین چیست؟ («ادیتوریال، نه شرکتی. هیچ کامپیوتری دیده نشود. بدون عکس استوک. رنگ تخت، سیلوئت قوی، کنتراست بالا، جزئیات کم.»)
- رفرنسها. باید شبیه چه به نظر برسد یا چه احساسی داشته باشد؟ («خطکشی Saul Steinberg در ترکیب با خویشتنداری پوسترهای توریستی سوئیس از دهه ۱۹۶۰. پالت رنگ برند: پسزمینه #080404، لهجه #ff6434.»)
- مشخصات خروجی. مشخصات تحویلی چیست؟ («نسبت ابعاد ۱۶:۹، اندازه ۱۲۰۰×۶۳۰، PNG، بدون متن داخل تصویر.»)
نقش را حذف کنید و خروجی متوسط دریافت میکنید. زمینه را حذف کنید و خروجی برای هیچکس خواهد بود. محدودیتها را حذف کنید و آنچه مدل حدس میزند میخواهید دریافت میکنید، که معمولاً عکس استوک است. رفرنسها را حذف کنید و خروجی به سمت هر چیزی که در دادههای آموزشی غالب بوده منحرف میشود. مشخصات خروجی را حذف کنید و ابعاد اشتباه دریافت میکنید.
| بخش پرامپت | کارکرد | اگر حذف شود |
|---|---|---|
| نقش | سطح سلیقه و تخصص را تنظیم میکند | خروجی عمومی |
| زمینه | به مدل میگوید کار برای چیست | مشکل اشتباه را حل میکند |
| محدودیتها | مشخص میکند چه چیزی نباید باشد | کلیشههایی که از آنها متنفرید |
| رفرنسها | جهت بصری یا لحنی را لنگر میاندازد | به سمت میانگین دادههای آموزشی منحرف میشود |
| مشخصات خروجی | فرمت و تحویلی را کنترل میکند | ابعاد اشتباه، فرمت اشتباه |
مثال عملی: تولید تصویر برای یک hero visual
نسخه مبهمی که هر طراحی حداقل یک بار تایپ کرده:
«hero image برای یک پست وبلاگ درباره prompt engineering برای طراحان.»
آنچه دریافت میکنید: یک طراح پشت لپتاپ، یا یک مغز درخشان، یا یک ربات با مداد، یا ترکیبی از هر سه. استوک. مرده.
نسخه ساختارمند:
شما یک مصور ادیتوریال هستید که ده سال برای The New Yorker و Wired کار کردهاید. یک hero image برای یک پست وبلاگ با عنوان «Prompt Engineering for Designers» بسازید. مخاطب طراحان شاغلی هستند که نسبت به هایپ AI شکاک اما آماده استفاده جدی از ابزارها هستند.
ترکیببندی: بریف کاغذی طراح در سمت چپ قاب، با دست طراحی شده و یادداشتها، که به متن تایپشده پرامپت در سمت راست تبدیل یا حل میشود. ترجمه بین بریف صنعتگرانه و پرامپت ساختارمند را نشان میدهد.
سبک: ادیتوریال، رنگ تخت، سیلوئت قوی، کنتراست بالا، جزئیات کم. بافت کاغذ قابل قبول است. بدون کامپیوتر. بدون ربات. بدون مغز. بدون کرههای درخشان.
رفرنسها: خطکشی Saul Steinberg برای بریف. خویشتنداری پوستر توریستی سوئیس برای سمت پرامپت. پالت برند: پسزمینه #080404، لهجه #ff6434، خنثی #d0d3d8.
خروجی: ۱۲۰۰×۶۳۰، بدون متن داخل تصویر.
آنچه دریافت میکنید: یک hero image که واقعاً میتوانید ارائه دهید، نه اینکه چهار بار دوباره تولید کنید.
تفاوت استعداد نیست. ساختار است.
مثال عملی: نمونهسازی UI در v0 یا Lovable
مبهم:
«یک landing page برای یک آژانس طراحی بساز.»
آنچه دریافت میکنید: یک قالب با طعم Tailwind با gradient استوک، سه کارت قابلیت، یک hero استوک، و متنی که مثل هر آژانس دیگری در اینترنت خوانده میشود.
ساختارمند:
یک landing page برای Brainy بساز، یک استودیو طراحی که با ۲ میلیون+ دنبالکننده در Instagram و Threads شناخته شده است. مخاطب: بنیانگذاران شرکتهای SaaS از Series-A تا Series-C که به خدمات برند، وب و طراحی نیاز دارند. آنها همه سایتهای آژانس را دیدهاند. اگر قالبی به نظر برسد، میروند.
چیدمان: hero تکستونه با یک headline بولد یک خطه و یک CTA واحد، سپس یک نوار اسکرول افقی از لوگوهای مشتریان، سپس یک توضیحدهنده سهبخشی از خدمات (برند، وب، محتوا) با الگوی bento-grid، سپس یک بخش شهادت با سه نقلقول، سپس یک footer تماس ساده.
محدودیتها: بدون gradient، بدون تصویر استوک، بدون تصویرسازی hero عمومی. فقط حالت تاریک، پسزمینه #080404. لهجه #ff6434. تایپوگرافی: یک sans-serif برای همه چیز، بولد برای headlines، لایت برای متن اصلی. همه چیز از مقیاس فاصله ۴px استفاده میکند.
رفرنسها: خویشتنداری فضایی Linear. وزن تایپوگرافیک Vercel. الگوی بخش bento-grid Apple. کلون هیچکدام نیست.
خروجی: responsive، mobile-first، کامپوننتهای shadcn.
همان ابزار. خروجی کاملاً متفاوت.
مثال عملی: عامل کدنویسی که یک کامپوننت میسازد
مبهم:
«یک کامپوننت Button بساز.»
آنچه دریافت میکنید: یک Button. یک variant. بدون accessibility. بدون حالت focus. رنگهایی که نخواستید.
ساختارمند:
شما یک مهندس سیستم طراحی ارشد هستید. یک کامپوننت Button در سیستم طراحی ما بسازید.
زمینه: این Button استایلهای button قدیمی ad-hoc ما را جایگزین میکند که در دوازده صفحه marketing پراکندهاند. باید از variants اولیه، ثانوی و ghost، سه اندازه (sm، md، lg)، و حالتهای loading، disabled و focus پشتیبانی کند.
محدودیتها: از tokenهای موجود ما از tokens.css استفاده کنید (رنگهای جدید معرفی نکنید). حلقه focus باید ۲px offset --color-accent باشد. هرگز از px برای فاصلهگذاری استفاده نکنید، همیشه از --space tokens استفاده کنید. تایپوگرافی همیشه --font-sans با --text-sm یا --text-base بسته به اندازه است. حالت loading یک spinner نشان میدهد و کلیکها را غیرفعال میکند.
رفرنسها: primitivesهای Radix UI برای الگوهای accessibility. کامپوننت Card موجود ما در
/components/Card.tsxبرای رفرنس ساختار فایل.خروجی: TypeScript، Tailwind، داستان Storybook که هر variant و حالت را اعمال میکند. تستهایی که رفتار disabled، loading و focus را پوشش میدهند.
این را به یک عامل کدنویسی بدهید و یک Button واقعی دریافت میکنید. «یک Button بساز» را بدهید و چیزی دریافت میکنید که با دست بازنویسی خواهید کرد.
کتابخانه محدودیتهایی که هر طراح باید بدزدد
محدودیتها سلاح مخفی هستند. و همچنین بخشی است که طراحان بیشتر از همه کم استفاده میکنند. این کتابخانه را کپی کنید، ردیفهای مرتبط را در پرامپتهایتان paste کنید، برای برندتان تنظیم کنید.
| حوزه | محدودیتهایی که باید شامل شوند |
|---|---|
| تصویرسازی | رنگ تخت، سیلوئت قوی، کنتراست بالا، جزئیات کم، بدون متن در تصویر، بدون کامپیوتر/موبایل/ربات/مغز مگر اینکه صراحتاً لازم باشد، ادیتوریال نه شرکتی |
| تولید سبک عکاسی | ظاهر عکس استوک نباشد، بدون نور براق، بدون رندر سهبعدی مگر اینکه خواسته شود، ترکیببندی طبیعی، نقصهای دنیای واقعی خوشآمدند |
| تولید UI | از کامپوننتهای موجود استفاده کنید، رنگ جدید خارج از tokenها نباشد، mobile-first، accessibility الزامی (حالتهای focus، نسبت کنتراست)، بدون gradient مگر اینکه برند آن را بطلبد |
| تایپوگرافی | یک sans-serif برای UI، serif فقط اگر برند آن را بطلبد، حداکثر سه وزن در یک ترکیببندی، بدون متن justify شده، بدون all-caps طولانیتر از ۴ کلمه |
| رنگ | از tokenها نه hex استفاده کنید، هرگز متن سفید روی مشکی خالص نباشد، هرگز قرمز خالص روی سبز خالص نباشد، حداقل کنتراست ۴.۵:۱ برای متن اصلی |
| چیدمان | مقیاس فاصله ۴px یا ۸px، هرگز متن اصلی را وسطچین نکنید، هرگز full-justify نکنید، حداکثر ۷۵ کاراکتر در هر خط، تصاویر را چپچین کنید مگر اینکه ترکیببندی غیر از این بطلبد |
| کد | TypeScript strict، named exports نه default، وابستگی جدید بدون اجازه نباشد، پوشش تست برای هر کامپوننت جدید |
از اینها به عنوان بلوکهای آماده paste استفاده کنید. اول احمقانه به نظر میرسد. بعد متوجه میشوید خروجی یک شبه دو برابر بهتر شد.
اگر میخواهید تحلیلهای بیشتری از workflowهای AI ببینید، بقیه Brainy Papers را مرور کنید. اگر یک کتابخانه پرامپت واقعی ساختهشده برای برند تیمتان میخواهید، نه تاریخچه تصادفی ChatGPT شما، Brainy را استخدام کنید.
نحوه تکرار بدون شروع مجدد
بدترین عادت در prompt engineering این است که وقتی خروجی اشتباه است، کل پرامپت را پاک کرده و بازنویسی کنید. نه مورد از ده تا، پرامپت نزدیک بود. یک متغیر اشتباه بود.
جراحانه تکرار کنید. یک چیز را در یک زمان تغییر دهید.
- پرامپت را یک بار اجرا کنید. یادداشت کنید چه چیزی اشتباه است.
- تشخیص دهید کدام از پنج بخش خراب است. اگر خروجی خیلی عمومی است، رفرنسها ضعیف هستند. اگر عناصر اشتباه دارد، محدودیتها یک «نه X» کم دارند. اگر برای مخاطب اشتباه است، زمینه کم است.
- فقط همان بخش را ویرایش کنید. کل چیز را بازنویسی نکنید.
- دوباره اجرا کنید. با خروجی اول مقایسه کنید. بهتر، بدتر، یکسان؟
- تکرار کنید. سه تا پنج دور معمولاً به جواب میرسد.
مرتبط: context rot واقعی است. اگر در همان چت تکرار میکنید و خروجی بهتر نمیشود بلکه بدتر میشود، session آلوده است. یک چت جدید باز کنید، بهترین پرامپت فعلی را paste کنید، ادامه دهید.
سه اشتباهی که تضمین میکند زباله دریافت کنید
سه الگو که هر هفته میبینم، هر کدام کیفیت خروجی را میکشند.
اشتباه ۱: «بهترش کن». مدل نمیداند بهتر برای شما یعنی چه. «بهتر» یعنی میانگین بهتر در نظر مدل، که بازگشت به میانگین است. مشخص باشید. «کنتراست رنگ را قویتر کن.» «ترکیببندی را نامتقارنتر کن.» «نصف جزئیات پسزمینه را برش بده.»
اشتباه ۲: درخواست پنج گزینه یکجا. پنج گزینه متوسط دریافت میکنید به جای یک گزینه خوب. یکی بخواهید. تکرار کنید. اولین خوب را قبول کنید.
اشتباه ۳: ندادن رفرنس. رفرنسها سلیقه مدل را لنگر میاندازند. بدون آنها، میانگین دادههای آموزشی دریافت میکنید. با سه رفرنس خوب انتخابشده، چیزی در همسایگی آنچه میخواستید دریافت میکنید.
سوالات متداول
آیا prompt engineering یک مهارت واقعی است یا هایپ؟
یک مهارت واقعی است، و همان مهارت نوشتن یک بریف خلاقانه خوب است. اگر میتوانید به یک فریلنسر بریف بدهید، میتوانید به یک مدل پرامپت بدهید. هایپ این است که آن را «engineering» مینامند. واقعیت این است که آن را «دستورالعملهای واضح» بنامید.
کدام ابزار بهترین پردازش پرامپت را دارد؟
برای تصاویر، Midjourney و Gemini Pro با پرامپتهای متنی تفصیلی بهترین عملکرد را دارند. برای UI، v0 و Lovable به محدودیتهای ساختارمند خوب پاسخ میدهند. برای کدنویسی، Claude Code و Cursor قویترین هستند، بهویژه با یک CLAUDE.md خوب نوشتهشده. ابزار کمتر از کیفیت پرامپت اهمیت دارد.
آیا باید از یک کتابخانه پرامپت استفاده کنم؟
بله. بسازید. بر اساس usecase سازماندهی کنید. هر بار که یک پرامپت عالی مینویسید، ذخیره کنید. هر بار که یکی شکست میخورد، دلیلش را یادداشت کنید. بعد از سه ماه کتابخانهای خواهید داشت که ارزشمندتر از هر اشتراک ابزاری است.
پرامپت چقدر باید طولانی باشد؟
به اندازه کافی برای پوشش پنج بخش، به اندازه کافی کوتاه که هر جمله کاری انجام دهد. اکثر پرامپتهای من بین ۱۰۰ تا ۳۰۰ کلمه هستند. کوتاهتر از آن و کممشخص کردهاید. خیلی طولانیتر و احتمالاً خودتان را تکرار میکنید.
آیا باید ترفندهای پرامپت فنی مثل temperature یا top_p یاد بگیرم؟
نه برای اکثر کارهای طراحی. آنها در API calls زندگی میکنند، نه در رابطهای چت. ابتدا پنج بخش را درست انجام دهید. وقتی API calls میزنید میتوانید نگران پارامترها باشید.
مثل اینکه جدی هستی بنویس
هر پرامپت مبهم یک انحراف ده دقیقهای است که زباله تولید میکند. هر پرامپت ساختارمند یک سرمایهگذاری ده دقیقهای است که ارائه میشود.
نقش، زمینه، محدودیتها، رفرنسها و مشخصات خروجی را بنویسید. یک متغیر را در یک زمان تکرار کنید. آنهایی که کار میکنند را ذخیره کنید.
از قبل میدانستید چطور بریف بنویسید. مدل یک جونیور در آن سوی بریف است.
مثل اینکه جدی هستی بنویس.
Need a prompt library that ships your brand, not generic AI output? Brainy builds it with you.
Get Started