Tập trước mình có chia sẻ về Ontology. Hôm nay đi tiếp phần thực chiến: cách mình biến lý thuyết đó thành hệ thống chạy thật mang tên design:os và đã open-source toàn bộ. Mấy bro cứ vào https://github.com/jangtrinh
là sẽ thấy nguyên hệ sinh thái design:os (từ core CLI, Figma plugin, knowledge builder cho tới bản Studio viết bằng Rust).
Bài toán mình giải từ giữa năm 2025 cho #Elfie và đến bây giờ là #Vinsmartfuture khi xây dựng autonomous design agent thực ra khá đơn giản. Tựu chung lại chỉ có một việc: context hóa toàn bộ Design System từ Primitives, Semantic tokens, Composite components cho tới Grammar lắp ghép màn hình theo chuẩn ONTOLOGY.
Để làm được việc đó ở quy mô doanh nghiệp, mình buộc phải tự xây design:os CLI (có design-agent và figma-agent) + Figma Plugin riêng. Lý do rất thực tế: những bộ Design System của doanh nghiệp thường cực kỳ phức tạp và siêu nặng (như file thực tế mình xử lý có tới hàng trăm trang, hơn ~1.418.000 nodes, riêng bộ DS cũng hơn 2.300 component entries và hàng trăm variables/styles).
Nếu dùng cái MCP cùi bắp của Figma thì 200 tool calls bay màu trong vòng một nốt nhạc. Chưa kể chỉ cần dump 1 trang qua MCP là nó xả ra 150K tới 200K tokens toàn dây nhợ JSON rác (bounding box vô nghĩa, khung lồng khung), nhồi vào LLM chỉ tổ nổ context window chứ gần như chẳng có giá trị ngữ nghĩa gì. Cao lắm là chỉ dùng để dựng dăm ba cái component hay vài màn hình demo cho vui, chứ bảo nó ngồi đọc hiểu và vận hành vài trăm nghìn tới vài triệu nodes trong Design System qua Figma MCP là điều méo khả thi. Mà cũng dễ hiểu thôi, họ kiếm tiền dựa trên những sự bất tiện này mà: khóa quyền ghi canvas vào Full seat, xong làm AI agent riêng rồi bắt anh em mua credits theo lượt dùng
Thay vì đi theo lối mòn "MCP-dump" (xả rác vào context), mình thiết kế design:os theo hướng "Plugin-distill":
- Local WebSocket Broker + Public Plugin API chạy thẳng trên Figma Free: Không tốn seat trả phí, không qua cloud trung gian.
- Cắt lát và chưng cất ngay trong Plugin: Plugin tự đi tuần qua file 418k nodes theo từng lát cắt 20ms (không làm đơ Figma), gom và lọc sạch cấu trúc ngay tại chỗ rồi mới trả về CLI. Một vùng 9.000 nodes thay vì tốn 200K tokens như MCP thì giờ nén lại chỉ còn ~700 tokens (rẻ hơn khoảng 85 lần).
- Đồng bộ 2 chiều (Bidirectional 1:1 Mirror): Designer sửa tay trên Figma thì plugin tự bắt diff ngầm và sync ngược về component-registry.json trong ~1ms. Ngược lại, mỗi thao tác agent vẽ lên canvas đều nằm trong hàng đợi FIFO và đóng gói thành đúng 1 bước Undo (⌘Z), không bao giờ có chuyện bấm ⌘Z một phát bay mất 20 phút làm việc.
Sau khi có design:os CLI và Plugin lo phần bóc tách thô, việc tiếp theo của mình rất nhàn: gắn luồng dữ liệu đã làm sạch đó vào Gehihi 3.8 Flash để nó đọc toàn bộ thông tin trả ra, phân loại và viết lại theo đúng hợp đồng Ontology của design:os:
Tier 1 - Primitives: Giá trị vật lý thô ở đáy đồ thị (blue-500, space-4, radius-md), không mang ngữ cảnh.
Tier 2 - Semantic: Ý nghĩa sử dụng thực tế (color-primary, space-section, khóa chặt từng cặp role / role-foreground).
Component Contracts & Grammar: Toàn bộ variantAxes hợp lệ, cấu trúc shell + slot, và luật bất thành văn của dự án (khi nào mở Drawer, khi nào dùng Modal, bảng biểu phải kế thừa từ TableCard nào).
Conservation Gate ("Nothing vanishes silently"): Có cơ chế kiểm toán đầu vào và đầu ra bằng mã băm (sourceHash). Rớt 1 node hay AI tự ý bỏ qua 1 component khó là báo đỏ ngay, không cho phép bịa hay nuốt bớt dữ liệu.
Một khi đã đúc xong bộ Knowledge Graph chuẩn chỉnh (như bên VSF-PCP là hơn 1.650 typed records nối chặt từ nghiệp vụ -> màn hình -> component -> token) thì anh em muốn làm gì tiếp theo cũng được: từ dựng màn hình mới trên Figma, sinh code React/Tailwind/SwiftUI, cho tới làm in-app agent.
Ngoài ra, có một điểm khác biệt lớn trong cách mình làm: thay vì ngồi viết cả đống "anti-slop skills" dài lê thê bằng văn xuôi để năn nỉ AI "đừng làm giao diện xấu nha", mình tư duy rất đơn giản: những cái gì đã là 1 + 1 = 2 thì không việc gì phải bắt AI suy luận tốn token.
Văn xuôi thì LLM luôn có cách lươn lẹo để lách qua, còn code thì không. Thế nên mình viết mẹ nó thành các Deterministic Gates chạy bằng CLI local (tốn $0 token, 0ms suy luận):
Gate kiểm tra Grid 4px/8px, Spacing, Layout overflow (ui validate-layout, 20 checks).
Gate tính toán thẳng công thức toán học độ tương phản màu WCAG / A11y cho từng cặp token và kích thước điểm chạm (ui a11y-lint).
Gate bắt tận tay mùi AI (AI Tells / Taste lint): tự động chặn màu tím công nghiệp, transition: all, lạm phát z-index, trộn lẫn bộ icon, hay rò rỉ chữ Lorem ipsum / Placeholder (ui taste-lint 34 checks + ui content-lint 12 checks).
Gate kiểm tra cấu trúc cây Figma: bắt lỗi vẽ frame giả cầy thay vì dùng mainComponent thật, hoặc tự ý ghi đè màu/bo góc trực tiếp lên instance (instance-level style override) thay vì đi qua token.
Mỗi khi có một lỗi mới lọt qua tới mắt mình, luật của hệ thống là "No defect escapes twice": sửa lỗi trên canvas xong là viết luôn một cái gate mới kèm bài test âm tính (prove-gate-red) để khóa vĩnh viễn lớp lỗi đó. Nhờ vậy mà qua 4 waves thực chiến, số lỗi giao diện lọt xuống tới người duyệt cuối giảm từ 7 về 0.
Khi đưa AI Agent vào môi trường production, mình không cần chúng hành xử như những nghệ sĩ đầy cảm hứng. Mình cần chúng tuân theo luật.
