UI/UX Pro Max
Tạo thiết kế UI chuyên nghiệp, sẵn sàng cho sản phẩm chỉ trong vài giây với sức mạnh của ClaudeKit.
UI/UX Pro Max Là Gì?
Một kỹ năng AI chuyên biệt đóng vai trò là đối tác thiết kế chuyên nghiệp của bạn. Nó giúp bạn tạo ra các giao diện người dùng nhất quán, dễ tiếp cận và đẹp mắt mà không cần phải là một nhà thiết kế.
Bên Trong Có Gì
Cho Mọi Người
Không cần biết code!
Hoàn hảo nếu bạn đang xây dựng trang đích, hồ sơ năng lực, hoặc muốn thiết kế đẹp mà không cần kiến thức kỹ thuật.
- ✓ Chủ Doanh Nghiệp
- ✓ Người Sáng Tạo Nội Dung
- ✓ Doanh Nhân
Cho Lập Trình Viên
Tăng tốc quy trình!
Nhận hệ thống thiết kế, bảng màu sẵn sàng cho code, và các thực hành tốt nhất cho từng stack ngay lập tức.
- ✓ Frontend Devs
- ✓ Fullstack Devs
- ✓ Indie Hackers
Cho Nhà Thiết Kế
Cảm hứng nhanh chóng!
Khám phá các hệ thống thiết kế được tuyển chọn, tìm hiểu các xu hướng mới, và duy trì sự nhất quán.
- ✓ UI Designers
- ✓ UX Designers
- ✓ Product Designers
Cách Hoạt Động (3 Bước Đơn Giản)
Từ con số không đến thiết kế chuyên nghiệp trong vài phút — không cần kỹ năng thiết kế!
Nói Cho AI Biết Bạn Muốn Gì
Chỉ cần mô tả dự án của bạn bằng ngôn ngữ tự nhiên! Không cần thuật ngữ kỹ thuật.
Bạn nói: "Tôi cần một trang đích cho doanh nghiệp spa cao cấp của mình"
AI Tìm Kiếm Trong Cơ Sở Dữ Liệu Thiết Kế
Ở hậu trường, AI tìm kiếm trong 8 tên miền thiết kế để xây dựng hệ thống thiết kế hoàn hảo cho bạn
Nhận Code Đẹp, Sẵn Sàng Cho Sản Phẩm
AI tạo ra HTML/CSS hoàn chỉnh với tất cả các lựa chọn thiết kế được thực hiện hoàn hảo.
- Bảng màu chuyên nghiệp được áp dụng
- Font chữ đẹp với liên kết Google Fonts
- Thiết kế đáp ứng (hoạt động trên mọi thiết bị)
- Hoạt ảnh và tương tác mượt mà
- Tuân thủ khả năng truy cập (WCAG AA)
Kết Quả: Thiết Kế Chuyên Nghiệp Trong Vài Phút!
Những gì trước đây mất hàng giờ nghiên cứu và thiết kế giờ được hoàn thành trong vài giây. Chỉ cần sao chép code và bạn đã sẵn sàng ra mắt!
Thời Gian Tiết Kiệm:
Các Domain Tìm Kiếm AI
8 cơ sở dữ liệu chuyên biệt AI tìm kiếm để xây dựng hệ thống thiết kế hoàn hảo
product Product type recommendations
style UI styles, colors, effects
typography Font pairings, Google Fonts
color Color palettes by industry
landing Page structure, CTA strategies
chart Chart types, visualization
ux Best practices, anti-patterns
stack Framework-specific guidelines
Các Stack Guidelines Có Sẵn
html-tailwind default Utilities, responsive, a11y
react Hooks, state, patterns
nextjs SSR, routing, images
vue Composition API, Pinia
svelte Runes, stores, SvelteKit
swiftui Views, State, Navigation
react-native Components, Navigation
flutter Widgets, State, Layout
AI tự động tra cứu qua lệnh:
python3 search.py "glassmorphism" --domain style --stack react
Bạn Có Thể Xây Dựng Gì
Landing Pages
Tạo các trang đích tuyệt đẹp cho bất kỳ doanh nghiệp nào
Dashboards
Xây dựng bảng điều khiển giàu dữ liệu với các biểu đồ hoàn hảo
Portfolios
Trưng bày công việc của bạn với các portfolio đẹp mắt
Mobile Apps
Thiết kế ứng dụng di động cho mọi nền tảng
58 Phong Cách UI Để Lựa Chọn
Từ tối giản đến glassmorphism — tìm phong cách hoàn hảo cho dự án của bạn
Mẹo Cho Người Mới Bắt Đầu
Chỉ cần nói "Tôi muốn một trang web spa". Không cần thuật ngữ kỹ thuật.
Đề cập xem bạn muốn nó "yên bình", "năng động", "chuyên nghiệp", hay "vui vẻ".
Bắt đầu với một trang. Thích nó? Yêu cầu AI tạo thêm theo cùng phong cách.
"Làm cho nó nhiều màu sắc hơn!" - AI cập nhật thiết kế trong vài giây.
Cách Sử Dụng Với ClaudeKit
Kích hoạt bằng slash command đơn giản — không cần cú pháp phức tạp!
Slash Command:
/ui-ux-pro-max <yêu cầu của bạn> Vậy thôi! AI sẽ tự động tìm kiếm cơ sở dữ liệu thiết kế và tạo code đẹp cho bạn.
Hướng Dẫn Từng Bước:
Gõ slash command:
/ui-ux-pro-max Mô tả những gì bạn muốn:
Nói chuyện tự nhiên về dự án, ngành nghề, sở thích phong cách, màu sắc, tâm trạng, v.v.
Nhấn Enter & Xem Phép Màu!
AI tìm kiếm cơ sở dữ liệu thiết kế, tạo hệ thống thiết kế của bạn, và giao code sẵn sàng cho sản phẩm.
Prompt ClaudeKit Thực Tế (Sao Chép & Thử!):
/ui-ux-pro-max tạo một trang landing page đẹp cho phòng tập yoga của tôi. Tôi muốn màu sắc êm dịu, yên bình và phông chữ thanh lịch. /ui-ux-pro-max xây dựng một bảng điều khiển phân tích SaaS với phong cách glassmorphism và chế độ tối. Bao gồm các biểu đồ dữ liệu. /ui-ux-pro-max thiết kế một trang sản phẩm e-commerce sang trọng cho đồng hồ cao cấp. Typography thanh lịch, bao gồm showcase với tính năng zoom. /ui-ux-pro-max thiết kế một portfolio tối giản cho nhiếp ảnh gia. Tập trung vào showcase hình ảnh, typography sạch sẽ, và chuyển động mượt mà. /ui-ux-pro-max tạo dashboard portal bệnh nhân cho phòng khám. Màu sắc y tế nhẹ nhàng, thiết kế accessible, và data visualization rõ ràng. /ui-ux-pro-max xây dựng dashboard giao dịch crypto với biểu đồ real-time, dark mode, và phong cách fintech chuyên nghiệp. Bao gồm candlestick charts. 💡 Mẹo Pro Để Có Kết Quả Tốt Hơn:
- • Đề cập đến ngành nghề của bạn (y tế, làm đẹp, fintech) để có đề xuất màu sắc/phong cách tốt hơn
- • Cụ thể về phong cách (sang trọng, vui tươi, tối giản, hiện đại) để khớp thiết kế chính xác
- • Yêu cầu các framework cụ thể nếu cần ("Using Tailwind", "Using React")
Workflows Nâng Cao
Kết hợp /ui-ux-pro-max với các skill ClaudeKit khác để tạo workflows mạnh mẽ
Thiết Kế Lại UI
Nhận đề xuất thiết kế trước khi triển khai
/ui-ux-pro-max phân tích UI hiện tại và đề xuất cải tiến Xem xét đề xuất, sau đó /cook để triển khai Tạo Logo
Tạo logo thương hiệu với AI sinh hình ảnh
/ui-ux-pro-max tạo 4 logo hiện đại cho app fitness của tôi. Lưu dạng PNG vào ./assets. Phong cách healthy/fitness, không có chữ, theo hướng dẫn thương hiệu. Sao Chép UI Website
Tái tạo UI từ các website có sẵn
/frontend-design sao chép phần hero từ [URL] với màu sắc và phong cách thương hiệu Mẹo: Chỉ định tùy chỉnh thương hiệu trực tiếp trong prompt /frontend-design — nó đã kích hoạt ui-ux-pro-max bên trong.
(Tùy chọn) /ui-ux-pro-max tinh chỉnh spacing, responsive, hoặc accessibility Thiết Kế App Mobile
Thiết kế cho React Native, Flutter, hoặc SwiftUI
/ui-ux-pro-max thiết kế app theo dõi fitness cho React Native. Sử dụng phong cách health/fitness hiện đại với hỗ trợ dark mode. Những Gì AI Kiểm Tra Trước Khi Giao
Mọi thiết kế đều được xác thực tự động cho chất lượng và khả năng truy cập
Chất Lượng Hình Ảnh
- ✓Không dùng biểu tượng emoji (sử dụng icon SVG chuyên nghiệp)
- ✓Kích thước và kiểu dáng icon nhất quán
- ✓Logo đúng thương hiệu từ các nguồn chính thức
- ✓Hiệu ứng hover không gây thay đổi bố cục
Tương Tác
- ✓Các phần tử bấm được có con trỏ cursor-pointer
- ✓Phản hồi hình ảnh rõ ràng khi hover/click
- ✓Chuyển đổi mượt mà (150-300ms)
- ✓Điều hướng bằng bàn phím hoạt động hoàn hảo
Khả Năng Truy Cập
- ✓Độ tương phản văn bản đạt chuẩn WCAG AA (4.5:1)
- ✓Tất cả hình ảnh đều có văn bản thay thế mô tả
- ✓Đầu vào biểu mẫu có nhãn thích hợp
- ✓Tôn trọng tùy chọn giảm chuyển động
Đáp Ứng
- ✓Hoạt động trên di động (320px+)
- ✓Tối ưu hóa cho máy tính bảng (768px+)
- ✓Hoàn hảo trên máy tính để bàn (1024px+)
- ✓Không cuộn ngang trên bất kỳ thiết bị nào