درون Astryx؛ سازوکار Meta برای استانداردسازی طراحی React در عصر AI

تصور کنید یک برنامه‌نویس است مدل‌های کدنویسی AI را برای پیاده‌سازی یک صفحه تنظیمات به کار می‌گیرد، اما مدل مدام در تشخیص ویژگی‌های (Props) اجزا شکست می‌خورد. دلیل این مشکل این است که عامل‌های کدنویسی معمولاً مجبورند متون راهنمای عمومی را استخراج کنند یا ویژگی‌های اجزا را حدس بزنند. برای حل این چالش، متا هفته گذشته پروژه Astryx را منتشر کرد تا عامل‌های هوش مصنوعی را به‌عنوان شهروند درجه اول در جریان طراحی رابط کاربری (UI) تعریف کند. Astryx یک سیستم طراحی React است که از طریق یک سرور اختصاصی تحت پروتکل زمینهٔ مدل (Model Context Protocol یا MCP)، ارتباط مستقیم میان مدل‌های زبانی و پیاده‌سازی UI برقرار می‌کند.

این سیستم طراحی بر پایه StyleX متای ساخته شده و از یک سرور اختصاصی MCP — شبیه به یک مترجم هم‌زمان که زبان پیچیدهٔ کد را به دستورالعمل‌های ساده برای ماشین تبدیل می‌کند — استفاده می‌کند. همان‌طور که در تحلیل‌های قبلی ما درباره‌ی فشار دولت ایالات متحده بر متا برای به اشتراک گذاشتن مدل‌های AI جهت بررسی‌های ایمنی اشاره کردیم، این شرکت اکنون بیشتر به زیرساخت‌های متن‌باز برای اکوسیستم توسعه‌دهندگان تکیه کرده است. در حالی که اکثر سیستم‌های طراحی بر توسعه‌دهنده انسانی تمرکز دارند، Astryx به‌گونه‌ای ساخته شده که توسط ماشین «خوانده» شود و پلی میان استدلال مدل‌های LLM و پیاده‌سازی UI در سطح تولید ایجاد کند.

طبق اعلام متا، نوآوری اصلی در Astryx تمرکز بر «خوانایی ماشینی» است. برخلاف کتابخانه‌های سنتی، این ابزار یک سرور MCP و یک رابط خط فرمان (CLI) با نام xds ارائه می‌دهد که APIهای ساختاریافته‌ای را در اختیار عامل‌ها قرار می‌دهد. در این معماری، اجزا دارای حاشیه‌نویسی‌های JSDoc خاصی هستند که راهنمایی‌های ترکیب‌بندی (composition hints) را مستقیماً به AI می‌رسانند تا مدل دقیقاً بداند هر جزء چگونه باید با دیگران ترکیب شود. این رویکرد در راستای تغییر بنیادین ابزارهای توسعه است، مشابه آنچه در معماری Polypore برای واگذاری کنترل ابزارهای دیباگ به عامل‌ها مشاهده کردیم که محیط کدنویسی را کاملاً حول محور AI بازطراحی می‌کند.

یکی از ویژگی‌های برجسته، مانیفست JSON خودتوصیفی است. به نقل از مستندات پروژه، وقتی یک عامل دستور npx astryx manifest --json را اجرا می‌کند، یک Payload کامل شامل لیستی از تمام دستورات، آرگومان‌ها، پرچم‌ها (Flags) و انواع پاسخ‌ها را دریافت می‌کند. این سازوکار دقیقاً مانند یک مشخصه OpenAPI برای خط فرمان عمل می‌کند و نیاز مدل‌های AI به تحلیل و تجزیه خروجی‌های مبهم و متنی ترمینال را به‌طور کامل از بین می‌برد.

عامل‌ها می‌توانند از دستورات زیر برای خودکارسازی و تعامل با سیستم استفاده کنند:

• npx astryx component Button: بازیابی مستندات کامل و دقیق برای یک جزء خاص.
• npx astryx template dashboard: تولید کد منبع کامل یک صفحه برای یک قالب مشخص.
• npx astryx manifest --json: ارائه مشخصات فنی دستورات به‌صورت ساختاریافته و خواندنی برای ماشین.

زیرساخت فنی Astryx بر پایه StyleX است؛ موتور CSS زمان-کامپایل (compile-time) متای که در سراسر فیس‌بوک، اینستاگرام و واتس‌اپ استفاده می‌شود. متا در اواخر سال ۲۰۲۳ موتور StyleX را متن‌باز کرد و اکنون شرکت‌های خارجی مانند Figma و Snowflake نیز از آن بهره می‌برند. StyleX استایل‌ها را در زمان ساخت به CSS اتمی و استاتیک تبدیل می‌کند، که این امر تضمین می‌کند عملکرد برنامه در مقیاس‌های بسیار بزرگ در بالاترین سطح باقی بماند.

جزئیات سیستم نشان می‌دهد که این پروژه طی ۸ سال در مخزن کد (Monorepo) داخلی متا رشد کرده و در حال حاضر بیش از ۱۳,۰۰۰ برنامه داخلی را پشتیبانی می‌کند. در حالی که مخزن رسمی گیت‌هاب بیش از ۹۰ جزء React را لیست کرده است، سایت رسمی مستندات متا تعداد اجزا را بیش از ۱۵۰ مورد اعلام می‌کند. این اجزا شامل مبانی طراحی (تایپوگرافی، رنگ، چیدمان و دسترسی‌پذیری)، اجزای رابط کاربری و قالب‌های آماده برای داشبوردها، صفحات تنظیمات و فرم‌ها هستند.

از نظر بصری و تم‌بندی، این سیستم از یک آبشار متغیرهای CSS (CSS-variable cascade) استفاده می‌کند و ۱۰ تم آماده ارائه می‌دهد: default، neutral، daily، butter، chocolate، matcha، stone، gothic، brutalist و y2k. همچنین، از نظر فنی، حدود سه‌چهارم کدبیس پروژه با زبان TypeScript نوشته شده و کل پروژه تحت مجوز MIT منتشر شده است تا دسترسی آزاد برای توسعه‌دهندگان فراهم باشد.

متا در این سیستم مشکلی به نام «پدینگ دوگانه» (Double Padding) را حل کرده است. در CSS استاندارد، قرار دادن یک باکس پدینگ‌دار درون باکس دیگر، اغلب منجر به ایجاد شکاف‌های تجمعی می‌شود که برای رفع آن‌ها، توسعه‌دهنده باید به‌صورت دستی پدینگ‌ها را حذف کند. Astryx با پیاده‌سازی مکانیزمی به نام «جبران فاصله آگاه به زمینه» (context-aware spacing compensation)، این شکاف‌ها را به‌صورت خودکار بر اساس DOM رندر شده تنظیم می‌کند تا چیدمان بدون دخالت دستی و به‌صورت یکدست باقی بماند.

در بحث ترکیب‌بندی و انعطاف‌پذیری، Astryx برخلاف بسیاری از کتابخانه‌ها که مفاهیم اولیه (Primitives) خود را پنهان می‌کنند، دسترسی به internals را باز نگه داشته است. تمام Primitives صادر شده (exported) و ترکیب‌پذیر هستند. توسعه‌دهندگان می‌توانند اجزا را در هر سطحی ترکیب کنند یا در صورتی که تنظیمات پیش‌فرض دقیق نباشد، با استفاده از CLI کد منبع یک جزء را استخراج (Eject) کرده و آن را مستقیماً ویرایش کنند.

برای مثال، یک توسعه‌دهنده می‌تواند Primitives خاصی مانند Button و Badge را از پکیج @astryxdesign/core وارد کند تا یک Toolbar سفارشی بسازد، بدون آنکه مجبور باشد با محدودیت‌های داخلی کتابخانه بجنگد یا ساختار آن را دور بزند.

راه‌اندازی Astryx به‌ویژه برای کاربران Next.js و Tailwind به‌گونه‌ای طراحی شده که بدون اصطکاک باشد. زیرا این سیستم CSS پیش‌ساخته ارسال می‌کند، نیازی به پلاگین‌های پیچیده در مرحله Build نیست. کاربران تنها باید هسته، یک تم و CLI را نصب کنند:

npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli

سپس، آن‌ها باید اپلیکیشن خود را در یک Theme provider قرار دهند. این کار از طریق یک فایل providers.tsx که با عبارت 'use client' علامت‌گذاری شده است، برای مدیریت توکن‌ها انجام می‌شود. همچنین یک پل (Bridge) با Tailwind تعبیه شده تا توکن‌ها را به Utilityها متصل کند؛ به‌طوری که کلاسی مانند bg-surface مستقیماً به توکن سیستم متصل شده و نیاز به نوشتن اعلان‌های طولانی مانند var(--...) نباشد. مسیرهای مستند شده دیگر شامل تنظیمات Vite و محیط‌های StyleX-only است.

این معماری برای سناریوهای تولیدی زیر بسیار ایده‌آل است:

• داشبوردهای داخلی: ساخت سریع نماهای ارزیابی (eval) یا نظارتی با استفاده از قالب‌های داشبورد، جدول و جزئیات، و همچنین استفاده از Wrapperهای نمودار Vega/Vega-Lite برای ترسیم داده‌ها.
• تولید UI توسط عامل‌ها: یک عامل کدنویسی AI می‌تواند با فراخوانی CLI، خواندن مستندات آماده برای ماشین و ترکیب اجزا از طریق سرور MCP، یک صفحه تنظیمات کامل را اسکلت‌بندی و پیاده‌سازی کند.
• محصولات چند‌برندی: ارائه چندین برند از طریق یک مجموعه اجزا، تنها با تعویض تم‌ها در آبشار متغیرها، بدون اینکه نیاز به بازنویسی مجدد اجزای کد باشد.

در مقایسه با رقبا، Astryx شباهت‌هایی به shadcn/ui در زمینه اولویت دادن به ترکیب‌پذیری و اسکلت‌بندی از طریق CLI دارد. با این حال، Astryx خود را از طریق موتور StyleX و ادغام عمیق با MCP متمایز می‌کند. در حالی که MUI مجموعه وسیعی از اجزا را ارائه می‌دهد اما بیشتر بر استایل‌های Runtime (مانند Emotion) تکیه دارد، Astryx تمام پردازش‌ها را به زمان-کامپایل منتقل می‌کند.

این چرخش استراتژیک نشان می‌دهد که میدان نبرد بعدی سیستم‌های طراحی، دیگر تنها کیفیت بصری یا عملکرد اجزا نیست، بلکه این است که یک AI تا چه حد راحت و دقیق می‌تواند آن‌ها را مستقر کند. متا با ارائه مانیفست ماشین-خوان، در تلاش است تا استاندارد «توسعه UI عامل‌محور» (Agentic UI) را تعریف و رهبری کند. این تمرکز بر توسعه ابزارهای پیشرفته برای عامل‌ها، با استراتژی‌های مالی متا برای بازگشت هزینه‌های زیرساختی از طریق اشتراک‌های ویژه برای عامل‌های هوش مصنوعی نیز همسو است تا اکوسیستم تجاری این فناوری‌ها شکل بگیرد.

البته پذیرش این ابزار خارج از اکوسیستم داخلی متا هنوز نامعلوم است؛ به‌ویژه اینکه CLI در نسخه 0.0.14 همچنان در حالت بتا قرار دارد. کاربران باید انتظار تغییرات در APIها را داشته باشند، زیرا پروژه در حال انتقال از یک دوره رشد ۸ ساله داخلی به یک ابزار عمومی است. همچنین باید توجه داشت که یادگیری StyleX به‌طور کلی منحنی یادگیری تندتری نسبت به Tailwind دارد.

گام بعدی شما

• بررسی مستندات و نصب پکیج @astryxdesign/core برای ارزیابی جایگزینی سیستم‌های فعلی با یک رویکرد عامل‌محور.
• تست ابزار interactive explainer در صفحه پروژه برای درک عمیق‌تر نحوه عملکرد مانیفست JSON در تعامل با AI.

اما تأثیر این رویکرد بر آینده مدل‌های زبانی بزرگ در درک بصری و پیاده‌سازی مستقیم، موضوعی است که در گزارش‌های بعدی بررسی خواهیم کرد.