diff --git a/README.md b/README.md index d36907d..0fb51cb 100755 --- a/README.md +++ b/README.md @@ -1,3 +1,9 @@ + +> [!NOTE] +> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。 +> [English](./README.en.md) · [原始项目](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) · [上游 README](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/HEAD/README.md) +> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。 + # [UI UX Pro Max](https://uupm.cc)

@@ -7,8 +13,8 @@

GitHub Release - 161 Reasoning Rules - 67 UI Styles + 161 条推理规则 + 67 种 UI 风格 Python 3.x License

@@ -17,10 +23,10 @@ npm npm downloads GitHub stars - PayPal + PayPal

-An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks. +一个为跨多平台和框架构建专业 UI/UX 提供设计智能的 AI 技能。

@@ -29,273 +35,273 @@ An AI skill that provides design intelligence for building professional UI/UX ac

- If you find this useful, consider supporting the project:

- PayPal Donate + 如果这个项目对你有帮助，请考虑支持：

+ PayPal 捐赠

- Other projects
+ 其他项目
NextLevelBuilder.io | GoClaw.sh | ClaudeKit.cc | TOSE.sh

-## What's New in v2.0 +## v2.0 新特性 -### Intelligent Design System Generation +### 智能设计系统生成 -The flagship feature of v2.0 is the **Design System Generator** - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds. +v2.0 的旗舰特性是**设计系统生成器**——一个 AI 驱动的推理引擎，可在数秒内分析你的项目需求并生成完整、定制化的设计系统。 ``` +----------------------------------------------------------------------------------------+ -| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM | +| 目标：Serenity Spa - 推荐设计系统 | +----------------------------------------------------------------------------------------+ | | -| 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 | +| 模式：以 Hero 为中心 + 社交证明 | +| 转化：情感驱动，带信任元素 | +| CTA：首屏展示，客户评价后重复 | +| 版块： | +| 1. 主视觉区 (Hero) | +| 2. 服务 | +| 3. 客户评价 | +| 4. 预约 | +| 5. 联系我们 | | | -| STYLE: Soft UI Evolution | -| Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes | -| Best For: Wellness, beauty, lifestyle brands, premium services | -| Performance: Excellent | Accessibility: WCAG AA | +| 风格：柔和 UI 进化版 (Soft UI Evolution) | +| 关键词：柔和阴影、微妙深度、 calming、高级质感、有机形状 | +| 适用：健康、美容、生活方式品牌、高端服务 | +| 性能：优秀 | 无障碍：WCAG AA | | | -| 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 | +| 配色： | +| 主色： #E8B4B8 (柔和粉) | +| 辅色： #A8D5BA (鼠尾草绿) | +| CTA： #D4AF37 (金色) | +| 背景： #FFF5F5 (暖白) | +| 文字： #2D3436 (炭灰) | +| 备注： calming 配色，金色点缀增添奢华感 | | | -| TYPOGRAPHY: Cormorant Garamond / Montserrat | -| Mood: Elegant, calming, sophisticated | -| Best For: Luxury brands, wellness, beauty, editorial | -| Google Fonts: https://fonts.google.com/share?selection.family=... | +| 字体：Cormorant Garamond / Montserrat | +| 调性：优雅、 calming、精致 | +| 适用：奢侈品牌、健康、美容、编辑类 | +| Google Fonts: https://fonts.google.com/share?selection.family=... | | | -| KEY EFFECTS: | -| Soft shadows + Smooth transitions (200-300ms) + Gentle hover states | +| 关键效果： | +| 柔和阴影 + 平滑过渡 (200-300ms) + 细腻悬停状态 | | | -| AVOID (Anti-patterns): | -| Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients | +| 避免 (反模式)： | +| 亮霓虹色 + 生硬动画 + 深色模式 + AI 紫/粉渐变 (银行业) | | | -| PRE-DELIVERY CHECKLIST: | -| [ ] No emojis as icons (use SVG: Heroicons/Lucide) | -| [ ] cursor-pointer on all clickable elements | -| [ ] Hover states with smooth transitions (150-300ms) | -| [ ] Light mode: text contrast 4.5:1 minimum | -| [ ] Focus states visible for keyboard nav | -| [ ] prefers-reduced-motion respected | -| [ ] Responsive: 375px, 768px, 1024px, 1440px | +| 交付前检查清单： | +| [ ] 不使用表情符号作为图标 (使用 SVG: Heroicons/Lucide) | +| [ ] 所有可点击元素有 cursor-pointer | +| [ ] 悬停状态带平滑过渡 (150-300ms) | +| [ ] 浅色模式：文字对比度至少 4.5:1 | +| [ ] Focus 状态对键盘导航可见 | +| [ ] 尊重 prefers-reduced-motion 偏好 | +| [ ] 响应式：375px、768px、1024px、1440px | | | +----------------------------------------------------------------------------------------+ ``` -### How Design System Generation Works +### 设计系统生成的工作原理 ``` ┌─────────────────────────────────────────────────────────────────┐ -│ 1. USER REQUEST │ -│ "Build a landing page for my beauty spa" │ +│ 1. 用户请求 │ +│ "为我的美容院搭建落地页" │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ -│ 2. MULTI-DOMAIN SEARCH (5 parallel searches) │ -│ • Product type matching (161 categories) │ -│ • Style recommendations (67 styles) │ -│ • Color palette selection (161 palettes) │ -│ • Landing page patterns (24 patterns) │ -│ • Typography pairing (57 font combinations) │ +│ 2. 多域搜索 (5 个并行搜索) │ +│ • 产品类型匹配 (161 个分类) │ +│ • 风格推荐 (67 种风格) │ +│ • 配色方案选择 (161 套配色) │ +│ • 落地页模式 (24 种模式) │ +│ • 字体配对 (57 种组合) │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ -│ 3. REASONING ENGINE │ -│ • Match product → UI category rules │ -│ • Apply style priorities (BM25 ranking) │ -│ • Filter anti-patterns for industry │ -│ • Process decision rules (JSON conditions) │ +│ 3. 推理引擎 │ +│ • 匹配产品 → UI 分类规则 │ +│ • 应用风格优先级 (BM25 排序) │ +│ • 过滤行业反模式 │ +│ • 处理决策规则 (JSON 条件) │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ -│ 4. COMPLETE DESIGN SYSTEM OUTPUT │ -│ Pattern + Style + Colors + Typography + Effects │ -│ + Anti-patterns to avoid + Pre-delivery checklist │ +│ 4. 完整设计系统输出 │ +│ 模式 + 风格 + 配色 + 字体 + 效果 │ +│ + 避免的反模式 + 交付前检查清单 │ └─────────────────────────────────────────────────────────────────┘ ``` -### 161 Industry-Specific Reasoning Rules +### 161 条行业特定推理规则 -The reasoning engine includes specialized rules for: +推理引擎包含针对以下领域的专门规则： -| Category | Examples | -|----------|----------| -| **Tech & SaaS** | SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity Platform | -| **Finance** | Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing Tool | -| **Healthcare** | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder | -| **E-commerce** | General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery | -| **Services** | Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment | -| **Creative** | Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor | -| **Lifestyle** | Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker | -| **Emerging Tech** | Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet | +| 分类 | 示例 | +|------|------| +| **科技与 SaaS** | SaaS、微 SaaS、B2B 服务、开发者工具 / IDE、AI/聊天机器人平台、网络安全平台 | +| **金融** | 金融科技/加密货币、银行、保险、个人财务追踪、发票与账单工具 | +| **医疗健康** | 医疗诊所、药房、牙科、兽医、心理健康、用药提醒 | +| **电子商务** | 综合电商、奢侈品、二手交易平台 (P2P)、订阅盒、外卖配送 | +| **服务** | 美容/水疗、餐饮、酒店、法律、家政服务、预约与预订 | +| **创意** | 作品集、代理公司、摄影、游戏、音乐流媒体、照片/视频编辑器 | +| **生活方式** | 习惯追踪、食谱与烹饪、冥想、天气、日记、情绪追踪 | +| **新兴技术** | Web3/NFT、空间计算、量子计算、自动驾驶无人机编队 | -Each rule includes: -- **Recommended Pattern** - Landing page structure -- **Style Priority** - Best matching UI styles -- **Color Mood** - Industry-appropriate palettes -- **Typography Mood** - Font personality matching -- **Key Effects** - Animations and interactions -- **Anti-Patterns** - What NOT to do (e.g., "AI purple/pink gradients" for banking) +每条规则包括： +- **推荐模式** - 落地页结构 +- **风格优先级** - 最匹配的 UI 风格 +- **配色氛围** - 适合行业的调色板 +- **字体氛围** - 匹配品牌个性的字体 +- **关键效果** - 动画与交互 +- **反模式** - 不要做哪些（例如银行业的"AI 紫/粉渐变"） -## Features +## 功能特性 -- **67 UI Styles** - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more -- **161 Color Palettes** - Industry-specific palettes aligned 1:1 with the 161 product types -- **57 Font Pairings** - Curated typography combinations with Google Fonts imports -- **25 Chart Types** - Recommendations for dashboards and analytics -- **22 Tech Stacks** - 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 -- **99 UX Guidelines** - Best practices, anti-patterns, and accessibility rules -- **161 Reasoning Rules** - Industry-specific design system generation (NEW in v2.0) +- **67 种 UI 风格** - 玻璃拟态、粘土拟态、极简主义、粗野主义、新拟态、便当盒网格、深色模式、AI 原生 UI 等 +- **161 套配色方案** - 与 161 种产品类型 1:1 对齐的行业专属调色板 +- **57 种字体配对** - 精选字体组合，含 Google Fonts 导入 +- **25 种图表类型** - 适用于仪表板和分析场景的推荐 +- **22 种技术栈** - 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 +- **99 条 UX 指南** - 最佳实践、反模式与无障碍规则 +- **161 条推理规则** - 行业特定的设计系统生成（v2.0 新增） -### Available Styles (67) +### 可用风格 (67)
-General Styles (49) +通用风格 (49) -| # | Style | Best For | -|---|-------|----------| -| 1 | Minimalism & Swiss Style | Enterprise apps, dashboards, documentation | -| 2 | Neumorphism | Health/wellness apps, meditation platforms | -| 3 | Glassmorphism | Modern SaaS, financial dashboards | -| 4 | Brutalism | Design portfolios, artistic projects | -| 5 | 3D & Hyperrealism | Gaming, product showcase, immersive | -| 6 | Vibrant & Block-based | Startups, creative agencies, gaming | -| 7 | Dark Mode (OLED) | Night-mode apps, coding platforms | -| 8 | Accessible & Ethical | Government, healthcare, education | -| 9 | Claymorphism | Educational apps, children's apps, SaaS | -| 10 | Aurora UI | Modern SaaS, creative agencies | -| 11 | Retro-Futurism | Gaming, entertainment, music platforms | -| 12 | Flat Design | Web apps, mobile apps, startup MVPs | -| 13 | Skeuomorphism | Legacy apps, gaming, premium products | -| 14 | Liquid Glass | Premium SaaS, high-end e-commerce | -| 15 | Motion-Driven | Portfolio sites, storytelling platforms | -| 16 | Micro-interactions | Mobile apps, touchscreen UIs | -| 17 | Inclusive Design | Public services, education, healthcare | -| 18 | Zero Interface | Voice assistants, AI platforms | -| 19 | Soft UI Evolution | Modern enterprise apps, SaaS | -| 20 | Neubrutalism | Gen Z brands, startups, Figma-style | -| 21 | Bento Box Grid | Dashboards, product pages, portfolios | -| 22 | Y2K Aesthetic | Fashion brands, music, Gen Z | -| 23 | Cyberpunk UI | Gaming, tech products, crypto apps | -| 24 | Organic Biophilic | Wellness apps, sustainability brands | -| 25 | AI-Native UI | AI products, chatbots, copilots | -| 26 | Memphis Design | Creative agencies, music, youth brands | -| 27 | Vaporwave | Music platforms, gaming, portfolios | -| 28 | Dimensional Layering | Dashboards, card layouts, modals | -| 29 | Exaggerated Minimalism | Fashion, architecture, portfolios | -| 30 | Kinetic Typography | Hero sections, marketing sites | -| 31 | Parallax Storytelling | Brand storytelling, product launches | -| 32 | Swiss Modernism 2.0 | Corporate sites, architecture, editorial | -| 33 | HUD / Sci-Fi FUI | Sci-fi games, space tech, cybersecurity | -| 34 | Pixel Art | Indie games, retro tools, creative | -| 35 | Bento Grids | Product features, dashboards, personal | -| 36 | Spatial UI (VisionOS) | Spatial computing apps, VR/AR | -| 37 | E-Ink / Paper | Reading apps, digital newspapers | -| 38 | Gen Z Chaos / Maximalism | Gen Z lifestyle, music artists | -| 39 | Biomimetic / Organic 2.0 | Sustainability tech, biotech, health | -| 40 | Anti-Polish / Raw Aesthetic | Creative portfolios, artist sites | -| 41 | Tactile Digital / Deformable UI | Modern mobile apps, playful brands | -| 42 | Nature Distilled | Wellness brands, sustainable products | -| 43 | Interactive Cursor Design | Creative portfolios, interactive | -| 44 | Voice-First Multimodal | Voice assistants, accessibility apps | -| 45 | 3D Product Preview | E-commerce, furniture, fashion | -| 46 | Gradient Mesh / Aurora Evolved | Hero sections, backgrounds, creative | -| 47 | Editorial Grid / Magazine | News sites, blogs, magazines | -| 48 | Chromatic Aberration / RGB Split | Music platforms, gaming, tech | -| 49 | Vintage Analog / Retro Film | Photography, music/vinyl brands | +| # | 风格 | 最适用于 | +|---|------|---------| +| 1 | 极简主义 & 瑞士风格 | 企业应用、仪表板、文档 | +| 2 | 新拟态 (Neumorphism) | 健康/养生应用、冥想平台 | +| 3 | 玻璃拟态 (Glassmorphism) | 现代 SaaS、金融仪表板 | +| 4 | 粗野主义 (Brutalism) | 设计作品集、艺术项目 | +| 5 | 3D & 超写实主义 | 游戏、产品展示、沉浸式体验 | +| 6 | 活力 & 块状 | 创业公司、创意机构、游戏 | +| 7 | 深色模式 (OLED) | 夜间模式应用、编程平台 | +| 8 | 无障碍 & 伦理设计 | 政府、医疗、教育 | +| 9 | 粘土拟态 (Claymorphism) | 教育应用、儿童应用、SaaS | +| 10 | 极光 UI (Aurora UI) | 现代 SaaS、创意机构 | +| 11 | 复古未来主义 | 游戏、娱乐、音乐平台 | +| 12 | 扁平设计 | Web 应用、移动应用、初创 MVP | +| 13 | 拟物化 | 传统应用、游戏、高端产品 | +| 14 | 液态玻璃 | 高端 SaaS、高端电商 | +| 15 | 动效驱动 | 作品集网站、叙事平台 | +| 16 | 微交互 | 移动应用、触摸屏 UI | +| 17 | 包容性设计 | 公共服务、教育、医疗 | +| 18 | 零界面 | 语音助手、AI 平台 | +| 19 | 柔和 UI 进化版 | 现代企业应用、SaaS | +| 20 | 新粗野主义 | Z 世代品牌、创业公司、Figma 风格 | +| 21 | 便当盒网格 | 仪表板、产品页面、作品集 | +| 22 | Y2K 美学 | 时尚品牌、音乐、Z 世代 | +| 23 | 赛博朋克 UI | 游戏、科技产品、加密货币应用 | +| 24 | 有机亲生物 | 健康应用、可持续品牌 | +| 25 | AI 原生 UI | AI 产品、聊天机器人、Copilot | +| 26 | 孟菲斯设计 | 创意机构、音乐、年轻品牌 | +| 27 | 蒸汽波 | 音乐平台、游戏、作品集 | +| 28 | 维度分层 | 仪表板、卡片布局、模态框 | +| 29 | 夸张极简主义 | 时尚、建筑、作品集 | +| 30 | 动态字体 | 主视觉区、营销网站 | +| 31 | 视差叙事 | 品牌故事、产品发布 | +| 32 | 瑞士现代主义 2.0 | 企业网站、建筑、编辑类 | +| 33 | HUD / 科幻 FUI | 科幻游戏、太空科技、网络安全 | +| 34 | 像素艺术 | 独立游戏、复古工具、创意 | +| 35 | 便当网格 | 产品特性、仪表板、个人 | +| 36 | 空间 UI (VisionOS) | 空间计算应用、VR/AR | +| 37 | 电子墨水 / 纸张 | 阅读应用、数字报纸 | +| 38 | Z 世代混沌 / 极繁主义 | Z 世代生活方式、音乐艺术家 | +| 39 | 仿生 / 有机 2.0 | 可持续科技、生物科技、健康 | +| 40 | 反精致 / 原始美学 | 创意作品集、艺术家网站 | +| 41 | 触感数字 / 可变形 UI | 现代移动应用、趣味品牌 | +| 42 | 自然提炼 | 健康品牌、可持续产品 | +| 43 | 交互式光标设计 | 创意作品集、交互式 | +| 44 | 语音优先多模态 | 语音助手、无障碍应用 | +| 45 | 3D 产品预览 | 电商、家具、时尚 | +| 46 | 渐变网格 / 极光进化 | 主视觉区、背景、创意 | +| 47 | 编辑网格 / 杂志 | 新闻网站、博客、杂志 | +| 48 | 色差 / RGB 分离 | 音乐平台、游戏、科技 | +| 49 | 复古模拟 / 胶片 | 摄影、音乐/黑胶品牌 |
-Landing Page Styles (8) +落地页风格 (8) -| # | Style | Best For | -|---|-------|----------| -| 1 | Hero-Centric Design | Products with strong visual identity | -| 2 | Conversion-Optimized | Lead generation, sales pages | -| 3 | Feature-Rich Showcase | SaaS, complex products | -| 4 | Minimal & Direct | Simple products, apps | -| 5 | Social Proof-Focused | Services, B2C products | -| 6 | Interactive Product Demo | Software, tools | -| 7 | Trust & Authority | B2B, enterprise, consulting | -| 8 | Storytelling-Driven | Brands, agencies, nonprofits | +| # | 风格 | 最适用于 | +|---|------|---------| +| 1 | 主视觉中心设计 | 具有强烈视觉识别度的产品 | +| 2 | 转化优化型 | 潜在客户生成、销售页面 | +| 3 | 功能丰富展示 | SaaS、复杂产品 | +| 4 | 极简直接型 | 简单产品、应用 | +| 5 | 社交证明聚焦 | 服务、B2C 产品 | +| 6 | 交互产品演示 | 软件、工具 | +| 7 | 信任与权威型 | B2B、企业、咨询 | +| 8 | 叙事驱动型 | 品牌、代理公司、非营利 |
-BI/Analytics Dashboard Styles (10) +BI/分析仪表板风格 (10) -| # | Style | Best For | -|---|-------|----------| -| 1 | Data-Dense Dashboard | Complex data analysis | -| 2 | Heat Map & Heatmap Style | Geographic/behavior data | -| 3 | Executive Dashboard | C-suite summaries | -| 4 | Real-Time Monitoring | Operations, DevOps | -| 5 | Drill-Down Analytics | Detailed exploration | -| 6 | Comparative Analysis Dashboard | Side-by-side comparisons | -| 7 | Predictive Analytics | Forecasting, ML insights | -| 8 | User Behavior Analytics | UX research, product analytics | -| 9 | Financial Dashboard | Finance, accounting | -| 10 | Sales Intelligence Dashboard | Sales teams, CRM | +| # | 风格 | 最适用于 | +|---|------|---------| +| 1 | 密集数据仪表板 | 复杂数据分析 | +| 2 | 热力图风格 | 地理/行为数据 | +| 3 | 高管仪表板 | 高管摘要 | +| 4 | 实时监控 | 运维、DevOps | +| 5 | 钻取分析 | 详细探索 | +| 6 | 对比分析仪表板 | 并排对比 | +| 7 | 预测分析 | 预测、ML 洞察 | +| 8 | 用户行为分析 | UX 研究、产品分析 | +| 9 | 财务仪表板 | 财务、会计 | +| 10 | 销售智能仪表板 | 销售团队、CRM |
-## 💎 Basic vs. Premium Version Comparison +## 💎 基础版与高级版对比 -Many users ask about the differences between the open-source and premium versions. Here is a detailed breakdown to help you choose the right fit for your workflow. +许多用户询问开源版与高级版之间的差异。以下是详细的对比，帮助你选择适合自己工作流的版本。 -### 🟢 Basic Version (This Repository) -* **Fully Open Source:** Perfect for individual developers, hobbyists, and standard projects. -* **Core UI/UX Intelligence:** Full access to 67 UI styles, 161 product types, color palettes, and curated font pairings. -* **Smart Recommendations:** Built-in BM25 search engine for highly accurate design matching. -* **Cross-Platform Support:** Stack-specific guidelines supporting 13+ major frameworks (React, Vue, Tailwind, iOS, Android, etc.). -* **Design System Generation:** Instantly generate tailored UI rules, patterns, and logic via CLI. +### 🟢 基础版（本仓库） +* **完全开源：** 适合个人开发者、爱好者及标准项目。 +* **核心 UI/UX 智能：** 完整支持 67 种 UI 风格、161 种产品类型、配色方案和精选字体配对。 +* **智能推荐：** 内置 BM25 搜索引擎，提供高精度的设计匹配。 +* **跨平台支持：** 提供针对 13+ 主流框架（React、Vue、Tailwind、iOS、Android 等）的技术栈专属指南。 +* **设计系统生成：** 通过 CLI 即时生成定制化的 UI 规则、模式与逻辑。 -### 🟡 Premium Version -* **Extended Brand Design Skills:** Goes beyond UI/UX to include Brand Identity generation, Logo Design, Corporate Identity Programs (CIP), Banners, Presentation Slides, and custom Iconography. -* **Advanced Asset Creation:** Deep integration with AI-powered image generation to create real visual assets, not just placeholders. -* **Enterprise Architecture:** A more comprehensive and scalable Design Token architecture, built for large-scale team deployments. -* **Priority Support:** Dedicated technical assistance for teams and professionals who need an uninterrupted full design workflow. +### 🟡 高级版 +* **扩展的品牌设计能力：** 超越 UI/UX 范畴，涵盖品牌标识生成、Logo 设计、企业识别系统 (CIP)、横幅、演示文稿幻灯片及自定义图标设计。 +* **高级资产生成：** 深度集成 AI 图像生成能力，创建真实视觉素材而非占位符。 +* **企业级架构：** 更全面、可扩展的设计令牌 (Design Token) 架构，面向大规模团队部署。 +* **优先支持：** 为需要不间断完整设计工作流的团队和专业人士提供专属技术支持。 -👉 *For more details on upgrading to the Premium tier, visit [uupm.cc](https://uupm.cc).* +👉 *如需了解升级到高级版的更多详情，请访问 [uupm.cc](https://uupm.cc)。* -## Installation +## 安装 -### Using Claude Marketplace (Claude Code) +### 使用 Claude Marketplace (Claude Code) -Install directly in Claude Code with two commands: +通过两条命令直接在 Claude Code 中安装： ``` /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill ``` -### Using CLI (Recommended) +### 使用 CLI (推荐) ```bash -# Install CLI globally +# 全局安装 CLI npm install -g ui-ux-pro-max-cli -# Go to your project +# 进入你的项目 cd /path/to/your/project -# Install for your AI assistant +# 为你的 AI 助手安装 uipro init --ai claude # Claude Code uipro init --ai cursor # Cursor uipro init --ai windsurf # Windsurf @@ -314,125 +320,124 @@ uipro init --ai droid # Droid (Factory) uipro init --ai kilocode # KiloCode uipro init --ai warp # Warp uipro init --ai augment # Augment -uipro init --ai all # All assistants +uipro init --ai all # 所有助手 ``` -The npm package is `ui-ux-pro-max-cli`; it still installs the `uipro` command. Older `uipro-cli` releases are stale and should not be used for current assets. +npm 包名为 `ui-ux-pro-max-cli`；它仍然安装 `uipro` 命令。旧版 `uipro-cli` 已过时，不应用于当前资源。 -### Global Install (Available for All Projects) +### 全局安装（适用于所有项目） ```bash -uipro init --ai claude --global # Install to ~/.claude/skills/ -uipro init --ai cursor --global # Install to ~/.cursor/skills/ +uipro init --ai claude --global # 安装到 ~/.claude/skills/ +uipro init --ai cursor --global # 安装到 ~/.cursor/skills/ ``` -### Other CLI Commands +### 其他 CLI 命令 ```bash -uipro versions # List available versions -uipro update # Refresh 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 +uipro versions # 列出可用版本 +uipro update # 从已安装的 CLI 包刷新技能文件 +uipro init --offline # 兼容性标志；安装捆绑模板 +uipro uninstall # 移除技能（自动检测平台） +uipro uninstall --ai claude # 移除特定平台 +uipro uninstall --global # 移除全局安装 ``` -## Prerequisites +## 前置要求 -Python 3.x is required for the search script (standard library only — the scripts install nothing and make no network calls). - -Check if Python is installed: +搜索脚本需要 Python 3.x（仅使用标准库 — 脚本不安装任何东西，也不进行网络请求）。 ```bash +# 检查是否已安装 Python python3 --version ``` -If it is missing, install it yourself from [python.org](https://www.python.org/downloads/) or with your OS package manager (Homebrew, apt, winget). These install steps are for **you, the human user** — AI agents using this skill should never install software on your machine; they are instructed to ask you instead. +如果未安装，请**你自己**从 [python.org](https://www.python.org/downloads/) 或通过系统包管理器（Homebrew、apt、winget）安装。这些安装步骤面向人类用户 — 使用此技能的 AI 代理不应在你的机器上安装软件，而应请你自行安装。 -## Usage +## 使用方式 -### Skill Mode (Auto-activate) +### 技能模式 (自动激活) -**Supported:** Claude Code, Cursor, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment +**支持：** Claude Code、Cursor、Windsurf、Antigravity、Codex CLI、Continue、Gemini CLI、OpenCode、Qoder、CodeBuddy、Droid (Factory)、KiloCode、Warp、Augment -The skill activates automatically when you request UI/UX work. Just chat naturally: +当你请求 UI/UX 工作时，技能会自动激活。只需自然地聊天： ``` -Build a landing page for my SaaS product +为我的 SaaS 产品搭建一个落地页 ``` -> **Trae**: Switch to **SOLO** mode first. The skill will activate for UI/UX requests. +> **Trae**：先切换到 **SOLO** 模式。技能会在 UI/UX 请求时激活。 -### Workflow Mode (Slash Command) +### 工作流模式 (斜杠命令) -**Supported:** Kiro, GitHub Copilot, Roo Code, KiloCode +**支持：** Kiro、GitHub Copilot、Roo Code、KiloCode -Use the slash command to invoke the skill: +使用斜杠命令调用技能： ``` -/ui-ux-pro-max Build a landing page for my SaaS product +/ui-ux-pro-max 为我的 SaaS 产品搭建一个落地页 ``` -### Example Prompts +### 示例提示词 ``` -Build a landing page for my SaaS product +为我的 SaaS 产品搭建一个落地页 -Create a dashboard for healthcare analytics +创建一个医疗健康分析仪表板 -Design a portfolio website with dark mode +设计一个带深色模式的作品集网站 -Make a mobile app UI for e-commerce +为电商制作一个移动应用 UI -Build a fintech banking app with dark theme +搭建一个带深色主题的金融科技银行应用 ``` -### How It Works +### 工作原理 -1. **You ask** - Request any UI/UX task (build, design, create, implement, review, fix, improve) -2. **Design System Generated** - The AI automatically generates a complete design system using the reasoning engine -3. **Smart recommendations** - Based on your product type and requirements, it finds the best matching styles, colors, and typography -4. **Code generation** - Implements the UI with proper colors, fonts, spacing, and best practices -5. **Pre-delivery checks** - Validates against common UI/UX anti-patterns +1. **你提出请求** - 请求任何 UI/UX 任务（构建、设计、创建、实现、审查、修复、改进） +2. **生成设计系统** - AI 使用推理引擎自动生成完整的设计系统 +3. **智能推荐** - 根据你的产品类型和需求，找到最佳匹配的风格、配色和字体 +4. **代码生成** - 使用正确的颜色、字体、间距和最佳实践实现 UI +5. **交付前检查** - 针对常见 UI/UX 反模式进行验证 -### Supported Stacks +### 支持的技术栈 -The skill provides stack-specific guidelines for: +该技能为以下技术栈提供特定指南： -| Category | Stacks | -|----------|--------| -| **Web (HTML)** | HTML + Tailwind (default) | -| **React Ecosystem** | React, Next.js, shadcn/ui | -| **Vue Ecosystem** | Vue, Nuxt.js, Nuxt UI | +| 分类 | 技术栈 | +|------|--------| +| **Web (HTML)** | HTML + Tailwind (默认) | +| **React 生态** | React、Next.js、shadcn/ui | +| **Vue 生态** | Vue、Nuxt.js、Nuxt UI | | **Angular** | Angular | -| **PHP** | Laravel (Blade, Livewire, Inertia.js) | -| **Other Web** | Svelte, Astro, Three.js | -| **Desktop** | JavaFX | +| **PHP** | Laravel (Blade、Livewire、Inertia.js) | +| **其他 Web** | Svelte、Astro、Three.js | +| **桌面端** | JavaFX | | **iOS** | SwiftUI | | **Android** | Jetpack Compose | -| **Cross-Platform** | React Native, Flutter | +| **跨平台** | React Native、Flutter | -Just mention your preferred stack in the prompt, or let it default to HTML + Tailwind. +只需在提示词中提到你偏好的技术栈，或让它默认使用 HTML + Tailwind。 -## Design System Command (Advanced) +## 设计系统命令 (高级) -For direct access to the design system generator: +如需直接访问设计系统生成器： -> Note: If you installed via Continue, replace `.claude/skills/` with `.continue/skills/` in the commands below. For Droid (Factory), use `.factory/skills/`. +> 注意：如果你通过 Continue 安装，将下面命令中的 `.claude/skills/` 替换为 `.continue/skills/`。对于 Droid (Factory)，使用 `.factory/skills/`。 ```bash -# Generate design system with ASCII output +# 生成带 ASCII 输出的设计系统 python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa" -# Generate with Markdown output +# 生成带 Markdown 输出 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 -# 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 "tableview binding" --stack javafx @@ -440,192 +445,186 @@ python3 .claude/skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterpr python3 .claude/skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx ``` -### Persist Design System (Master + Overrides Pattern) +### 持久化设计系统 (主配置 + 覆盖模式) -Save your design system to files for **hierarchical retrieval across sessions**: +将设计系统保存到文件，实现**跨会话的层级检索**： ```bash -# Generate and persist to design-system/MASTER.md +# 生成并持久化到 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" ``` -This creates a `design-system/` folder structure: +这会创建 `design-system/` 文件夹结构： ``` design-system/ -├── MASTER.md # Global Source of Truth (colors, typography, spacing, components) +├── MASTER.md # 全局唯一真相源 (颜色、字体、间距、组件) └── pages/ - └── dashboard.md # Page-specific overrides (only deviations from Master) + └── dashboard.md # 页面特定覆盖 (仅与主配置的偏差) ``` -**How hierarchical retrieval works:** -1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md` -2. If the page file exists, its rules **override** the Master file -3. If not, use `design-system/MASTER.md` exclusively +**层级检索工作原理：** +1. 构建特定页面 (如"结账页") 时，先检查 `design-system/pages/checkout.md` +2. 如果页面文件存在，其规则**覆盖**主配置文件 +3. 如果不存在，仅使用 `design-system/MASTER.md` -**Context-aware retrieval prompt:** +**上下文感知检索提示词：** ``` -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... +我正在构建 [页面名称] 页面。请阅读 design-system/MASTER.md。 +同时检查 design-system/pages/[page-name].md 是否存在。 +如果页面文件存在，优先使用其规则。 +如果不存在，仅使用主配置规则。 +现在，生成代码... ``` -## Architecture & Contributing +## 架构与贡献 -### For Users +### 对于用户 -The codebase has been restructured to use a **template-based generation system**. All platform-specific files (`.cursor/`, `.windsurf/`, `.kiro/`, `.factory/`, etc.) are now generated dynamically by the CLI. +代码库已重构为使用**基于模板的生成系统**。所有平台特定文件 (`.cursor/`、`.windsurf/`、`.kiro/`、`.factory/` 等) 现在由 CLI 动态生成。 -**Always use the CLI to install:** +**始终使用 CLI 安装：** ```bash npm install -g ui-ux-pro-max-cli uipro init --ai ``` -This ensures you get the latest templates bundled with the installed CLI package and the correct file structure for your AI assistant. Update the npm package first when a new release is published. +这确保你获得随已安装 CLI 包捆绑的最新模板，以及适用于 AI 助手的正确文件结构。发布新版本时请先更新 npm 包。 -### For Contributors +### 对于贡献者 -If you want to contribute to this project: +如果你想为这个项目做贡献： ```bash -# 1. Clone the repository +# 1. 克隆仓库 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 +# 2. 理解结构 +src/ui-ux-pro-max/ # 唯一真相源 (数据、脚本、模板) +cli/ # CLI 安装器 (从模板生成文件) +.claude/ # Claude Code 技能的本地开发/测试 +.factory/ # Droid (Factory) 技能的本地开发/测试 -# 3. Make changes in src/ui-ux-pro-max/ -# - data/*.csv → Database files -# - scripts/*.py → Search engine & design system -# - templates/ → Platform-specific templates +# 3. 在 src/ui-ux-pro-max/ 中修改 +# - data/*.csv → 数据库文件 +# - scripts/*.py → 搜索引擎与设计系统 +# - templates/ → 平台特定模板 -# 4. Sync to CLI and test locally +# 4. 同步到 CLI 并本地测试 cd cli npm run sync:assets npm run check:assets -npm run validate:csv -npm run smoke:domains -npm run smoke:stacks -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 +# 5. 构建并测试 CLI +bun run build +node dist/index.js init --ai claude --offline # 在临时文件夹中测试 -# 6. Create PR (never push directly to main) +# 6. 创建 PR (永远不要直接推送到 main) git checkout -b feat/your-feature git commit -m "feat: description" git push -u origin feat/your-feature gh pr create ``` -See [CLAUDE.md](CLAUDE.md) for detailed development guidelines. +详细的开发指南请参见 [CLAUDE.md](CLAUDE.md)。 +## 自动化发布 -## Automated Releases +本仓库使用 semantic-release 配合约定式提交 (Conventional Commits) 自动创建 GitHub 发布： -This repository uses semantic-release with Conventional Commits to create GitHub releases automatically: +- `dev` 分支创建 beta GitHub 预发布，如 `2.6.0-beta.1`。 +- `main` 分支创建官方稳定版 GitHub 发布，如 `2.6.0`。 -- `dev` branch creates beta GitHub prereleases such as `2.6.0-beta.1`. -- `main` branch creates official stable GitHub releases such as `2.6.0`. +发布说明和 `CHANGELOG.md` 根据约定式提交信息生成。在发布准备期间，版本号会在 `skill.json`、`.claude-plugin/plugin.json`、`.claude-plugin/marketplace.json`、`cli/package.json` 和 `cli/package-lock.json` 之间同步。 -Release notes and `CHANGELOG.md` are generated from Conventional Commit messages. Version numbers are synchronized across `skill.json`, `.claude-plugin/plugin.json`, `.claude-plugin/marketplace.json`, `cli/package.json`, and `cli/package-lock.json` during release preparation. +使用以下提交类型以获得正确的版本号升级： -Use these commit types for correct version bumps: +- `fix:` -> 补丁版本发布 +- `feat:` -> 次版本发布 +- `feat!:` 或 `BREAKING CHANGE:` -> 主版本发布 -- `fix:` -> patch release -- `feat:` -> minor release -- `feat!:` or `BREAKING CHANGE:` -> major release +发布工作流使用默认的 `GITHUB_TOKEN` 创建 GitHub 发布，并使用仓库的 `NPM_TOKEN` 密钥将 `ui-ux-pro-max-cli` 发布到 npm。 -The release workflow uses the default `GITHUB_TOKEN` for GitHub releases and the repository `NPM_TOKEN` secret to publish `ui-ux-pro-max-cli` to npm. +## 故障排查 -## Troubleshooting +### `uipro: unknown command 'uninstall'` 或 `unknown command 'update'` -### `uipro: unknown command 'uninstall'` or `unknown command 'update'` - -Your installed version of `ui-ux-pro-max-cli` is outdated. Update it and retry: +你安装的 `ui-ux-pro-max-cli` 版本已过时。请更新后重试： ```bash npm install -g ui-ux-pro-max-cli@latest uipro uninstall ``` -### `uipro uninstall` says "No installed AI skill directories detected" +### `uipro uninstall` 提示 "No installed AI skill directories detected" -The skill was installed in a different directory than where you're running the command. Either: +技能安装在与运行命令不同的目录中。可以： ```bash -# Option A — run from the project root where you originally installed it +# 方案 A — 切换到最初安装它的项目根目录 cd /path/to/your/project uipro uninstall -# Option B — remove the global install +# 方案 B — 移除全局安装 uipro uninstall --global -# Option C — remove manually +# 方案 C — 手动移除 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 ``` -### Claude Marketplace install fails with "Zip file contains a symbolic link" +### Claude Marketplace 安装失败，提示 "Zip file contains a symbolic link" -This is a known issue with versions prior to v2.5.1. The repository used symlinks internally which some installation tools can't handle. **Fix:** use the CLI installer instead: +这是 v2.5.1 之前版本的已知问题。仓库内部使用了符号链接，某些安装工具无法处理。**解决办法：** 改用 CLI 安装器： ```bash npm install -g ui-ux-pro-max-cli uipro init --ai claude ``` -Or wait for the next release where this is resolved. +或等待下一个已修复此问题的版本发布。 -### `npm install -g ui-ux-pro-max-cli` fails with permission error +### `npm install -g ui-ux-pro-max-cli` 失败，提示权限错误 -Use a Node version manager (recommended), or skip the global install entirely: +使用 Node 版本管理器（推荐），或直接跳过全局安装： ```bash -# npx without installing globally +# 使用 npx 而不全局安装 npx ui-ux-pro-max-cli init --ai claude ``` -### Python not found when running design system commands +### 运行设计系统命令时找不到 Python -The search scripts require Python 3.x. Install it manually from [python.org](https://www.python.org/downloads/) or with your OS package manager (Homebrew, apt, winget). AI agents should not install it for you — they are instructed to ask you instead. +搜索脚本需要 Python 3.x。请从 [python.org](https://www.python.org/downloads/) 或通过系统包管理器（Homebrew、apt、winget）自行安装。AI 代理不应替你安装 — 它们被要求先征求你的意见。 -### Design system output is cut off / fields truncated +### 设计系统输出被截断 / 字段不完整 -Use the `--max-length` flag to increase (or remove) the truncation limit: +使用 `--max-length` 标志增加（或取消）截断限制： ```bash python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --max-length 0 -# ^ 0 = unlimited +# ^ 0 = 不限制 ``` --- -## Star History +## Star 历史 [![Star History Chart](https://api.star-history.com/svg?repos=nextlevelbuilder/ui-ux-pro-max-skill&type=Date)](https://star-history.com/#nextlevelbuilder/ui-ux-pro-max-skill&Date) -## License +## 许可证 -This project is licensed under the [MIT License](LICENSE). +本项目采用 [MIT 许可证](LICENSE) 授权。 -## Compatible Agents +## 兼容的智能体 -This skill works with: +本技能可与以下工具配合使用： - [Claude Code](https://claude.com/product/claude-code) -- [AdaL](https://sylph.ai/) - Self-evolving AI coding agent ([Docs](https://docs.sylph.ai/) | [GitHub](https://github.com/SylphAI-Inc/adal-cli)) +- [AdaL](https://sylph.ai/) - 自进化的 AI 编码智能体（[文档](https://docs.sylph.ai/) | [GitHub](https://github.com/SylphAI-Inc/adal-cli)）