مهندس 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 آگهی میشود.
مقدمه و تعریف شغل
مهندس 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-Stack برای هر نوع محصولی هم سرور و پایگاه داده را میسازد و هم رابط کاربری را. مهندس Frontend هوش مصنوعی روی لایهٔ رابط محصولات AI متمرکز است: streaming، نمایش کار ایجنت، بازبینی انسانی و Generative UI. مرز باز است؛ WisdomAI در آگهی Frontend/Fullstack خود مینویسد بعضی از مهندسانش نیمی frontend و نیمی backend کار میکنند و بعضی روی رابط و مصورسازی میمانند، و Atira هم از مهندس Frontend/UX خود ساختن قابلیتهای full-stack، از کامپوننت React تا قرارداد API، را میخواهد.
مهندس AI رفتار مدل، ایجنت، اتصال به داده و ارزیابی کیفیت خروجی را میسازد؛ مهندس Frontend هوش مصنوعی جایی را میسازد که این ایجنت به کاربر میرسد. برخی شرکتها این دو را جدا آگهی میکنند: Sift همزمان آگهی Backend (Agentic AI) و Frontend (Agentic AI) دارد، و در Farther مهندس Frontend قرارداد داده با «تیم بکاند ایجنت» را مذاکره و نسخهبندی میکند. Sift صریحاً نوشته نقش Frontend آن مهندسی محصول است، نه پژوهش.
طراح محصول AI تعیین میکند کاربر تجربه را چطور ببیند و با عدم قطعیت و خطای مدل چطور روبهرو شود. مهندس Frontend هوش مصنوعی آن تجربه را در کد واقعی پیاده میکند و مسئول رفتار فنی آن است: حالتهای بارگذاری و خطا، کارایی، دسترسپذیری و امنیت رندر خروجی مدل. همکاری نزدیک است؛ Within نقش خود را «محل تلاقی طراحی محصول و مهندسی frontend» میداند و OpenAI از مهندس Frontend اپ Codex میخواهد نمونههای طراحی را به تجربهای در سطح پروداکشن تبدیل کند.
مهندس نمونهسازی 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 هوش مصنوعی موفق به آنها نیاز دارد
مهارتهای فنی
تایپ دقیق، که Farther آن را شیوهٔ معمول کار میداند؛ در همهٔ آگهیهایی که این صفحه بر پایهٔ آنهاست آمده است
hooks، composition، Suspense و الگوهای state؛ Atira درک رفتار رندر و server components را میخواهد
نمایش پاسخ همزمان با تولید با SSE یا WebSocket؛ Virtualitics و TeamViewer آن را نام بردهاند
رندر tool call، کارهای طولانی و trace؛ از امتیازهای آگهی Sift
تبدیل خروجی مدل به کامپوننت معتبر؛ هستهٔ آگهیهای Farther و WisdomAI
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 کار نزدیک با طراح برای تبدیل نمونه به محصول را میخواهند
Farther تجربهٔ توسعهدهندگانی را که روی کار شما میسازند یک خروجی اصلی کار میداند
Sift و WisdomAI مهندس را نزدیک مشتری میخواهند تا خودش تشخیص دهد چه چیزی ارزش ساختن دارد
دانش حوزهای
کندی، خطا و پاسخ نیمهکاره، و اینکه رابط در هر حالت چه باید نشان دهد
AG-UI، A2UI و MCP Apps؛ هنوز در حال تکاملاند و A2UI نسخهٔ ۱٫۰ خود را در وضعیت candidate دارد
اعتمادسازی، نمایش آنچه پشت صحنه رخ میدهد و کنترل کاربر؛ مجموعههایی مثل Shape of AI این الگوها را دستهبندی کردهاند
Farther مدیریت ثروت و خدمات مالی، Hawk فینتک و RegTech، و Sift محاسبات علمی و تلهمتری سختافزار را امتیاز میدانند
نقشه راه و مسیر آموزشی
نقشه راه تبدیل شدن به مهندس Frontend هوش مصنوعی
این مسیر گام به گام شما را از صفر تا حرفهای هدایت میکند.
پایههای وب: HTML، CSS، JavaScript و Git
همهٔ آگهیهای این نقش روی پایههای وب ساخته شدهاند. HTML معنایی، CSS و layout، JavaScript مدرن (بهخصوص Promise و async/await) و Git را از همین ابتدا یاد بگیرید. MDN مرجع رایگان و دقیق این مرحله است و کتاب Pro Git به فارسی هم در دسترس است.
TypeScript، React و Next.js
React و TypeScript زبان مشترک تقریباً همهٔ آگهیهای این نقشاند. Farther تایپ دقیق را «شیوهٔ معمول کار» میداند و Sift از React، NextJS و TypeScript نام میبرد. کامپوننت، state، hooks، فرم و دریافت داده از سرور را با چند پروژهٔ کوچک تمرین کنید.
کار با API مدلها و رابط چت جریانی
یاد بگیرید پاسخ مدل را تکهتکه و همزمان با تولید نشان دهید، وضعیت گفتگو را نگه دارید و توقف، تلاش دوباره و خطا را مدیریت کنید. به گفتهٔ مستندات AI SDK، هوک useChat پیامها را جریانی نمایش میدهد و state گفتگو را مدیریت میکند. سازوکار زیرین، یعنی Server-Sent Events و Streams API مرورگر، را هم بشناسید تا وقتی چیزی خراب شد بدانید کجا را نگاه کنید.
Generative UI و رابط ایجنتها
در Generative UI خروجی مدل به کامپوننت واقعی تبدیل میشود. در سادهترین الگو، که مستندات AI SDK توضیح میدهد، نتیجهٔ فراخوانی یک ابزار (tool call) به یک کامپوننت React داده میشود. در الگوهای بازتر، ایجنت توصیفی از رابط میفرستد و برنامه آن را اعتبارسنجی و نمایش میدهد؛ A2UI و AG-UI دو پروتکل باز برای همین کارند. نمایش کار ایجنت (trace)، کارهای طولانی و تأیید انسانی را هم تمرین کنید.
کیفیت در پروداکشن: دسترسپذیری، تست، کارایی و امنیت
آنچه یک دموی چت را به محصول تبدیل میکند همین مرحله است. TeamViewer تسلط به WCAG و WAI-ARIA و تست visual regression را میخواهد، Atira پوشش Playwright روی جریانهای مهم را، و Sift کارایی مرورگر با دادههای بزرگ را. خروجی مدل را هم دادهٔ نامطمئن بدانید: OWASP هشدار میدهد اگر JavaScript یا Markdown تولیدشده توسط مدل بیواسطه در مرورگر تفسیر شود، نتیجه میتواند XSS باشد.
ابزارها و استک فنی
ابزارهایی که هر مهندس AI باید بشناسد، دستهبندیشده بر اساس اولویت
زبان و فریمورک
زبان مشترک همهٔ آگهیهایی که این صفحه بر پایهٔ آنهاست؛ Farther تایپ دقیق را پیشفرض کار میداند
کتابخانهها و پروتکلهای رابط AI
جعبهابزار TypeScript شرکت Vercel برای اتصال به مدلها؛ useChat برای چت جریانی و الگوی Generative UI در مستنداتش
فریمورک متنباز برای افزودن چت، رابط تعاملی و تأیید انسانی به اپلیکیشن، با هر بکاند ایجنت
کامپوننت، داده و اعتبارسنجی
تست، کیفیت و ابزار توسعه
تست end-to-end؛ Atira پوشش Playwright روی جریانهای مهم را میخواهد و Hawk آن را در کنار Vitest آورده است
مسیر پیشرفت شغلی
از جونیور تا Staff Engineer — چه مهارتهایی نیاز دارید و چه درآمدی انتظار داشته باشید
مهندس Frontend AI جونیور
۰ تا ۲ سال
~$173K
میانگین سالانه (آمریکا)
ساخت کامپوننتهای مشخص زیر نظر مهندسان ارشد، اتصال به API ها و یادگیری الگوهای رابط AI؛ آگهی Within برای همین سطح نوشته شده است
مهندس Frontend AI
۲ تا ۵ سال
~$180K
میانگین سالانه (آمریکا)
مالکیت یک سطح محصول، مثلاً چت ایجنت یا صفحهٔ بررسی خروجی، از MVP تا نسخههای بعدی؛ آگهی Sift با ۳ سال تجربه همین را میخواهد
مهندس ارشد Frontend AI
۵+ سال
~$205K
میانگین سالانه (آمریکا)
طراحی فریمورک Generative UI و قرارداد داده میان ایجنت و رابط، تعیین سطح کیفیت در code review و منتورینگ؛ آگهیهای Farther (۶+ سال) و نسخهٔ ارشد Sift (۸+ سال)
Staff / Principal Frontend Engineer
پس از سطح ارشد
تعیین جهت فنی رابطهای AI در چند تیم و ساخت پلتفرم، بستههای مشترک و SDK که تیمهای دیگر روی آن میسازند؛ کاری که در آگهیهای Virtualitics و WisdomAI هم دیده میشود
چالشها و جنبههای منفی
واقعیتهایی که کمتر در آگهیهای شغلی میبینید — قبل از ورود بدانید
حالتهای میانی و پاسخ نیمهکاره
عمومیپاسخ مدل ممکن است کند برسد، وسط کار قطع شود یا اشتباه باشد. 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 هوش مصنوعی
حقوق سالانه در کشورهای مختلف بر اساس دادههای منتشرشده؛ منبع هر ردیف با آیکون کنار نام کشور باز میشود.
* ارقام سالانهاند. منبع هر رقم:
- Within posting (YC jobs page), AI Frontend Engineer (San Francisco; 1–2 years), seen Oct 2026: pay range; median = midpoint
- Sift posting, Software Engineer, Frontend (Agentic AI) (SF / Marina Del Rey; 3+ years), posted Jul 27, 2026: salary range; median = midpoint
- Sift posting, Senior Software Engineer, Frontend (Agentic AI) (SF / Marina Del Rey; 8+ years), posted Jul 27, 2026: salary range; median = midpoint
- Proxy: Frontend Software Engineer — levels.fyi, updated Oct 23, 2026, total comp (base+stock+bonus), 221 submissions: 25th–75th pct; median
- Proxy: Frontend Software Engineer — levels.fyi, updated Oct 23, 2026, total comp, 49 submissions: 25th–75th pct; median
- Proxy: Frontend Software Engineer — levels.fyi, updated Oct 23, 2026, total comp, 42 submissions: 25th–75th pct; median
- Proxy: Frontend Software Engineer — levels.fyi, updated Oct 23, 2026, total comp, 41 submissions: 25th–75th pct; median
- Proxy: Frontend Software Engineer — levels.fyi, updated Oct 23, 2026, total comp, 27 submissions: 25th–75th pct; median
- Proxy: Frontend Software Engineer — levels.fyi, updated Oct 23, 2026, total comp, 21 submissions: 25th–75th pct; median
- Proxy: Frontend Software Engineer — levels.fyi, updated Oct 23, 2026, total comp, 171 submissions: 25th–75th pct; median
چگونه از صفر شروع کنیم
برنامه گامبهگام برای ورود به مهندسی هوش مصنوعی
ماه ۱: 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 را امن رندر کند و دکمههای توقف و تلاش دوباره داشته باشد. حالتهای خالی، بارگذاری و خطا را هم طراحی کنید.
Generative UI با فراخوانی ابزار
متوسطچند ابزار تعریف کنید (مثلاً آبوهوا، نرخ ارز و تقویم) و نتیجهٔ هر ابزار را به کامپوننت React مخصوص خودش وصل کنید، با حالت بارگذاری جداگانه برای هر کامپوننت؛ همان الگویی که مستندات AI SDK توضیح میدهد.
نمایشگر کار ایجنت با تأیید انسانی
متوسطرابطی بسازید که قدمهای یک ایجنت (فراخوانی ابزار، نتیجه و خطا) را همزمان با اجرا نشان دهد و پیش از اقدامهای حساس از کاربر تأیید بگیرد. کاربر باید بتواند وسط کار اجرا را متوقف کند.
داشبورد ساختهشده از زبان طبیعی
پیشرفتهکاربر دربارهٔ یک مجموعهداده سؤال میپرسد و مدل مشخصات (spec) یک نمودار را برمیگرداند. spec را با Zod اعتبارسنجی و با ECharts یا D3 رسم کنید و کنترلهایی بگذارید که کاربر بدون پرامپت تازه نمودار را تنظیم کند؛ WisdomAI همین مسئله را در آگهیاش توصیف کرده است.
رندرکنندهٔ رابط اعلانی با کاتالوگ امن
پیشرفتهیک کاتالوگ کوچک از کامپوننتهای مجاز بسازید و رندرکنندهای بنویسید که توصیف JSON مدل را فقط با همین کامپوننتها نمایش دهد، ورودی نامعتبر را رد کند و فرم حاصل را قابلارسال کند. تست دسترسپذیری و Playwright اضافه کنید و در README توضیح دهید چرا مدل اجازهٔ اجرای کد دلخواه ندارد.
مثالهای واقعی و Case Studies
داستانهای واقعی از مهندسانی که در این حوزه تأثیرگذار بودهاند
به گفتهٔ سایت خودش، پیش از Turborepo یک استودیوی توسعهٔ نرمافزار و طراحی در نیویورک را اداره میکرد. Vercel استارتاپ او، Turborepo، را در اواخر ۲۰۲۱ خرید. بعد از Vercel در Microsoft معاون مهندسی Xbox و معاون ارشد محصول GitHub بود و اکنون معاون مهندسی Cognition، سازندهٔ Devin، است.
در دورهٔ معاونت AI در Vercel، به گفتهٔ خودش v0.app و AI SDK را ساخت. v0 خودش را ابزاری برای ساختن اپلیکیشن وب با AI معرفی میکند و مستندات AI SDK الگوی Generative UI را برای توسعهدهندگان React توضیح میدهد.
مسیر او از اداره کردن یک استودیوی طراحی و توسعه شروع شده است. به نظر میرسد ترکیب حس طراحی با مهندسی وب، همان چیزی که آگهیهای امروز میخواهند، پایهٔ مناسبی برای ساختن ابزارهای رابط AI است.
به گفتهٔ سایت خودش، مهندس طراحی (design engineer) در تیم AI شرکت Vercel است.
shadcn/ui و shadcn/registry را ساخته و v0 را همراه Jared، Shu و Max ساخته است. طبق مستندات shadcn/ui، این مجموعه بهجای یک بستهٔ نصبی، کد واقعی کامپوننت را در اختیار توسعهدهنده میگذارد و کد باز و API یکدستش به مدلهای AI امکان میدهد کامپوننتها را بخوانند و کامپوننت تازه بسازند. همین مجموعه در آگهیهای Hawk و Atira هم نام برده شده است.
به نظر میرسد وقتی مدلها هم کد رابط مینویسند، کامپوننتهایی که ساده، خوانا و قابلتغییر باشند برای انسان و مدل هر دو کارآمدترند؛ طراحی برای هر دو مخاطب مهارتی است که این نقش روزبهروز بیشتر به آن نیاز دارد.
اهل لانوس در بوئنوسآیرس آرژانتین است. به گفتهٔ خودش، پس از پیوستن به تیم اصلی MooTools، در ۱۸ سالگی اولین شغل تماموقتش را بهعنوان مهندس frontend گرفت و به سانفرانسیسکو رفت. اولین شرکتش، Cloudup، را Automattic (شرکت سازندهٔ WordPress) خرید.
Socket.IO، کتابخانهای برای ارتباط بلادرنگ، و Mongoose را نوشت و Next.js را طراحی و همنویسی کرد. یکی از اولین کتابهای Node.js را نوشت و اکنون مدیرعامل Vercel است؛ شرکتی که AI SDK و v0 را منتشر کرده است.
کارهای او از ارتباط بلادرنگ تا فریمورک React همه روی تجربهٔ کار در مرورگر متمرکز بودهاند. به نظر میرسد تخصص عمیق در frontend، بهجای اینکه آدم را محدود کند، میتواند راه ساختن ابزارهای نسل تازه را باز کند.
نمونه آگهی استخدام واقعی + تحلیل
یک آگهی واقعی از شرکت فعال در حال استخدام، با تحلیل هر بخش
Senior Frontend Engineer, Conversational & Gen UI
تحلیل نیازمندیها
6+ years building production web applications, including time somewhere the frontend was the product
این نقش برای مهندسی است که سالها رابط واقعی ساخته و نگه داشته، ترجیحاً جایی که محصول اصلی خودِ رابط بوده است. برای تازهکار، این آگهی هدف میانمدت است، نه نقطهٔ شروع.
ضروریExpert-level frontend engineering, where strict typing is how you already work
TypeScript با تنظیمات سختگیرانه باید عادت شما باشد، نه چیزی که تازه یاد میگیرید. وقتی خروجی مدل وارد رابط میشود، تایپ دقیق یکی از اولین لایههای محافظت است.
ضروری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 کافی نیست؛ باید دیده باشید ایجنت و فراخوانی ابزار در عمل چطور رفتار میکنند و برای لحظههایی که مدل کند، اشتباه یا نیمهکاره است، راهحل طراحی کرده باشید. پروژههای پورتفولیو باید همین حالتها را نشان دهند.
ضروریComposition over configuration; modular, scalable frontend patterns are how you think by default
یعنی ساختن قطعههای کوچک و ترکیبپذیر بهجای یک کامپوننت بزرگ با دهها تنظیم. در Generative UI که مدل قطعهها را کنار هم میگذارد، این شیوه اهمیت بیشتری پیدا میکند.
مهمDistributed systems fundamentals — timeouts, retries, idempotency, failure isolation
رابط AI به سرویسهایی وابسته است که ممکن است دیر جواب بدهند یا شکست بخورند. باید بدانید کی دوباره تلاش کنید، چطور از اجرای دوبارهٔ یک اقدام جلوگیری کنید و چطور خطای یک بخش کل صفحه را از کار نیندازد.
مهمFluent in an AI-assisted development loop — building with Claude Code, shipping through Git-based PRs and automated review
کارفرما انتظار دارد خودتان روزانه با ابزارهای کدنویسی AI کار کنید و تغییرها را از مسیر pull request و بازبینی خودکار منتشر کنید.
مهمUsed or extended a framework for agent-to-UI communication, and can say precisely where it stopped being enough
امتیاز است، نه شرط. منظور فریمورکهایی مثل AG-UI، CopilotKit یا AI SDK است. نکتهٔ مهم بخش دوم جمله است: کارفرما میخواهد محدودیت این ابزارها را از تجربه بشناسید.
مفیدBuilt and versioned a component library other teams depended on, and know what a breaking change costs once they have all imported it
این هم امتیاز است. نشان میدهد کار فقط ساختن یک صفحه نیست؛ شما ابزاری میسازید که تیمهای دیگر به آن وابستهاند و هر تغییر ناسازگار برای آنها هزینه دارد.
مفیدتحلیل مسئولیتها
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 از نمونهٔ اولیه تا محصول نهایی با شماست. یعنی هم سرعت آزمودن ایده لازم است و هم دقت لازم برای نگه داشتن آن در پروداکشن.
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
بهجای اینکه هر صفحه جداگانه به ایجنت وصل شود، لایهای میسازید که هر بخش محصول با چند خط اعلام کند ایجنت چه اقداماتی را مجاز است و چه دادهای را میبیند.
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 در این آگهی. خروجی مدل باید پیش از نمایش اعتبارسنجی شود و به فرم یا کامپوننتی واقعی تبدیل شود که کاربر بتواند آن را ارسال کند. طراحی باید طوری باشد که افزودن نوع تازهای از کامپوننت فقط چیزی اضافه کند و کد قبلی را نشکند.
Negotiate and version the wire contract with the agent backend team, and hold both sides to it with tests
قالب پیامهایی که میان ایجنت و رابط رد و بدل میشود را با تیم بکاند تعیین و نسخهبندی میکنید و با تست مطمئن میشوید هیچ طرف بدون هماهنگی آن را عوض نکند.
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 روشن و مستندات خوب بخشی از خروجی کار است.
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)
مهارتهای نوظهور که باید یاد بگیرید
پیشبینیهای آینده
BLS پیشبینی میکند اشتغال Web Developers در آمریکا از ۲۰۲۵ تا ۲۰۳۵، ۴٪ رشد کند و مینویسد استفادهٔ روزافزون از AI در توسعهٔ وب ممکن است این رشد را کند کند.
BLS برای گروه بزرگتر Software Developers، QA Analysts و Testers رشد ۱۰٪ را از ۲۰۲۵ تا ۲۰۳۵ پیشبینی میکند و یکی از دلایل تقاضای قوی را گسترش توسعهٔ نرمافزار برای AI میداند. بسیاری از آگهیهای این نقش، مثل Sift و Harvey، عنوان Software Engineer دارند.
BLS مینویسد استفادهٔ روزافزون از AI در توسعهٔ وب ممکن است رشد اشتغال توسعهدهندگان وب را کند کند. آگهیهای این نقش هم همین جهت را نشان میدهند: Farther، Hawk و Atira استفادهٔ روزمره از ابزارهای کدنویسی AI را شرط گذاشتهاند و WisdomAI مینویسد کار دیگر تایپ کردن نیست، بلکه سلیقه و قضاوت است. یعنی ارزش مهندس بیشتر در طراحی سیستم، کیفیت و قضاوت است تا در حجم کدی که مینویسد. ریسک دوم سرعت تغییر است: پروتکلهایی مثل A2UI هنوز به نسخهٔ ۱٫۰ نرسیدهاند و ابزاری که امروز یاد میگیرید ممکن است زود عوض شود.
منابع
اطلاعات این صفحه در تاریخ ۳۰ مهر ۱۴۰۵ از این ۳۷ منبع بررسی شده است.
- Senior Frontend Engineer, Conversational & Gen UI — Farther (job posting)
- Software Engineer, Frontend (Agentic AI) — Sift (job posting)
- Senior Software Engineer, Frontend (Agentic AI) — Sift (job posting)
- Software Engineer, Backend (Agentic AI) — Sift (job posting)
- AI Frontend Engineer — Within (YC job posting)
- Senior AI Frontend Engineer — TeamViewer (job posting)
- Frontend Engineer - Agentic AI — Hawk (job posting)
- Frontend / UX Engineer — Atira (job posting)
- Software Engineer, Frontend/Fullstack — WisdomAI (job posting)
- Senior Frontend Engineer — Virtualitics (job posting)
- Frontend Software Engineer, Codex App — OpenAI (job posting)
- Senior Software Engineer, Frontend — Harvey (job posting)
- Design engineer (US) — WRITER (job posting)
- levels.fyi — Frontend Software Engineer, United States
- levels.fyi — Frontend Software Engineer, Canada
- levels.fyi — Frontend Software Engineer, United Kingdom
- levels.fyi — Frontend Software Engineer, Germany
- levels.fyi — Frontend Software Engineer, Netherlands
- levels.fyi — Frontend Software Engineer, Australia
- levels.fyi — Frontend Software Engineer, India
- BLS Occupational Outlook Handbook — Web Developers and Digital Designers
- BLS Occupational Outlook Handbook — Software Developers, QA Analysts, and Testers
- AI SDK — Generative User Interfaces
- AI SDK — Chatbot (useChat)
- Google Research — Generative UI: A rich, custom, visual interactive user experience for any prompt (Nov 2025)
- Nielsen Norman Group — Generative UI and Outcome-Oriented Design (Mar 2024)
- AG-UI — Agent User Interaction Protocol overview
- A2UI — a streaming protocol for agent-driven user interfaces
- MCP Apps — Model Context Protocol
- CopilotKit documentation
- OWASP LLM05:2025 Improper Output Handling
- The Shape of AI — UX patterns for AI design
- v0 by Vercel
- shadcn/ui — Introduction (docs)
- Jared Palmer — personal site
- shadcn — personal site
- Guillermo Rauch — About
