🧩

مهندس Frontend هوش مصنوعی

AI Frontend Engineer

مهندس Frontend هوش مصنوعی (AI Frontend Engineer) بخشی از محصول را می‌سازد که کاربر در آن با مدل زبانی یا ایجنت کار می‌کند: چتی که پاسخ را هم‌زمان با تولید (streaming) نشان می‌دهد، نمایش قدم‌به‌قدم کار ایجنت، صفحه‌های بازبینی و تأیید، و رابط‌هایی که از خروجی خود مدل ساخته می‌شوند (Generative UI). نام قبلی این صفحه، «Generative UI Developer»، عنوان شغلی‌ای نیست که کارفرماها به کار ببرند. همین کار با عنوان‌هایی مثل AI Frontend Engineer در Within و TeamViewer، Software Engineer, Frontend (Agentic AI) در Sift و Senior Frontend Engineer, Conversational & Gen UI در Farther آگهی می‌شود.

ReactTypeScriptStreaming UIGenerative UIAI SDKAccessibility

مقدمه و تعریف شغل

مهندس Frontend هوش مصنوعی لایه‌ای از محصول را می‌سازد که کاربر در آن با مدل زبانی یا ایجنت سروکار دارد. کار اصلی او این است که رفتار غیرقطعی و گاهی کند مدل را به رابطی قابل‌اعتماد تبدیل کند: پاسخ را هم‌زمان با تولید نشان دهد، قدم‌های ایجنت و فراخوانی ابزارها را قابل‌فهم کند، پیش از اقدام‌های حساس از کاربر تأیید بگیرد و در Generative UI خروجی مدل را به کامپوننت واقعی و اعتبارسنجی‌شده تبدیل کند. آگهی Farther این را چنین خلاصه می‌کند: شما صفحه طراحی نمی‌کنید، سیستمی را طراحی می‌کنید که تصمیم می‌گیرد یک صفحه چه می‌تواند باشد. این تخصصی درون مهندسی Frontend است و پایه‌اش همان React، TypeScript و مهارت‌های کلاسیک وب است.

اصطلاح Generative UI در چند سال اخیر رایج شده است. Nielsen Norman Group در مارس ۲۰۲۴ آن را رابطی تعریف کرد که هوش مصنوعی در لحظه و متناسب با نیاز و موقعیت هر کاربر تولید می‌کند. مستندات AI SDK شرکت Vercel تعریفی عملی‌تر دارد: وصل کردن نتیجهٔ فراخوانی یک ابزار (tool call) به یک کامپوننت React. Google Research هم در نوامبر ۲۰۲۵ پیاده‌سازی خود را معرفی کرد که در اپ Gemini و AI Mode جستجوی Google عرضه شد. در بازار کار اما این اصطلاح بیشتر در شرح وظایف می‌آید تا در عنوان: در آگهی‌های بازی که برای این صفحه بررسی شد، فقط آگهی Farther «Gen UI» را در عنوان داشت. بیشتر کارفرماها عنوان Frontend را با یک قید AI می‌آورند و برخی، مثل Harvey، همین کار را با عنوان سادهٔ Senior Software Engineer, Frontend آگهی می‌کنند؛ آگهی Harvey طراحی API و UX برای کارهای طولانی، نتایج جریانی و workflowهای مبتنی بر فراخوانی ابزار را جزو وظایف آورده است.

چه چیزی می‌سازید؟

مثال‌های واقعی از خروجی کار یک مهندس Frontend هوش مصنوعی

💬

دستیار و چت جریانی داخل محصول

دستیار AI در Farther به سؤال مشاوران مالی پاسخ می‌دهد و از طرف آن‌ها در محصول کار می‌کند، مثلاً صفحه‌ای را باز می‌کند یا یک workflow را شروع می‌کند. مهندس Frontend تجربهٔ این دستیار را از نمونهٔ اولیه تا پروداکشن می‌برد.

🧩

رندرکنندهٔ Generative UI

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

🔍

نمایش کار ایجنت

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

📊

نمودار و داشبورد تولیدشده

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

✅

صفحه‌های بازبینی و تأیید انسانی

Atira رابط‌هایی می‌خواهد که انسان در آن کار ایجنت را مرور، ویرایش و تأیید کند: چت با human-in-the-loop، trace قدم‌به‌قدم و جریان‌های تأیید. در Hawk، تحلیلگران مبارزه با پول‌شویی در چنین رابطی اجرای تحقیقات خودکار را دنبال و نتیجهٔ ایجنت را بررسی می‌کنند.

🛠️

فریم‌ورک و SDK برای تیم‌های دیگر

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

تخصص‌های مختلف مهندس Frontend هوش مصنوعی

این شغل یک عنوان واحد نیست — مسیرهای تخصصی متعددی دارد

💬

رابط گفتگو و ایجنت

Conversational & Agent UI

چت، دستیار و رابط‌هایی که کار ایجنت را نشان می‌دهند: پاسخ جریانی، کارهای طولانی، وقفه و trace. هستهٔ آگهی‌های Sift، TeamViewer و Farther.

🧩

فریم‌ورک و رندرکنندهٔ Generative UI

Generative UI Frameworks

ساختن لایه‌ای که خروجی مدل را به کامپوننت معتبر تبدیل می‌کند و قرارداد آن با بک‌اند ایجنت، مثل آگهی Farther. پروتکل‌هایی مثل AG-UI و A2UI برای همین لایه ساخته شده‌اند.

📊

مصورسازی و داشبورد تولیدشده

AI Data Visualization

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

✅

رابط بازبینی و تأیید

Human-in-the-loop Review UI

صفحه‌هایی که انسان در آن خروجی ایجنت را مرور، مقایسه، ویرایش و تأیید می‌کند؛ محور کار در Atira (اسناد صنعتی) و Hawk (تحقیقات مبارزه با پول‌شویی).

🏗️

پلتفرم frontend و design system برای AI

Frontend Platform for AI

بسته‌های مشترک، کتابخانهٔ کامپوننت و SDK که تیم‌های دیگر قابلیت‌های AI را با آن می‌سازند؛ مثل آگهی Virtualitics، React SDK در WisdomAI و microfrontendهای Hawk.

تفاوت با شغل‌های مشابه

کجا این شغل تمام می‌شود و شغل دیگری شروع می‌شود؟

توسعه‌دهنده Full-StackFull-Stack Developer

Full-Stack برای هر نوع محصولی هم سرور و پایگاه داده را می‌سازد و هم رابط کاربری را. مهندس Frontend هوش مصنوعی روی لایهٔ رابط محصولات AI متمرکز است: streaming، نمایش کار ایجنت، بازبینی انسانی و Generative UI. مرز باز است؛ WisdomAI در آگهی Frontend/Fullstack خود می‌نویسد بعضی از مهندسانش نیمی frontend و نیمی backend کار می‌کنند و بعضی روی رابط و مصورسازی می‌مانند، و Atira هم از مهندس Frontend/UX خود ساختن قابلیت‌های full-stack، از کامپوننت React تا قرارداد API، را می‌خواهد.

مهندس هوش مصنوعیAI Engineer

مهندس AI رفتار مدل، ایجنت، اتصال به داده و ارزیابی کیفیت خروجی را می‌سازد؛ مهندس Frontend هوش مصنوعی جایی را می‌سازد که این ایجنت به کاربر می‌رسد. برخی شرکت‌ها این دو را جدا آگهی می‌کنند: Sift هم‌زمان آگهی Backend (Agentic AI) و Frontend (Agentic AI) دارد، و در Farther مهندس Frontend قرارداد داده با «تیم بک‌اند ایجنت» را مذاکره و نسخه‌بندی می‌کند. Sift صریحاً نوشته نقش Frontend آن مهندسی محصول است، نه پژوهش.

طراح محصول هوش مصنوعیProduct Designer, AI

طراح محصول AI تعیین می‌کند کاربر تجربه را چطور ببیند و با عدم قطعیت و خطای مدل چطور روبه‌رو شود. مهندس Frontend هوش مصنوعی آن تجربه را در کد واقعی پیاده می‌کند و مسئول رفتار فنی آن است: حالت‌های بارگذاری و خطا، کارایی، دسترس‌پذیری و امنیت رندر خروجی مدل. همکاری نزدیک است؛ Within نقش خود را «محل تلاقی طراحی محصول و مهندسی frontend» می‌داند و OpenAI از مهندس Frontend اپ Codex می‌خواهد نمونه‌های طراحی را به تجربه‌ای در سطح پروداکشن تبدیل کند.

مهندس نمونه‌سازی هوش مصنوعی / مهندس طراحیAI Prototyping Engineer / Design Engineer

مهندس نمونه‌سازی AI امکان‌پذیری یک ایده را سریع می‌آزماید و نمونهٔ موفق را به تیم‌های پروداکشن می‌سپارد. مهندس Frontend هوش مصنوعی همان سطح را تا پروداکشن می‌برد و نگه می‌دارد؛ Farther صریحاً «prototype → production» را جزو وظایف آورده و Atira پوشش تست روی جریان‌های مهم را. مرز با Design Engineer باز است: آگهی Design engineer شرکت WRITER همان تجربهٔ رابط‌های AI را می‌خواهد (UI فراخوانی ابزار، پاسخ جریانی، state ایجنت و رندر پویای رابط)، اما در کنار آن روی جا انداختن design system در کل سازمان تأکید دارد.

تأثیر در صنایع مختلف

مهندس Frontend هوش مصنوعی در همه صنایع مشغول به کار است — نه فقط شرکت‌های فناوری

🏦

مدیریت ثروت و خدمات مالی

دستیار AI در Farther به سؤال مشاوران پاسخ می‌دهد و از طرف آن‌ها در محصول کار می‌کند؛ گام بعدی به گفتهٔ آگهی این است که خودش رابط را بسازد

🚀

هوافضا و سخت‌افزار

Sift برای تیم‌های مهندسی موشک، ماهواره و خودروی خودران ایجنت‌هایی ساخته که داده‌های آزمون و پرواز را بررسی می‌کنند و رابطش باید کار ایجنت را کنار داده‌های بزرگ نشان دهد

🛡️

مبارزه با پول‌شویی و تقلب

در Investigation Agent شرکت Hawk، تحلیلگران workflowهای AI را تنظیم می‌کنند، اجرای تحقیقات خودکار را دنبال می‌کنند و نتیجهٔ ایجنت را بررسی می‌کنند

🏭

صنعت و فروش فنی

ایجنت‌های Atira درخواست‌های استعلام (RFQ) هزار صفحه‌ای را تحلیل می‌کنند و رابطش باید این اسناد را قابل‌بازبینی، قابل‌مقایسه و قابل‌ویرایش کند؛ به گفتهٔ آگهی، یک الزام اشتباه‌خوانده‌شده می‌تواند برای سازنده هزینه‌ای شش‌رقمی داشته باشد

📊

تحلیل داده و BI

WisdomAI نمودار و داشبورد را با AI تولید می‌کند و آن را در وب، موبایل، Slack یا داخل اپلیکیشن مشتری ارائه می‌دهد

🏛️

دفاع، دولت و زیرساخت حیاتی

Virtualitics برای اپلیکیشن‌های پرداده در این حوزه‌ها کامپوننت‌هایی می‌سازد که سطح‌های چت و Generative UI مبتنی بر رویدادهای جریانی را هم شامل می‌شوند، با الزام دسترس‌پذیری Section 508

💼

نرم‌افزار سازمانی و محیط کار دیجیتال

TeamViewer تجربه‌های AI را به کلاینت وب خود اضافه می‌کند؛ پاسخ جریانی، تعامل با ابزارها و مدیریت خطا بخشی از کار این تیم است

💻

ابزار برنامه‌نویسی

OpenAI در اپ Codex رابط‌هایی برای کار با ایجنت می‌سازد: واگذاری کار، تایم‌لاین، وضعیت پیشرفت، بازبینی و کنترل

تصورات غلط رایج

قبل از تصمیم‌گیری، این باورهای اشتباه را بشناسید

Generative UI یعنی مدل هر بار کل صفحه را با کد دلخواه خودش می‌سازد

در بیشتر پیاده‌سازی‌ها مدل در چارچوبی محدود کار می‌کند. در الگوی AI SDK، مدل ابزاری را صدا می‌زند و نتیجه به کامپوننت React ازپیش‌ساخته داده می‌شود. در A2UI، ایجنت فقط توصیفی اعلانی می‌فرستد و تنها از کامپوننت‌های ازپیش‌تأییدشدهٔ کاتالوگ برنامه می‌تواند استفاده کند. مستندات CopilotKit هم Generative UI را به سه نوع کنترل‌شده، اعلانی و باز تقسیم می‌کند.

این کار یعنی ساختن یک پنجرهٔ چت

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

برای این نقش باید یادگیری ماشین و آموزش مدل بلد بود

آگهی‌ها React و TypeScript قوی، کار با API مدل‌ها و تجربهٔ رابط‌های AI می‌خواهند، نه آموزش مدل. Sift صریحاً نوشته این نقش مهندسی محصول است، نه پژوهش. آنچه لازم است فهم رفتار مدل است: Farther می‌خواهد دربارهٔ اینکه رابط وقتی مدل کند است، اشتباه می‌کند یا وسط پاسخ است چه چیزی به کاربر بدهکار است، دیدگاه روشن داشته باشید.

بدون سال‌ها تجربه و مدرک کامپیوتر نمی‌شود وارد شد

بیشتر آگهی‌ها ارشدند (Farther و Virtualitics دست‌کم ۶ سال، نسخهٔ ارشد Sift دست‌کم ۸ سال)، اما راه ورود هم وجود دارد. Within برای ۱ تا ۲ سال تجربه یا فارغ‌التحصیل تازه با پورتفولیوی قوی آگهی داده و نوشته مدرک کامپیوتر یا مهندسی لازم نیست. Sift نسخهٔ غیرارشد را با ۳ سال تجربه می‌خواهد.

با ابزارهای کدنویسی AI، مهارت frontend دیگر اهمیتی ندارد

آگهی‌ها هم استفادهٔ روزمره از این ابزارها را می‌خواهند و هم مهارت عمیق. WisdomAI می‌نویسد وقتی AI بخش زیادی از تایپ را انجام می‌دهد، کار اصلی سلیقه و قضاوت دربارهٔ ارزش و کیفیت چیزی است که ساخته می‌شود. TeamViewer حفظ یکدستی در کد تولیدشده را خواسته و Atira درک رفتار رندر، Suspense و server components را.

یک روز کاری واقعی

در هر سطح روز کاری چه شکلی است؟

جونیور (۰–۲ سال)

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

  • ◆ساخت یک کامپوننت تازه برای نمایش نتیجهٔ یک ابزار، با حالت بارگذاری و خطا
  • ◆رفع اشکال در نمایش جریانی پاسخ، مثلاً پرش layout هنگام رسیدن متن
  • ◆نوشتن تست برای یک جریان چت
  • ◆پیاده‌سازی طرح طراح و پرسیدن محدودیت‌های فنی از مهندس بک‌اند

میانی (۲–۵ سال)

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

  • ◆گفتگو با یک کاربر برای فهم اینکه کار ایجنت را چطور بررسی می‌کند
  • ◆طراحی نمایش کارهای طولانی ایجنت با امکان وقفه و ادامه
  • ◆هماهنگ کردن شکل API جلسه‌های ایجنت با مهندسان بک‌اند
  • ◆بهینه‌سازی رندر وقتی داده بزرگ است، مثلاً انتقال پردازش به Web Worker

ارشد (۵+ سال)

تمرکز روی معماری و استانداردهاست: فریم‌ورک Generative UI، قرارداد داده با بک‌اند ایجنت، کتابخانهٔ کامپوننت و سطح کیفیت در code review.

  • ◆طراحی API فریم‌ورکی که تیم‌های دیگر با آن قابلیت ایجنت را به صفحه‌هایشان اضافه می‌کنند
  • ◆نسخه‌بندی قرارداد پیام میان ایجنت و رابط و نوشتن تست برای هر دو طرف
  • ◆بازبینی امنیت رندر خروجی مدل و تعیین کامپوننت‌های مجاز
  • ◆منتورینگ مهندسان جوان‌تر و نوشتن مستندات

مسئولیت‌ها و وظایف

مسئولیت‌های اصلی

وظایف روزانه و مهارت‌های مورد نیاز در این شغل

فنی
  • ◈ساخت رابط چت و دستیار با نمایش جریانی پاسخ، توقف، تلاش دوباره و مدیریت خطا
  • ◈نمایش کار ایجنت: قدم‌ها، فراخوانی ابزارها، کارهای طولانی و وضعیت پیشرفت، طوری که کاربر بفهمد چه شد و چرا
  • ◈تبدیل خروجی مدل یا نتیجهٔ ابزارها به کامپوننت‌های واقعی و اعتبارسنجی‌شده (Generative UI)
  • ◈ساخت جریان‌های بازبینی و تأیید انسانی (human-in-the-loop) پیش از اقدام‌های حساس ایجنت
  • ◈توسعه و نگهداری کتابخانهٔ کامپوننت و design system برای الگوهای مشترک رابط AI
  • ◈تعریف و نسخه‌بندی قرارداد داده با تیم بک‌اند ایجنت و نوشتن تست برای آن
  • ◈تضمین کیفیت: تست خودکار، دسترس‌پذیری، کارایی با داده‌های بزرگ و رندر امن خروجی مدل
مهارت نرم
  • ◈کار نزدیک با طراح، مدیر محصول و گاهی مستقیم با مشتری برای تبدیل یک جریان کاری واقعی به رابطی قابل‌اعتماد
  • ◈دنبال کردن محصولات و پروتکل‌های تازهٔ AI و داشتن نظر روشن دربارهٔ اینکه چه چیزی آن‌ها را خوب می‌کند

مهارت‌های مورد نیاز

مهارت‌های فنی، نرم و حوزه‌ای که یک مهندس Frontend هوش مصنوعی موفق به آن‌ها نیاز دارد

مهارت‌های فنی

TypeScriptضروری

تایپ دقیق، که Farther آن را شیوهٔ معمول کار می‌داند؛ در همهٔ آگهی‌هایی که این صفحه بر پایهٔ آن‌هاست آمده است

Reactضروری

hooks، composition، Suspense و الگوهای state؛ Atira درک رفتار رندر و server components را می‌خواهد

نمایش جریانی (Streaming UI)ضروری

نمایش پاسخ هم‌زمان با تولید با SSE یا WebSocket؛ Virtualitics و TeamViewer آن را نام برده‌اند

نمایش فراخوانی ابزار و کار ایجنتضروری

رندر tool call، کارهای طولانی و trace؛ از امتیازهای آگهی Sift

Generative UIمهم

تبدیل خروجی مدل به کامپوننت معتبر؛ هستهٔ آگهی‌های Farther و WisdomAI

کتابخانهٔ کامپوننت و design systemمهم

Hawk (shadcn/ui و Radix)، TeamViewer و Virtualitics تجربهٔ ساخت یا نگهداری آن را می‌خواهند

دسترس‌پذیریمهم

WCAG و WAI-ARIA در TeamViewer؛ Section 508 و WCAG 2.1 AA در Virtualitics

تستمهم

Playwright، Vitest و Testing Library؛ Atira پوشش Playwright روی جریان‌های مهم را می‌خواهد

کارایی مرورگرمهم

رندر داده‌های بزرگ، Web Workers و کنترل حجم bundle؛ در آگهی‌های Sift و Virtualitics

اعتبارسنجی و امنیت خروجی مدلمهم

اعتبارسنجی با Zod و جلوگیری از XSS؛ OWASP تفسیر مستقیم خروجی مدل در مرورگر را خطرناک می‌داند

مصورسازی دادهمفید

D3.js، ECharts یا WebGL؛ امتیاز در آگهی‌های Sift و WisdomAI

کمی بک‌اندمفید

در حد خواندن یک endpoint در FastAPI یا Node؛ امتیاز در Hawk و بخشی از کار در WisdomAI

مهارت‌های نرم

حس محصولضروری

Farther می‌خواهد ابهام را به‌صورت یک تصمیم مطرح کنید، نه اینکه با حدس از کنارش بگذرید

توجه به جزئیاتضروری

Sift به ریزتعامل‌ها، تأخیر و افت FPS اشاره می‌کند و Within به انیمیشن ناهموار و جابه‌جایی layout

همکاری با طراحیمهم

OpenAI و Within کار نزدیک با طراح برای تبدیل نمونه به محصول را می‌خواهند

نوشتن API و مستندات خوبمهم

Farther تجربهٔ توسعه‌دهندگانی را که روی کار شما می‌سازند یک خروجی اصلی کار می‌داند

کار با مشتریمفید

Sift و WisdomAI مهندس را نزدیک مشتری می‌خواهند تا خودش تشخیص دهد چه چیزی ارزش ساختن دارد

دانش حوزه‌ای

رفتار مدل‌های زبانیمهم

کندی، خطا و پاسخ نیمه‌کاره، و اینکه رابط در هر حالت چه باید نشان دهد

پروتکل‌های ایجنت و رابطمفید

AG-UI، A2UI و MCP Apps؛ هنوز در حال تکامل‌اند و A2UI نسخهٔ ۱٫۰ خود را در وضعیت candidate دارد

الگوهای UX برای AIمفید

اعتمادسازی، نمایش آنچه پشت صحنه رخ می‌دهد و کنترل کاربر؛ مجموعه‌هایی مثل Shape of AI این الگوها را دسته‌بندی کرده‌اند

دانش یک صنعتمفید

Farther مدیریت ثروت و خدمات مالی، Hawk فین‌تک و RegTech، و Sift محاسبات علمی و تله‌متری سخت‌افزار را امتیاز می‌دانند

ضروری — بدون آن نمی‌توان وارد بازار کار شدمهم — تفاوت بین جونیور و میانیمفید — مزیت رقابتی

نقشه راه و مسیر آموزشی

نقشه راه تبدیل شدن به مهندس Frontend هوش مصنوعی

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

1

پایه‌های وب: HTML، CSS، JavaScript و Git

⏱️ ۲ تا ۳ ماه

همهٔ آگهی‌های این نقش روی پایه‌های وب ساخته شده‌اند. HTML معنایی، CSS و layout، JavaScript مدرن (به‌خصوص Promise و async/await) و Git را از همین ابتدا یاد بگیرید. MDN مرجع رایگان و دقیق این مرحله است و کتاب Pro Git به فارسی هم در دسترس است.

HTML معناییCSS (Flexbox و Grid)JavaScript مدرنPromise و async/awaitGit و GitHubDevTools مرورگر
2

TypeScript، React و Next.js

⏱️ ۲ تا ۳ ماه

React و TypeScript زبان مشترک تقریباً همهٔ آگهی‌های این نقش‌اند. Farther تایپ دقیق را «شیوهٔ معمول کار» می‌داند و Sift از React، NextJS و TypeScript نام می‌برد. کامپوننت، state، hooks، فرم و دریافت داده از سرور را با چند پروژهٔ کوچک تمرین کنید.

TypeScriptReact (hooks و composition)Next.jsTanStack Query یا مشابهTailwind CSSفرم و اعتبارسنجی با Zod
3

کار با API مدل‌ها و رابط چت جریانی

⏱️ ۱ تا ۲ ماه

یاد بگیرید پاسخ مدل را تکه‌تکه و هم‌زمان با تولید نشان دهید، وضعیت گفتگو را نگه دارید و توقف، تلاش دوباره و خطا را مدیریت کنید. به گفتهٔ مستندات AI SDK، هوک useChat پیام‌ها را جریانی نمایش می‌دهد و state گفتگو را مدیریت می‌کند. سازوکار زیرین، یعنی Server-Sent Events و Streams API مرورگر، را هم بشناسید تا وقتی چیزی خراب شد بدانید کجا را نگاه کنید.

Streaming (SSE و Streams API)AI SDK و useChatرندر Markdown خروجی مدلحالت‌های بارگذاری، توقف و خطاTool calling در حد مفهومیکار با API یک مدل زبانی
4

Generative UI و رابط ایجنت‌ها

⏱️ ۲ ماه

در Generative UI خروجی مدل به کامپوننت واقعی تبدیل می‌شود. در ساده‌ترین الگو، که مستندات AI SDK توضیح می‌دهد، نتیجهٔ فراخوانی یک ابزار (tool call) به یک کامپوننت React داده می‌شود. در الگوهای بازتر، ایجنت توصیفی از رابط می‌فرستد و برنامه آن را اعتبارسنجی و نمایش می‌دهد؛ A2UI و AG-UI دو پروتکل باز برای همین کارند. نمایش کار ایجنت (trace)، کارهای طولانی و تأیید انسانی را هم تمرین کنید.

اتصال tool call به کامپوننتUI اعلانی (declarative) و کاتالوگ کامپوننتAG-UI و CopilotKitA2UI و MCP Apps در حد آشنایینمایش trace و کارهای طولانیHuman-in-the-loop (بازبینی و تأیید)
5

کیفیت در پروداکشن: دسترس‌پذیری، تست، کارایی و امنیت

⏱️ مداوم

آنچه یک دموی چت را به محصول تبدیل می‌کند همین مرحله است. TeamViewer تسلط به WCAG و WAI-ARIA و تست visual regression را می‌خواهد، Atira پوشش Playwright روی جریان‌های مهم را، و Sift کارایی مرورگر با داده‌های بزرگ را. خروجی مدل را هم دادهٔ نامطمئن بدانید: OWASP هشدار می‌دهد اگر JavaScript یا Markdown تولیدشده توسط مدل بی‌واسطه در مرورگر تفسیر شود، نتیجه می‌تواند XSS باشد.

دسترس‌پذیری (WCAG و ARIA)Playwright و VitestStorybook و design systemکارایی (Web Vitals و Web Workers)پاک‌سازی و اعتبارسنجی خروجی مدلالگوهای UX برای AI

ابزارها و استک فنی

ابزارهایی که هر مهندس AI باید بشناسد، دسته‌بندی‌شده بر اساس اولویت

زبان و فریم‌ورک

TypeScript

زبان مشترک همهٔ آگهی‌هایی که این صفحه بر پایهٔ آن‌هاست؛ Farther تایپ دقیق را پیش‌فرض کار می‌داند

ضروری
React

کتابخانهٔ رابط کاربری در آگهی‌های Farther، Sift، Hawk، Atira، TeamViewer و WisdomAI

ضروری
Next.js

فریم‌ورک React برای اپلیکیشن کامل؛ Sift و Atira آن را نام برده‌اند

مفید
Tailwind CSS

استایل‌دهی؛ در پشتهٔ فنی Farther، Sift، Hawk و Within آمده است

مفید

کتابخانه‌ها و پروتکل‌های رابط AI

AI SDK

جعبه‌ابزار TypeScript شرکت Vercel برای اتصال به مدل‌ها؛ useChat برای چت جریانی و الگوی Generative UI در مستنداتش

مفید
CopilotKit

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

مفید
assistant-ui

کامپوننت‌ها و runtime متن‌باز React برای چت AI، با streaming، ابزارها و ذخیرهٔ گفتگو

مفید
A2UI

مشخصهٔ باز ساختهٔ Google که ایجنت با آن توصیف کامپوننت می‌فرستد و برنامه فقط از کاتالوگ مجاز خودش رندر می‌کند

پیشرفته

کامپوننت، داده و اعتبارسنجی

shadcn/ui

مجموعهٔ کامپوننت؛ Hawk و Atira آن را در کنار Radix و Tailwind نام برده‌اند

مفید
Radix UI

کامپوننت‌های پایهٔ دسترس‌پذیر؛ در آگهی‌های Hawk، Atira و Sift آمده است

مفید
TanStack Query

مدیریت دادهٔ سرور در رابط؛ در پشتهٔ Farther، Hawk و Atira

مفید
Zod

تعریف و اعتبارسنجی schema در TypeScript؛ در پشتهٔ Farther. برای بررسی خروجی مدل پیش از نمایش هم به کار می‌آید

مفید

تست، کیفیت و ابزار توسعه

Playwright

تست end-to-end؛ Atira پوشش Playwright روی جریان‌های مهم را می‌خواهد و Hawk آن را در کنار Vitest آورده است

مفید
Vitest

تست واحد و کامپوننت؛ در آگهی‌های Hawk و Virtualitics

مفید
Storybook

ساخت و مستندسازی کامپوننت جدا از اپلیکیشن؛ TeamViewer و Hawk آن را خواسته‌اند

مفید
Claude Code

ابزار کدنویسی با AI؛ Farther، Hawk و Atira استفادهٔ روزمره از این نوع ابزارها را شرط گذاشته‌اند

مفید
ضروری — باید یاد بگیریدمفید — ارزش یادگیری داردپیشرفته — برای سطوح ارشد

مسیر پیشرفت شغلی

از جونیور تا Staff Engineer — چه مهارت‌هایی نیاز دارید و چه درآمدی انتظار داشته باشید

مهندس Frontend AI جونیور

۰ تا ۲ سال

~$173K

میانگین سالانه (آمریکا)

ساخت کامپوننت‌های مشخص زیر نظر مهندسان ارشد، اتصال به API ها و یادگیری الگوهای رابط AI؛ آگهی Within برای همین سطح نوشته شده است

ReactTypeScriptTailwindGitAI coding tools

مهندس Frontend AI

۲ تا ۵ سال

~$180K

میانگین سالانه (آمریکا)

مالکیت یک سطح محصول، مثلاً چت ایجنت یا صفحهٔ بررسی خروجی، از MVP تا نسخه‌های بعدی؛ آگهی Sift با ۳ سال تجربه همین را می‌خواهد

Streaming UITool-call renderingComponent libraryTestingPerformance

مهندس ارشد Frontend AI

۵+ سال

~$205K

میانگین سالانه (آمریکا)

طراحی فریم‌ورک Generative UI و قرارداد داده میان ایجنت و رابط، تعیین سطح کیفیت در code review و منتورینگ؛ آگهی‌های Farther (۶+ سال) و نسخهٔ ارشد Sift (۸+ سال)

Generative UI architectureAPI / contract designDesign systemsAccessibilityMentoring

Staff / Principal Frontend Engineer

پس از سطح ارشد

تعیین جهت فنی رابط‌های AI در چند تیم و ساخت پلتفرم، بسته‌های مشترک و SDK که تیم‌های دیگر روی آن می‌سازند؛ کاری که در آگهی‌های Virtualitics و WisdomAI هم دیده می‌شود

Frontend platformSDK designTechnical strategyCross-team leadership

چالش‌ها و جنبه‌های منفی

واقعیت‌هایی که کمتر در آگهی‌های شغلی می‌بینید — قبل از ورود بدانید

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

عمومی

پاسخ مدل ممکن است کند برسد، وسط کار قطع شود یا اشتباه باشد. Farther از نامزد دیدگاه می‌خواهد که رابط در این لحظه‌ها چه چیزی به کاربر بدهکار است، و Atira صریحاً می‌پرسد وقتی جریان ایجنت در توکن ۴٬۷۳۲ متوقف شد چه اتفاقی می‌افتد. طراحی حالت‌های بارگذاری، خطا و خالی بخش اصلی کار است، نه کار جانبی.

رندر امن خروجی مدل

عمومی

خروجی مدل را باید مثل ورودی نامطمئن کاربر دید. OWASP در فهرست ریسک‌های برنامه‌های LLM هشدار می‌دهد اگر JavaScript یا Markdown تولیدشده توسط مدل بی‌واسطه در مرورگر تفسیر شود، نتیجه می‌تواند XSS باشد. به همین دلیل پروتکل‌هایی مثل A2UI به‌جای کد اجرایی، توصیف اعلانی و کاتالوگ کامپوننت‌های مجاز را به کار می‌برند.

اعتماد و شفافیت

عمومی

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

کارایی با داده‌های بزرگ

استارتاپ

خروجی ایجنت اغلب کنار داده‌های حجیم نمایش داده می‌شود. Sift از Web Workers، کش مبتنی بر OPFS و حتی بیرون رفتن از React وقتی فریم‌ورک گلوگاه می‌شود می‌گوید، و Atira از نمایش اسناد هزار صفحه‌ای بدون از کار انداختن مرورگر.

دسترس‌پذیری محتوای پویا

شرکت بزرگ

رابطی که هر بار شکل تازه‌ای دارد یا متنش تکه‌تکه می‌رسد، باید برای صفحه‌خوان و کاربر صفحه‌کلید هم قابل‌استفاده بماند. TeamViewer درک عمیق WCAG و WAI-ARIA را می‌خواهد و Virtualitics دسترس‌پذیری در سطح Section 508 و WCAG 2.1 AA را الزام اول می‌داند.

قرارداد با بک‌اند و تیم‌های دیگر

عمومی

رابط و ایجنت با پیام‌هایی با ساختار مشخص با هم حرف می‌زنند. Farther از مهندس می‌خواهد این قرارداد را با تیم بک‌اند ایجنت مذاکره و نسخه‌بندی کند و هر دو طرف را با تست پایبند نگه دارد؛ همان آگهی یادآوری می‌کند که تغییر ناسازگار در کتابخانه‌ای که تیم‌های دیگر به آن وابسته‌اند هزینه دارد.

استانداردهای در حال تغییر

استارتاپ

ابزارها و پروتکل‌های این حوزه تازه‌اند: A2UI هنوز نسخهٔ ۱٫۰ را در وضعیت candidate دارد و AG-UI و MCP Apps هم در حال گسترش‌اند. WisdomAI می‌نویسد UX این حوزه دستورالعمل آماده‌ای ندارد. انتخاب‌ها را طوری انجام دهید که عوض کردنشان بعداً ممکن باشد.

حقوق و بازار کار جهانی

حقوق جهانی مهندس Frontend هوش مصنوعی

حقوق سالانه در کشورهای مختلف بر اساس داده‌های منتشرشده؛ منبع هر ردیف با آیکون کنار نام کشور باز می‌شود.

کشورمیانه / میانگینارز
🇺🇸آمریکا
$205,000USD

چگونه از صفر شروع کنیم

برنامه گام‌به‌گام برای ورود به مهندسی هوش مصنوعی

ماه ۱: TypeScript و React

اگر هنوز با JavaScript ساده کار می‌کنید، TypeScript و React را محکم کنید: کامپوننت، hooks و state.

ماه ۲: Next.js و API مدل‌ها

یک اپ Next.js بسازید که از طریق AI SDK به یک مدل وصل شود.

ماه ۳: چت جریانی

پروژهٔ اول پورتفولیو: چت جریانی با توقف، تلاش دوباره، رندر امن Markdown و حالت‌های خطا.

ماه ۴: Generative UI

نتیجهٔ چند ابزار را به کامپوننت‌های اختصاصی وصل کنید و بعد یک رندرکنندهٔ اعلانی ساده با کاتالوگ مجاز بسازید.

ماه ۵: رابط ایجنت و تأیید انسانی

نمایش قدم‌های ایجنت، کارهای طولانی و تأیید پیش از اقدام را تمرین کنید.

ماه ۶: کیفیت و پورتفولیو

به پروژه‌ها تست Playwright و بررسی دسترس‌پذیری اضافه کنید، README روشن بنویسید و برای نقش‌های Frontend با قید AI اقدام کنید.

پروژه‌های پیشنهادی برای رزومه

چت جریانی با کنترل کامل حالت‌ها

مبتدی

یک رابط چت با Next.js و AI SDK بسازید که پاسخ را جریانی نشان دهد، Markdown را امن رندر کند و دکمه‌های توقف و تلاش دوباره داشته باشد. حالت‌های خالی، بارگذاری و خطا را هم طراحی کنید.

Next.jsTypeScriptAI SDK (useChat)Tailwind CSS
زمان تخمینی: ۲ هفته

Generative UI با فراخوانی ابزار

متوسط

چند ابزار تعریف کنید (مثلاً آب‌وهوا، نرخ ارز و تقویم) و نتیجهٔ هر ابزار را به کامپوننت React مخصوص خودش وصل کنید، با حالت بارگذاری جداگانه برای هر کامپوننت؛ همان الگویی که مستندات AI SDK توضیح می‌دهد.

ReactAI SDKZodshadcn/ui
زمان تخمینی: ۲ هفته

نمایشگر کار ایجنت با تأیید انسانی

متوسط

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

ReactCopilotKit یا AG-UITypeScriptPlaywright
زمان تخمینی: ۳ هفته

داشبورد ساخته‌شده از زبان طبیعی

پیشرفته

کاربر دربارهٔ یک مجموعه‌داده سؤال می‌پرسد و مدل مشخصات (spec) یک نمودار را برمی‌گرداند. spec را با Zod اعتبارسنجی و با ECharts یا D3 رسم کنید و کنترل‌هایی بگذارید که کاربر بدون پرامپت تازه نمودار را تنظیم کند؛ WisdomAI همین مسئله را در آگهی‌اش توصیف کرده است.

ReactZodApache ECharts یا D3AI SDK
زمان تخمینی: ۴ هفته

رندرکنندهٔ رابط اعلانی با کاتالوگ امن

پیشرفته

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

TypeScriptZodA2UI (به‌عنوان الگو)Playwright
زمان تخمینی: ۴ هفته

مثال‌های واقعی و Case Studies

داستان‌های واقعی از مهندسانی که در این حوزه تأثیرگذار بوده‌اند

J

Jared Palmer

پیشینه

به گفتهٔ سایت خودش، پیش از Turborepo یک استودیوی توسعهٔ نرم‌افزار و طراحی در نیویورک را اداره می‌کرد. Vercel استارتاپ او، Turborepo، را در اواخر ۲۰۲۱ خرید. بعد از Vercel در Microsoft معاون مهندسی Xbox و معاون ارشد محصول GitHub بود و اکنون معاون مهندسی Cognition، سازندهٔ Devin، است.

دستاورد

در دورهٔ معاونت AI در Vercel، به گفتهٔ خودش v0.app و AI SDK را ساخت. v0 خودش را ابزاری برای ساختن اپلیکیشن وب با AI معرفی می‌کند و مستندات AI SDK الگوی Generative UI را برای توسعه‌دهندگان React توضیح می‌دهد.

درس کلیدی

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

s

shadcn

پیشینه

به گفتهٔ سایت خودش، مهندس طراحی (design engineer) در تیم AI شرکت Vercel است.

دستاورد

shadcn/ui و shadcn/registry را ساخته و v0 را همراه Jared، Shu و Max ساخته است. طبق مستندات shadcn/ui، این مجموعه به‌جای یک بستهٔ نصبی، کد واقعی کامپوننت را در اختیار توسعه‌دهنده می‌گذارد و کد باز و API یکدستش به مدل‌های AI امکان می‌دهد کامپوننت‌ها را بخوانند و کامپوننت تازه بسازند. همین مجموعه در آگهی‌های Hawk و Atira هم نام برده شده است.

درس کلیدی

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

G

Guillermo Rauch

پیشینه

اهل لانوس در بوئنوس‌آیرس آرژانتین است. به گفتهٔ خودش، پس از پیوستن به تیم اصلی MooTools، در ۱۸ سالگی اولین شغل تمام‌وقتش را به‌عنوان مهندس frontend گرفت و به سان‌فرانسیسکو رفت. اولین شرکتش، Cloudup، را Automattic (شرکت سازندهٔ WordPress) خرید.

دستاورد

Socket.IO، کتابخانه‌ای برای ارتباط بلادرنگ، و Mongoose را نوشت و Next.js را طراحی و هم‌نویسی کرد. یکی از اولین کتاب‌های Node.js را نوشت و اکنون مدیرعامل Vercel است؛ شرکتی که AI SDK و v0 را منتشر کرده است.

درس کلیدی

کارهای او از ارتباط بلادرنگ تا فریم‌ورک React همه روی تجربهٔ کار در مرورگر متمرکز بوده‌اند. به نظر می‌رسد تخصص عمیق در frontend، به‌جای اینکه آدم را محدود کند، می‌تواند راه ساختن ابزارهای نسل تازه را باز کند.

نمونه آگهی استخدام واقعی + تحلیل

یک آگهی واقعی از شرکت فعال در حال استخدام، با تحلیل هر بخش

Senior Frontend Engineer, Conversational & Gen UI

Fartherنیویورک (آمریکا) — هیبرید2026-09-08

تحلیل نیازمندی‌ها

EN

6+ years building production web applications, including time somewhere the frontend was the product

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

ضروری
EN

Expert-level frontend engineering, where strict typing is how you already work

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

ضروری
EN

Production experience with LLMs — agentic systems, tool calling, streaming responses, conversational interfaces — and a point of view on what an interface owes a user when the model is slow, wrong, or halfway through an answer

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

ضروری
EN

Composition over configuration; modular, scalable frontend patterns are how you think by default

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

مهم
EN

Distributed systems fundamentals — timeouts, retries, idempotency, failure isolation

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

مهم
EN

Fluent in an AI-assisted development loop — building with Claude Code, shipping through Git-based PRs and automated review

کارفرما انتظار دارد خودتان روزانه با ابزارهای کدنویسی AI کار کنید و تغییرها را از مسیر pull request و بازبینی خودکار منتشر کنید.

مهم
EN

Used or extended a framework for agent-to-UI communication, and can say precisely where it stopped being enough

امتیاز است، نه شرط. منظور فریم‌ورک‌هایی مثل AG-UI، CopilotKit یا AI SDK است. نکتهٔ مهم بخش دوم جمله است: کارفرما می‌خواهد محدودیت این ابزارها را از تجربه بشناسید.

مفید
EN

Built and versioned a component library other teams depended on, and know what a breaking change costs once they have all imported it

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

مفید

تحلیل مسئولیت‌ها

EN

Deliver the assistant experience, prototype → production — the surface advisors reach for, and the thing every other item on this list exists to make possible

مسئولیت تجربهٔ دستیار AI از نمونهٔ اولیه تا محصول نهایی با شماست. یعنی هم سرعت آزمودن ایده لازم است و هم دقت لازم برای نگه داشتن آن در پروداکشن.

EN

Build the framework underneath it, so any Farther surface can declare what the agent can do and what it can see in a few lines

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

EN

Design the renderer that turns a model's output into a real, validated, submittable interface, extensible so a new kind of input is additive and never a refactor

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

EN

Negotiate and version the wire contract with the agent backend team, and hold both sides to it with tests

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

EN

Treat developer experience as a first-class deliverable — design the API, document it, and judge it by how many teams build on it without asking you for help

مشتری شما فقط کاربر نهایی نیست؛ مهندسان تیم‌های دیگر هم روی کار شما می‌سازند. API روشن و مستندات خوب بخشی از خروجی کار است.

EN

Mentor the engineers coming up behind you and set the quality bar in review

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

نتیجه‌گیری کلی

این آگهی روشن‌ترین تصویر از Generative UI به‌عنوان کار روزانه است: مهندس Frontend ارشدی با دست‌کم ۶ سال تجربه که هم دستیار AI را تا پروداکشن می‌برد و هم فریم‌ورکی می‌سازد که خروجی مدل را به رابط معتبر و قابل‌ارسال تبدیل می‌کند و قرارداد آن را با تیم بک‌اند ایجنت نگه می‌دارد. در هیچ جای آگهی آموزش مدل خواسته نشده است؛ آنچه خواسته شده تسلط کامل به frontend، تجربهٔ پروداکشن با LLM و قضاوت دربارهٔ لحظه‌هایی است که مدل کند یا اشتباه است. آگهی بازهٔ حقوق اعلام نکرده است.

آینده و روندها

پیش‌بینی ۵–۱۰ ساله و مهارت‌هایی که باید یاد بگیرید

BLS پیش‌بینی می‌کند اشتغال Web Developers در آمریکا از ۲۰۲۵ تا ۲۰۳۵، ۴٪ رشد کند (از ۸۷٬۴۰۰ به ۹۰٬۶۰۰ نفر). BLS توسعه‌دهندگان front-end را بخشی از همین گروه می‌داند؛ آمار جداگانه‌ای برای کار روی رابط‌های AI وجود ندارد.

منبع: BLS Occupational Outlook Handbook — Web Developers (2025–35)

مهارت‌های نوظهور که باید یاد بگیرید

Generative UI: تبدیل خروجی مدل به کامپوننت معتبرپروتکل‌های ایجنت و رابط: AG-UI، A2UI و MCP Appsنمایش کار ایجنت: trace، کارهای طولانی و وقفهHuman-in-the-loop: بازبینی و تأیید پیش از اقدامرندر امن خروجی مدل (OWASP LLM05)کار روزمره با ابزارهای کدنویسی AI مثل Claude Code و Cursor

پیش‌بینی‌های آینده

2035

BLS پیش‌بینی می‌کند اشتغال Web Developers در آمریکا از ۲۰۲۵ تا ۲۰۳۵، ۴٪ رشد کند و می‌نویسد استفادهٔ روزافزون از AI در توسعهٔ وب ممکن است این رشد را کند کند.

2035

BLS برای گروه بزرگ‌تر Software Developers، QA Analysts و Testers رشد ۱۰٪ را از ۲۰۲۵ تا ۲۰۳۵ پیش‌بینی می‌کند و یکی از دلایل تقاضای قوی را گسترش توسعهٔ نرم‌افزار برای AI می‌داند. بسیاری از آگهی‌های این نقش، مثل Sift و Harvey، عنوان Software Engineer دارند.

ریسک‌های واقعی

BLS می‌نویسد استفادهٔ روزافزون از AI در توسعهٔ وب ممکن است رشد اشتغال توسعه‌دهندگان وب را کند کند. آگهی‌های این نقش هم همین جهت را نشان می‌دهند: Farther، Hawk و Atira استفادهٔ روزمره از ابزارهای کدنویسی AI را شرط گذاشته‌اند و WisdomAI می‌نویسد کار دیگر تایپ کردن نیست، بلکه سلیقه و قضاوت است. یعنی ارزش مهندس بیشتر در طراحی سیستم، کیفیت و قضاوت است تا در حجم کدی که می‌نویسد. ریسک دوم سرعت تغییر است: پروتکل‌هایی مثل A2UI هنوز به نسخهٔ ۱٫۰ نرسیده‌اند و ابزاری که امروز یاد می‌گیرید ممکن است زود عوض شود.

منابع

اطلاعات این صفحه در تاریخ ۳۰ مهر ۱۴۰۵ از این ۳۷ منبع بررسی شده است.

  1. Senior Frontend Engineer, Conversational & Gen UI — Farther (job posting)
  2. Software Engineer, Frontend (Agentic AI) — Sift (job posting)
  3. Senior Software Engineer, Frontend (Agentic AI) — Sift (job posting)
  4. Software Engineer, Backend (Agentic AI) — Sift (job posting)
  5. AI Frontend Engineer — Within (YC job posting)
  6. Senior AI Frontend Engineer — TeamViewer (job posting)
  7. Frontend Engineer - Agentic AI — Hawk (job posting)
  8. Frontend / UX Engineer — Atira (job posting)
  9. Software Engineer, Frontend/Fullstack — WisdomAI (job posting)
  10. Senior Frontend Engineer — Virtualitics (job posting)
  11. Frontend Software Engineer, Codex App — OpenAI (job posting)
  12. Senior Software Engineer, Frontend — Harvey (job posting)
  13. Design engineer (US) — WRITER (job posting)
  14. levels.fyi — Frontend Software Engineer, United States
  15. levels.fyi — Frontend Software Engineer, Canada
  16. levels.fyi — Frontend Software Engineer, United Kingdom
  17. levels.fyi — Frontend Software Engineer, Germany
  18. levels.fyi — Frontend Software Engineer, Netherlands
  19. levels.fyi — Frontend Software Engineer, Australia
  20. levels.fyi — Frontend Software Engineer, India
  21. BLS Occupational Outlook Handbook — Web Developers and Digital Designers
  22. BLS Occupational Outlook Handbook — Software Developers, QA Analysts, and Testers
  23. AI SDK — Generative User Interfaces
  24. AI SDK — Chatbot (useChat)
  25. Google Research — Generative UI: A rich, custom, visual interactive user experience for any prompt (Nov 2025)
  26. Nielsen Norman Group — Generative UI and Outcome-Oriented Design (Mar 2024)
  27. AG-UI — Agent User Interaction Protocol overview
  28. A2UI — a streaming protocol for agent-driven user interfaces
  29. MCP Apps — Model Context Protocol
  30. CopilotKit documentation
  31. OWASP LLM05:2025 Improper Output Handling
  32. The Shape of AI — UX patterns for AI design
  33. v0 by Vercel
  34. shadcn/ui — Introduction (docs)
  35. Jared Palmer — personal site
  36. shadcn — personal site
  37. Guillermo Rauch — About

برای راهنمایی شخصی‌سازی‌شده مشاوره بگیرید