Astryx - ระบบดีไซน์โอเพนซอร์สที่ Meta เปิดตัว

• โดดเด่นด้วยการปรับแต่งได้อย่างสมบูรณ์และ รองรับเอเจนต์ บนพื้นฐานของ React และ StyleX
• มาพร้อม คอมโพเนนต์ React มากกว่า 160 รายการ ที่รองรับการเข้าถึงและการใช้ธีมแบรนด์ พร้อมให้บริการโหมดมืด เทมเพลตพร้อมใช้งานจริงทันที และ CLI ในระบบรวมศูนย์เดียว
• เติบโตภายใน Meta ตลอด 8 ปีที่ผ่านมา จนกลายเป็นดีไซน์ซิสเต็มที่ถูกใช้งานมากที่สุดและมีขนาดใหญ่ที่สุด ขับเคลื่อน แอปมากกว่า 13,000 แอป และได้รับการขัดเกลาจากทีมวิศวกร นักออกแบบ และทีมผลิตภัณฑ์
• รองรับหลายธีม โดยให้ design tokens ทั้งหมด เช่น สี ระยะห่าง radius และ typography ในรูปแบบ CSS custom properties
• สามารถใช้งานร่วมกับเครื่องมือเขียนโค้ด AI ได้ ผ่านคอมมานด์ไลน์หรือ MCP เพื่อสแคฟโฟลด์โปรเจกต์ สำรวจเทมเพลต สร้างธีม และเข้าถึงเอกสารสำหรับเอเจนต์
  • หากวางคำสั่งติดตั้งเริ่มต้นลงในเครื่องมือเขียนโค้ด AI ก็สามารถรัน npx astryx init เพื่อตั้งค่าเอกสารสำหรับเอเจนต์โดยอัตโนมัติ
• โครงสร้างภายในแบบเปิด (Open internals): คอมโพเนนต์ไม่ถูกจำกัดอยู่ใน top-level API แบบปิด และสามารถนำมาประกอบกันได้ในทุกระดับ พร้อม export building blocks ที่จำเป็นโดยตรง
  • ด้วยฟังก์ชัน swizzle สามารถดึงซอร์สโค้ดทั้งหมดของคอมโพเนนต์ออกมาไว้ในโปรเจกต์และเป็นเจ้าของได้โดยตรง
• ไม่มีการผูกติดด้านสไตลิง (lock-in): แม้ภายในจะเขียนสไตล์ด้วย StyleX แต่จะไม่เปิดเผยต่อผู้ใช้ และสามารถ override ผ่าน className ด้วย Tailwind/CSS modules/plain CSS ได้
• ยึดหลัก Guidance over enforcement ที่เน้นให้ความสามารถโดยไม่บังคับ — หากส่งค่าเข้าไป คอมโพเนนต์ก็จะเรนเดอร์ตามนั้นตรง ๆ ส่วนแนวคิดด้านดีไซน์จะอยู่ในเอกสารและตัวอย่าง
  • คอมโพเนนต์ทั้งหมดใช้กฎการตั้งชื่อ/prop/การประกอบแบบเดียวกันและมีการจัดทำเอกสารไว้ ทำให้ทั้งคนและ AI สามารถคาดเดาพฤติกรรมของคอมโพเนนต์ที่ไม่คุ้นเคยได้
• CLI ทำหน้าที่เป็นแหล่งอ้างอิงสำหรับคอมโพเนนต์/โทเค็น/เทมเพลต/เอกสาร
  • npx astryx component (รายการคอมโพเนนต์), npx astryx docs (หัวข้อเอกสาร), npx astryx template --list (เทมเพลตหน้า), npx astryx docs tokens (อ้างอิงระยะห่าง/สี/radius)
• สถาปัตยกรรม: การจัดองค์ประกอบแบบ 3 ชั้น
  • Foundations: building blocks ของความสอดคล้องทางภาพ เช่น typography, color, layout และ accessibility
  • Components: UI building blocks แบบนำกลับใช้ซ้ำได้มากกว่า 150 รายการ พร้อมรองรับ TypeScript อย่างสมบูรณ์
  • Patterns: โซลูชันการออกแบบที่ผ่านการพิสูจน์แล้ว เช่น หน้า table, เลย์เอาต์หน้ารายละเอียด, form wizard, navigation และ data input flow
• มี เทมเพลตพร้อมใช้งานจริงระดับโปรดักชัน ที่ใส่เพียงเนื้อหาก็ใช้งานได้ และมีแอปตัวอย่างแบบสมบูรณ์ที่เชื่อม routing/theme/components เข้าด้วยกัน
• ใบอนุญาต MIT