Chúng tôi dùng Google Analytics để thống kê lưu lượng truy cập. Cookie phân tích chỉ được đặt khi bạn chấp nhận. Nếu không có sự đồng ý, số liệu thống kê được ước tính từ các tín hiệu không dùng cookie. Chính sách cookie.
PDS · Design System
PDS là ngôn ngữ thiết kế riêng của Protocore, được rút ra từ các sản phẩm chúng tôi xây dựng và tôi luyện trong môi trường production. Ưu tiên giao diện tối, dựa trên token, có tài liệu đầy đủ — chính những component dựng nên sản phẩm và dashboard khách hàng của chúng tôi, đóng gói để một đội có thể áp dụng trong một buổi chiều.
Tính năng
Từ các thành phần cơ bản đến bố cục trang hoàn chỉnh — 101 component, mỗi cái được trích từ một sản phẩm chúng tôi đã phát hành thay vì thiết kế biệt lập. Component nào có trong PDS thì đã từng làm việc thực tế: website này, các bản demo sản phẩm và dashboard của khách hàng đều chạy trên nó.
Màu sắc, kiểu chữ, khoảng cách và chuyển động đều xuất phát từ một lớp token duy nhất. Đổi một token, mọi component đổi theo — không ghi đè từng component, không lệch giữa các sản phẩm.
Một giao diện tối và một giao diện sáng, năm màu nhấn, tất cả đều do cùng các token điều khiển. Biến thể thương hiệu chỉ là hoán đổi token, không phải fork — mọi sản phẩm trong dòng đều render từ cùng một hệ thống.
Độ tương phản, độ nổi và màu sắc được tinh chỉnh trên giao diện tối trước; giao diện sáng được suy ra từ cùng các token. Kết quả là chế độ tối tự nhiên, không phải bản đảo màu.
Nút, ô nhập, select, switch, slider và khung trường nhập — gồm cả nhãn, gợi ý và thông báo lỗi. Các trạng thái đã được thiết kế sẵn: focus, disabled, invalid và loading hoạt động giống nhau ở mọi sản phẩm.
Stack, grid, đường phân cách và khung trang giúp dựng màn hình mà không cần CSS ad-hoc. Các component lớn nhất là bố cục trang hoàn chỉnh — mẫu hero, section và footer được lấy từ những trang chúng tôi đã phát hành.
Header, tab, breadcrumb và menu với hành vi responsive và bàn phím được tích hợp sẵn. Thanh điều hướng của website này chính là component đó, không phải bản mô phỏng.
Modal, sheet, drawer, popover và tooltip trên cùng một mô hình phân lớp — bẫy focus, đóng và xếp chồng được xử lý một lần, tập trung. Không sản phẩm nào phải tự tính z-index.
Bảng, danh sách, thẻ số liệu, badge và timeline cho những sản phẩm sống bằng con số. Mật độ thông tin của các operator console trong toàn dòng sản phẩm đều đến từ các component này.
Toast, banner, trạng thái trống, tiến trình và skeleton — những trạng thái ít hào nhoáng nhưng được thiết kế từ đầu. Sản phẩm xây trên PDS luôn có câu trả lời chu đáo cho các trạng thái đang tải, trống và lỗi.
Thang kiểu chữ mang phong cách biên tập, với nhãn mono cho sắc thái kỹ thuật — giọng điệu bạn thấy trên mọi bề mặt của Protocore. Thang chữ là các token, nên sản phẩm có thể tinh chỉnh mà không rời khỏi hệ thống.
Thời lượng và easing được phát hành dưới dạng token, kèm các component đã dùng sẵn. Giao diện chuyển động nhất quán giữa các sản phẩm vì không ai chỉnh lại thời gian animation bằng tay.
Độ tương phản, trạng thái focus và hành vi bàn phím được tích hợp trong component, không bỏ lại như một bài tập. Dùng mặc định là có sẵn khả năng truy cập.
Phần styling là CSS tĩnh được xử lý lúc build — không có runtime CSS-in-JS, không tính toán gì trong trình duyệt. Lớp styling không thêm một dòng JavaScript nào vào trang.
Hệ thống cũng được phát hành dưới dạng gói CSS thuần — token và utility class, không cần React. Trang server-rendered, email và các stack không dùng React đều lấy từ cùng một nguồn chuẩn.
Token được xuất cho web dưới dạng biến CSS, preset Tailwind và các định dạng native cho nền tảng di động. Một định nghĩa duy nhất về thương hiệu, dùng ở bất cứ nơi nào sản phẩm chạy.
Lớp React bọc ứng dụng trong một provider và cung cấp token qua hook — component đọc theme và màu nhấn đang dùng thay vì gắn cứng giá trị. Đổi giao diện là đổi state, không phải build lại.
Cơ chế giúp PDS có năm màu nhấn cũng mang lại thương hiệu riêng cho sản phẩm whitelabel: đổi giá trị token, giữ nguyên component. Mọi ứng dụng whitelabel trong dòng sản phẩm đều là bằng chứng cho điều đó.
Một bản đồ máy đọc được của toàn hệ thống — component, token, pattern — xuất bản dưới dạng llms.txt. Trỏ LLM tới đó, mã được sinh ra sẽ dùng component PDS thật thay vì tự bịa ra những cái nghe có vẻ hợp lý.
MCP server mở hệ thống trực tiếp cho coding agent: component, prop và token, truy vấn được ngay khi agent đang xây dựng. Design system tự trả lời câu hỏi thay vì bị dán vào prompt.
Mọi component đều có tại pds.protocore.io kèm ví dụ trực tiếp, prop và đoạn mã sao chép dùng ngay. Tài liệu được render bằng chính PDS — bạn đọc gì thì phát hành đúng cái đó.
PDS được phát hành dưới dạng các gói có phiên bản ngữ nghĩa và changelog. Nâng cấp là quyết định chủ động: đội ngũ tự chọn lúc chuyển, và changelog nói rõ chính xác điều gì đã thay đổi.
Các gói được cài từ npm registry riêng của Protocore bằng token theo từng team trong .npmrc — quy trình npm chuẩn, giới hạn cho các team có giấy phép. Không file zip đính kèm, không cài đặt bằng sao chép thủ công.
Khóa cấp phép đã ký được xác minh cục bộ — không phone-home, không kiểm tra mạng trong quá trình build. Vấn đề về giấy phép chỉ hiện dưới dạng cảnh báo khi phát triển và không bao giờ làm hỏng ứng dụng production.
PDS là phần mềm độc quyền và được cấp phép theo từng team. Hãy yêu cầu quyền truy cập, chúng tôi sẽ thiết lập cho bạn — gói, tài liệu và nguồn token — để một team có thể áp dụng chỉ trong một buổi chiều.
FAQ
Theo nhóm — không theo người dùng hay dự án. Một giấy phép bao phủ mọi người xây dựng với PDS trong một nhóm: token, component và tài liệu. Chi phí chỉ tăng theo số nhóm áp dụng, không gì khác, và các sản phẩm whitelabel chúng tôi xây cho bạn đã chạy trên PDS.
Từ registry riêng tại npm.protocore.io. Thông tin truy cập cho phép bản build tải các gói @protocore; sau đó token và component được cài như mọi dependency khác.
Token được xuất cho web, .NET và native, nên một màu hay một bán kính bo góc có cùng ý nghĩa trên mọi nền tảng bạn phát hành. Component phát hành cho React, và một lớp CSS không phụ thuộc framework mang cùng token và class cho các nhóm không dùng React.
Ưu tiên giao diện tối và hỗ trợ truy cập theo mặc định — hai theme, năm màu nhấn, tất cả điều khiển bằng token, với CSS zero-runtime nên phần style không tốn chi phí khi tải. Cùng các component này hiển thị sản phẩm của chúng tôi và dashboard của khách hàng.
PDS được thiết kế cho việc đó: bản đồ llms.txt và máy chủ MCP giúp agent đọc hệ thống và xây dựng đúng cách, còn pds.protocore.io có ví dụ trực tiếp, props và mã sao chép dùng ngay cho mọi component và token.
Định giá
PDS được cấp phép theo nhóm, không tính theo người dùng hay dự án — một giấy phép bao phủ toàn bộ thành viên xây dựng với PDS trong nhóm đó: token, component và tài liệu.
Bắt đầu với một nhóm và mở rộng thêm khi mức độ áp dụng tăng. Chi phí chỉ phụ thuộc vào số nhóm xây dựng trên PDS, không gì khác.
Các sản phẩm whitelabel chúng tôi xây cho bạn đã chạy trên PDS — giấy phép độc lập dành cho các nhóm muốn áp dụng PDS cho sản phẩm riêng.
Giấy phép tính theo nhóm, không theo số nhân sự hay mức sử dụng. Hãy yêu cầu quyền truy cập, chúng tôi sẽ xác định phạm vi theo các nhóm sẽ xây dựng với PDS.
Đánh giá
Xem toàn bộ hệ thống tại pds.protocore.io — ví dụ trực tiếp, props và mã sao chép dùng ngay cho mọi component và token.
Design token được xuất cho web, .NET và native, để một màu hay một bán kính bo góc mang cùng ý nghĩa trên mọi nền tảng bạn phát hành.
PDS được cấp phép theo nhóm — một giấy phép bao phủ mọi người xây dựng với PDS, từ token, component đến tài liệu.
Thông tin xác thực cho registry riêng tại npm.protocore.io để cài các gói @protocore mà bản build của bạn cần.
PDS là sản phẩm độc quyền, cấp phép theo từng nhóm. Hãy yêu cầu quyền truy cập, chúng tôi sẽ thiết lập cho bạn.
Mọi thứ ở trên đều chạy trong các bản demo production mà chúng tôi có thể trình diễn — độc lập, whitelabel hay thành một nền tảng. Hãy cho chúng tôi biết bạn đang xây gì, chúng tôi sẽ chỉ ra đường ngắn nhất.
