Meta ปล่อย Astryx ระบบ Design System แบบ Open-source ที่ใช้งานจริงใน 13,000 แอป รองรับ AI Agent เต็มตัว

Meta เปิดตัว Astryx อย่างเป็นทางการในรูปแบบ Open-source โดยเป็น Design System ที่ปรับแต่งได้เต็มรูปแบบและออกแบบมาเพื่อรองรับการทำงานร่วมกันระหว่างมนุษย์และ AI Agent ปัจจุบันเปิดให้ใช้งานแล้วในสถานะ Beta ซึ่ง Astryx ไม่ใช่โครงการทดลองใหม่ แต่เป็นระบบที่ Meta พัฒนามานานกว่า 8 ปี จนกลายเป็น Design System ที่ใหญ่ที่สุดและมีการใช้งานมากที่สุดในบริษัท โดยผ่านการขัดเกลาจากวิศวกรและนักออกแบบในแอปพลิเคชันกว่า 13,000 รายการ

ระบบนี้มาพร้อมกับ คอมโพเนนต์ที่เข้าถึงได้ (Accessible components) กว่า 150 รายการ (เอกสารปัจจุบันระบุ 160+ รายการ) รองรับการตั้งค่าธีมระดับแบรนด์, Dark mode, เทมเพลตพร้อมใช้ และ CLI ครบวงจร โดยสร้างขึ้นบน React และ StyleX นักพัฒนาสามารถนำเข้า CSS ที่สร้างไว้ล่วงหน้าและใช้งาน React components ที่มีการระบุประเภท (Typed) ได้ทันที โดยไม่ต้องตั้งค่า build plugin หรือใช้ library จัดการสไตล์เพิ่มเติม

ข้อแลกเปลี่ยนที่ Astryx พยายามกำจัดออกไป

Design system ส่วนใหญ่มักมีข้อจำกัดที่บังคับให้เลือกอย่างใดอย่างหนึ่ง หากใช้ระบบของบริษัทใหญ่ แอปก็จะดูเหมือนผลิตภัณฑ์ของบริษัทนั้น แต่ถ้าเลือกใช้คอมโพเนนต์แบบ copy-paste ทุกโปรเจกต์ก็จะแยกย่อยโค้ดของตัวเองจนขาดความสอดคล้องและการดูแลเรื่องการเข้าถึง (Accessibility) กลายเป็นภาระของผู้พัฒนา

Astryx แก้ปัญหานี้ด้วยการแยกส่วนควบคุมออกจากกัน โดยตัวระบบจะคุมพฤติกรรมและความถูกต้อง ส่วนธีมจะเป็นตัวควบคุมรูปลักษณ์ นักพัฒนาสามารถปรับแต่งโทเค็น เช่น สี ตัวอักษร หรือรัศมีขอบ เพื่อให้แอปมีเอกลักษณ์ของตนเองได้โดยไม่ต้องเขียนโค้ดใหม่ เนื่องจากธีมเป็นเพียงชุดของ CSS custom property ที่เขียนทับ (Overrides) ผู้ใช้งานจึงสามารถเปลี่ยนรูปลักษณ์ได้โดยไม่ต้องแยกสาย (Fork) หรือแก้ source code หลัก

หลักการออกแบบของ Astryx ประกอบด้วย คำแนะนำเหนือการบังคับ (guidance over enforcement), อนุสัญญาที่มีเอกสารประกอบชัดเจน (strong documented conventions), ระบบเดียวสำหรับมนุษย์และ AI (one system for humans and AI) และ พิสูจน์ด้วยการวัดผล (earned by measurement) โดยทุกขั้นตอนจะถูกทดสอบอย่างจริงจังเพื่อให้ได้มาตรฐานตามที่ระบุไว้

สถาปัตยกรรม: รากฐาน, คอมโพเนนต์, แพทเทิร์น

Astryx แบ่งโครงสร้างออกเป็นสามชั้น ได้แก่ Foundations คือส่วนรากฐานเรื่องตัวอักษร สี และเลย์เอาต์ Components คือบล็อกตัวต่อที่ใช้ซ้ำได้กว่า 150 รายการซึ่งรองรับ TypeScript เต็มรูปแบบ และ Patterns คือโซลูชันสำเร็จรูปสำหรับงานทั่วไป เช่น หน้าตาราง, ฟอร์มแบบเป็นขั้นตอน (Form wizards) และระบบนำทาง

จุดเด่นอีกประการคือความยืดหยุ่นที่หาได้ยากในระบบอื่น โดยคอมโพเนนต์สามารถประกอบขึ้นได้ในทุกระดับ และมีคำสั่ง swizzle ที่ช่วยดึง source code ทั้งหมดออกมาจัดการเองได้เมื่อต้องการ แม้จะใช้ StyleX ในการจัดสไตล์ แต่ก็เปิดให้เขียนทับด้วย className ผ่าน Tailwind, CSS modules, หรือ plain CSS ได้ตามความสะดวกของโปรเจกต์

ระบบเดียว หลายรูปแบบ: Astryx แยกพฤติกรรมออกจากแบรนด์อย่างไร

คอมโพเนนต์ด้านล่างนี้ไม่มีการเปลี่ยนแปลง มีเพียง tokens เท่านั้นที่เปลี่ยน เลือกธีม ลากแถบเลื่อน และดู UI ของ React ที่เข้าถึงได้เปลี่ยนสไตล์ใหม่โดยไม่ต้องเขียนโค้ดใหม่

8 ปี ในการใช้งานจริง

13,000+ แอปที่ Meta

150+ คอมโพเนนต์

7 ธีม

MIT ไลเซนส์

React 19 + StyleX

1 · เลือกธีม

2 · ปรับจูนโทเค็น

Minimalist watch

การออกแบบที่สะอาดตา ความทนทานที่ใช้ได้ทุกวัน

เบื้องหลัง · สามชั้น

Marktechpost

สร้างขึ้นเพื่อ Agent ไม่ได้ทำมาเพื่อปรับปรุงย้อนหลังให้เข้ากับพวกมัน

Meta วางตำแหน่ง Astryx ให้เป็นคำตอบของยุคสมัยที่โค้ดส่วนใหญ่ถูกสร้างโดย AI ระบบการออกแบบจึงต้องถูกคิดใหม่ตั้งแต่ต้นเพื่อให้ทั้งมนุษย์และ AI assistant สามารถสร้างงานในลักษณะเดียวกันจากแหล่งอ้างอิงเดียวกันได้ ทีมงานพบว่าการปรับปรุง Astryx ให้ใช้งานง่ายขึ้นสำหรับ AI ก็ช่วยให้มนุษย์ใช้งานได้ง่ายขึ้นอย่างเห็นได้ชัด

ความสามารถนี้สะท้อนผ่านเครื่องมือ CLI (@astryxdesign/cli) ที่สามารถสร้าง templates, พิมพ์เอกสารประกอบคอมโพเนนต์ และแสดงเอกสารที่เครื่องอ่านได้ผ่านบรรทัดคำสั่งหรือ MCP นอกจากนี้คอมโพเนนต์ยังมีกฎการตั้งชื่อและ prop ที่สอดคล้องกัน ทำให้ทั้งมนุษย์และ AI สามารถคาดการณ์พฤติกรรมของคอมโพเนนต์ที่ไม่เคยใช้งานมาก่อนได้ง่าย

ข้อกำหนดและวิธีการปรับใช้

การใช้งาน Astryx สามารถทำได้โดยการเพิ่มแพ็คเกจ @astryxdesign/core ลงในโปรเจกต์ โดยมีข้อกำหนดพื้นฐานคือต้องการ React และ react-dom ตั้งแต่เวอร์ชัน 19.0.0 ขึ้นไป

ระบบนี้มาพร้อม CSS ที่สร้างไว้ล่วงหน้า ทำให้ไม่ต้องตั้งค่า PostCSS หรือ Babel เพิ่มเติม รองรับทั้ง Next.js (พร้อม Tailwind หรือ StyleX), Vite รวมถึงการใช้งานผ่าน CDN บน unpkg หรือ jsDelivr สำหรับขั้นตอนการติดตั้งแบบละเอียด นักพัฒนาสามารถใช้ตัวตรวจสอบแบบโต้ตอบเพื่อสร้างชุดคำสั่งที่เหมาะสมกับ stack ของตนเองได้ทันที

ใช้งาน Astryx ใน stack ของคุณ: ข้อกำหนด, การตั้งค่า และการตัดสินใจไปต่อ/ไม่ไปต่อ

Astryx เป็น front-end design system ดังนั้นคำว่า "deploy" หมายถึงการใส่ลงไปในแอป React ตอบคำถามสามข้อแล้วรับเส้นทางการติดตั้งที่แม่นยำ การตรวจสอบข้อกำหนด และดูว่าคุณพร้อมใช้งานหรือไม่

Framework

เวอร์ชัน React

ตัวจัดการแพ็คเกจ

กรณีการใช้งาน

การตั้งค่าสำหรับ stack ของคุณ

Pre-built CSS ไม่ต้องมี PostCSS / Babel

Typed + tree-shakeable นำเข้าแบบแยกรายคอมโพเนนต์

Dark mode มีให้ในตัว

CLI + MCP เอกสารที่พร้อมสำหรับ Agent