Giao diện người dùng UX Pro Max

🇻🇳 Tiếng Việt | 🇨🇳 简体中文 | 🇺🇸 Tiếng Anh

Một kỹ năng AI cung cấp thông tin thiết kế để xây dựng UI/UX chuyên nghiệp trên nhiều nền tảng và khung.

Nếu bạn thấy điều này hữu ích, hãy xem xét hỗ trợ dự án:

Các dự án khác
NextLevelBuilder.io | GoClaw.sh | ClaudeKit.cc | TOSE.sh

Có gì mới trong v2.0

Thế hệ hệ thống thiết kế thông minh

Tính năng hàng đầu của v2.0 là Thiết kế hệ thống tạo - một công cụ lý luận được hỗ trợ bởi AI để phân tích các yêu cầu dự án của bạn và tạo ra một hệ thống thiết kế hoàn chỉnh, phù hợp trong vài giây.

+----------------------------------------------------------------------------------------+
|  TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM                                      |
+----------------------------------------------------------------------------------------+
|                                                                                        |
|  PATTERN: Hero-Centric + Social Proof                                                  |
|     Conversion: Emotion-driven with trust elements                                     |
|     CTA: Above fold, repeated after testimonials                                       |
|     Sections:                                                                          |
|       1. Hero                                                                          |
|       2. Services                                                                      |
|       3. Testimonials                                                                  |
|       4. Booking                                                                       |
|       5. Contact                                                                       |
|                                                                                        |
|  STYLE: Soft UI Evolution                                                              |
|     Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes        |
|     Best For: Wellness, beauty, lifestyle brands, premium services                     |
|     Performance: cost:low | Accessibility: risk:conditional; verify requirements       |
|                                                                                        |
|  COLORS:                                                                               |
|     Primary:    #E8B4B8 (Soft Pink)                                                    |
|     Secondary:  #A8D5BA (Sage Green)                                                   |
|     CTA:        #D4AF37 (Gold)                                                         |
|     Background: #FFF5F5 (Warm White)                                                   |
|     Text:       #2D3436 (Charcoal)                                                     |
|     Notes: Calming palette with gold accents for luxury feel                           |
|                                                                                        |
|  TYPOGRAPHY: Cormorant Garamond / Montserrat                                           |
|     Mood: Elegant, calming, sophisticated                                              |
|     Best For: Luxury brands, wellness, beauty, editorial                               |
|     Google Fonts: https://fonts.google.com/share?selection.family=...                  |
|                                                                                        |
|  KEY EFFECTS:                                                                          |
|     Soft shadows + Context-appropriate transitions + Gentle hover states               |
|                                                                                        |
|  AVOID (Anti-patterns):                                                                |
|     Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients       |
|                                                                                        |
|  PRE-DELIVERY CHECKLIST:                                                               |
|     [ ] No emojis as icons (use SVG: Heroicons/Lucide)                                 |
|     [ ] cursor-pointer on all clickable elements                                       |
|     [ ] Interaction timing follows the platform, component, and user preference        |
|     [ ] Light mode: text contrast 4.5:1 minimum                                        |
|     [ ] Focus states visible for keyboard nav                                          |
|     [ ] prefers-reduced-motion respected                                               |
|     [ ] Text, chips, and badges reflow without clipping or broken labels               |
|     [ ] Responsive: 375px, 768px, 1024px, 1440px                                       |
|                                                                                        |
+----------------------------------------------------------------------------------------+

Cách tạo hệ thống thiết kế hoạt động

┌─────────────────────────────────────────────────────────────────┐
│  1. USER REQUEST                                                │
│     "Build a landing page for my beauty spa"                    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  2. MULTI-DOMAIN SEARCH (5 parallel searches)                   │
│     • Product type matching (192 categories)                    │
│     • Style recommendations (79 searchable; 50 active)          │
│     • Color palette selection (192 palettes)                    │
│     • Landing page patterns (34 patterns)                       │
│     • Typography pairing (74 font combinations)                 │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  3. REASONING ENGINE                                            │
│     • Match product → UI category rules                         │
│     • Apply style priorities (BM25 ranking)                     │
│     • Filter anti-patterns for industry                         │
│     • Process decision rules (JSON conditions)                  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  4. COMPLETE DESIGN SYSTEM OUTPUT                               │
│     Pattern + Style + Colors + Typography + Effects             │
│     + Anti-patterns to avoid + Pre-delivery checklist           │
└─────────────────────────────────────────────────────────────────┘

192 Quy tắc lý luận cụ thể theo ngành

Công cụ lý luận bao gồm các quy tắc chuyên biệt cho:

Danh mục	Ví dụ
Công nghệ & SaaS	SaaS, Micro SaaS, Dịch vụ B2B, Công cụ dành cho nhà phát triển/IDE, Nền tảng AI/Chatbot, Nền tảng an ninh mạng
Tài chính	Fintech/Crypto, Ngân hàng, Bảo hiểm, Công cụ theo dõi tài chính cá nhân, Công cụ lập hóa đơn & thanh toán
Chăm sóc sức khỏe	Phòng khám y tế, Nhà thuốc, Nha khoa, Thú y, Sức khỏe tâm thần, Nhắc nhở về thuốc
Thương mại điện tử	Chung, Cao cấp, Thị trường (P2P), Hộp đăng ký, Giao đồ ăn
Dịch vụ	Làm đẹp/Spa, Nhà hàng, Khách sạn, Pháp lý, Dịch vụ tại nhà, Đặt chỗ & Cuộc hẹn
sáng tạo	Danh mục đầu tư, Đại lý, Nhiếp ảnh, Trò chơi, Truyền phát nhạc, Trình chỉnh sửa ảnh/video
Phong cách sống	Theo dõi thói quen, Công thức nấu ăn, Thiền, Thời tiết, Nhật ký, Theo dõi tâm trạng
Công nghệ mới nổi	Web3/NFT, Điện toán không gian, Điện toán lượng tử, Đội máy bay không người lái tự động

Mỗi quy tắc bao gồm:

• Mẫu đề xuất - Cấu trúc trang đích
• Ưu tiên kiểu dáng - Phong cách giao diện người dùng phù hợp nhất
• Tâm trạng màu sắc - Bảng màu phù hợp với ngành
• Kiểu chữ tâm trạng - Phù hợp với tính cách phông chữ
• Hiệu ứng chính - Ảnh động và tương tác
• Chống mẫu - Những điều KHÔNG nên làm (ví dụ: "Độ chuyển màu tím/hồng AI" cho ngân hàng)

Tính năng

• 79 Kiểu giao diện người dùng có thể tìm kiếm (50 hoạt động) - Chủ nghĩa thủy tinh, Chủ nghĩa đất sét, Chủ nghĩa tối giản, Chủ nghĩa tàn bạo, Chủ nghĩa trung tính, Lưới Bento, Chế độ tối, Giao diện người dùng gốc AI, v.v.
• 192 Bảng Màu - Bảng màu dành riêng cho ngành được căn chỉnh 1:1 với 192 loại sản phẩm
• 74 Cặp Phông Chữ - Kết hợp kiểu chữ được quản lý với nhập Google Fonts
• 25 loại biểu đồ - Đề xuất cho bảng điều khiển và phân tích
• 22 ngăn xếp công nghệ - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform
• 119 Nguyên tắc UX - Các phương pháp hay nhất, chống mẫu, quy tắc trợ năng, bố cục văn bản linh hoạt, nhãn nhỏ gọn và các tương tác có thể hủy
• 192 Quy tắc suy luận - Tạo hệ thống thiết kế dành riêng cho ngành (MỚI trong v2.0)

Văn bản linh hoạt và giao diện người dùng nhỏ gọn

Hướng dẫn hiện bao gồm các lỗi sản xuất phổ biến xung quanh các tiêu đề, mã thông báo dài, chip, huy hiệu và các tương tác vi mô bị gián đoạn:

• Gói tiêu đề cân bằng là một cải tiến tiến bộ, không đảm bảo rằng một từ cụ thể sẽ vẫn ở dòng cuối cùng. Các thiết kế vẫn phải hoạt động với cách bao bọc tự nhiên theo chiều rộng, phông chữ và ngôn ngữ.
• Văn bản cần thiết phải chỉnh lại mà không bị cắt ở độ rộng hẹp, thu phóng trình duyệt, chia tỷ lệ văn bản và ghi đè khoảng cách người dùng. URL dài và số nhận dạng có thể được bọc an toàn.
• Bộ sưu tập chip và thẻ nên bọc hoặc sử dụng một bộ sưu tập có thể hoạt động +n tiết lộ. Nhãn nhỏ gọn phải được giữ nguyên khi thực tế; việc cắt bớt không thể tránh khỏi cần một đường dẫn có giá trị đầy đủ có thể truy cập được cho người dùng bàn phím, con trỏ và cảm ứng.
• Ý nghĩa huy hiệu không thể chỉ dựa vào màu sắc. Chip tương tác cần ngữ nghĩa gốc, trọng tâm trực quan và trạng thái có lập trình; số lượng trực tiếp cần bối cảnh có ý nghĩa.
• Tương tác nhanh có thể hủy hoạt ảnh nhưng trạng thái ngữ nghĩa, trọng tâm và nội dung cuối cùng vẫn phải chính xác. Thời gian được chọn cho nền tảng và thành phần, với các tùy chọn giảm chuyển động được tôn trọng.

Phân loại phong cách

Danh mục chứa 79 kiểu có thể tìm kiếm được hỗ trợ bởi ID và bí danh ổn định:

Trạng thái	Đếm	Hành vi tìm kiếm
Đang hoạt động	50	Bao gồm trong các đề xuất thông thường và được hiển thị theo mặc định trong thư viện
bổ sung	29	Được trả về cho mục đích của biến thể/hệ thống chính xác hoặc rõ ràng; có sẵn thông qua bộ lọc trạng thái thư viện
Không được dùng nữa	9	Bị loại khỏi xếp hạng bình thường; tên kế thừa chuyển hướng đến kiểu chuẩn hoặc mẫu đích

Bộ hoạt động bao gồm 43 họ hình ảnh chung, 2 kiểu dành riêng cho thiết bị di động, 3 hệ thống thiết kế/nền tảng chính thức, 1 vật liệu nền tảng và 1 kiểu phân tích cốt lõi. Các hệ thống chính thức hiện tại bao gồm Fluent 2, Shopify Polaris và Adobe Spectrum; Liquid Glass được coi là vật liệu nền tảng của Apple, Material 3 Expressive vẫn là một biến thể Material di động và Spectrum 2 là bổ sung. Cấu trúc trang đích tồn tại trong tập dữ liệu đích 34 mẫu riêng biệt thay vì cạnh tranh với các kiểu trực quan trong bảng xếp hạng BM25.

Xem styles.csv để có thông tin phân loại đầy đủ và siêu dữ liệu nhận biết xuất xứ.

💎 So sánh phiên bản cơ bản và cao cấp

Nhiều người dùng hỏi về sự khác biệt giữa phiên bản nguồn mở và phiên bản cao cấp. Dưới đây là bảng phân tích chi tiết để giúp bạn chọn loại phù hợp với quy trình làm việc của mình.

🟢 Phiên bản cơ bản (Kho lưu trữ này)

• Nguồn mở hoàn toàn: Hoàn hảo cho các nhà phát triển cá nhân, những người có sở thích và các dự án tiêu chuẩn.
• Thông minh UI/UX cốt lõi: Toàn quyền truy cập vào 79 kiểu giao diện người dùng có thể tìm kiếm (50 kiểu đang hoạt động), 192 loại sản phẩm, bảng màu và các cặp phông chữ được tuyển chọn.
• Khuyến nghị thông minh: Công cụ tìm kiếm BM25 tích hợp để kết hợp thiết kế có độ chính xác cao.
• Hỗ trợ đa nền tảng: Nguyên tắc dành riêng cho ngăn xếp hỗ trợ 22 khung chính (React, Vue, Tailwind, iOS, Android, v.v.).
• Thiết kế thế hệ hệ thống: Tạo ngay lập tức các quy tắc, mẫu và logic giao diện người dùng phù hợp thông qua CLI.

🟡 Phiên bản cao cấp

• Kỹ năng thiết kế thương hiệu mở rộng: Vượt ra ngoài UI/UX để bao gồm tạo Nhận diện thương hiệu, Thiết kế Logo, Chương trình nhận diện doanh nghiệp (CIP), Biểu ngữ, Trang trình bày và Biểu tượng tùy chỉnh.
• Tạo tài sản nâng cao: Tích hợp sâu với tính năng tạo hình ảnh được hỗ trợ bởi AI để tạo ra nội dung trực quan thực sự, không chỉ là phần giữ chỗ.
• Kiến trúc doanh nghiệp: Kiến trúc Design Token toàn diện hơn và có khả năng mở rộng hơn, được xây dựng để triển khai nhóm quy mô lớn.
• Hỗ trợ ưu tiên: Hỗ trợ kỹ thuật chuyên dụng cho các nhóm và chuyên gia cần quy trình thiết kế đầy đủ không bị gián đoạn.

👉 Để biết thêm chi tiết về việc nâng cấp lên cấp Premium, hãy truy cập uupm.cc.

Cài đặt

Sử dụng Thị trường Claude (Claude Code)

Cài đặt trực tiếp trong Claude Code bằng hai lệnh:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Sử dụng CLI (Được khuyến nghị)

# Install CLI globally
npm install -g ui-ux-pro-max-cli

# Go to your project
cd /path/to/your/project

# Install for your AI assistant
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai antigravity # Antigravity
uipro init --ai copilot     # GitHub Copilot
uipro init --ai kiro        # Kiro
uipro init --ai codex       # Codex CLI
uipro init --ai qoder       # Qoder
uipro init --ai roocode     # Roo Code
uipro init --ai gemini      # Gemini CLI
uipro init --ai trae        # Trae
uipro init --ai opencode    # OpenCode
uipro init --ai continue    # Continue
uipro init --ai codebuddy   # CodeBuddy
uipro init --ai droid       # Droid (Factory)
uipro init --ai kilocode    # KiloCode
uipro init --ai warp        # Warp
uipro init --ai augment     # Augment
uipro init --ai codewhale   # CodeWhale
uipro init --ai openclaw    # OpenClaw
uipro init --ai universal   # Universal / Agent Standard (.agents/skills/)
uipro init --ai all         # All assistants

Gói npm là ui-ux-pro-max-cli; nó vẫn cài đặt uipro lệnh. Cũ hơn uipro-cli các bản phát hành đã cũ và không nên được sử dụng cho các tài sản hiện tại.

Cài đặt toàn cầu (Có sẵn cho tất cả các dự án)

uipro init --ai claude --global   # Install to ~/.claude/skills/
uipro init --ai cursor --global   # Install to ~/.cursor/skills/
uipro init --ai universal --global # Install to ~/.agents/skills/

Các lệnh CLI khác

uipro versions              # List available versions
uipro update                # Refresh skill files from installed CLI package
uipro update --global       # Refresh global skill files from installed CLI package
uipro init --offline        # Compatibility flag; installs bundled templates
uipro uninstall             # Remove skill (auto-detect platform)
uipro uninstall --ai claude # Remove specific platform
uipro uninstall --global    # Remove from global install

Điều kiện tiên quyết

Python 3.x là bắt buộc đối với tập lệnh tìm kiếm (chỉ thư viện tiêu chuẩn — tập lệnh không cài đặt gì và không thực hiện cuộc gọi mạng).

Kiểm tra xem Python đã được cài đặt chưa:

python3 --version

Nếu nó bị thiếu, hãy tự cài đặt nó từ Python.org hoặc với trình quản lý gói hệ điều hành của bạn (Homebrew, apt, winget). Các bước cài đặt này dành cho bạn, người dùng con người — Tác nhân AI sử dụng kỹ năng này không bao giờ được cài đặt phần mềm trên máy của bạn; thay vào đó họ được hướng dẫn hỏi bạn.

Cách sử dụng

Chế độ kỹ năng (Tự động kích hoạt)

Được hỗ trợ: Claude Code, Cursor, Windsurf, AntiGravity, Codex CLI, Tiếp tục, Gemini CLI, OpenCode, Qoder, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment, CodeWhale

Kỹ năng này sẽ tự động kích hoạt khi bạn yêu cầu công việc UI/UX. Cứ trò chuyện một cách tự nhiên:

Build a landing page for my SaaS product

Trà: Chuyển sang MỘT MÌNH chế độ đầu tiên. Kỹ năng sẽ kích hoạt cho các yêu cầu UI/UX.

Chế độ quy trình làm việc (Lệnh gạch chéo)

Được hỗ trợ: Kiro, GitHub Copilot, Mã Roo, KiloCode

Sử dụng lệnh gạch chéo để gọi kỹ năng:

/ui-ux-pro-max Build a landing page for my SaaS product

Lời nhắc ví dụ

Build a landing page for my SaaS product

Create a dashboard for healthcare analytics

Design a portfolio website with dark mode

Make a mobile app UI for e-commerce

Build a fintech banking app with dark theme

Nó hoạt động như thế nào

1. Bạn hỏi - Yêu cầu bất kỳ tác vụ UI/UX nào (xây dựng, thiết kế, tạo, triển khai, đánh giá, sửa chữa, cải tiến)
2. Hệ thống thiết kế được tạo ra - AI tự động tạo ra một hệ thống thiết kế hoàn chỉnh bằng công cụ lý luận
3. Đề xuất thông minh - Dựa trên loại sản phẩm và yêu cầu của bạn, nó sẽ tìm ra kiểu dáng, màu sắc và kiểu chữ phù hợp nhất
4. Tạo mã - Triển khai giao diện người dùng với màu sắc, phông chữ, khoảng cách phù hợp và các phương pháp hay nhất
5. Kiểm tra trước khi giao hàng - Xác thực dựa trên các mẫu chống UI/UX phổ biến

Ngăn xếp được hỗ trợ

Kỹ năng này cung cấp các hướng dẫn cụ thể cho từng ngăn xếp để:

Danh mục	ngăn xếp
Web (HTML)	HTML + Tailwind (mặc định)
React Hệ sinh thái	React, Next.js, shadcn/ui
Vue Hệ sinh thái	Giao diện người dùng Vue, Nuxt.js, Nuxt
Angular	Angular
PHP	Laravel (Blade, Livewire, Quán tính.js)
Web khác	Svelte, Astro, Three.js
Máy tính để bàn	JavaFX, WPF, WinUI 3, Avalonia, Nền tảng Uno, UWP
iOS	SwiftUI
Android	Jetpack Soạn
Đa nền tảng	React Bản địa, Flutter

Chỉ cần đề cập đến ngăn xếp ưa thích của bạn trong lời nhắc hoặc để mặc định là HTML + Tailwind.

Lệnh hệ thống thiết kế (Nâng cao)

Để truy cập trực tiếp vào trình tạo hệ thống thiết kế:

Lưu ý: Nếu bạn cài đặt qua Tiếp tục, hãy thay thế .claude/skills/ với .continue/skills/ trong các lệnh dưới đây. Đối với Droid (Nhà máy), hãy sử dụng .factory/skills/.

# Generate design system with ASCII output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Generate with Markdown output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown

# Domain-specific search
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "error summary validation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "decorative icon aria hidden" --domain icons
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "icon button accessible label" --domain icons
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "orphan heading line balance" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "badge chip label wraps to second line" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "rapid chip animation interrupted" --domain ux

# Stack-specific guidelines
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "chip badge overflow nowrap" --stack html-tailwind
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "tableview binding" --stack javafx
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterprise theme" --stack javafx
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx

Tìm kiếm trong ngăn xếp web có tính năng nhận biết phiên bản. Các truy vấn không có hướng dẫn tích cực, hiện tại chính cũ hơn. Các thuật ngữ kế thừa rõ ràng hoặc các chuyên ngành cũ hơn (ví dụ: Svelte 4 hoặc Next.js 15) chỉ trả về các hàng kế thừa được quản lý, được gắn nhãn bởi Status và Applies To; khi không có hướng dẫn kế thừa phù hợp nào được quản lý, tìm kiếm sẽ không trả về kết quả nào thay vì trộn lẫn các thế hệ khung.

Hệ thống thiết kế kiên trì (Mẫu chính + ghi đè)

Lưu hệ thống thiết kế của bạn vào các tập tin để truy xuất phân cấp qua các phiên:

# Generate and persist to design-system/MASTER.md
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"

# Also create a page-specific override file
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"

Điều này tạo ra một design-system/ cấu trúc thư mục:

design-system/
├── MASTER.md           # Global Source of Truth (colors, typography, spacing, components)
└── pages/
    └── dashboard.md    # Page-specific overrides (only deviations from Master)

Cách truy xuất theo thứ bậc hoạt động:

1. Khi xây dựng một trang cụ thể (ví dụ: "Thanh toán"), trước tiên hãy kiểm tra design-system/pages/checkout.md
2. Nếu tệp trang tồn tại, các quy tắc của nó ghi đè tập tin chính
3. Nếu không, hãy sử dụng design-system/MASTER.md độc quyền

Lời nhắc truy xuất theo ngữ cảnh:

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

Kiến trúc & Đóng góp

Dành cho người dùng

Cơ sở mã đã được cơ cấu lại để sử dụng một hệ thống tạo dựa trên mẫu. Tất cả các tệp dành riêng cho nền tảng (.cursor/, .windsurf/, .kiro/, .factory/, v.v.) hiện được tạo động bởi CLI.

Luôn sử dụng CLI để cài đặt:

npm install -g ui-ux-pro-max-cli
uipro init --ai <platform>

Điều này đảm bảo bạn nhận được các mẫu mới nhất đi kèm với gói CLI đã cài đặt và cấu trúc tệp chính xác cho trợ lý AI của bạn. Cập nhật gói npm trước khi có bản phát hành mới được xuất bản.

Dành cho người đóng góp

Nếu bạn muốn đóng góp cho dự án này:

# 1. Clone the repository
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill

# 2. Understand the structure
src/ui-ux-pro-max/           # Source of truth (data, scripts, templates)
cli/                         # CLI installer (generates files from templates)
.claude/                     # Local dev/test for Claude Code skill
.factory/                    # Local dev/test for Droid (Factory) skill

# 3. Make changes in src/ui-ux-pro-max/
# - data/*.csv              → Database files
# - scripts/*.py            → Search engine & design system
# - templates/              → Platform-specific templates

# 4. Sync to CLI and test locally
cd cli
npm run sync:assets
npm run check:assets
npm run verify:data
npm run typecheck

# 5. Build and test CLI
# `npm run build` uses Bun when available and falls back to TypeScript compiler output after `npm ci`.
npm run build
node dist/index.js init --ai claude --offline  # Test in a temp folder

# 6. Create PR (never push directly to main)
git checkout -b feat/your-feature
git commit -m "feat: description"
git push -u origin feat/your-feature
gh pr create

Xem Claude.md để biết hướng dẫn phát triển chi tiết.

Xuất xứ và làm mới danh mục

Bản tóm tắt danh mục cam kết hiện đang ghi lại 1.934 Phông chữ Google được phê duyệt cộng thêm 8 loại trừ đánh giá không được quảng cáo nếu không khớp với siêu dữ liệu giấy phép chính thức. Hướng dẫn biểu tượng vẫn còn 105 hàng được sắp xếp (100 lượt nhập web Phosphor trực tiếp cộng với React Hướng dẫn gốc/dự phòng); sự riêng biệt Bản kê khai Phosphor ngược dòng 1.512 biểu tượng xác thực tên, trọng số và nhập React/SSR mà không làm tràn ngập kết quả tìm kiếm với toàn bộ gói ngược dòng.

Sự phát triển thông thường và CI yêu cầu kéo không phụ thuộc vào mạng. Chạy cổng ngoại tuyến đầy đủ, bao gồm hàm băm ảnh chụp nhanh và xác thực số lượng được tạo, với:

npm --prefix cli run verify:data
# Or check only the generated catalog summary:
npm --prefix cli run validate:catalog-summary

Quá trình chuẩn hóa làm mới cũng có thể được thực hiện hoàn toàn ngoại tuyến đối với các đồ đạc đã cam kết. Đầu ra sẽ chuyển đến thư mục ứng viên tạm thời và không bao giờ thay thế dữ liệu chuẩn:

candidate_dir="$(mktemp -d)"
python3 scripts/refresh-google-fonts.py \
  --api-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-api.json \
  --metadata-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-metadata.json \
  --existing-csv src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-existing.csv \
  --overrides src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-overrides.json \
  --output-csv "$candidate_dir/google-fonts.csv" \
  --license-output "$candidate_dir/google-font-licenses.json" \
  --metadata-revision fixture-catalogs-v1 \
  --verified-at 2026-08-13 --expected-count 2 --approve-changes
python3 scripts/refresh-icon-catalog.py \
  --input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-core.json \
  --package-json src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-package.json \
  --react-package-json src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-react-package.json \
  --react-exports-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-react-exports.json \
  --curated-csv src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/icons-curated.csv \
  --output "$candidate_dir/phosphor-icons-upstream.json" \
  --verified-at 2026-08-13 --expected-count 2

Làm mới trực tiếp ngược dòng được cố ý cô lập trong refresh-catalogs.yml quy trình làm việc, được lên lịch vào Thứ Hai lúc 03:17 UTC và cũng có sẵn theo yêu cầu. Cấu hình GOOGLE_FONTS_API_KEY dưới dạng bí mật Hành động GitHub, sau đó chạy và tải xuống tạo phẩm đánh giá của nó:

gh workflow run refresh-catalogs.yml
run_id="$(gh run list --workflow refresh-catalogs.yml --limit 1 --json databaseId --jq '.[0].databaseId')"
gh run watch "$run_id"
gh run download "$run_id" --name "catalog-refresh-review-$run_id"

Quy trình làm việc đọc Google Fonts Developer API và ghim các gói Phosphor chính thức, viết các ứng cử viên và các khác biệt thống nhất vào một tạo phẩm, đồng thời có quyền lưu trữ chỉ đọc. Nó không bao giờ cam kết, đẩy, mở PR hoặc hợp nhất. Xem lại các báo cáo thay đổi, loại trừ, giấy phép, số liệu liên quan và cổng ngoại tuyến trước khi quảng cáo thủ công các tệp ứng viên vào src/ui-ux-pro-max/data/.

Phát hành tự động

Kho lưu trữ này sử dụng bản phát hành ngữ nghĩa với các Cam kết thông thường để tự động tạo các bản phát hành GitHub:

• dev nhánh tạo các bản phát hành trước beta GitHub, chẳng hạn như 2.6.0-beta.1.
• main nhánh tạo các bản phát hành GitHub ổn định chính thức như 2.6.0.

Ghi chú phát hành và CHANGELOG.md được tạo ra từ các thông báo Cam kết thông thường. Số phiên bản được đồng bộ hóa trên skill.json, .claude-plugin/plugin.json, .claude-plugin/marketplace.json, cli/package.jsonvà cli/package-lock.json trong quá trình chuẩn bị phát hành.

Sử dụng các loại cam kết này cho các phiên bản chính xác:

• fix: -> phát hành bản vá
• feat: -> phát hành nhỏ
• feat!: hoặc BREAKING CHANGE: -> phát hành chính

Quy trình phát hành sử dụng mặc định GITHUB_TOKEN dành cho bản phát hành GitHub và kho lưu trữ NPM_TOKEN bí mật để xuất bản ui-ux-pro-max-cli đến npm.

Khắc phục sự cố

uipro: unknown command 'uninstall' hoặc unknown command 'update'

Phiên bản đã cài đặt của bạn ui-ux-pro-max-cli đã lỗi thời. Cập nhật nó và thử lại:

npm install -g ui-ux-pro-max-cli@latest
uipro uninstall

uipro uninstall cho biết "Không phát hiện thấy thư mục kỹ năng AI đã cài đặt"

Kỹ năng này đã được cài đặt trong một thư mục khác với nơi bạn đang chạy lệnh. Hoặc:

# Option A — run from the project root where you originally installed it
cd /path/to/your/project
uipro uninstall

# Option B — remove the global install
uipro uninstall --global

# Option C — remove manually
rm -rf .claude/skills/ui-ux-pro-max   # Claude Code
rm -rf .cursor/skills/ui-ux-pro-max   # Cursor
rm -rf .windsurf/skills/ui-ux-pro-max # Windsurf
rm -rf .agents/skills/ui-ux-pro-max   # Antigravity / Codex

ClaudeHộp thoại "Tải lên kỹ năng" của .ai cho biết "Zip chứa quá nhiều tệp (tối đa 200)"

Không tải lên kho lưu trữ ZIP GitHub đầy đủ. Đây là quá trình kiểm tra phát triển bao gồm mã nguồn, nội dung CLI, tài liệu, bản xem trước và nhiều kỹ năng đi kèm, do đó nó vượt quá giới hạn tải lên 200 tệp của Claude. Đây không phải là cấu phần phần mềm tải lên kỹ năng Claude và dự án này hiện không xuất bản một ZIP tải lên thủ công riêng biệt cho Claude.ai.

Đối với Claude Code, cài đặt qua Marketplace:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Hoặc sử dụng trình cài đặt CLI:

npx ui-ux-pro-max-cli init --ai claude

Claude Cài đặt Marketplace không thành công với "Tệp Zip chứa liên kết tượng trưng"

Đây là sự cố đã biết với các phiên bản trước v2.5.1. Kho lưu trữ đã sử dụng các liên kết tượng trưng bên trong mà một số công cụ cài đặt không thể xử lý được. Sửa: thay vào đó hãy sử dụng trình cài đặt CLI:

npm install -g ui-ux-pro-max-cli
uipro init --ai claude

Hoặc đợi bản phát hành tiếp theo để giải quyết vấn đề này.

npm install -g ui-ux-pro-max-cli không thành công với lỗi cấp phép

Sử dụng trình quản lý phiên bản Node (được khuyến nghị) hoặc bỏ qua hoàn toàn cài đặt chung:

# npx without installing globally
npx ui-ux-pro-max-cli init --ai claude

Không tìm thấy Python khi chạy lệnh hệ thống thiết kế

Tập lệnh tìm kiếm yêu cầu Python 3.x. Cài đặt thủ công từ Python.org hoặc với trình quản lý gói hệ điều hành của bạn (Homebrew, apt, winget). Nhân viên AI không nên cài đặt nó cho bạn - thay vào đó họ được hướng dẫn hỏi bạn.

Đầu ra của hệ thống thiết kế bị cắt/các trường bị cắt bớt

Đầu ra mà con người có thể đọc được sẽ cắt ngắn các trường dài ở 300 ký tự. sử dụng --json để có được dữ liệu đầy đủ, không bị cắt bớt:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --json

---

Lịch sử ngôi sao

Giấy phép

Dự án này được cấp phép theo Giấy phép MIT.

Đại lý tương thích

Kỹ năng này hoạt động với:

• Claude Code
• AdaL - Tác nhân mã hóa AI tự phát triển (Tài liệu | GitHub)