Giới thiệu

Semi Design là bộ thư viện giao diện do ByteDance phát triển, cung cấp 70+ thành phần giao diện với điểm nhấn là bộ AI Components chuyên dụng. Đây là tài liệu tham khảo nhanh về công năng từng component — giúp bạn chọn đúng thành phần khi làm việc với Claude Code.

Đặc điểm nổi bật


Nhóm 1 — Hiển thị dữ liệu (Data Display)

Dùng khi bạn muốn trình bày thông tin cho người dùng nhìn thấy.

Nhóm 2 — Nhập liệu & Biểu mẫu (Input & Form)

Dùng khi bạn muốn thu thập thông tin từ người dùng.

Nhóm 3 — Điều hướng (Navigation)

Dùng khi bạn muốn dẫn dắt người dùng di chuyển giữa các phần của ứng dụng.

Nhóm 4 — Thông báo & Phản hồi (Feedback)

Dùng khi bạn muốn thông báo điều gì đó cho người dùng hoặc phản hồi hành động.

Nhóm 5 — Bố cục & Cấu trúc (Layout)

Dùng khi bạn muốn sắp xếp, tổ chỉnh không gian trên màn hình.

Nhóm 6 — Nền tảng & Hành động (Basic & Actions)

Những thành phần nền tảng được dùng xuyên suốt ứng dụng.

Nhóm 7 — Nội dung AI & Media (Plus)

Các thành phần nâng cao dành cho ứng dụng AI và nội dung phong phú.

Nhóm 8 — AI Components (AI Chat)

Các thành phần được thiết kế riêng cho ứng dụng chatbot và AI.

Nhóm 9 — Cấu hình & Tiện ích (Config & Utilities)

Dùng để tuỳ chỉnh toàn bộ ứng dụng.

Tổng hợp theo nhóm

Tổng cộng: 70+ thành phần — nổi bật với AI Components và Plus components cho ứng dụng thông minh.

Tham khảo