Meta udostępnia Astryx – system projektowania React z interfejsem CLI i serwerem MCP dla agentów AI

Meta ogłosiła wydanie Astryx, otwartego systemu projektowania, który obecnie znajduje się w fazie beta. Projekt, rozwijany w monorepo Meta przez osiem lat, bazuje na technologiach React i StyleX, silniku CSS kompilowanym w czasie budowania, również stworzonym przez Meta.

Astryx to nie tylko biblioteka komponentów, ale kompletny system obejmujący fundamenty, komponenty, szablony i motywy. Fundamenty te obejmują typografię, kolory, układ i dostępność. Oficjalne repozytorium dokumentuje ponad 90 komponentów React, natomiast dokumentacja Meta wskazuje na ponad 150. Komponenty te oferują wbudowane odstępy, tryb ciemny i elastyczne style. Szablony pozwalają na tworzenie kompletnych stron, takich jak pulpity nawigacyjne, ustawienia czy formularze. System jest objęty licencją MIT, a około trzech czwartych jego kodu napisano w TypeScript.

Warstwa stylizacji i StyleX

Kluczowym elementem Astryx jest warstwa stylizacji oparta na StyleX. Ten silnik kompiluje style do statycznego, atomowego kodu CSS w czasie budowania. Meta udostępniła StyleX pod koniec 2023 roku, a technologia ta napędza takie platformy jak Facebook, Instagram, WhatsApp i Threads. Jest również wykorzystywana przez zewnętrzne firmy, w tym Figma i Snowflake.

Astryx wyróżnia się dwoma głównymi wyborami projektowymi. Po pierwsze, jego wewnętrzna struktura jest otwarta – wszystkie prymitywy są eksportowane i komponowalne, a nie ukryte, co pozwala na kompozycję na dowolnym poziomie. Po drugie, system oferuje automatyczne odstępy, nazywane kompensacją odstępów zależną od kontekstu. Eliminują one problem „podwójnego wypełnienia” bez konieczności ręcznych poprawek, zapewniając spójne odstępy na krawędziach.

Interakcja z agentami AI

To, co najbardziej odróżnia Astryx od innych systemów projektowania, to jego zdolność do interakcji z agentami AI. System dostarcza dokumentację i narzędzia, które agenci AI mogą odczytywać. Komponenty zawierają adnotacje JSDoc z podpowiedziami dotyczącymi kompozycji. Interfejs wiersza poleceń (CLI) udostępnia ten sam interfejs API, z którego korzystają programiści. Dodatkowo, istnieje serwer MCP (Model Context Protocol), który agenci wykorzystują do tworzenia szkieletów, przeglądania i dokumentowania.

Interfejs CLI, wywoływany za pomocą astryx lub skrótu xds, jest szczególnie ważny dla automatyzacji. Zwraca on samoopisujący się manifest w formacie JSON, który zawiera listę wszystkich poleceń, argumentów, flag i typów odpowiedzi. Można go porównać do specyfikacji OpenAPI dla CLI, co oznacza, że agent AI nie musi analizować tekstu pomocy, lecz odczytuje ustrukturyzowany ładunek danych. Przykładowe polecenia to npx astryx component Button dla pełnej dokumentacji komponentu, npx astryx template dashboard do generowania kodu strony, czy npx astryx manifest --json dla maszynowo czytelnej specyfikacji poleceń.

Motywy i kaskada zmiennych CSS

Astryx oferuje dziesięć gotowych motywów, takich jak default, neutral, daily, butter, chocolate, matcha, stone, gothic, brutalist i y2k. Wszystkie są w pełni konfigurowalne. System motywowania wykorzystuje kaskadę zmiennych CSS, co oznacza, że zmiana zmiennych automatycznie zmienia styl wszystkich komponentów, bez konieczności modyfikowania ich kodu źródłowego. Interaktywne demo pozwala na wybór motywu i obserwowanie aktualizacji tokenów w czasie rzeczywistym.

Scenariusze użycia i porównanie

Astryx jest idealnym rozwiązaniem do tworzenia wewnętrznych pulpitów nawigacyjnych, umożliwiając szybkie budowanie widoków ewaluacyjnych lub monitorujących. Oferuje szablony dla pulpitów, tabel i szczegółów, a także wrapper dla wykresów Vega/Vega-Lite. Drugim kluczowym zastosowaniem są interfejsy użytkownika tworzone przez agentów AI. Agent kodujący może stworzyć szkielet strony ustawień, wywołując CLI, odczytując dokumentację przystosowaną dla agentów, a następnie komponując komponenty. Serwer MCP zapewnia ustrukturyzowany przepływ pracy, eliminując zgadywanie. Trzecim scenariuszem są produkty wielobrandowe, gdzie jeden zestaw komponentów może obsługiwać wiele marek poprzez zmianę motywów za pomocą kaskady zmiennych, bez konieczności przepisywania kodu komponentów.

Najbliższym porównaniem dla Astryx jest shadcn/ui, który również stawia na kompozycję i generowanie szkieletów za pomocą CLI. Astryx wyróżnia się jednak silnikiem StyleX i narzędziami MCP. Najprostsza ścieżka instalacji Astryx to użycie Next.js z Tailwind, ponieważ system dostarcza wstępnie zbudowany CSS, eliminując potrzebę wtyczek do budowania. Instalacja obejmuje pakiety core, motyw (@astryxdesign/theme-neutral) oraz CLI (@astryxdesign/cli).

Astryx to znaczący krok w kierunku demokratyzacji projektowania i rozwoju interfejsów użytkownika, szczególnie w kontekście rosnącej roli sztucznej inteligencji. Dzięki otwartej architekturze i narzędziom przystosowanym dla agentów AI, system ten może przyspieszyć proces tworzenia aplikacji i umożliwić bardziej złożone scenariusze automatyzacji, co z pewnością wpłynie na przyszłe podejścia do projektowania oprogramowania.

Źródło: marktechpost.com