Hướng dẫn từ Openclaw Skills để xây dựng giao diện chất lượng sản xuất với CSS thuần, BEM, bố cục hiện đại và hiệu ứng chuyển động tinh tế.
Cài đặt & Tải xuống
1. ClawHub CLI
Cách nhanh nhất để cài đặt kỹ năng trực tiếp từ thư viện.
npx clawhub@latest install ui-master-static
2. Cài đặt Thủ công
Sao chép thư mục kỹ năng vào một trong những vị trí sau
~/.openclaw/skills/ <project>/skills/ Ưu tiên: Không gian làm việc > Cục bộ > Gói sẵn
3. Cài đặt Prompt
Sao chép prompt này vào OpenClaw để tự động cài đặt.
Giúp tôi cài đặt ui-master-static bằng Clawhub. Nếu Clawhub chưa
Bạn muốn tải xuống?
Nhận các tệp kỹ năng gốc dưới dạng lưu trữ ZIP.
UI Master Static là gì?
UI Master Static là tài liệu tham khảo của Openclaw Skills để xây dựng giao diện chất lượng sản xuất chỉ bằng CSS thuần — không dùng Tailwind, không dùng CSS-in-JS và không dùng bất kỳ utility framework nào. Nó thay thế các rào cản của framework bằng một kiến trúc có kỷ luật: các thiết kế tokens trong :root, đặt tên theo chuẩn BEM, phân tầng tệp tin có thể dự đoán được và xác thực ưu tiên khả năng tiếp cận (accessibility).
Sử dụng công cụ này khi dự án cần một trang tĩnh, khung sườn (scaffold) Vite, landing page, khung dashboard, header, navbar hoặc các giao diện UI tinh tế khác được xây dựng từ CSS thuần. Người dùng Openclaw Skills nên coi đây là một thư viện tham khảo: đọc hướng dẫn cụ thể về kiến trúc, bố cục, hiệu ứng hoặc khả năng tiếp cận, sau đó chỉ áp dụng những phần mà yêu cầu công việc đề ra.
Trường hợp sử dụng UI Master Static
- Các nhiệm vụ của Openclaw Skills yêu cầu rõ ràng sử dụng CSS thuần, vanilla CSS hoặc không dùng Tailwind.
- Các dự án Vite + HTML/CSS mới cần một kiến trúc dễ bảo trì ngay từ ngày đầu tiên.
- Các trang web tĩnh, landing pages, trang tiếp thị và các phần hero với độ hoàn thiện hình ảnh cao.
- Headers, navbars, khung dashboard, bố cục sidebar và lưới thẻ (card grid) responsive.
- Thêm các hiệu ứng hiện đại như hiệu ứng kính mờ (glassmorphism), dải màu phân tầng, hoạt ảnh theo hành vi cuộn trang (scroll-driven animation), parallax hoặc phép biến đổi 3D.
- Cải tiến một bảng kiểu (stylesheet) hiện có bằng các tokens, quy ước BEM và độ ưu tiên phẳng (flat specificity).
- Cung cấp CSS dễ tiếp cận, nâng cao dần (progressive-enhancement) với các phương án dự phòng giảm chuyển động (reduced-motion) và bảo vệ hỗ trợ trình duyệt.
Cách thức hoạt động của UI Master Static
- Kiểm tra kho lưu trữ (repo) hiện có và xác nhận phạm vi. Nếu các kiểu dáng đã tồn tại, hãy khớp với các quy ước hiện tại và đưa BEM cùng tokens vào một cách dần dần. Đối với các dự án mới hoàn toàn, hãy bắt đầu từ cấu trúc kiến trúc đầy đủ.
- Xác định hệ thống token và các lớp tệp tin. Đặt màu sắc, khoảng cách, bo góc (radius), đổ bóng, kiểu chữ và chuyển động vào
:root, sau đó chia CSS thành các phần tokens, base/reset, layout, components và utilities. - Xây dựng các mẫu cấu trúc dựa trên tài liệu tham khảo được cung cấp. Tái sử dụng các mẫu header, dashboard, lưới và hero; sử dụng container queries và các vùng mẫu CSS Grid ở những nơi phù hợp.
- Thêm một hiệu ứng hình ảnh đặc trưng cho mỗi màn hình. Lựa chọn giữa hiệu ứng kính mờ, dải màu dạng lưới (mesh gradients), tương tác vi mô, hoạt ảnh theo hành vi cuộn trang, parallax, biến đổi 3D hoặc hiệu ứng được hỗ trợ bởi Houdini, và luôn bao gồm các phương án dự phòng.
- Xác minh chất lượng trước khi bàn giao. Kiểm tra
prefers-reduced-motion, phương án dự phòng@supports, độ ưu tiên phẳng và các giá trị chỉ dùng token để bảng kiểu vẫn dễ bảo trì và dễ tiếp cận.
Cài đặt UI Master Static
Không cần cài đặt gói phần mềm nào. Thiết lập kiến trúc CSS và các thư mục tham chiếu, sau đó giữ cho tất cả các kiểu component được dẫn dắt bởi token.
- Tạo cấu trúc thư mục cơ bản:
mkdir -p styles/tokens styles/base styles/layout styles/components styles/utilities references examples
touch styles/main.css
- Khởi tạo dự án với các tài liệu tham khảo và ví dụ phù hợp với nhiệm vụ.
- Trong tệp
styles/main.css, nhập (import) các lớp theo thứ tự: tokens, base/reset, layout, components, utilities. - Định nghĩa các biến chủ đề thời gian chạy (runtime theme) trong
:rootvà tránh sử dụng các giá trị cố định trực tiếp trong các quy tắc của component. - Khớp với các quy ước của repo hiện có trước tiên; chỉ đưa các lớp BEM và token vào một cách dần dần khi cơ sở mã đã được cấu trúc theo một cách khác.
Lược đồ dữ liệu & Hệ thống phân loại của UI Master Static
Tệp tin và mô hình dữ liệu
| Lớp | Đường dẫn / tệp | Mục đích | Phân loại |
|---|---|---|---|
| Siêu dữ liệu Skill | SKILL.md front matter (name, description) |
Tuyên bố khi nào skill nên kích hoạt và những gì nó nên tránh | scope, exclusions, implementation style |
| Tham chiếu kiến trúc | references/css-architecture-bem.md |
Hệ thống token, quy tắc BEM, tổ chức thư mục, mô hình chuyển đổi chủ đề | tokens, specificity, import order, theming |
| Mẫu bố cục | references/layout-patterns.md, examples/header.html, examples/header.css, examples/dashboard.html, examples/dashboard.css |
Khung tái sử dụng cho headers, navbars, bố cục dashboard và lưới responsive | shell, grid areas, container queries, hero rhythm |
| Danh mục hiệu ứng | references/modern-effects.md, examples/effects-showcase.html, examples/effects-showcase.css |
Bản demo riêng biệt cho hiệu ứng kính mờ, dải màu, hoạt ảnh cuộn, parallax, biến đổi 3D và Houdini | motion, elevation, interaction, progressive enhancement |
| Xác minh | references/accessibility-performance-checklist.md |
Các cổng kiểm tra khả năng tiếp cận và hiệu suất trước khi bàn giao | reduced motion, supports fallbacks, specificity |
| Các lớp nguồn CSS | styles/tokens, styles/base, styles/layout, styles/components, styles/utilities |
Tổ chức bảng kiểu sản xuất cho các bản dựng không dùng framework | block, element, modifier, state, utility |
Phân loại Token
- Token màu sắc: giá trị ngữ nghĩa cho tiền cảnh (foreground), nền (background), viền (border), bề mặt và điểm nhấn
- Token không gian: tỷ lệ khoảng cách cho padding, gap và nhịp điệu bố cục
- Token hình dạng: tỷ lệ cho bo góc (radius) và độ rộng viền
- Token độ cao (elevation): bóng đổ, làm mờ và độ sâu lớp phủ
- Token kiểu chữ: họ phông chữ, kích thước, chiều cao dòng, khoảng cách chữ (tracking), độ đậm (weight)
- Token chuyển động: thời gian chạy, gia tốc (easing) và cường độ biến đổi
Tính năng Nâng cao của UI Master Static
- Chuyển đổi chủ đề sáng/tối tại thời gian chạy với mô hình thuộc tính tùy chỉnh hai giai đoạn
- Kiến trúc BEM độ ưu tiên phẳng có thể mở rộng mà không gặp xung đột bộ chọn hoặc cần dùng
!important - Các component responsive theo container-query và khung dashboard sử dụng CSS Grid
- Hoạt ảnh theo hành vi cuộn trang, parallax, biến đổi 3D và keyframes nhiều giai đoạn
- Hỗ trợ CSS Houdini
@propertyvới tính năng nâng cao dần thông qua@supportscho các hiệu ứng Paint API - Rào cản bảo vệ khả năng tiếp cận với phương án dự phòng
prefers-reduced-motioncho các giao diện UI sử dụng nhiều chuyển động - Quy trình làm việc tham chiếu thân thiện với Openclaw Skills, khuyến khích chỉ sử dụng hướng dẫn cần thiết cho kiến trúc, bố cục, hiệu ứng hoặc khả năng tiếp cận
SKILL.md
Đang tải
Các kỹ năng Openclaw liên quan
GIF Picker
GIF Picker cho phép các tác nhân Openclaw chọn GIF phản ứng cục bộ bằng thẻ và trả về đường dẫn `MEDIA:` đáng tin cậy cho các phản hồi trò chuyện.
Save — Chỉ mục bộ nhớ cuộc hội thoại
Save là một hệ thống bộ nhớ Openclaw Skills giúp chuyển đổi các cuộc hội thoại trực tiếp thành kiến thức cục bộ bền vững, có thể tìm kiếm được.
savemaintenance
savemaintenance là một đường ống bảo trì của Openclaw Skills giúp sao lưu, đối chiếu, xây dựng lại và kiểm tra hệ thống bộ nhớ ba tầng trong một lần chạy xác định duy nhất.
Dali Creative Intelligence
Dali đánh giá và nâng cấp các prompt hình ảnh và video trước khi tạo, ngăn ngừa lãng phí tài nguyên và cải thiện chất lượng đầu ra.
Tristan RFQ Overseer
Tristan RFQ Overseer chuyển đổi các RFQ đến thành các bản thảo báo giá được định giá, so sánh và kiểm soát phê duyệt với trạng thái được hỗ trợ bởi kho lưu trữ (vault).
Canvora Visual Generation Skill
Canvora là một công cụ tiện ích chạy bằng CLI giúp chuyển đổi văn bản thô, URL trang web và tài liệu thành hình ảnh tiếp thị chất lượng cao, đồng bộ với thương hiệu và các bộ trang trình bày có cấu trúc.
Đặc sắc*
