طراحی برای وقتی که عاملها دارند تماشا می‌کنند
عاملهای هوش مصنوعی حالا کاربران درجهیک محصول شما هستند. قید طراحی ۲۰۲۶: هر سطح باید هم یک لایه انسانی داشته باشد و هم یک لایه ماشینی، وگرنه یکپارچه‌سازی بعدی با یک عامل را از دست می‌دهید.
کاربر دیگر پشت صفحه‌نمایش تنها نیست. همان لحظه‌ای که انسان تیتر را میخواند، یک عامل هوش مصنوعی دارد DOM را تجزیه میکند، دکمه‌ها را نام‌گذاری میکند، سلکتورها را قضاوت میکند و تصمیم می‌گیرد آیا محصول شما چیزی است که بتواند از طرف یک نفر دیگر پشت فرمانش بنشیند. طراحی برای یک کاربر، تجمل سال ۲۰۲۴ بود.
این تغییر ساختاری است، نه ظاهری. Cursor دکمه‌های شما را صدا میزند. Claude اسکرین‌شات‌های شما را میخواند. Anthropic Computer Use فرم‌های شما را کلیک‌کنان رد میکند. OpenAI Operator در صفحه پرداخت شما خرید میکند. هر سطحی که انسان لمس میکند، حالا یک عامل هم لمسش میکند، آن هم با معیارهای متفاوت برای «خوب».
دو مخاطب، یک صفحه
هر سطح محصول در ۲۰۲۶ یک لایه انسانی و یک لایه ماشینی دارد که در همان DOM روی هم چیده شده‌اند.
لایه انسانی همان چیزی است که طراحان همیشه تحویل داده‌اند. جریان، سلیقه، سلسله‌مراتب و اعتمادی که کاربر وقتی حس میکند دکمه همان کاری را میکند که برچسبش قول داده. لایه ماشینی همان سطح است که کاربری دیگر آن را میخواند. سلکتورهای پایدار، کنشهای نامدار، HTML معنایی، وضعیت قابلخواندن برای ماشین و ساختاری که عامل بتواند بدون ابهام تجزیه‌اش کند.
اشتباه رایج بیشتر تیم‌ها این است که فکر می‌کنند این دو لایه یک لایه‌اند با اولویت‌های متفاوت. نیستند. یک دکمه می‌تواند برای انسان بی‌نقص به نظر برسد و برای عامل نامرئی باشد، اگر نام دسترس‌پذیرش «click here» باشد یا گره DOM آن یک div با یک click handler باشد.
پنج لایه‌ای که تماشای عامل در آن‌ها دیده می‌شود
تماشای عامل یک پشته است. پنج لایه، و هر کدام جایی است که لایه انسانی و لایه ماشینی یا هم‌راستا می‌شوند یا با هم می‌جنگند: سطوح ابزار، پایداری سلکتور، ساختار قابلخواندن برای ماشین، خوانایی وضعیت، سیگنال‌های اعتماد. هر محصولی که برای کاربر دوگانه طراحی میکند روی هر پنج لایه تصمیم می‌گیرد، حتی اگر اسمشان را این‌طور نگذاشته باشد.
لایه ۱: سطوح ابزار همان دکمه‌های نام‌داری هستند که عاملها صدا می‌زنند
سطح ابزار هر قابلیتی از محصول است که عامل بتواند با نام آن را فراخوانی کند. فراخوانی ابزار در Cursor، استفاده از ابزار در Claude، کنشهای صفحه در Anthropic Computer Use، دستورهای اجرا در Vercel Sandbox. عامل در پیکسل فکر نمی‌کند، در فعل‌های نامدار فکر میکند.
هر کنش اصلی در محصول شما کاندیدای سطح ابزار است. Stripe استاندارد طلایی است، دهه‌ها قدیمی‌تر از لحظه عاملها: هر کنش یک affordance نامدار، مستند و قابل‌پیش‌بینی دارد. customers.create دقیقاً همان کاری را میکند که اسمش می‌گوید. محصولی که کنشهای اصلی‌اش زیر دکمه‌های بی‌برچسب دفن شده، محصولی است که عامل بدون حدس‌زدن نمی‌تواند رانندگی‌اش کند.
حرکت طراحی این است که هر کنش مهم را یک ابزار نامدار بدانید. برچسب، توضیح ARIA، مسیر، endpoint ای‌پی‌آی و handler مربوط به Model Context Protocol همگی باید یک فعل را حمل کنند. آن‌وقت عاملها و انسان‌ها از درهای متفاوت به یک affordance می‌رسند.
لایه ۲: پایداری سلکتور قرارداد طراح با عامل است
در ۲۰۲۴ یک طراح می‌توانست <div onClick={handle}> تحویل بدهد و بگوید تمام. در ۲۰۲۶ همان div روزی که کسی wrapper را ریفکتور کند، هر یکپارچه‌سازی عامل را می‌شکند.
پایداری سلکتور یعنی مطمئن شوید affordanceهایی که عامل دیروز یاد گرفته فردا هم کار می‌کنند. سه تصمیم. هر جا HTML معنایی هست از آن استفاده کنید، <button> نه <div>. به هر چیزی که عامل یا test runner باید پیدایش کند data-testid بدهید. نامهای دسترسپذیر را بین انتشارها پایدار نگه دارید، همان‌طور که نام فیلدهای API را پایدار نگه می‌دارید.
Linear در این کار به‌طرز غیرعادی خوب است، چون Linear اول‌ازهمه API-first ساخته شد و UI فقط یکی از سطوح متعدد آن است. هر کنش اصلی یک سلکتور پایدار و یک نام پایدار دارد. بیشتر SaaSهای سازمانی در یک ریفکتور اسم یک کلاس را عوض می‌کنند و بی‌صدا هر یکپارچه‌سازی‌ای که به آن دست زده را می‌شکنند. عامل اخطار منسوخ‌شدن دریافت نمی‌کند. فقط از کار می‌افتد.
لایه ۳: ساختار قابلخواندن برای ماشین همان مصنوع طراحی‌ای است که قبلاً از آن می‌گذشتید
عاملی که محصول شما را میخواند، تگ‌های Open Graph، JSON-LD، sitemap و روزبه‌روز بیشتر فایلهای llms.txt و AGENTS.md شما را هم میخواند. هر کدام از این‌ها در ۲۰۲۶ یک مصنوع طراحی‌اند، نه کار خسته‌کننده توسعه‌دهنده.
AGENTS.md همان README جدید است، با این تفاوت که مخاطبش یک مدل است. به عامل می‌گوید محصول شما چه میکند، کدام سطوح امن‌اند و کدام قراردادها اهمیت دارند. JSON-LD به عامل می‌گوید هر صفحه چیست. endpoint مربوط به Model Context Protocol به عامل می‌گوید محصول شما چه ابزارهایی را در دسترس می‌گذارد و چطور باید صدایشان زد.
طراحانی که فکر می‌کنند این قلمرو مهندسی است، اهرم کار را از دست می‌دهند. سلسله‌مراتب چیزهایی که عامل اول می‌بیند، نام‌هایی که به ابزارهایتان می‌دهید، توضیحاتی که برای هر سطح می‌نویسید، همهشان مدل ذهنی عامل از محصول شما را شکل می‌دهند، دقیقاً همان‌طور که تیترها و میکروکپی مدل ذهنی انسان را شکل می‌دهند.
لایه ۴: خوانایی وضعیت یعنی ماشین بتواند بفهمد همین الان چه اتفاقی افتاد
یک اسپینر بارگذاری برای انسان کافی است و برای عاملی که چشمش روی صفحه نیست نامرئی است. یک حالت موفقیت که فقط با یک فلش سبز منتقل می‌شود برای هر کسی که نتواند سبز ببیند ناخواناست. مودالی که بی‌صدا بسته می‌شود، تا جایی که به عامل مربوط است، تغییر حالتی است که هرگز اتفاق نیفتاد.
خوانایی وضعیت یعنی هر حالت را برای ماشین قابل‌تشخیص کنید. API در Linear برای هر کنش یک شیء پاسخ پایدار برمی‌گرداند. ماشین حالت deploy در Vercel حالت‌های نامدار دارد، READY، BUILDING، ERROR، با یک payload ساختاریافته در هر گذار. Claude Code هر فراخوانی ابزار و نتیجه‌اش را به‌صورت متن ساختاریافته‌ای استریم میکند که عامل بتواند تجزیه‌اش کند.
حرکت طراحی این است که یک لایه وضعیت داشته باشید که عامل کنار لایه بصری بخواند. یک ناحیه زنده ARIA که حالت جدید را اعلام میکند. یک toast با role="status" ساختاریافته. یک شیء پاسخ که عامل وقتی ابزار را صدا زد پس می‌گیرد. انسان اسپینر را نگه می‌دارد، عامل رویداد ساختاریافته را. همین موضع در طراحی برای تأخیر AI هم هست که باید هم‌زمان در هر دو لایه خوانده شود.
لایه ۵: سیگنال‌های اعتماد حلقه را بعد از کنش عامل می‌بندند
وقتی عاملی از طرف کاربر کاری میکند، کاربر باید سریع ببیند چه کرده است. بیشتر محصولات از این لایه می‌گذرند، و همین لایه است که تعیین میکند کسی به اندازه‌ای به یکپارچه‌سازی اعتماد میکند که بار دوم هم از آن استفاده کند.
تأیید diff در Cursor مثال کتاب درسی است. عامل فایل‌ها را ویرایش میکند، diff به‌صورت درون‌خطی ظاهر می‌شود و کاربر هر تکه را می‌پذیرد یا رد میکند. artifactهای Claude همین الگو را در شکلی دیگر ارائه می‌دهند. GitHub Copilot Workspace یک سطح دوپنجره‌ای برنامه‌ریزی و اجراست با پذیرش یا رد در هر گام.
سیگنال اعتماد تزئین نیست. سطح باربری است که خودمختاری عامل را قابل‌تحمل میکند. محصولی که در آن عامل عمل میکند و انسان فقط حالت بعد از آن را می‌بیند، اولین باری که چیزی خراب شود اعتماد را از دست می‌دهد.
محصولاتی که این کار را خوب انجام می‌دهند واقعاً چه تحویل می‌دهند
قاب کاربر دوگانه در محصول تحویل‌شده راحت‌تر دیده می‌شود. کالبدشکافی‌های کوتاه، هر کدام مشخص.
Cursor. تأیید diff عامل کل حلقه اعتماد است. پذیرش و رد درون‌خطی برای هر تکه، diff کامل فایل قابل‌مشاهده و عاملی که هرگز بدون رضایت commit نمی‌کند.
artifactهای Claude. پنل پیش‌نمایش artifact قرارداد میان عامل و انسان است. عامل تولید میکند، انسان بازبینی میکند، artifact یک URL پایدار و یک خروجی ساختاریافته دارد که عامل بعدی می‌تواند از آن ادامه بدهد.
Anthropic Computer Use. اسکرین‌شات‌ها قرارداد میان عامل و محصول‌اند. هر تصمیم سلسله‌مراتب بصری و برچسب حالا یک تصمیم درباره عاملخوانایی هم هست. دکمه آیکونی بدون نام دسترسپذیر دکمه‌ای است که عامل باید درباره‌اش حدس بزند.
Vercel v0. قرارداد پرامپت انسان و رندر عامل کل سطح است. کاربر توصیف میکند، عامل رندر میکند و هر رندر یک artifact قابلبازبینی است.
Linear و Stripe. هر دو در موضع AI-native هستند و در معماری API-first. هر کنش اصلی نامدار، پایدار و قابل‌فراخوانی است. هر دو این انضباط را پیش از رسیدن لحظه عاملها تحویل دادند، و برای همین است که هر محصول عاملی تمیز با آن‌ها یکپارچه می‌شود.
Replit Agent، Raycast و GitHub Copilot Workspace فهرست را کامل می‌کنند. Replit کار عامل را به‌صورت یک workspace زنده و قابل‌ویرایش نشان می‌دهد. command palette در Raycast سطحی است که انسان‌ها و عاملها به‌طور بومی در آن شریک‌اند. الگوی دوپنجره‌ای برنامه‌ریزی و اجرا در Copilot Workspace پیش از عمل برنامه را کتبی ثبت میکند و اصلاح در میانه اجرا را ممکن می‌سازد.
برای کتابخانه کامل الگوهایی که این محصولات مشترکاً دارند، تحلیل الگوهای طراحی UI عامل AI آن را نقشه‌برداری میکند، و مطلب طراحی محصول AI-native معماری زیرین را پوشش می‌دهد.
ضدالگوهایی که یکپارچه‌سازی عاملها را می‌شکنند
پنج حالت شکست بارها و بارها دیده می‌شود. هر کدام یک تصمیم طراحی است، نه یک غفلت مهندسی.
سوپ div. هر چیز کلیک‌شدنی در <div> پیچیده شده چون استایل‌دهی راحت‌تر است. هر ریفکتور همه سلکتورها را می‌شکند. راه‌حل: HTML معنایی به‌صورت پیش‌فرض و data-testid روی هر چیزی که باید از تغییر نام کلاس جان سالم به در ببرد.
affordanceهای پنهانی که hover می‌خواهند. دکمه «ویرایش» که فقط با موس‌اور ظاهر می‌شود. عاملها hover نمی‌کنند. راه‌حل: affordanceهای قابل‌دسترس با کیبورد که صرف‌نظر از حالت اشاره‌گر در DOM حاضرند.
لینک‌های «click here». پنج لینک «click here» در یک صفحه برای هر چیزی که DOM را میخواند پنج affordance یکسان است. راه‌حل: متن لینکی که مقصد را نام می‌برد.
حالت‌های موفقیتی که فقط با رنگ منتقل می‌شوند. یک حاشیه سبز، یک فلش سبز، یک آیکون سبز. هیچ‌کدام بدون مدل بینایی قابل‌تشخیص نیستند. راه‌حل: یک رویداد ساختاریافته، یک ناحیه زنده ARIA یا یک شیء پاسخ در کنار سیگنال بصری.
پاپ‌آپ‌های مودال بدون دکمه بستنِ قابل‌یافتن. همان «X» که یک <svg> بدون برچسب است. راه‌حل: دکمه بستن با نام دسترسپذیر روی هر مودال و رفتار escape مستند.
الگوی مشترک این پنج مورد: هر چیزی که به چشم یا اشاره‌گر انسان وابسته باشد برای نصف کاربران شما نامرئی است.
ممیزی دوکاربره
این را پیش از انتشار روی هر سطحی اجرا کنید. هفت سؤال، سه دقیقه.
- کنش نامدار. هر کنش اصلی یک نام دسترسپذیر پایدار و یک سلکتور پایدار دارد.
- وضعیت ماشینی. هر تغییر حالت یک رویداد ساختاریافته صادر میکند.
- diff قابل‌مشاهده. هر تغییری که عامل ایجاد میکند پیش از commit به‌صورت یک artifact قابلبازبینی ظاهر می‌شود.
- مسیر کیبورد. هر affordance مخصوص hover بدون اشاره‌گر هم قابل‌دسترسی است.
- سلکتور پایدار. هر عنصر تعاملی یک
data-testidیا معادل معنایی دارد که از ریفکتور جان سالم به در می‌برد. - انسان در حلقه. کنشهای مخرب یک دروازه دارند، کنشهای فاجعه‌بار دو دروازه، و کنشهای برگشت‌پذیر با undo اجرا می‌شوند.
- سطح مستند. محصول یک
AGENTS.mdیا معادل آن ارائه می‌دهد که به عامل می‌گوید چه چیزی اینجاست، چه چیزی امن است و کدام قراردادها مهم‌اند.
سطحی که هفت از هفت را بگیرد از نظر دوکاربره کامل است. سطحی که سه یا بیشتر را رد شود، با عاملِ قفل‌شده بیرون تحویل داده می‌شود، هر قدر هم لایه انسانی‌اش خوب به نظر برسد.
ممیزی یک عادت است، نه تمرین یک‌باره. هر سطح جدید، هر ریفکتور، هر بازطراحی برند پیش از انتشار از این هفت سؤال رد می‌شود، همان‌طور که هر بازطراحی از دسترسپذیری رد می‌شود. عاملخوانایی دسترسپذیری جدید است و به همان شکل انباشته می‌شود.
برای نسخه لایه ورودیِ این انضباط سطوح پرامپت را ببینید. برای نتیجه فرعی حالت‌های خالی، حالت‌های خالی خودِ محصول‌اند. و برای پایه زیرین، اصول طراحی وب توضیح می‌دهد چرا ساختار حالا زیبایی‌شناسی است.
سؤالات متداول
طراحی برای عاملهای AI در ۲۰۲۶ واقعاً یعنی چه؟
عامل را کاربر درجهیک محصول خود بدانید، نه رباتی که باید جلویش دفاع کرد. عامل DOM شما را میخواند، دکمههایتان را صدا میزند و رابط شما را با معیارهایی قضاوت میکند که انسان هرگز نخواهد دید. هر سطح به یک لایه انسانی و یک لایه ماشینی نیاز دارد که affordanceها، حالت و واژگان یکسانی داشته باشند.
این با طراحی دسترسپذیری چه فرقی دارد؟
بیشترش همپوشانی دارد. نامهای دسترسپذیر پایدار، HTML معنایی، دسترسی با کیبورد، وضعیت ساختاریافته، همهشان انضباط دسترسپذیریاند که برای یک کاربر جدید به کار رفته. لایه جدید، سطوح ابزار و ساختار قابلخواندن برای ماشین است، از جمله endpointهای MCP، فایلهای AGENTS.md و JSON-LD. دسترسپذیری را پایه بدانید و عاملخوانایی را طبقه بعدی.
آیا برای آمادهبودن برای عاملها به سرور MCP نیاز دارم؟
نه از روز اول. محصولی با DOM تمیز، کنشهای نامدار، سلکتورهای پایدار، وضعیت ساختاریافته و artifactهای قابلبازبینی همین حالا ۸۰ درصد برای عاملها آماده است. سرور MCP کار عامل را سریعتر و قابلاعتمادتر میکند، اما اول ساختار را تحویل بدهید و بعد پروتکل را.
دو کاربر، یک صفحه، یک مأموریت
عامل تهدیدی برای طراحی نیست. کاربر دومی است با نیازهای متفاوت، و محصولاتی که این‌طور با آن رفتار می‌کنند همین حالا دارند از آن‌هایی که نکرده‌اند فاصله می‌گیرند.
بیشتر تیم‌ها هنوز برای یک کاربر طراحی می‌کنند. بریف برند درباره انسان حرف میزند، مودبورد تصویر انسان را نشان می‌دهد، تحقیق کاربری با انسان مصاحبه میکند. عامل بعد از لانچ سر و کله‌اش پیدا می‌شود، وقتی درخواست یکپارچه‌سازی می‌رسد، و تیم باید سلکتورها، نام‌ها، ساختار و اعتماد را عقب‌نشینی‌وار اصلاح کند. اصلاح بعدی همیشه گران‌تر از طراحی برای هر دو لایه از روز اول تمام می‌شود.
این تغییر فنی نیست، یک موضع‌گیری است. هر سطح را دوکاربره بدانید، پیش از انتشار ممیزی را اجرا کنید، و همان توجهی را که به انسان می‌دهید به عامل هم بدهید. نپذیرید، و محصول یک نفر دیگر ترافیک عاملها، همکاری و درآمد را می‌برد.
اگر تیمی می‌خواهید که برند و UI محصول را با طراحی هم‌زمان هر دو لایه تحویل بدهد، نه اینکه بعداً به هم دوخته شوند، Brainy را استخدام کنید. ما لایه انسانی را همان‌طور که همیشه طراحی کرده‌ایم طراحی می‌کنیم، و لایه ماشینی را مثل کاربر دومی که واقعاً هست.
Want a product where the agent loves your interface as much as the user does? Brainy ships AI-native product UI end to end, from the human plane to the machine plane and the trust handoff between them.
Get Started
