From 792bfc8a097b7dd2a73b969dead3c7b9842e5d88 Mon Sep 17 00:00:00 2001 From: daoyou-zhang <1013966037@qq.com> Date: Wed, 14 Jan 2026 20:24:55 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=85=AC=E5=8F=B8=E5=86=85?= =?UTF-8?q?=E9=83=A8=E5=AE=89=E8=A3=85=E6=8C=87=E5=8D=97=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 公司内部安装指南.md | 336 ++++++++++++++++++++++++++++++++++++ 1 file changed, 336 insertions(+) create mode 100644 公司内部安装指南.md diff --git a/公司内部安装指南.md b/公司内部安装指南.md new file mode 100644 index 0000000..89ba184 --- /dev/null +++ b/公司内部安装指南.md @@ -0,0 +1,336 @@ +# UI/UX Pro Max - 公司内部安装指南 + +## 📖 项目简介 + +UI/UX Pro Max 是一个 AI 设计智能工具包，为 AI 编程助手（Kiro、Claude、Cursor 等）提供专业的 UI/UX 设计知识库。 + +### 核心功能 +- 🎨 **57 种 UI 风格** - 玻璃态、极简主义、野兽派、新拟态等 +- 🎯 **95 个配色方案** - 针对不同行业的专业配色 +- ✍️ **56 个字体配对** - 精选排版组合 +- 📊 **24 种图表类型** - 数据可视化推荐 +- ✨ **98 条 UX 指南** - 最佳实践和反模式 +- 🛠️ **11 个技术栈** - React、Vue、Next.js、Flutter 等 + +--- + +## 🚀 快速开始 + +### 前置要求 + +**必须安装 Python 3.x** + +```bash +# 检查 Python 版本 +python --version +# 或 +python3 --version +``` + +如果未安装，请根据操作系统安装： + +**Windows:** +```powershell +winget install Python.Python.3.12 +``` + +**macOS:** +```bash +brew install python3 +``` + +**Ubuntu/Debian:** +```bash +sudo apt update && sudo apt install python3 +``` + +--- + +## 📦 安装方法 + +### 方法 1：从公司 Gitea 克隆（推荐） + +```bash +# 1. 克隆仓库 +git clone http://42.51.49.106:3000/zhiming/ui-ux-pro-max-skill.git + +# 2. 进入项目目录 +cd ui-ux-pro-max-skill +``` + +### 方法 2：使用 CLI 工具（公网） + +```bash +# 全局安装 CLI +npm install -g uipro-cli + +# 在你的项目中安装 +uipro init --ai kiro +``` + +--- + +## 🔧 为不同 AI 助手安装 + +### 为 Kiro 安装 + +**自动安装（使用 CLI）：** +```bash +cd your-project +uipro init --ai kiro +``` + +**手动安装：** +```bash +# 1. 进入你的项目目录 +cd your-project + +# 2. 创建必要的目录 +mkdir -p .kiro/steering +mkdir -p .shared + +# 3. 从克隆的仓库复制文件 +# Windows PowerShell: +Copy-Item "D:\path\to\ui-ux-pro-max-skill\.kiro\steering\ui-ux-pro-max.md" -Destination ".kiro\steering\" -Force +Copy-Item "D:\path\to\ui-ux-pro-max-skill\.shared\ui-ux-pro-max" -Destination ".shared\" -Recurse -Force + +# macOS/Linux: +cp ui-ux-pro-max-skill/.kiro/steering/ui-ux-pro-max.md .kiro/steering/ +cp -r ui-ux-pro-max-skill/.shared/ui-ux-pro-max .shared/ +``` + +### 为其他 AI 助手安装 + +**Claude Code:** +```bash +uipro init --ai claude +# 或手动复制 .claude/skills/ui-ux-pro-max/ 到你的项目 +``` + +**Cursor:** +```bash +uipro init --ai cursor +# 或手动复制 .cursor/commands/ui-ux-pro-max.md + .shared/ui-ux-pro-max/ +``` + +**Windsurf:** +```bash +uipro init --ai windsurf +# 或手动复制 .windsurf/workflows/ui-ux-pro-max.md + .shared/ui-ux-pro-max/ +``` + +**所有助手一次性安装:** +```bash +uipro init --ai all +``` + +--- + +## 💡 使用方法 + +### 在 Kiro 中使用 + +安装完成后，在 Kiro 聊天中： + +**方式 1：使用命令** +``` +/ui-ux-pro-max 为我的 SaaS 产品构建一个落地页 +``` + +**方式 2：直接描述需求** +``` +设计一个医疗分析仪表板，使用玻璃态风格 +创建一个电商网站首页，要求现代简约 +制作一个在线教育平台的落地页 +``` + +### 示例提示词 + +``` +为一个金融科技 SaaS 产品设计落地页，要求： +- 专业、可信赖的风格 +- 包含产品功能展示 +- 定价表 +- 客户评价 +- 使用深色模式 +``` + +``` +创建一个医疗健康管理系统的仪表板，需要： +- 数据可视化图表 +- 患者信息卡片 +- 侧边导航栏 +- 响应式设计 +``` + +--- + +## 🎯 工作原理 + +1. **你提出需求** → 描述你想要的 UI/UX +2. **AI 自动搜索** → 从设计数据库中查找相关风格、颜色、字体 +3. **智能推荐** → 根据产品类型匹配最佳设计系统 +4. **生成代码** → 输出符合专业标准的 HTML/CSS/JS 代码 +5. **查看效果** → 在浏览器中打开生成的 HTML 文件 + +--- + +## 📂 项目结构 + +``` +ui-ux-pro-max-skill/ +├── .kiro/ # Kiro 配置 +│ └── steering/ +│ └── ui-ux-pro-max.md +├── .shared/ # 共享设计数据库 +│ └── ui-ux-pro-max/ +│ ├── data/ # CSV 数据文件 +│ │ ├── styles.csv # UI 风格 +│ │ ├── colors.csv # 配色方案 +│ │ ├── typography.csv # 字体配对 +│ │ └── ... +│ └── scripts/ # Python 搜索脚本 +│ └── search.py +├── .cursor/ # Cursor 配置 +├── .claude/ # Claude 配置 +├── .windsurf/ # Windsurf 配置 +├── cli/ # CLI 工具源码 +└── README.md # 项目说明 +``` + +--- + +## 🔍 高级用法 + +### 直接使用搜索脚本 + +```bash +# 搜索产品类型推荐 +python .shared/ui-ux-pro-max/scripts/search.py "SaaS" --domain product + +# 搜索 UI 风格 +python .shared/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style + +# 搜索配色方案 +python .shared/ui-ux-pro-max/scripts/search.py "healthcare" --domain color + +# 搜索字体配对 +python .shared/ui-ux-pro-max/scripts/search.py "elegant" --domain typography + +# 搜索技术栈指南 +python .shared/ui-ux-pro-max/scripts/search.py "responsive" --stack html-tailwind +``` + +### 可用的搜索领域 + +| 领域 | 说明 | 示例关键词 | +|------|------|-----------| +| `product` | 产品类型推荐 | SaaS, 电商, 医疗, 金融 | +| `style` | UI 风格 | 玻璃态, 极简, 野兽派 | +| `typography` | 字体配对 | 优雅, 现代, 专业 | +| `color` | 配色方案 | healthcare, fintech, beauty | +| `landing` | 落地页结构 | hero, pricing, testimonial | +| `chart` | 图表类型 | trend, pie, funnel | +| `ux` | UX 指南 | animation, accessibility | + +### 支持的技术栈 + +- `html-tailwind` (默认) +- `react` +- `nextjs` +- `vue` +- `svelte` +- `swiftui` +- `react-native` +- `flutter` +- `shadcn` + +--- + +## 🛠️ 故障排除 + +### Python 未找到 + +**错误信息：** +``` +'python' 不是内部或外部命令 +``` + +**解决方法：** +1. 安装 Python 3.x +2. 确保 Python 已添加到系统 PATH +3. 重启终端/IDE + +### 搜索脚本无法运行 + +**检查 Python 路径：** +```bash +# Windows +where python +where python3 + +# macOS/Linux +which python +which python3 +``` + +### Kiro 未识别技能 + +**确认文件位置：** +```bash +# 检查文件是否存在 +ls .kiro/steering/ui-ux-pro-max.md +ls .shared/ui-ux-pro-max/ +``` + +**重启 Kiro：** +- 关闭并重新打开 Kiro +- 或重新加载工作区 + +--- + +## 📞 支持与反馈 + +### 内部支持 +- **负责人：** zhiming +- **Gitea 仓库：** http://42.51.49.106:3000/zhiming/ui-ux-pro-max-skill + +### 更新项目 + +```bash +# 进入项目目录 +cd ui-ux-pro-max-skill + +# 拉取最新更新 +git pull origin main +``` + +### 贡献改进 + +如果你有改进建议或发现问题： + +1. 在 Gitea 上创建 Issue +2. 或直接联系项目负责人 + +--- + +## 📝 许可证 + +本项目采用 MIT 许可证，可自由使用和修改。 + +--- + +## 🎓 学习资源 + +### 推荐阅读 +- [Tailwind CSS 文档](https://tailwindcss.com/docs) +- [UI/UX 设计原则](https://www.nngroup.com/articles/) +- [无障碍设计指南](https://www.w3.org/WAI/WCAG21/quickref/) + +### 示例项目 +查看 `example-landing-page.html` 了解生成的页面效果。 + +--- + +**最后更新：** 2024-01-14 +**版本：** 1.7.0