baoyu-design Đang hoạt động

baoyu-design là dự án mã nguồn mở của Bảo Ngọc, đóng gói công cụ thiết kế của claude.ai thành Agent Skill có thể chuyển đổi, giúp hơn 70 Agent cục bộ như Cursor, Claude Code, Codex trực tiếp tạo UI độ trung thực cao, prototype, slide, hệ thống thiết kế và bảng điều khiển dữ liệu. Sản phẩm tạo ra là các tệp thuần cục bộ, có thể quản lý phiên bản bằng Git; hỗ trợ cộng tác nhiều vai trò trong mạng LAN và lịch sử phiên bản, đồng thời cung cấp plugin DeepSeek Harness.

Theo dõi WeChat và trả lời “开源” để tham gia nhóm trao đổi dự án AI mã nguồn mở
Tạo slide (claude-slides): Tạo cả bộ slide bằng ngôn ngữ tự nhiên; trình chỉnh sửa cục bộ hỗ trợ trình chiếu, sửa chữ và kéo thả, có thể xuất PDF/HTML/PPTX.
Canvas thiết kế nhiều bảng (claude-design): Quản lý nhiều bảng cạnh nhau, phát prototype tương tác, xuất HTML/PDF/PNG.
Xây dựng hệ thống thiết kế (claude-design-system): Tạo tokens, brand guideline và bản xem trước component; có thể trực tiếp duyệt và chỉnh sửa màu sắc, phông chữ, component trong trình chỉnh sửa.
Bảng điều khiển dữ liệu (claude-dashboard): Biến tập dữ liệu CSV/TSV/JSON thành trang biểu đồ thời gian thực; mọi con số đều có thể truy nguyên về dòng dữ liệu gốc.
Hướng dẫn thiết kế biểu đồ (dataviz): Quy chuẩn bắt buộc Agent đọc trước khi vẽ bất kỳ biểu đồ nào, bảo đảm màu sắc dễ đọc và thân thiện với người mù màu.
Chọn và chỉnh sửa trong bản xem trước: Chọn phần tử trực tiếp trong bản xem trước trên trình duyệt của Agent để gửi nhận xét chỉnh sửa, tự động xác định và sửa mã nguồn.
Cộng tác trong mạng LAN: Tạo liên kết mạng LAN phân biệt theo vai trò chỉ bằng một cú nhấp; có thể tham gia cộng tác mà không cần tài khoản.

Chuẩn bị môi trường: Cài đặt Node.js 20+ và đảm bảo máy đã có một Agent như Cursor, Claude Code hoặc Codex.
Cài đặt skill: Chạy npx skills add JimLiu/baoyu-design, CLI sẽ tự động phát hiện Agent và cài skill vào thư mục tương ứng.
Chọn model: Trong Agent, đặt model thành Claude Opus 5.5 để đạt hiệu quả thiết kế tốt nhất.
Đưa ra yêu cầu: Mô tả sản phẩm mong muốn bằng ngôn ngữ tự nhiên, chẳng hạn “hãy giúp tôi làm một bộ slide báo cáo quý”, hoặc nhập trực tiếp các lệnh slash như /claude-slides, /claude-design để chỉ định skill.
Chờ tạo: Agent sẽ tạo tệp trong thư mục designs// và khởi chạy trình chỉnh sửa cục bộ, sau đó cung cấp địa chỉ http://127.0.0.1.
Xem trước và chỉnh sửa: Mở trình chỉnh sửa trong trình duyệt để chọn phần tử và chỉnh sửa, kéo thả bố cục, trình chiếu prototype; thay đổi sẽ được lưu theo thời gian thực vào tệp.
Chia sẻ cộng tác (tùy chọn): Chạy artifact.mjs share designs/ để tạo liên kết mạng LAN, các thành viên trong nhóm tham gia chỉnh sửa hoặc bình luận theo vai trò.
Quản lý phiên bản (tùy chọn): Sản phẩm là các tệp thông thường, có thể dùng Git để commit, tạo branch và PR quản lý bản thiết kế.
Xuất và bàn giao: Xuất nhanh sang PDF, HTML, PPTX hoặc PNG trong trình chỉnh sửa để bàn giao cho khách hàng hoặc dùng thuyết trình.

Kho GitHub: https://github.com/JimLiu/baoyu-design

Chạy hoàn toàn cục bộ: Đưa công cụ thiết kế của claude.ai vào Agent cục bộ, sản phẩm được lưu trực tiếp trong kho riêng, không bị phụ thuộc vào đám mây.
Tương thích với hệ sinh thái Agent: Hơn 70 Agent như Cursor, Claude Code, Codex, Cline có thể sử dụng ngay sau khi cài đặt, không bị giới hạn bởi một nền tảng duy nhất.
Sản phẩm chính là mã nguồn: Tạo ra các tệp thuần tự chứa như HTML, có thể trực tiếp đưa vào Git để quản lý phiên bản, PR và kho dự án.
Thiết kế và phát triển không cần chuyển đổi: Trong cùng một phiên, có thể trực tiếp giao bản thiết kế cho Agent triển khai chức năng mà không cần xuất và tải lên.
Chỉ đâu sửa đó: Chọn phần tử trong bản xem trước trên trình duyệt để Agent chỉnh sửa chính xác, hiệu quả cao hơn nhiều lần so với việc chuyển đổi qua lại giữa các trình chỉnh sửa trên phiên bản đám mây.
Cộng tác nhiều người trong mạng LAN: Tạo liên kết mạng LAN phân biệt theo vai trò chỉ bằng một cú nhấp, không cần đăng nhập tài khoản.

Thiết kế prototype sản phẩm: Quản lý sản phẩm hoặc nhà phát triển độc lập dùng ngôn ngữ tự nhiên để nhanh chóng tạo giao diện ứng dụng có độ trung thực cao và prototype tương tác; tạo 3 phương án trong nửa giờ trước cuộc họp để đánh giá và lựa chọn.
Slide thuyết trình và báo cáo: Nhà sáng lập hoặc nhân viên văn phòng đưa PRD và dữ liệu báo cáo tài chính cho Agent, tạo một bộ slide báo cáo quý hoặc deck thuyết trình gọi vốn theo quy chuẩn thiết kế chỉ trong vài phút, sau đó xuất PPTX/PDF để sử dụng.
Xây dựng bảng dữ liệu: Nhân viên vận hành hoặc chuyên viên phân tích cung cấp dữ liệu nghiệp vụ CSV/JSON cho claude-dashboard, tự động tạo bảng điều khiển dữ liệu cập nhật theo thời gian thực; mỗi chỉ số có thể đi sâu để truy nguyên về dòng dữ liệu gốc.
Tích lũy hệ thống thiết kế: Nhóm tổng hợp các quyết định thiết kế rời rạc thành design-system kèm brand guideline, phân phối qua kho Git cho mọi dự án, bảo đảm tính nhất quán về hình ảnh giữa nhiều dòng sản phẩm.