طراحی رابط‌های استریم
ناحیه خروجی استریم، بوم تازه است. یک راهنمای عملی برای طراحی رابط‌های استریم هوش مصنوعی به‌عنوان یک مدل تعامل واقعی، با پنج لایه، کالبدشکافی محصولات واقعی، ضدالگوها و یک ممیزی پیش از انتشار.
پاسخ استریم، کم‌طراحی‌شده‌ترین سطح در نرم‌افزار مدرن است. بیشتر تیم‌ها یک هوک fetch با TypeScript نوشتند، آن را به یک div وصل کردند و اسمش را گذاشتند طراحی محصول. نتیجه یک ماشین تحریر است که ادای رابط کاربری را درمی‌آورد.
استریم یعنی ظاهر شدن متن، نه فقط همین. استریم یک مدل تعامل است با ریتم، مکث، رفتار اسکرول، امکان قطع کردن و سیگنال‌های اعتماد. تیمی که فقط ورودی را طراحی کند، نیمی از محصول را تحویل داده است. ناحیه خروجی نیمه دیگر است و جایی که بیشتر محصولات هوش مصنوعی کاربر را از دست می‌دهند.
این نوشته نسخه عملیاتی ماجراست. رابط استریم واقعاً چیست، پنج لایه‌ای که هر نمونه خوب دارد، کالبدشکافی محصولات واقعی، ضدالگوهایی که سطوح را در محیط واقعی می‌کشند، و یک ممیزی پیش از انتشار.
رابط استریم یک سطح است، نه یک حلقه fetch
رابط استریم کل ناحیه‌ای است که کاربر در زمان اجرای مدل از آن می‌خواند. متن قابل مشاهده فقط یک بخش است. ریتم، مکان‌نما، رفتار اسکرول، تعهدهای ساختاری، کنترل‌های قطع و حالت پس از استریم بقیه ماجرا هستند.
این سطح ویژگیهای قابل اندازهگیری دارد. زمان تا اولین توکن. ریتم توکن‌ها. تعهد ساختاری. تأخیر قطع. سیگنال تکمیل. امکانات پس از استریم. اگر هر کدام را نادیده بگیرید، استریم یک عارضه جانبی API است، نه یک کامپوننت طراحیشده.
Cursor، Claude، v0، Lovable، Linear AI، Raycast AI. هیچ‌کدام استریم را خروجی خام توکن نمی‌دانند. هر کدام یک سطح ساختارمند عرضه میکنند. این است معیار.
پنج لایه یک سطح استریم عالی
پنج لایه، به ترتیبی که کاربر تجربه‌شان میکند. رابط استریمی که کمتر از چهار لایه داشته باشد ناقص است.
زمان تا اولین توکن لحظه‌ای است که خلأ به بازخورد تبدیل میشود. ریتم توکن حس استریم در حال اجراست. تعهد ساختاری یعنی سطح چطور لیست، جدول و کد را بدون جابه‌جایی چیدمان مدیریت میکند. قطع و ویرایش راه فرار کاربر است. تکمیل لحظه‌ای است که استریم تمام میشود و خروجی تعاملی میشود. هر کدام را حذف کنید، استریم از همان لایه شروع به پوسیدن میکند.
لایه ۱: زمان تا اولین توکن
۲۰۰ میلی‌ثانیه اول تعیین میکند کاربر به سطح اعتماد کند یا نه. زیر ۲۰۰ میلی‌ثانیه با یک سیگنال بازخورد واقعی، لحظه‌ای حس میشود. بعد از ۸۰۰ میلی‌ثانیه بدون هیچ بازخوردی، کاربر دارد تصمیم می‌گیرد که محصول خراب است.
انتخاب‌ها مشخص‌اند. یک اسکلتون که ناحیه خروجی را از قبل رزرو میکند. یک مکان‌نمای چشمک‌زن. نشانگر نقطه‌های تایپ. یک پیشوند استریم که عبارتی آشنا مثل «Here is» ۳۰۰ میلی‌ثانیه قبل از محتوا مینشیند.
سه نقطه ChatGPT جواب میدهد چون صادق است. پالس گرادیانی Claude نسخه ارتقایافته است، یک نوار متحرک نرم که نشان میدهد سطح زنده است بی‌آنکه به محتوای جعلی متعهد شود. Cursor یک خط مکان‌نمای نازک و یک چیپ وضعیت نشان میدهد که نام کار در حال انجام را می‌گوید. در همه موارد کاربر ظرف ۲۰۰ میلی‌ثانیه به چیزی نگاه میکند.
خلأ همان شکست است. ناحیه خالی که ۶۰۰ میلی‌ثانیه معطل بماند به کاربر یاد میدهد هوش مصنوعی چیزی است که باید منتظرش ماند. مکان‌نما را قبل از مدل تحویل بدهید.
لایه ۲: ریتم توکن
جریان خام توکن‌ها لرزان است. مدلی که چهار توکن می‌فرستد، بعد بیست، بعد یک، حتی وقتی تحویل زیرین سالم است شبیه ترمینال خراب به نظر می‌رسد. ریتم یک تصمیم طراحی است.
راه‌حل یک ریتم هموارشده است. توکن‌های ورودی را ۳۰ تا ۶۰ میلی‌ثانیه بافر کنید، بعد با نرخ ثابت رندر کنید. کاربر با سرعت ۲۵۰ تا ۴۰۰ کلمه در دقیقه می‌خواند، پس هدف استریمی است که در سرعت خواندن یا اندکی بالاتر بنشیند بدون جهش. Claude این انضباط را زود عرضه کرد.
اجزای بنیادین رابط استریم Vercel در v0 همین ایده را دارند، یک حلقه رندر که شبکه را از بهروزرسانی بصری جدا میکند. جریان توکن از API یک لایه است. جریان بصری لایه‌ای دیگر. این دو هرگز نباید یکی باشند.
مکان‌نما مهم است. مکان‌نمایی که آخرین توکن رندرشده را دنبال میکند، با محوشدگی نرم دنباله، چشم را لنگر می‌اندازد. بدون آن، چشم کاربر دنبال محل استریم این طرف و آن طرف می‌پرد. مکان‌نمای Cursor در کامپوزرشان تصادفی همنام نیست.
لایه ۳: تعهد ساختاری
سخت‌ترین لایه. نثر ساده آسان است. استریمی که وسط پاسخ به یک لیست، جدول، بلوک کد یا نمودار متعهد میشود، جایی است که بیشتر سطوح می‌شکنند.
نسخه ساده‌لوحانه مارکداون به‌عنوان استریم است. رندرر هر تکه را پارس میکند، چیدمان با هر commit جابهجا میشود، شماره لیست عوض میشود، بلوک کد وسط استریم فونتش را عوض میکند، صفحه می‌پرد. هر جابه‌جایی مالیاتی بر توجه است.
نسخه درست ساختار را همان لحظه که قابل تشخیص است commit میکند، بعد محتوا را بدون جابه‌جایی داخل چیدمان متعهدشده استریم میکند. لیست همان لحظه نشستن اولین خط تیره جا رزرو میکند. بلوک کد با سه بک‌تیک یک پنل مونواسپیس رزرو میکند. جدول تعداد ستون‌ها را فوراً قطعی میکند. استریم diff در Cursor نمونه کتاب درسی است. پنل diff چیدمان را رزرو میکند، مسیر فایل‌ها اول می‌نشینند، خطوط یکی‌یکی داخل ردیف‌های از پیش تخصیص‌یافته استریم می‌شوند. استریم آگاه از انتخاب در v0 همین الگو را در سمت بوم عرضه میکند.
پیشنهادهای ساختارمند Linear AI تعهد را بدون نشان دادن حالت «در حال بارگذاری» به کاربر عرضه میکنند. پیشنهاد به‌شکل یک شیء تایپ‌شده مینشیند، فیلدها به ترتیب وابستگی پر می‌شوند و جریان کار هرگز بلاک نمیشود. Linear کار تحویل میدهد، بقیه رونوشت.
لایه ۴: قطع و ویرایش
رابط استریم بدون امکان قطع، خصمانه است. کاربر دارد میبیند مدل چیزی مینویسد که از قبل میداند غلط است، و تنها راه خروج بستن تب است. این محصول نیست. یک گروگان‌گیری است با شمارنده توکن.
دکمه توقف ارزان‌ترین و پراثرترین عنصر روی سطح است. از توکن اول قابل مشاهده، نه بعد از توکن ۱۰۰. Claude، Cursor، ChatGPT و v0 همگی یکی دارند. بیشتر رابط‌های چت خانگی فراموشش میکنند.
قطع کف است. ویرایش سقف. الگویی که بیشتر تیم‌ها هنوز استحقاقش را نیافته‌اند ویرایش زنده است، جایی که کاربر پرامپت را وسط استریم اصلاح میکند و سطح مسیر را عوض میکند. پذیرش و رد در حین استریم در Cursor نزدیک‌ترین نسخه عرضه‌شده است. کاربر diff را همان‌طور که مینشیند می‌خواند، بخش‌های درست را می‌پذیرد، بخش‌های نادرست را رد میکند. این یک حلقه تعامل واقعی است.
regenerate در ChatGPT نقطه مقابل است. دکمه پاسخ قبلی را بازنویسی میکند و کاربر نسخه‌ای را که دوست داشت از دست میدهد. regenerate به‌عنوان بازنویسی مخرب است. regenerate به‌عنوان شاخه طراحی است. سطح تاریخچه Claude شاخه را عرضه میکند.
لایه ۵: تکمیل و پس از استریم
لحظه پایان استریم یک لحظه طراحی است. بیشتر محصولات آن را هیچ می‌گیرند. استریم می‌ایستد، مکان‌نما ناپدید میشود، کاربر به دیواری از متن خیره میشود و نمی‌داند بعد چه کند.
مادی‌شدن artifact در Claude استاندارد طلایی است. متن استریم یک سیگنال تکمیل آرام می‌گیرد و پنل artifact در همان ضرب از پیش‌نمایش استریم به سطح تعاملی تغییر میکند. کاربر «خواندن را تمام نکرده»، حالا «داخل artifact» است. خود گذار کل ماجراست.
جابه‌جایی پیش‌نمایش در v0 نسخه سمت طراحی است. کد استریم تمام میشود، iframe پیش‌نمایش زنده با بیلد نهایی بارگذاری میشود، دکمه دیپلوی ظاهر میشود. سه حالت، یک گذار، بدون زمان مرده.
diff-تا-پذیرش در Cursor الگوی سوم است. استریم تمام میشود، diff قابل ویرایش می‌ماند، پذیرش و رد باقی‌اند و فایل تا وقتی کاربر نگفته commit نمیشود. استریم تمام شده، تصمیم نه. همین جداسازی است که سطح را شبیه ابزار میکند، نه لاگ چت.
نسخه بد استریم را تمام میکند و چیزی تحویل نمی‌دهد. مکان‌نما خاموش میشود، متن همان‌جا می‌ماند و کاربر آن را در ابزار دیگری کپی میکند تا واقعاً استفاده‌اش کند. یک خط لوله کپی‌پیست با یک مدل چسبانده‌شده به آن.
کالبدشکافی محصولات واقعی
Cursor استریم کامپوزر به‌علاوه مادی‌سازی diff دارد. کامپوزر طرح را استریم میکند، پنل diff پچ را استریم میکند، پذیرش و رد زنده می‌مانند و حالت پس از استریم یک diff معلق است که کاربر مالکش است. هر لایه می‌زند.
Claude ریتم توکن هموارشده و جابه‌جایی پنل artifact دارد. پالس گرادیانی قبل از اولین توکن، ریتم ثابت، مادی‌شدن artifact در تکمیل و تاریخچه گفتگوی شاخه‌شونده. سطح طراحیشده حس میشود چون هر گذارش طراحی شده است.
v0 استریم مبتنی بر انتخاب با پیش‌نمایش زنده دارد. کاربر روی ناحیه‌ای از بوم کلیک میکند، پرامپت خودش را محدود میکند، استریم هم به‌شکل کد مینشیند و هم به‌شکل پیش‌نمایش در iframe جایگزین میشود. تکمیل به یک دکمه دیپلوی تحویل میشود.
ChatGPT خط پایه است. استریم توکن با بازخورد سه‌نقطه، regenerate به‌عنوان بازنویسی و branch-from-here به‌عنوان افزوده اخیر. پیش‌فرض دسته، نه معیار.
Vercel AI Playground، Lovable، Anthropic Computer Use، Raycast AI و GitHub Copilot Workspace هر کدام برشی عرضه میکنند. Vercel انتخاب‌گر مدل را زنده در حین استریم نشان میدهد. Lovable الگوی استریم-به-اپ را اجرا میکند و کاربر ساخته شدن اپش را بلادرنگ میبیند. Computer Use اسکرین‌شات و رد استدلال را موازی استریم میکند. Raycast به یک ریزسطح command-palette استریم میکند. Copilot Workspace استریم طرح-بعد-اجرا را با نقاط بازرسی عرضه میکند.
پنج قانون
- بازخورد را زیر ۲۰۰ میلی‌ثانیه نشان بدهید. یک مکان‌نما، یک پالس، یک نقطه تایپ، یک پیشوند استریم. هر چیزی جز خلأ.
- ریتم را هموار کنید. جریان شبکه را بافر کنید، با سرعت خواندن رندر کنید، مکان‌نما را لنگر بیندازید. لرزش شکست طراحی است، نه شرایط شبکه.
- ساختار را بدون جابه‌جایی commit کنید. همین که لیست، جدول یا بلوک کد قابل تشخیص شد چیدمان را رزرو کنید. هرگز جابهجا نکنید.
- دکمه توقف را قبل از توکن ۱۰۰ تحویل بدهید. قابل مشاهده. در دسترس. یک کلیک. بدون استثنا.
- لحظه بعد از استریم را به‌اندازه خود استریم دقیق طراحی کنید. تکمیل یک تحویل است. تحویل همان محصول است.
ضدالگوهایی که استریم‌ها را در محیط واقعی می‌کشند
اسپینر مرده. یک اسپینر می‌چرخد در حالی که مدل پشت یک لایه رندر بسته استریم میکند. اسپینر را حذف کنید. استریم را تحویل بدهید.
لرزش توکن. خروجی خام توکن، بدون بافر، ریتم بین انفجار و مکث سوسو می‌زند. هموارش کنید.
اسکرول خودکاری که با کاربر میجنگد. صفحه برای دنبال کردن استریم خودکار اسکرول میشود در حالی که کاربر پاراگرافی قبلی را می‌خواند. اسکرول دستی را تشخیص بدهید و تا وقتی کاربر دوباره لنگر نینداخته اسکرول خودکار را متوقف کنید. Claude و Cursor این را درست انجام می‌دهند.
اشتباه نبودن دکمه توقف. قطع در منوی تنظیمات دفن شده، یا فقط بعد از ۳۰ ثانیه ظاهر میشود، یا اصلاً وجود ندارد. از توکن اول قابل مشاهده باشد.
استریمی که تمام میشود و کاربر را مات رها میکند. بدون سیگنال تکمیل، بدون گام بعدی. پس از استریم را طراحی کنید.
regenerate مخرب. پاسخ جدید قدیمی را بازنویسی میکند و کاربر نسخه موردعلاقه‌اش را از دست میدهد. regenerate به‌عنوان شاخه، هرگز بازنویسی.
مارکداون خام به‌عنوان استریم. رندرر با هر تکه جابهجا میشود و صفحه می‌پرد. ساختار را یک بار commit کنید، داخل چیدمان رزروشده استریم کنید.
اصلاحات کوچک‌اند. سطوحی که آن‌ها را عرضه میکنند شبیه ۲۰۲۶ حس می‌شوند. سطوحی که نه، شبیه سایدبار چت ۲۰۲۲ هستند که به مدل ۲۰۲۶ وصل شده.
ممیزی سطح استریم
این موارد را پیش از انتشار روی هر سطح استریم هوش مصنوعی اجرا کنید.
- اولین بازخورد. آیا سطح ظرف ۲۰۰ میلی‌ثانیه پس از ارسال چیزی نشان میدهد؟
- ریتم. آیا جریان توکن تا سرعت خواندن هموار شده یا لرزش خام شبکه است؟
- تعهد ساختاری. آیا سطح پیش از رسیدن محتوا چیدمان لیست، جدول و بلوک کد را رزرو میکند؟
- امکان توقف. آیا دکمه توقف از اولین توکن، با یک کلیک، قابل مشاهده است؟
- امکان ویرایش. آیا کاربر می‌تواند وسط استریم اصلاح کند، بپذیرد یا رد کند؟
- طراحی تکمیل. آیا لحظه پایان استریم به یک گام بعدی واقعی تحویل میشود؟
- artifact پس از استریم. آیا خروجی بعد از استریم تعاملی است یا فقط یک رونوشت یخ‌زده؟
سطحی که هر هفت مورد را رد کند، شبیه کامپوننت طراحیشده حس میشود. سطحی که سه مورد یا بیشتر را رد نکند، شبیه یک لاگ کنسول با مدل چسبیده به آن است. این شکاف همان چیزی است که طراحی محصول AI-native را از هوش مصنوعی چسبانده‌شده جدا میکند.
تیم‌هایی که سطوح استریم را این‌قدر دقیق عرضه میکنند همان تیم‌هایی هستند که سطوح پرامپت را در سمت ورودی کامپوننت واقعی می‌دانند و تأخیر هوش مصنوعی را در سطح سیستم طراحی میکنند. آن را با حالت‌های خالی، الگوهای رابط ایجنت و سیگنال‌های اعتماد ترکیب کنید تا خروجی استریم خوانده شدن را کسب کند.
سؤالات متداول
طراحی رابط استریم چیست؟
طراحی رابط استریم رشتهای است که شکل ظاهر شدن خروجی هوش مصنوعی روی صفحه را در حین تولید مدل تعیین میکند. زمان تا اولین توکن، ریتم توکن، تعهد ساختاری، امکانات قطع و artifact پس از استریم را پوشش میدهد. رابط استریم یک textarea نیست که پر از متن شود. یک سطح طراحیشده با ویژگیهای قابل اندازهگیری است و محصولات برنده امروز همینطور با آن رفتار میکنند.
چرا استریم توکن در محصولات مختلف حس متفاوتی دارد؟
چون ریتم تصمیم طراحی است، نه نتیجه شبکه. جریان خام توکن میلرزد. جریان بافرشده و هموارشده با سرعت خواندن مینشیند. Claude ریتم را با حلقه رندری که شبکه را از بهروزرسانی بصری جدا میکند هموار میکند. ChatGPT به تحویل خام نزدیکتر است. همان رده مدل، حس سطح متفاوت.
رایجترین اشتباه رابط استریم چیست؟
عرضه استریم بدون دکمه توقف قابل مشاهده. کاربر میبیند مدل چیزی مینویسد که میداند غلط است و راه خروجی ندارد. شکستهای رایج دیگر: اسپینر مرده، اسکرول خودکاری که با کاربر میجنگد، regenerate مخرب، مارکداون خامی که با هر تکه جابهجا میشود و تکمیلی که به هیچ تحویل نمیشود. هر کدام با یک تغییر کوچک در سطح قابل اصلاح است.
استریم را طوری بسازید که بوم است
ناحیه خروجی استریم بوم تازه است. محصولات هوش مصنوعی بر سر حس این سطح در ۸۰۰ میلی‌ثانیه اول و خوانا ماندنش در یک پاسخ ۳۰ ثانیه‌ای زنده می‌مانند یا می‌میرند. بیشتر تیم‌ها با آن مثل ماشین تحریر رفتار میکنند. تیم‌هایی که معیار را عرضه میکنند با آن مثل زیرساخت رفتار میکنند.
پنج لایه را تحویل بدهید. ممیزی را اجرا کنید. از ضدالگوها دوری کنید. محصولی که از آن طرف بیرون می‌آید شبیه ابزار حس میشود، نه سایدبار چتی که ادای ابزار را درمی‌آورد.
اگر تیمی می‌خواهید که سطوح استریم را به‌عنوان کامپوننت کامل عرضه کند، نه حلقه‌های توکن چسبانده‌شده، Brainy را استخدام کنید. ما رابط محصول AI-native را سرتاسری طراحی می‌کنیم، از اولین توکن تا artifact پس از استریم، با سیگنال‌های اعتماد و امکانات قطع که پیش از اینکه اولین کاربر ارسال را بزند ساخته شده‌اند.
Want a streaming surface that feels designed instead of bolted on? Brainy ships AI-native product UI end to end, from the first token to the post-stream artifact.
Get Started
