تصور کنید برنامه‌ای می‌سازید که نیمی از کدهایش توسط شما و نیمی دیگر توسط یک دستیار هوشمند نوشته می‌شود؛ در این حالت، نظم بصری رابط کاربری دیگر یک انتخاب نیست، بلکه یک ضرورت فنی است. متا (Meta) با انتشار Astryx، یک سیستم طراحی در سطح تولید (Production-grade)، اعلام کرد که دیگر عصر «وصله زدن» رابط‌های کاربری برای هوش مصنوعی به پایان رسیده و باید آن‌ها را از پایه برای ماشین‌ها طراحی کرد. این ابزار صرفاً یک نمونه اولیه یا پروتوتایپ نیست؛ بلکه سیستمی است که طی هشت سال گذشته، زیربنای بیش از ۱۳٬۰۰۰ اپلیکیشن داخلی در متا بوده و اکنون تحت مجوز MIT به صورت متن‌باز منتشر شده است. این سیستم در حال حاضر در نسخه بتا (Beta) در دسترس همگان قرار دارد.
توسعه نرم‌افزارهای مدرن در حال حرکت به سمت یک مدل ترکیبی است که در آن انسان‌ها و دستیارهای هوش مصنوعی به‌طور مشترک کدها را می‌نویسند. با تکیه بر پوشش‌های قبلی ما درباره نحوه استفاده عامل‌ها از حافظه بلندمدت با MongoDB و LangGraph، سیستم Astryx اکنون لایه‌ی رابط کاربری (Interface Layer) این تغییر بنیادین را هدف قرار داده است. مشکل اینجاست که اکثر سیستم‌های طراحی فعلی کاربران را مجبور به پذیرش یک مصالحه می‌کنند: یا باید یک ظاهر خشک و صلب شرکتی را بپذیرید — به این معنی که اپلیکیشن شما شبیه به محصول شخص دیگری به نظر می‌رسد — یا اینکه از مؤلفه‌های پراکنده که با کپی-پیست منتقل شده‌اند استفاده کنید. حالت دوم باعث می‌شود پروژه‌ها به قطعات تکه تکه (Forked snippets) تبدیل شوند که نتیجه آن فقدان انسجام مشترک، عدم دریافت اصلاحات از منبع اصلی (Upstream) و تبدیل شدن موضوع دسترسی‌پذیری (Accessibility) به یک مشکل دشوار برای توسعه‌دهنده است.
Astryx این چالش را با جداسازی کامل «رفتار» از «برند» حل می‌کند. در این معماری، سیستم منطق پیچیده — شامل دسترسی‌پذیری، کیفیت و رفتار مؤلفه‌ها — را مدیریت می‌کند، در حالی که لایه‌ی مجزایی از توکن‌های ویژگی‌های سفارشی CSS (CSS Custom Property Tokens)، هویت بصری را کنترل می‌کند. این به این معناست که یک طراح می‌تواند کل تم یک اپلیکیشن را تنها با تغییر توکن‌های مربوط به رنگ، تایپوگرافی، شعاع گوشه‌ها (Radius) یا متحرک‌سازی‌ها (Motion) تغییر دهد، بدون اینکه نیاز باشد حتی یک خط از کدهای زیربنایی مؤلفه‌های React را لمس کند.
اصول طراحی
سیستم Astryx بر اساس مجموعه‌ای از فلسفه‌های هدایت‌کننده عمل می‌کند تا اطمینان حاصل کند که این سیستم خود به مانعی برای خلاقیت تبدیل نمی‌شود:
- راهنمایی به‌جای اجبار (Guidance over Enforcement): سیستم یک مسیر مشخص را ارائه می‌دهد اما توسعه‌دهندگان را در محدودیت‌های صلب و غیرقابل تغییر حبس نمی‌کند.
- قراردادهای مستند و قوی (Strong Documented Conventions): قابلیت اطمینان سیستم بر پایه استانداردهایی شفاف و مشترک بنا شده است.
- یک سیستم واحد برای انسان‌ها و هوش مصنوعی: تضمین می‌کند که هم توسعه‌دهنده انسانی و هم عامل هوشمند (Agent) از یک «منبع حقیقت واحد» (Single Source of Truth) استفاده می‌کنند.
- کسب اعتبار از طریق اندازه‌گیری (Earned by Measurement): قراردادها و استانداردهای سیستم صرفاً بر اساس ادعا پذیرفته نمی‌شوند، بلکه از طریق داده‌ها و اندازه‌گیری‌های دقیق آزمایش و تأیید شده‌اند.
معماری فنی و مؤلفه‌ها
همان‌طور که در گزارش Marktechpost آمده است، Astryx به سه لایه متمایز سازماندهی شده است:
- بنیان‌ها (Foundations): شامل ابتدایی‌ترین عناصر برای ایجاد رابط‌های منسجم و دسترس‌پذیر، از جمله تایپوگرافی، چیدمان (Layout)، سیستم رنگی و استانداردهای دسترسی.
- مؤلفه‌ها (Components): بیش از ۱۶۰ بلوک ساختمانی بازپذیر با پشتیبانی کامل از TypeScript (که در ابتدا بیش از ۱۵۰ مورد ذکر شده بود). این مؤلفه‌ها در هر سطحی قابل ترکیب هستند و برخلاف بسیاری از سیستم‌ها، پشت یک API سطح‌بالای بسته قرار ندارند.
- الگوها (Patterns): راهکارهای آزمایش‌شده و عملی برای جریان‌های کاری رایج، مانند جادوگران فرم (Form Wizards)، جریان‌های ورود داده، صفحات جدولی، چیدمان‌های جزئیات و سیستم‌های ناوبری.
ابزارهای اولویت‌دار برای عامل‌ها (Agent-First Tooling)
این سیستم به‌طور ویژه برای جریان‌های کاری «عامل‌محور» (Agentic) معماری شده است. متا Astryx را پاسخی به تغییر نحوه کدنویسی امروزی می‌داند؛ با توجه به اینکه بخش بیشتری از کدها توسط عامل‌ها تولید می‌شوند، سیستم‌های طراحی باید از نو فکر شوند، نه اینکه صرفاً وصله شوند. این رویکرد در واقع تکامل‌شده‌ی سازوکارهای استانداردسازی متا برای React در عصر AI است که هدف آن تبدیل سیستم‌های طراحی به ابزاری کاملاً قابل‌فهم برای عامل‌های هوشمند است. متا APIها، مستندات و CLI را به‌گونه‌ای طراحی کرده است که برای ماشین‌ها قابل خواندن (Machine-readable) باشد. این یعنی یک دستیار AI و یک برنامه‌نویس انسان دقیقاً از یک مرجع و قراردادهای نام‌گذاری یکسان پیروی می‌کنند.
نکته کلیدی این است که هر تغییری که Astryx را برای هوش مصنوعی آسان‌تر کرد، برای انسان‌ها نیز سهولت ایجاد کرد. این موضوع در ابزار @astryxdesign/cli متجلی شده است که به توسعه‌دهندگان و عامل‌ها اجازه می‌دهد:
- قالب‌های اولیه (Templates) را ایجاد کرده و مستندات کامل مؤلفه‌ها را چاپ کنند.
- تم‌ها را از طریق خط فرمان تولید و بیلد (Build) کنند.
- کدمودها (Codemods) را برای مهاجرت بین نسخه‌های مختلف اجرا کنند.
- مستندات قابل خواندن توسط ماشین را از طریق خط فرمان یا پروتکل زمینه مدل (MCP) استخراج کنند.
به دلیل اینکه مؤلفه‌ها با قوانین نام‌گذاری، Propها و ترکیب‌بندی‌های ثابت عرضه می‌شوند، هم انسان‌ها و هم مدل‌های زبانی می‌توانند پیش‌بینی کنند که یک مؤلفه ناشناخته، پس از یادگیری چند اصل پایه، چگونه رفتار خواهد کرد.
استقرار و یکپارچه‌سازی
سیستم Astryx برای اجرا به React 19+ نیاز دارد (به‌طور مشخص نسخه‌های react و react-dom برابر یا بالاتر از ۱۹.۰.۰ به عنوان Peer Dependencies). برای استایل‌دهی نیز از StyleX استفاده می‌کند. با این حال، پیاده‌سازی StyleX برای مصرف‌کنندگان نامرئی باقی می‌ماند. این ویژگی به توسعه‌دهندگان اجازه می‌دهد تا با استفاده از className و ابزارهایی مانند Tailwind CSS، CSS Modules یا حتی CSS ساده، استایل‌ها را بازنویسی (Override) کنند — یعنی هر چه که در پروژه خود از پیش استفاده می‌کنند.
برای شروع در یک پروژه Next.js یا Vite، توسعه‌دهندگان باید بسته @astryxdesign/core (که در داخل متا به عنوان XDS شناخته می‌شود) و یک بسته تم، مانند @astryxdesign/theme-neutral را نصب کنند. فرآیند راه‌اندازی شامل وارد کردن CSSهای پیش‌ساخته و قرار دادن اپلیکیشن در یک Theme Provider است.
مراحل پیاده‌سازی
برای کسانی که قصد استقرار این سیستم را دارند، جریان کاری معمول در چهار گام کلیدی خلاصه می‌شود:
۱. نصب: نصب هسته، تم و CLI با دستورات npm install @astryxdesign/core @astryxdesign/theme-neutral و npm install -D @astryxdesign/cli.
۲. تنظیم CSS: وارد کردن CSSهای پیش‌ساخته در فایل globals.css (برای مثال: @import '@astryxdesign/core/reset.css' و @import '@astryxdesign/core/astryx.css' و CSS مربوط به تم انتخابی). این بخش شامل یک پل توکنی (Token bridge) برای Tailwind است.
۳. بسته‌بندی تم (Theme Wrapping): قرار دادن برنامه در Theme provider با استفاده از یک تم ساخته شده مانند neutralTheme.
۴. ارسال مؤلفه‌ها: وارد کردن و استفاده از مؤلفه‌های تایپ‌شده، مانند <Button label="Hello XDS" variant="primary" />.
به دلیل عرضه CSSهای پیش‌ساخته، هیچ نیازی به پیکربندی PostCSS یا Babel نیست. محیط‌های پشتیبانی شده شامل Next.js (با Tailwind یا StyleX)، Vite و یک مسیر بدون بیلد (No-build) از طریق بسته‌های UMD در unpkg یا jsDelivr است.
مکانیسم «Swizzle»
یکی از ویژگی‌های غیرمعمول و متمایز Astryx، قابلیت «Swizzle» است. در حالی که اکثر سیستم‌های طراحی، مؤلفه‌ها را پشت یک API بسته قفل می‌کنند، Astryx به توسعه‌دهندگان اجازه می‌دهد در صورت نیاز به مالکیت کامل یک مؤلفه، کد منبع کامل آن را مستقیماً به پروژه خود منتقل (Eject) کنند. این یک «دریچه خروج» (Escape hatch) حیاتی برای شخصی‌سازی‌های عمیق فراهم می‌کند، بدون اینکه سرعت اولیه استفاده از یک سیستم طراحی را از بین ببرد.
این رویکرد، پیش‌فرض استاندارد را که سیستم‌های طراحی چارچوب‌های «یا بپذیر یا رها کن» هستند، تغییر می‌دهد. با جداسازی توکن‌ها از رفتار — که در هفت تم عرضه‌شده مشهود است (جایی که فقط توکن‌ها تغییر می‌کنند اما مؤلفه‌ها ایستا می‌مانند) — متا روی این موضوع شرط‌بندی کرده است که آینده UI نه تنها در نحوه دیدن یک دکمه توسط انسان، بلکه در نحوه پیش‌بینی و اجرای قابل‌اطمینان آن توسط یک عامل هوشمند است.
برای کسانی که رابط‌های کاربر مبتنی بر AI می‌سازند، تغییر اصلی، حرکت از «وصله زدن» سیستم‌های طراحی برای AI به سمت ساخت آن‌ها از پایه برای مصرف عامل‌هاست. این امر بدهی فنی مرتبط با UIهای تولید شده توسط هوش مصنوعی را کاهش می‌دهد، زیرا انسجام در سطح سیستم تحمیل می‌شود و نه از طریق پرامپت‌های غیردقیق. در واقع این رویکرد پاسخی به چالش‌هایی است که در پروژه‌های متن‌باز برای پاک‌سازی زباله‌های بصری خروجی AI دیده می‌شود و سعی دارد از طریق ساختارمند کردن خروجی‌ها، کیفیت بصری را تضمین کند.
توسعه‌دهندگان اکنون می‌توانند از بررسی‌کننده تعاملی قابلیت استقرار در سایت رسمی بازدید کنند تا تأیید کنند آیا استک React فعلی آن‌ها با نسخه بتا سازگار است یا خیر.
گام بعدی شما
- اگر از React 19 استفاده می‌کنید، سازگاری استک خود را با بررسی‌کننده رسمی در سایت Astryx بسنجید.
- برای کاهش بدهی فنی در پروژه‌های تولیدشده توسط AI، ساختار توکن‌محور این سیستم را جایگزین استایل‌های سخت (Hard-coded) کنید.
- مستندات MCP را بررسی کنید تا ببینید دستیار کدنویسی شما چگونه می‌تواند مستقیماً از CLI این سیستم برای تولید UI استفاده کند.
اما تأثیر این مدل جداسازی بر هزینه استنتاج در مقیاس انبوه هنوز ناشناخته است — به تحلیل ما درباره هزینه استنتاج و GPUها مراجعه کنید.
گفتگو