mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-07-21 21:47:45 +00:00
docs: add Chinese README with bilingual support (#173)
Add README.zh.md with complete Chinese translation Add language switcher links in both README files Support for 简体中文 / English bilingual access Features: - Full translation of all UI/UX style names and terminology - Consistent industry-standard Chinese terms (玻璃拟态、粗野主义等) - Language switcher with flag icons at the top of both files
This commit is contained in:
fivv
GitHub
parent
3327f9dcb3
commit
782d4e79c5
@ -1,5 +1,10 @@
|
||||
# [UI UX Pro Max](https://uupm.cc)
|
||||
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.zh.md">🇨🇳 简体中文</a> |
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.md">🇺🇸 English</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases"><img src="https://img.shields.io/github/v/release/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=blue" alt="GitHub Release"></a>
|
||||
<img src="https://img.shields.io/badge/reasoning_rules-161-green?style=for-the-badge" alt="161 Reasoning Rules">
|
||||
|
||||
502
README.zh.md
Normal file
502
README.zh.md
Normal file
@ -0,0 +1,502 @@
|
||||
# [UI UX Pro Max](https://uupm.cc)
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.zh.md">🇨🇳 简体中文</a> |
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.md">🇺🇸 English</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases"><img src="https://img.shields.io/github/v/release/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=blue" alt="GitHub Release"></a>
|
||||
<img src="https://img.shields.io/badge/reasoning_rules-100-green?style=for-the-badge" alt="100 条推理规则">
|
||||
<img src="https://img.shields.io/badge/UI_styles-67-purple?style=for-the-badge" alt="67 种 UI 风格">
|
||||
<img src="https://img.shields.io/badge/python-3.x-yellow?style=for-the-badge&logo=python&logoColor=white" alt="Python 3.x">
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/LICENSE"><img src="https://img.shields.io/github/license/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=green" alt="License"></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/package/uipro-cli"><img src="https://img.shields.io/npm/v/uipro-cli?style=flat-square&logo=npm&label=CLI" alt="npm"></a>
|
||||
<a href="https://www.npmjs.com/package/uipro-cli"><img src="https://img.shields.io/npm/dm/uipro-cli?style=flat-square&label=downloads" alt="npm downloads"></a>
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/stargazers"><img src="https://img.shields.io/github/stars/nextlevelbuilder/ui-ux-pro-max-skill?style=flat-square&logo=github" alt="GitHub stars"></a>
|
||||
<a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-支持开发-00457C?style=flat-square&logo=paypal&logoColor=white" alt="PayPal"></a>
|
||||
</p>
|
||||
|
||||
一个为跨多平台和框架构建专业 UI/UX 提供设计智能的 AI 技能。
|
||||
|
||||
<p align="center">
|
||||
<a href="https://uupm.cc">
|
||||
<img src="screenshots/website.png" alt="UI UX Pro Max" width="800">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<b>如果这个项目对你有帮助，请考虑支持：</b><br><br>
|
||||
<a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-捐赠-00457C?style=for-the-badge&logo=paypal&logoColor=white" alt="PayPal 捐赠"></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<i>其他项目</i><br>
|
||||
<a href="https://nextlevelbuilder.io">NextLevelBuilder.io</a> | <a href="https://goclaw.sh">GoClaw.sh</a> | <a href="https://claudekit.cc">ClaudeKit.cc</a> | <a href="https://tose.sh">TOSE.sh</a>
|
||||
</p>
|
||||
|
||||
## v2.0 新特性
|
||||
|
||||
### 智能设计系统生成
|
||||
|
||||
v2.0 的旗舰特性是**设计系统生成器**——一个 AI 驱动的推理引擎，可在数秒内分析您的项目需求并生成完整、定制化的设计系统。
|
||||
|
||||
```
|
||||
+----------------------------------------------------------------------------------------+
|
||||
| 目标：Serenity Spa - 推荐设计系统 |
|
||||
+----------------------------------------------------------------------------------------+
|
||||
| |
|
||||
| 模式：以 Hero 为中心 + 社交证明 |
|
||||
| 转化：情感驱动，带信任元素 |
|
||||
| CTA：首屏展示，客户评价后重复 |
|
||||
| 版块： |
|
||||
| 1. 主视觉区 (Hero) |
|
||||
| 2. 服务 |
|
||||
| 3. 客户评价 |
|
||||
| 4. 预约 |
|
||||
| 5. 联系我们 |
|
||||
| |
|
||||
| 风格：柔和 UI 进化版 (Soft UI Evolution) |
|
||||
| 关键词：柔和阴影、微妙深度、 calming、高级质感、有机形状 |
|
||||
| 适用：健康、美容、生活方式品牌、高端服务 |
|
||||
| 性能：优秀 | 无障碍：WCAG AA |
|
||||
| |
|
||||
| 配色： |
|
||||
| 主色： #E8B4B8 (柔和粉) |
|
||||
| 辅色： #A8D5BA (鼠尾草绿) |
|
||||
| CTA： #D4AF37 (金色) |
|
||||
| 背景： #FFF5F5 (暖白) |
|
||||
| 文字： #2D3436 (炭灰) |
|
||||
| 备注： calming 配色，金色点缀增添奢华感 |
|
||||
| |
|
||||
| 字体：Cormorant Garamond / Montserrat |
|
||||
| 调性：优雅、 calming、精致 |
|
||||
| 适用：奢侈品牌、健康、美容、编辑类 |
|
||||
| Google Fonts: https://fonts.google.com/share?selection.family=... |
|
||||
| |
|
||||
| 关键效果： |
|
||||
| 柔和阴影 + 平滑过渡 (200-300ms) + 细腻悬停状态 |
|
||||
| |
|
||||
| 避免 (反模式)： |
|
||||
| 亮霓虹色 + 生硬动画 + 深色模式 + AI 紫/粉渐变 (银行业) |
|
||||
| |
|
||||
| 交付前检查清单： |
|
||||
| [ ] 不使用表情符号作为图标 (使用 SVG: Heroicons/Lucide) |
|
||||
| [ ] 所有可点击元素有 cursor-pointer |
|
||||
| [ ] 悬停状态带平滑过渡 (150-300ms) |
|
||||
| [ ] 浅色模式：文字对比度至少 4.5:1 |
|
||||
| [ ] Focus 状态对键盘导航可见 |
|
||||
| [ ] 尊重 prefers-reduced-motion 偏好 |
|
||||
| [ ] 响应式：375px、768px、1024px、1440px |
|
||||
| |
|
||||
+----------------------------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
### 设计系统生成的工作原理
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 1. 用户请求 │
|
||||
│ "为我的美容院搭建落地页" │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 2. 多域搜索 (5 个并行搜索) │
|
||||
│ • 产品类型匹配 (100 个分类) │
|
||||
│ • 风格推荐 (67 种风格) │
|
||||
│ • 配色方案选择 (96 套配色) │
|
||||
│ • 落地页模式 (24 种模式) │
|
||||
│ • 字体配对 (57 种组合) │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 3. 推理引擎 │
|
||||
│ • 匹配产品 → UI 分类规则 │
|
||||
│ • 应用风格优先级 (BM25 排序) │
|
||||
│ • 过滤行业反模式 │
|
||||
│ • 处理决策规则 (JSON 条件) │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 4. 完整设计系统输出 │
|
||||
│ 模式 + 风格 + 配色 + 字体 + 效果 │
|
||||
│ + 避免的反模式 + 交付前检查清单 │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 100 条行业特定推理规则
|
||||
|
||||
推理引擎包含针对以下领域的专门规则：
|
||||
|
||||
| 分类 | 示例 |
|
||||
|------|------|
|
||||
| **科技与 SaaS** | SaaS、微 SaaS、B2B 企业级、开发者工具、AI/聊天机器人平台 |
|
||||
| **金融** | 金融科技、银行、加密货币、保险、交易仪表板 |
|
||||
| **医疗健康** | 医疗诊所、药房、牙科、兽医、心理健康 |
|
||||
| **电子商务** | 综合电商、奢侈品、 marketplace、订阅盒 |
|
||||
| **服务** | 美容/水疗、餐饮、酒店、法律、咨询 |
|
||||
| **创意** | 作品集、代理公司、摄影、游戏、音乐流媒体 |
|
||||
| **新兴技术** | Web3/NFT、空间计算、量子计算、自动驾驶系统 |
|
||||
|
||||
每条规则包括：
|
||||
- **推荐模式** - 落地页结构
|
||||
- **风格优先级** - 最匹配的 UI 风格
|
||||
- **配色氛围** - 适合行业的调色板
|
||||
- **字体氛围** - 匹配品牌个性的字体
|
||||
- **关键效果** - 动画与交互
|
||||
- **反模式** - 不要做哪些（例如银行业的"AI 紫/粉渐变"）
|
||||
|
||||
## 功能特性
|
||||
|
||||
- **67 种 UI 风格** - 玻璃拟态、粘土拟态、极简主义、粗野主义、新拟态、便当盒网格、深色模式、AI 原生 UI 等
|
||||
- **96 套配色方案** - 针对 SaaS、电商、医疗健康、金融科技、美容等行业的专属调色板
|
||||
- **57 种字体配对** - 精选字体组合，含 Google Fonts 导入
|
||||
- **25 种图表类型** - 适用于仪表板和分析场景的推荐
|
||||
- **13 种技术栈** - React、Next.js、Astro、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui、Jetpack Compose
|
||||
- **99 条 UX 指南** - 最佳实践、反模式与无障碍规则
|
||||
- **100 条推理规则** - 行业特定的设计系统生成（v2.0 新增）
|
||||
|
||||
### 可用风格 (67)
|
||||
|
||||
<details>
|
||||
<summary><b>通用风格 (49)</b></summary>
|
||||
|
||||
| # | 风格 | 最适用于 |
|
||||
|---|------|---------|
|
||||
| 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 | 复古模拟 / 胶片 | 摄影、音乐/黑胶品牌 |
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>落地页风格 (8)</b></summary>
|
||||
|
||||
| # | 风格 | 最适用于 |
|
||||
|---|------|---------|
|
||||
| 1 | 主视觉中心设计 | 具有强烈视觉识别度的产品 |
|
||||
| 2 | 转化优化型 | 潜在客户生成、销售页面 |
|
||||
| 3 | 功能丰富展示 | SaaS、复杂产品 |
|
||||
| 4 | 极简直接型 | 简单产品、应用 |
|
||||
| 5 | 社交证明聚焦 | 服务、B2C 产品 |
|
||||
| 6 | 交互产品演示 | 软件、工具 |
|
||||
| 7 | 信任与权威型 | B2B、企业、咨询 |
|
||||
| 8 | 叙事驱动型 | 品牌、代理公司、非营利 |
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>BI/分析仪表板风格 (10)</b></summary>
|
||||
|
||||
| # | 风格 | 最适用于 |
|
||||
|---|------|---------|
|
||||
| 1 | 密集数据仪表板 | 复杂数据分析 |
|
||||
| 2 | 热力图风格 | 地理/行为数据 |
|
||||
| 3 | 高管仪表板 | 高管摘要 |
|
||||
| 4 | 实时监控 | 运维、DevOps |
|
||||
| 5 | 钻取分析 | 详细探索 |
|
||||
| 6 | 对比分析仪表板 | 并排对比 |
|
||||
| 7 | 预测分析 | 预测、ML 洞察 |
|
||||
| 8 | 用户行为分析 | UX 研究、产品分析 |
|
||||
| 9 | 财务仪表板 | 财务、会计 |
|
||||
| 10 | 销售智能仪表板 | 销售团队、CRM |
|
||||
|
||||
</details>
|
||||
|
||||
## 安装
|
||||
|
||||
### 使用 Claude Marketplace (Claude Code)
|
||||
|
||||
通过两条命令直接在 Claude Code 中安装：
|
||||
|
||||
```
|
||||
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
|
||||
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
|
||||
```
|
||||
|
||||
### 使用 CLI (推荐)
|
||||
|
||||
```bash
|
||||
# 全局安装 CLI
|
||||
npm install -g uipro-cli
|
||||
|
||||
# 进入你的项目
|
||||
cd /path/to/your/project
|
||||
|
||||
# 为你的 AI 助手安装
|
||||
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 all # 所有助手
|
||||
```
|
||||
|
||||
### 其他 CLI 命令
|
||||
|
||||
```bash
|
||||
uipro versions # 列出可用版本
|
||||
uipro update # 更新到最新版本
|
||||
uipro init --offline # 跳过 GitHub 下载，使用捆绑资源
|
||||
```
|
||||
|
||||
## 前置要求
|
||||
|
||||
搜索脚本需要 Python 3.x。
|
||||
|
||||
```bash
|
||||
# 检查是否已安装 Python
|
||||
python3 --version
|
||||
|
||||
# macOS
|
||||
brew install python3
|
||||
|
||||
# Ubuntu/Debian
|
||||
sudo apt update && sudo apt install python3
|
||||
|
||||
# Windows
|
||||
winget install Python.Python.3.12
|
||||
```
|
||||
|
||||
## 使用方式
|
||||
|
||||
### 技能模式 (自动激活)
|
||||
|
||||
**支持：** Claude Code、Cursor、Windsurf、Antigravity、Codex CLI、Continue、Gemini CLI、OpenCode、Qoder、CodeBuddy、Droid (Factory)
|
||||
|
||||
当你请求 UI/UX 工作时，技能会自动激活。只需自然地聊天：
|
||||
|
||||
```
|
||||
为我的 SaaS 产品搭建一个落地页
|
||||
```
|
||||
|
||||
> **Trae**：先切换到 **SOLO** 模式。技能会在 UI/UX 请求时激活。
|
||||
|
||||
### 工作流模式 (斜杠命令)
|
||||
|
||||
**支持：** Kiro、GitHub Copilot、Roo Code
|
||||
|
||||
使用斜杠命令调用技能：
|
||||
|
||||
```
|
||||
/ui-ux-pro-max 为我的 SaaS 产品搭建一个落地页
|
||||
```
|
||||
|
||||
### 示例提示词
|
||||
|
||||
```
|
||||
为我的 SaaS 产品搭建一个落地页
|
||||
|
||||
创建一个医疗健康分析仪表板
|
||||
|
||||
设计一个带深色模式的作品集网站
|
||||
|
||||
为电商制作一个移动应用 UI
|
||||
|
||||
搭建一个带深色主题的金融科技银行应用
|
||||
```
|
||||
|
||||
### 工作原理
|
||||
|
||||
1. **你提出请求** - 请求任何 UI/UX 任务（构建、设计、创建、实现、审查、修复、改进）
|
||||
2. **生成设计系统** - AI 使用推理引擎自动生成完整的设计系统
|
||||
3. **智能推荐** - 根据你的产品类型和需求，找到最佳匹配的风格、配色和字体
|
||||
4. **代码生成** - 使用正确的颜色、字体、间距和最佳实践实现 UI
|
||||
5. **交付前检查** - 针对常见 UI/UX 反模式进行验证
|
||||
|
||||
### 支持的技术栈
|
||||
|
||||
该技能为以下技术栈提供特定指南：
|
||||
|
||||
| 分类 | 技术栈 |
|
||||
|------|--------|
|
||||
| **Web (HTML)** | HTML + Tailwind (默认) |
|
||||
| **React 生态** | React、Next.js、shadcn/ui |
|
||||
| **Vue 生态** | Vue、Nuxt.js、Nuxt UI |
|
||||
| **其他 Web** | Svelte、Astro |
|
||||
| **iOS** | SwiftUI |
|
||||
| **Android** | Jetpack Compose |
|
||||
| **跨平台** | React Native、Flutter |
|
||||
|
||||
只需在提示词中提到你偏好的技术栈，或让它默认使用 HTML + Tailwind。
|
||||
|
||||
## 设计系统命令 (高级)
|
||||
|
||||
如需直接访问设计系统生成器：
|
||||
|
||||
> 注意：如果你通过 Continue 安装，将下面命令中的 `.claude/skills/` 替换为 `.continue/skills/`。对于 Droid (Factory)，使用 `.factory/skills/`。
|
||||
|
||||
```bash
|
||||
# 生成带 ASCII 输出的设计系统
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"
|
||||
|
||||
# 生成带 Markdown 输出
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
|
||||
|
||||
# 特定领域搜索
|
||||
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 "form validation" --stack react
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
|
||||
```
|
||||
|
||||
### 持久化设计系统 (主配置 + 覆盖模式)
|
||||
|
||||
将设计系统保存到文件，实现**跨会话的层级检索**：
|
||||
|
||||
```bash
|
||||
# 生成并持久化到 design-system/MASTER.md
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
|
||||
|
||||
# 同时创建页面特定的覆盖文件
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
|
||||
```
|
||||
|
||||
这会创建 `design-system/` 文件夹结构：
|
||||
|
||||
```
|
||||
design-system/
|
||||
├── MASTER.md # 全局唯一真相源 (颜色、字体、间距、组件)
|
||||
└── pages/
|
||||
└── dashboard.md # 页面特定覆盖 (仅与主配置的偏差)
|
||||
```
|
||||
|
||||
**层级检索工作原理：**
|
||||
1. 构建特定页面 (如"结账页") 时，先检查 `design-system/pages/checkout.md`
|
||||
2. 如果页面文件存在，其规则**覆盖**主配置文件
|
||||
3. 如果不存在，仅使用 `design-system/MASTER.md`
|
||||
|
||||
**上下文感知检索提示词：**
|
||||
```
|
||||
我正在构建 [页面名称] 页面。请阅读 design-system/MASTER.md。
|
||||
同时检查 design-system/pages/[page-name].md 是否存在。
|
||||
如果页面文件存在，优先使用其规则。
|
||||
如果不存在，仅使用主配置规则。
|
||||
现在，生成代码...
|
||||
```
|
||||
|
||||
## 架构与贡献
|
||||
|
||||
### 对于用户
|
||||
|
||||
代码库已重构为使用**基于模板的生成系统**。所有平台特定文件 (`.cursor/`、`.windsurf/`、`.kiro/`、`.factory/` 等) 现在由 CLI 动态生成。
|
||||
|
||||
**始终使用 CLI 安装：**
|
||||
|
||||
```bash
|
||||
npm install -g uipro-cli
|
||||
uipro init --ai <platform>
|
||||
```
|
||||
|
||||
这确保你获得最新模板和适用于 AI 助手的正确文件结构。
|
||||
|
||||
### 对于贡献者
|
||||
|
||||
如果你想为这个项目做贡献：
|
||||
|
||||
```bash
|
||||
# 1. 克隆仓库
|
||||
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
|
||||
cd ui-ux-pro-max-skill
|
||||
|
||||
# 2. 理解结构
|
||||
src/ui-ux-pro-max/ # 唯一真相源 (数据、脚本、模板)
|
||||
cli/ # CLI 安装器 (从模板生成文件)
|
||||
.claude/ # Claude Code 技能的本地开发/测试
|
||||
.factory/ # Droid (Factory) 技能的本地开发/测试
|
||||
|
||||
# 3. 在 src/ui-ux-pro-max/ 中修改
|
||||
# - data/*.csv → 数据库文件
|
||||
# - scripts/*.py → 搜索引擎与设计系统
|
||||
# - templates/ → 平台特定模板
|
||||
|
||||
# 4. 同步到 CLI 并本地测试
|
||||
cp -r src/ui-ux-pro-max/data/* cli/assets/data/
|
||||
cp -r src/ui-ux-pro-max/scripts/* cli/assets/scripts/
|
||||
cp -r src/ui-ux-pro-max/templates/* cli/assets/templates/
|
||||
|
||||
# 5. 构建并测试 CLI
|
||||
cd cli && bun run build
|
||||
node dist/index.js init --ai claude --offline # 在临时文件夹中测试
|
||||
|
||||
# 6. 创建 PR (永远不要直接推送到 main)
|
||||
git checkout -b feat/your-feature
|
||||
git commit -m "feat: description"
|
||||
git push -u origin feat/your-feature
|
||||
gh pr create
|
||||
```
|
||||
|
||||
详细的开发指南请参见 [CLAUDE.md](CLAUDE.md)。
|
||||
|
||||
## Star 历史
|
||||
|
||||
[](https://star-history.com/#nextlevelbuilder/ui-ux-pro-max-skill&Date)
|
||||
|
||||
## 许可证
|
||||
|
||||
本项目采用 [MIT 许可证](LICENSE) 授权。
|
||||
Loading…
x
Reference in New Issue
Block a user