design-tokens

Bộ sưu tập phân tích tệp DESIGN.md từ các hệ thống thiết kế thương hiệu nổi tiếng. Đưa vào dự án của bạn và để các tác nhân viết mã tạo ra giao diện phù hợp.

🐼 Framework CSS-in-JS đa năng, an toàn kiểu dữ liệu dành cho Design System ⚡️

Xây dựng các ứng dụng React nhất quán, có thể tùy chỉnh giao diện dựa trên các nguyên tắc thiết kế dựa trên ràng buộc

Hệ thống xây dựng để tạo các style đa nền tảng.

Trích xuất toàn bộ hệ thống thiết kế của bất kỳ trang web nào chỉ với một lệnh. Token DTCG, ngữ nghĩa+nguyên thủy+tổ hợp, máy chủ MCP cho Claude Code/Cursor/Windsurf, trình phát hành đa nền tảng (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, biến Figma, shadcn/ui, kiểm tra sức khỏe CSS, khắc phục WCAG, tiện ích mở rộng Chrome. MIT, Playwright, Node 20+.

Trích xuất hệ thống thiết kế của bất kỳ trang web nào thành các token chỉ trong vài giây: logo, màu sắc, kiểu chữ, viền và nhiều hơn nữa. Chỉ với một lệnh.

180 gradient CSS3, Figma, Sketch & PSD miễn phí — cùng với tập dữ liệu JSON cho các công cụ thiết kế, trình tạo và tác nhân AI.

Đây là kho lưu trữ DTCG chính thức cho trang web và thông số kỹ thuật design tokens.

Biến giao diện người dùng tham chiếu (hình ảnh, ảnh chụp màn hình, URL) thành Design DNA JSON định lượng—token, phong cách định tính, hiệu ứng thị giác—sau đó tạo giao diện người dùng phù hợp từ nội dung của bạn.

Kho lưu trữ chính thức của plugin 'Tokens Studio for Figma' (Figma Tokens)

Danh sách tài nguyên về mọi thứ liên quan đến Design Tokens

Plugin Figma để xuất các token thiết kế sang định dạng json tương thích với amazon style dictionary.

Công cụ phương pháp thiết kế mã nguồn mở cho Claude Code, Codex & Cursor. 23 kỹ năng tác nhân cho nhận định thiết kế cố định, nhiều ngữ pháp, bảng màu ngữ nghĩa, biên soạn tài liệu tham khảo và giao diện người dùng được xác thực bằng minh chứng. MIT.

Biến Claude thành Kiến trúc sư thiết kế cấp cao — bao gồm design tokens DTCG, 42 thành phần, hỗ trợ tiếp cận WCAG 2.2, mã nguồn cho mọi framework, 138 hệ thống thiết kế và các kỹ năng có thể thực thi.

📒 Danh sách tuyển chọn các dấu trang, tài nguyên và bài viết về hệ thống thiết kế dành cho lập trình viên.

Figmagic là mảnh ghép còn thiếu giữa DevOps và thiết kế: Tạo design token, xuất đồ họa và trích xuất các thành phần React dựa trên design token từ tài liệu Figma của bạn.

Một bộ các thành phần React cho dự án PatternFly.

Làm cho <script> của bạn nhẹ hơn và <style> thông minh hơn

Hiển thị tài liệu design token được tạo từ các tệp stylesheet và icon của bạn. Xem trước các thay đổi của design token trên trình duyệt. Thêm design token vào các trang Storybook Docs bằng cách sử dụng các Doc Blocks tùy chỉnh

Biên dịch hệ thống thiết kế của bạn thành một Agent Plugin. Trích xuất danh tính từ bất kỳ tham chiếu nào, xuất ra SKILL.md + tokens.css và kiểm tra các thành phần bỏ qua token của bạn.

Môi trường phát triển trực quan cho CSS

Đặc tả kỹ thuật để định nghĩa các đối tượng chủ đề và mã thông báo thiết kế (design tokens) cho các thành phần UI.

Hệ thống thiết kế sẵn dùng cho Unity 6 UI Toolkit (UIDocument + PanelRenderer, UXML + USS): bao gồm tokens, hỗ trợ vật liệu shader fx, 42 thành phần, 120 biểu tượng, tương thích di động và chủ đề tối. Chỉ một tệp stylesheet, không phụ thuộc. Đã được kiểm chứng thực tế trong các trò chơi cross-play.

200 production-grade DESIGN.md design systems for the world's best apps. Framework-neutral plus SwiftUI, Jetpack Compose, and Expo. Hand one to your AI agent, ship pixel-matched UI.

Hệ thống thiết kế Helios