Meta’s Astryx يجلب خادم CLI وMCP إلى نظام تصميم تفاعلي مفتوح المصدر يمكن للوكلاء قراءته

أصدرت ميتا Astryx هذا الأسبوع. وهو نظام تصميم مفتوح المصدر، حاليًا في مرحلة تجريبية. نما المشروع داخل شركة Meta’s monorepo على مدى ثماني سنوات. تم بناء Astryx على React وStyleX. StyleX هو محرك CSS لوقت الترجمة الخاص بـ Meta.

ليرة تركية؛ د

• Astryx هو نظام تصميم React مفتوح المصدر وجاهز للوكيل من Meta، وهو الآن في مرحلة تجريبية.
• إنه يجمع بين تصميم StyleX وسلسلة سمات CSS المتغيرة وعشرة سمات.
• يتيح خادم CLI وMCP لوكلاء الذكاء الاصطناعي دعم وتوثيق واجهات المستخدم.
• لقد تم اختباره على مستوى الإنتاج داخل Meta ولكنه لا يزال صغيرًا كمشروع عام.

ما هو أستريكس

Astryx هي مكتبة مكونة ونظام حولها. ويوفر الأسس والمكونات والقوالب والموضوعات. تغطي الأساسات الطباعة واللون والتخطيط وإمكانية الوصول. يوثق المستودع الرسمي أكثر من 90 مكونًا من مكونات React. يضم موقع مستندات Meta ما يزيد عن 150 موقعًا. وتأتي المكونات بمسافات مضمنة ووضع داكن وتصميم مرن. تشكل القوالب صفحات كاملة مثل لوحات المعلومات والإعدادات والنماذج. الترخيص هو معهد ماساتشوستس للتكنولوجيا. يشكل TypeScript حوالي ثلاثة أرباع قاعدة التعليمات البرمجية.

طبقة التصميم تستحق الفهم. يقوم StyleX بتجميع الأنماط إلى CSS الذري الثابت في وقت الإنشاء. Meta StyleX مفتوح المصدر في نهاية عام 2023. وهو يعمل على تشغيل Facebook وInstagram وWhatsApp وThreads. الشركات الخارجية مثل Figma وSnowflake تستخدمه أيضًا.

يبرز خياران للتصميم. أولا، الداخلية مفتوحة. يتم تصدير جميع البدائيات وقابلة للتركيب، وليست مخفية. يمكنك التأليف على أي مستوى. ثانيا، التباعد تلقائي. يطلق Astryx على هذا تعويض التباعد المدرك للسياق. فهو يزيل مشكلات “الحشوة المزدوجة” دون إجراء إصلاحات يدوية.

الجزء “الوكيل جاهز”.

هذا هو الفرق الرئيسي عن أنظمة التصميم الأخرى. يقوم Astryx بشحن المستندات والأدوات التي يمكن لعملاء الذكاء الاصطناعي قراءتها. تحمل المكونات تعليقات JSDoc التوضيحية مع تلميحات التركيب. يكشف CLI عن نفس واجهة برمجة التطبيقات التي يستخدمها المطور. يوجد أيضًا خادم MCP. يعنيMCP بروتوكول السياق النموذجي. يستخدمه الوكلاء للسقالات والتصفح والتوثيق.

يتم استدعاء CLI عبر astryx أو الاختصار xds. إحدى الميزات مهمة حقًا للأتمتة. تقوم واجهة سطر الأوامر (CLI) بإرجاع بيان يصف نفسه كـ JSON. يسرد كل أمر ووسيطة وعلامة ونوع الاستجابة. مقارنتها بمواصفات OpenAPI لـ CLI. لذلك لا يحتاج الوكيل إلى كشط --help نص. يقرأ حمولة منظمة واحدة بدلاً من ذلك.

npx astryx component Button        # full docs for a component
npx astryx template dashboard      # emit full page source
npx astryx manifest --json         # machine-readable command spec

السمات وتسلسل CSS المتغير

تشحن Astryx عشرة سمات جاهزة. تم تسميتها افتراضيًا ومحايدًا ويوميًا وزبدة وشوكولاتة وماتشا وحجرًا وقوطيًا ووحشيًا وy2k. كلها قابلة للتخصيص بالكامل. يستخدم Theming سلسلة متغيرة CSS. يمكنك تغيير المتغيرات، وإعادة تصميم كل مكون. يبقى رمز المكون دون تغيير.

يوضح العرض التوضيحي التفاعلي أدناه هذا مباشرة. اختر موضوعًا وشاهد تحديث الرموز المميزة مباشرةً.

import {Button} from '@astryxdesign/core/Button';
import {Badge} from '@astryxdesign/core/Badge';

export default function Toolbar() {
  return (
    <div>
      <Button label="Save" variant="primary" />
      <Badge>Beta</Badge>
    </div>
  );
}

# get the real component source to edit in your repo
$ npx astryx swizzle Button

# then import your local copy instead of the package
import {Button} from './components/Button';

# install core, a theme, and the CLI
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli

// providers.tsx — wrap your app once
'use client';
import type {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export function Providers({children}: {children: ReactNode}) {
  return <Theme theme={neutralTheme}>{children}</Theme>;
}

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

Wrap your app in the Theme provider.

'use client';
import type {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export function Providers({children}: {children: ReactNode}) {
  return <Theme theme={neutralTheme}>{children}</Theme>;
}

import {Button} from '@astryxdesign/core/Button';

export default function Page() {
  return <Button label="Hello XDS" variant="primary" />;
}