ai for designersMay 1, 20269 min read

سطح‌های پرامپت: عنصر پایه جدید UX

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

By Boone
XLinkedIn
prompt surfaces

سطح پرامپت همان دکمه جدید است. طراحی که با آن مثل یک نوار جستجو رفتار کند، در سال 2026 محصولی از سال 2018 منتشر می‌کند. ورودی متنی فرم، ویزارد و بخش بزرگی از پنل تنظیمات را بلعیده است، و محصولاتی برنده‌اند که ورودی را یک عنصر پایه درجه یک UX می‌دانند، نه یک textarea با آیکن هواپیمای کاغذی.

بیشتر تیم‌ها هنوز همان textarea را تحویل می‌دهند. یک مستطیل خالی، یک placeholder که می‌گوید «هر چیزی بپرس»، یک دکمه ارسال و بس. این یک نوار جستجو با توهم است. یک سطح پرامپت واقعی کامپوننتی است با ساختار، affordanceها، state و مسیر بازیابی.

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

سطح پرامپت یک textarea نیست

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

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

Cursor، Claude، Linear AI، v0، Lovable، Notion AI، Raycast AI، Vercel AI Playground. هیچ‌کدام ورودی را textarea نمی‌دانند. هرکدام سطحی ساختاریافته عرضه می‌کنند که ورودی در آن فقط دروازه ورود به یک تعامل پیکربندی‌پذیر، قابل مشاهده و برگشت‌پذیر است. این است سطح انتظار.

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

ساختار یک سطح پرامپت که کار می‌کند

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

حالت خالی باید محصول را بدون انبار کردن متن به کاربر یاد بدهد. نوار فرمان در Cursor فایل‌ها و پرامپت‌های اخیر را نشان می‌دهد. منوی اسلش در Notion AI همان حالت خالی است که بر اساس قصد کاربر شاخه‌شاخه شده. v0 گالری‌ای از پرامپت‌های شروع دارد که هم‌زمان نقش اثبات توانایی را بازی می‌کنند. «هر چیزی بپرس» دشمن است. از کاربر می‌خواهد خودش کاربرد را اختراع کند.

پیشنهادها کاربر را تا نیمه راه همراهی می‌کنند. پیشنهادهای چیپی درون‌خطی، تاریخچه پرامپت‌های اخیر، تکمیل‌های آگاه از زمینه. انتخابگر @-mention در Cursor نمونه کتاب درسی است که پرامپت را با یک ضربه کلید به یک فایل، یک تابع یا یک سند محدود می‌کند.

اسلات‌های پیوست ورودی را چندوجهی می‌کنند. v0 اجازه می‌دهد کاربر یک اسکرین‌شات paste کند و روی آن پرامپت بنویسد. Claude PDFها، تصاویر و فایل‌های کد را می‌پذیرد. Lovable یک فریم Figma را به‌عنوان زمینه قبول می‌کند. اسلات همان قرارداد است.

انتخابگر مدل، کلیدهای ابزار و دکمه ارسال لایه پیکربندی‌اند. پیش از وقوع به کاربر می‌گویند چه چیزی قرار است اتفاق بیفتد. Vercel AI Playground انتخابگر مدل را برجسته‌ترین کنترل خود کرده است. Cursor پیش از ارسال بین حالت عامل و ویرایش درون‌خطی سوئیچ می‌کند. پیکربندی را پنهان کنید و کاربر باید حدس بزند.

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

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

سیگنال‌های اعتماد جزئیات باربرند

سطح پرامپت جایی است که کاربر تصمیم می‌گیرد به مدل اعتماد کند یا نه. هر سیگنال مرئی یا اعتماد می‌سازد یا آن را می‌سوزاند.

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

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

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

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

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

ورودی بدون پیشنهاد. سطح پرامپت را می‌پذیرد اما هرگز یکی پیشنهاد نمی‌دهد. کاربران حرفه‌ای الگوها را یاد می‌گیرند. کاربران تازه می‌روند. راه‌حل: پرامپت‌های اخیر، پیشنهادهای محدودشده (@-mention در Cursor، انتخابگر selection در v0) و تکمیل‌های درون‌خطی که با زمینه فعلی تنظیم شده‌اند.

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

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

سطح فراموش‌کار. هر پرامپت جدید زمینه را ریست می‌کند. کاربر در هر نوبت فایل، URL و بریف را دوباره paste می‌کند. راه‌حل: یک چیپ حافظه، یک اسلات زمینه سنجاق‌شده، یا یک scope در سطح نشست که کاربر بتواند ببیند و ویرایش کند.

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

یک کتابخانه الگو برای سطح‌های پرامپت

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

پرامپت محدودشده. ورودی یک توکن scope می‌پذیرد که محدود می‌کند مدل مجاز به دست زدن به چه چیزی است. انتخابگر @-mention در Cursor نمونه شاخص است. کاربر @layout.tsx را تایپ می‌کند و پرامپت به همان فایل محدود می‌شود. v0 scope مشابهی مبتنی بر انتخاب دارد، جایی که کاربر روی ناحیه‌ای از بوم کلیک می‌کند و پرامپت روی همان ناحیه عمل می‌کند. scope دادن یک پرامپت مبهم را دقیق می‌کند، بی‌آنکه کاربر مجبور شود بیشتر بنویسد.

پرامپت مبتنی بر انتخاب. کاربر چیزی را در محصول انتخاب می‌کند و سطح پرامپت با انتخاب از پیش متصل‌شده به‌عنوان زمینه ظاهر می‌شود. v0 این کار را روی انتخاب‌های بوم می‌کند. Notion AI روی متن هایلایت‌شده. AI در Linear به‌طور خودکار scope ایشو را برمی‌دارد. کاربر را مجبور نکنید چیزی را توضیح دهد که همین حالا به آن اشاره کرده است.

کلیدهای ابزار درون‌خطی. سطح فراخوانی ابزارها را به‌صورت کلید یا چیپ روی قاب ورودی نشان می‌دهد. Cursor حالت عامل، حالت ویرایش و مجموعه ابزارها را toggle می‌کند. Raycast AI فرمان‌ها را نمایش می‌دهد. Vercel AI Playground کلیدهای function-calling را نشان می‌دهد. کاربر پیش از ارسال می‌داند کدام ابزارها مسلح‌اند.

چیپ حافظه. یک affordance پایدار که نشان می‌دهد مدل از نشست فعلی چه می‌داند. ChatGPT و Claude هر دو نسخه‌ای از آن را دارند. چیپ قابل ویرایش، قابل حذف و مرئی است، و کل ترفند همین است. حافظه پنهان یک ریسک نشت اطلاعات است که لباس قابلیت پوشیده.

شبکه ووکسلی دو در سه از شش کاشی کوچک سطح، با برچسب‌های SCOPED PROMPT، SELECTION-DRIVEN، INLINE TOOLS، MEMORY CHIP، BRANCHING، APPROVAL GATE
شبکه ووکسلی دو در سه از شش کاشی کوچک سطح، با برچسب‌های SCOPED PROMPT، SELECTION-DRIVEN، INLINE TOOLS، MEMORY CHIP، BRANCHING، APPROVAL GATE

پرامپت شاخه‌ای. بازتولید به‌جای بازنویسی، گفتگو را منشعب می‌کند. هر شاخه یک state ذخیره‌شده است که کاربر می‌تواند به آن برگردد. تاریخچه گفتگوی Claude این را نشان می‌دهد، v0 یک پشته نسخه از UIهای تولیدشده نگه می‌دارد، و threadهای چت Cursor قابل انشعاب‌اند. آزمایش کردن به یک درخت تبدیل می‌شود، نه چرخاندن چرخ کازینو.

فراخوانی ابزار با دروازه تأیید. سطح پیش از یک فراخوانی ابزار مخرب مکث می‌کند و از کاربر می‌خواهد تأیید، اصلاح یا لغو کند. composer در Cursor فرمان‌های shell پرخطر را دروازه‌بانی می‌کند. Claude Code عملیات مخرب را پشت یک سیستم مجوز قرار می‌دهد. ChatGPT Operator اقدامات پرداخت در مرورگر را دروازه‌بانی می‌کند. لحظه‌ای را که برگشت ندارد کند کنید، و پیش از اجرا عمل را به متن ساده و مرئی نشان دهید.

این الگوها با هم ترکیب می‌شوند. یک سطح پرامپت عالی معمولاً scope، انتخاب‌محور، ابزارهای درون‌خطی و دروازه‌های تأیید را در قالب یک کامپوننت یکپارچه عرضه می‌کند. الگوها با هم در تنش نیستند، با هم هم‌نوایی می‌کنند.

ممیزی هفت‌سؤالی سطح پرامپت

این را روی هر ورودی AI پیش از انتشار اجرا کنید. اگر سه مورد یا بیشتر رد شد، سطح آماده نیست.

  1. حالت خالی. آیا سطح به کاربر یاد می‌دهد چه تایپ کند، یا یک فیلد خالی روی سرش می‌ریزد؟
  2. پیشنهادها. آیا سطح پرامپت بعدی را بر اساس زمینه، تاریخچه اخیر یا انتخاب پیشنهاد می‌دهد؟
  3. scope. آیا کاربر می‌تواند پرامپت را بدون نوشتن بیشتر به یک فایل، یک انتخاب، یک بلوک یا یک نشست محدود کند؟
  4. دیده شدن پیکربندی. آیا مدل، ابزارها و سطح خودمختاری پیش از ارسال دیده می‌شوند، نه اینکه در کشوی تنظیمات دفن شده باشند؟
  5. صداقت استریم. آیا خروجی استریم کار واقعی را نشان می‌دهد، یا یک اسپینر بی‌معنی است؟
  6. توقف و بازبینی. آیا هنگام استریم دکمه توقف مرئی هست، و بعد از آن یک بازتولید غیرمخرب؟
  7. شفافیت حافظه. آیا کاربر می‌تواند ببیند و ویرایش کند که مدل در طول نشست چه چیزهایی را به خاطر دارد؟

سطحی که هر هفت مورد را رد نکند شبیه یک عنصر پایه است. سطحی که سه مورد یا بیشتر را رد کند شبیه یک نوار جستجو است. فاصله میان این دو نتیجه همان چیزی است که طراحی محصول AI-native را از AI چسبانده‌شده جدا می‌کند.

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

FAQ

سطح پرامپت چیست؟

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

سطح پرامپت چه تفاوتی با ورودی چت دارد؟

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

رایج‌ترین اشتباهات طراحی UI پرامپت کدامند؟

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

کدام محصولات در 2026 بهترین سطح‌های پرامپت را دارند؟

Cursor برای پرامپت‌های scope دار، Claude برای تاریخچه شاخه‌ای و پنل artifact، v0 برای پرامپت‌های مبتنی بر انتخاب، Linear AI برای پرامپت‌های تعبیه‌شده، Notion AI برای حالت خالی مبتنی بر منوی اسلش، Raycast AI برای انضباط انتخابگر و Vercel AI Playground برای دیده شدن پیکربندی. هیچ‌کدام همه الگوها را با قدرت کامل ندارند، و برای همین این دسته هنوز کاملاً باز است.

ورودی را طوری بسازید که انگار خودش محصول است

سطح پرامپت مهم‌ترین کامپوننت در هر محصول AI-native است، و بیشتر تیم‌ها هنوز آن را مثل یک فکر دیرهنگام طراحی می‌کنند. یک textarea، یک دکمه ارسال، یک placeholder، منتشر کن. این استک همان روزی پوسید که Cursor و Claude سطح انتظار را بالا بردند.

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

اگر تیمی می‌خواهید که سطح‌های پرامپت را به‌جای textarea به‌صورت کامپوننت کامل تحویل بدهد، Brainy را استخدام کنید. ما UI محصولات AI-native را از ابتدا تا انتها طراحی می‌کنیم، از حالت خالی تا پنل خروجی استریم، با سیگنال‌های اعتمادی که پیش از اینکه اولین کاربر کلمه‌ای تایپ کند در آن تعبیه شده‌اند.

Want a prompt surface that earns the click instead of explaining itself? Brainy ships AI-native product UI end to end, from the empty state to the streaming output panel.

Get Started

More from Brainy Papers

Keep reading