طراحی رابط کاربری مولد: کتابچه راهنمای کاربردی برای سال 2026

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

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

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

رابط کاربری مولد در واقع چیست

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

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

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

چرا این اتفاق در سال 2026 و نه 2022 رخ می‌دهد؟

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

تا اوایل سال 2026 هر سه واقعی هستند. v0 کامپوننت‌هایی را به پایگاه کد شما ارسال می‌کند که از قبل با shadcn و توکن‌های شما مطابقت دارند. Vercel AI SDK به شما امکان می‌دهد اجزای React را از یک مسیر سرور، همزمان با تولید مدل، استریم کنید. Claude Artifacts یک برنامه تعاملی مستقل را در یک نوبت چت ارائه می‌دهد.

ChatGPT Canvas با سند و رابط کاربری اطراف آن به عنوان یک سطح قابل ویرایش رفتار می‌کند. Bolt و Same.new برنامه‌های در حال اجرا را از یک اعلان تولید می‌کنند. ابزارهای Anthropic و آهنگساز Cursor به عامل‌ها اجازه می‌دهند به سیستم‌های ساختاریافته دسترسی پیدا کنند و رابط‌هایی را در برابر آنها منتشر کنند.

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

چهار معماری که در حال تولید هستند

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

۱. اجزای رندر شده توسط LLM. این مدل از یک مجموعه ثابت از اجزای موجود در پایگاه کد شما انتخاب می‌کند و یک درخت تایپ شده منتشر می‌کند. الگوی Vercel AI SDK. قابل پیش‌بینی، سازگار با برند، ارزیابی آسان، محدود به میزان غنی بودن کتابخانه شما.

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

۳. تولید کد بر اساس تقاضا. این مدل کدی را می‌نویسد که رابط را تولید می‌کند، در الگوهایی مانند Claude Artifacts، v0، Bolt، Same.new و ChatGPT Canvas در حالت کد. حداکثر برد، حداکثر ریسک، سخت‌ترین حالت برای حفظ برند و دسترسی.

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

اگر نمی‌دانید از کدام معماری استفاده می‌کنید، از معماری اشتباهی استفاده می‌کنید.

چگونه بین آنها انتخاب کنیم

سه سوال، معماری را تعیین می‌کنند.

| سوال | رندر شده توسط LLM | فراخوانی‌های ابزار | کدنویسی | ترکیبی | |---|---|---|---|---| | آیا سازگاری برند، بار را تحمل می‌کند؟ | قوی | قوی‌ترین | ضعیف | قوی | | آیا سطح به طرح‌بندی‌های جدید نیاز دارد؟ | برخی | تقریباً هرگز | بله | بله | | آیا می‌توانید ثانیه‌ها تأخیر تولید را تحمل کنید؟ | خیر | خیر | اغلب بله | ترکیبی | | اگر مشکلی پیش بیاید، چه چیزی اول از همه خراب می‌شود؟ | خطاهای ترکیب | محتوای اشتباه | کد خراب | خطاهای مرزی |

اجزای رندر شده توسط LLM، پیش‌فرض مناسبی برای اکثر تیم‌ها هستند. Code-gen زمانی جایگاه خود را پیدا می‌کند که سطح واقعاً یک‌باره باشد، مانند یک تحلیل سفارشی یا یک نمونه اولیه سرهم‌بندی شده، و جایی که کاربر متوجه می‌شود که به یک پیش‌نویس نگاه می‌کند. فراخوانی‌های ابزار مواردی را مدیریت می‌کنند که طرح‌بندی حل شده و فقط داده‌ها پویا هستند. Hybrids جایی هستند که پس از دوازده ماه ترافیک تولید، به آن می‌رسید.

زبان الگو: آنچه طراحان در واقع طراحی می‌کنند

رابط کاربری Generative کار طراحی را حذف نمی‌کند. آن را جابجا می‌کند. مصنوعاتی که شما ارسال می‌کنید یک واژگان است، نه یک صفحه نمایش.

یک واژگان کاربردی پنج لایه دارد.

1. اولیه‌ها. اجزای اتمی که مدل مجاز به استفاده از آنها است. کارت، جدول، نمودار، فرم، لیست، تصویر، فراخوانی، بلوک کد. هر کدام به propهای تایپی نیاز دارند که مدل بتواند آنها را برآورده کند.

2. شکاف‌های هدف. نواحی نامگذاری شده‌ای که مدل بر اساس هدف کاربر پر می‌کند. «خلاصه»، «شواهد»، «اقدام»، «پیگیری». اسلات‌ها ترکیب را بدون فریز کردن آن محدود می‌کنند.

۳. حالت‌های جایگزین. هر شیء اولیه به یک حالت خالی، در حال بارگذاری، جزئی و رد شده‌ی زیبا نیاز دارد. مدل دائماً هر چهار حالت را تولید می‌کند. آن‌ها را به عنوان مصنوعات درجه یک طراحی کنید.

۴. قابلیت‌های بازیابی. ویرایش درجا، بازسازی، «نسخه‌ی متفاوتی را به من نشان بده»، لغو. رابط‌های مولد مکالمه هستند و مکالمات به یک دکمه‌ی بازگشت نیاز دارند.

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

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

اسلات‌های هدف، در عمل

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

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

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

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

حالت‌های شکستی که با آنها مواجه خواهید شد و نحوه طراحی در برابر آنها

رابط کاربری مولد به روش‌های خاص و تکرارپذیر شکست می‌خورد. اکنون آنها را نامگذاری کنید یا آنها را در تولید دوباره کشف کنید.

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

• ترس از تأخیر. کاربر در حالی که مدل فکر می‌کند به یک چرخنده خیره می‌شود. نتایج جزئی را پخش کنید، فضای طرح‌بندی را قبل از محتوا رزرو کنید و هدف مدل ("ایجاد یک جدول مقایسه") را قبل از رسیدن داده‌ها نشان دهید.

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

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

• فراموشی مکالمه. رابط کاربری آنچه را که تازه تولید کرده فراموش می‌کند. مصنوعات تولید شده را به عنوان اشیاء درجه یک که کاربران می‌توانند نامگذاری، ذخیره، اشتراک‌گذاری و بازگشت به آنها را انجام دهند، حفظ کنید. ChatGPT Canvas این را درست فهمید. اکثر محصولات فقط چت اشتباه می‌کنند.

تیم‌هایی که رابط کاربری مولد پایدار را ارسال می‌کنند، همان‌هایی هستند که از روز اول با این موارد به عنوان مشکلات معماری رفتار می‌کنند، نه اشکالاتی که باید در QA برطرف شوند.

چگونه یک سطح رابط کاربری مولد را ارزیابی کنیم

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

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

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

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

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

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

چگونه یک پروژه رابط کاربری مولد را تعریف کنیم

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

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

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

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

شغل جدید طراح: واژگان، ارزیابی‌ها و قصد

رابط کاربری مولد، بیش از هر تغییری از زمان طراحی واکنش‌گرا، شرح شغل طراح را بازنویسی می‌کند.

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

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

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

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

در ارسال محصولات، چه چیزی خوب به نظر می‌رسد؟

چند مثال برای تثبیت اصول، نه به عنوان تاییدیه.

رابط کاربری مولد Vercel AI SDK با اجزا به عنوان واژگان تایپ شده رفتار می‌کند که مدل آن را به یک مسیر رندر شده توسط سرور منتقل می‌کند. مزیت آن، ثبات و پیش‌بینی‌پذیری برند است. هزینه توسط کتابخانه‌ای که شما نوشته‌اید، محدود می‌شود.

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

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

v0 و Bolt برای تولید کد بهینه شده‌اند. آنها ثابت می‌کنند که حالت‌های خرابی زمانی که خروجی به یک توسعه‌دهنده که می‌تواند آن را بررسی کند، تحویل داده می‌شود، قابل کنترل هستند و زمانی که خروجی مستقیماً به کاربر نهایی نشان داده می‌شود، غیرقابل اجرا هستند.

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

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

چگونه در این سه ماهه شروع کنیم

حرکت‌های مشخص، به ترتیب، که هر تیم محصولی می‌تواند همین الان با آنها کار کند.

1. یک سطح را انتخاب کنید. یک ویژگی واحد که کاربران امروز یک صفحه استاتیک دریافت می‌کنند که احتمالاً باید پویا باشد. گزارش‌ها، داشبوردها، توصیه‌ها، خلاصه‌ها گزینه‌های خوبی هستند. از پرداخت صرف نظر کنید، از تأیید صرف نظر کنید، از هر چیز تنظیم شده‌ای صرف نظر کنید.

2. واژگان را فهرست کنید. هر مؤلفه اولیه در سیستم طراحی خود را که دارای props تایپ شده و حالت خالی/بارگیری/خطای آزمایش شده است، فهرست کنید. اگر لیست کمتر از ده مورد دارد، قبل از تولید هر چیزی، آن را اصلاح کنید.

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

4. یک اعلان سیستم بنویسید که واژگان را نامگذاری کند. نه vibes. نام اجزا، انواع propها، قوانین اسلات و محدودیت‌های صریح در مورد آنچه مدل تولید آن را ممنوع می‌کند.

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

6. با یک پرچم، به ده درصد ترافیک، با یک بازخورد در هر سطح تولید شده ارسال کنید. بازخورد را هر روز صبح برای ماه اول بخوانید.

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

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

این به چه معناست برای سه سال آینده

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

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

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

شرط عمیق‌تر ساده‌تر است. رابط‌ها دیگر مقصد طراحی نیستند و به خروجی طراحی تبدیل می‌شوند. هنر طراح یک سطح بالاتر می‌رود، به سیستم‌ها و روبریک‌ها و واژگانی که رابط‌ها را تولید می‌کنند. کار سخت‌تر می‌شود، تأثیر آن بیشتر می‌شود، و طراحانی که اکنون آن را یاد می‌گیرند، تا سال ۲۰۲۹ در این زمینه فعالیت خواهند کرد.

این تکلیف است. این هفته یک سطح انتخاب کنید، یک واژگان ارسال کنید، ارزیابی‌ها را بنویسید و شروع کنید.

hero: key: hero prompt: "Voxel illustration, isometric, soft pastel palette aligned with Brainy ink/paper aesthetic. Composition: a building made of components assembling itself in mid-air, with floating UI fragments (cards, charts, forms) snapping into a layout grid below. Editorial, calm, precise. The composition does not include any human figures." alt: "Voxel building made of UI components assembling itself mid-air" width: 1600 height: 900 inline-1: key: gen-ui-architectures prompt: "Voxel illustration showing four distinct architectures as four floating panels arranged in a 2x2 grid: LLM-rendered components, structured tool calls, code-gen-on-demand, and a hybrid panel showing parts of all three. Soft pastel palette. The composition does not include any human figures." alt: "Four floating voxel panels showing the four generative UI architectures" width: 1400 height: 900 inline-2: key: pattern-vocabulary prompt: "Voxel grid of UI primitives like card, table, chart, form, list, arranged neatly with subtle arrows showing how an LLM picks among them. Soft pastel palette, editorial. The composition does not include any human figures." alt: "Voxel grid of UI primitives with arrows showing model selection" width: 1400 height: 900 inline-3: key: failure-modes prompt: "Voxel illustration of broken or glitching UI: hallucinated buttons floating with no labels, a loading spinner stretched into infinity, an infinite scroll collapsing into a tangle. Soft pastel palette with a hint of chaos. The composition does not include any human figures." alt: "Voxel scene of broken generative UI with hallucinated and stuck states" width: 1400 height: 900 inline-4: key: how-to-start prompt: "Voxel illustration of a designer's desk: a small library of labeled components on a shelf, an eval rubric printed on a tablet, and a model card pinned to a board. Soft pastel palette, calm and methodical. The composition does not include any human figures." alt: "Voxel desk with component library, eval rubric, and model card" width: 1400 height: 900