# generate-prototype-grid 技能更新指南
## 📋 问题说明
**问题**：技能 `generate-prototype-grid` 没有明确说明如何处理同时包含移动端和桌面端的项目。
**影响**：当需求文档同时包含移动端和桌面端页面时，生成的统一入口（index.html）只提供了桌面端的入口，缺少移动端的入口。
**解决方案**：在技能中添加关于移动端和桌面端双端项目的明确说明。
---
## 🎯 更新内容
### 1. 在 Step 3 之后添加新章节
**位置**：第309行之后（Step 4之前）
**插入内容**：
```markdown
### ⚠️ 移动端和桌面端双端项目处理
当需求文档中同时包含**移动端页面**和**桌面端页面**时，需要分别生成两个平铺入口：
#### 判断标准
在 Step 1 分析阶段，根据以下特征判断页面类型：
| 特征 | 移动端页面 | 桌面端页面 |
|------|-----------|-----------|
| **设备框架** | 375×812px 手机框架 | 完整宽度，无框架 |
| **导航方式** | 底部 Tab 导航 | 侧边栏导航 + 顶部栏 |
| **交互方式** | 触屏交互，滑动手势 | 鼠标点击，悬停效果 |
| **内容密度** | 精简内容，大按钮 | 复杂数据，表格图表 |
| **适用场景** | 用户端应用（学习、抽背） | 管理后台（数据、配置） |
#### 双端平铺入口页面命名规则
**如果项目同时包含移动端和桌面端：**
```
prototype/
├── admin-index.html # 桌面端平铺入口（2-3列网格）
├── mobile-index.html # 移动端平铺入口（1列网格）
├── index.html # 统一入口（提供两个端的选择）
└── pages/
├── admin/ # 桌面端页面
│ ├── dashboard.html
│ ├── student-management.html
│ └── ...
└── mobile/ # 移动端页面
├── home.html
├── ai-quiz.html
└── ...
```
**如果只包含桌面端：**
- 生成：`admin-index.html`
**如果只包含移动端：**
- 生成：`mobile-index.html`
#### 移动端平铺入口页面结构 (mobile-index.html)
```html
移动端原型 - 平铺展示
```
#### 双端平铺入口对比
| 特性 | 桌面端 (admin-index.html) | 移动端 (mobile-index.html) |
|------|--------------------------|---------------------------|
| **网格列数** | 2-3列（响应式） | 1列（垂直排列） |
| **iframe高度** | 1000px | 850px（iPhone X标准） |
| **边框样式** | 简单圆角边框 | 手机边框（12px黑色边框） |
| **背景颜色** | 蓝色渐变 `from-blue-600 to-blue-700` | 绿色渐变 `from-green-500 to-green-600` |
| **最大宽度** | 无限制 | 420px（模拟手机） |
| **页面路径** | `pages/admin/xxx.html` | `pages/mobile/xxx.html` |
```
---
### 2. 替换 Step 4 的内容
**位置**：第310-321行
**新内容**：
```markdown
## Step 4: 生成统一入口页面
生成 `index.html` 作为项目统一入口。
### ⚠️ 关键：根据项目类型生成不同的统一入口
#### 单端项目（仅桌面端 或 仅移动端）
**页面结构：**
- 深色渐变背景
- 顶部项目信息栏
- 双卡片入口（原型系统 + 文档系统）
- 快速链接导航
- 项目概览信息
**示例：**
```html
```
---
#### 双端项目（同时包含桌面端和移动端）⭐
**当项目同时包含移动端和桌面端时，统一入口必须提供两个明确的入口！**
**页面结构要求：**
1. **导航栏（顶部）** - 提供两个入口按钮
```html
```
2. **英雄区域** - 三个主要入口
```html
```
3. **快速入口区域** - 两个大卡片展示
```html
```
**设计要求：**
| 位置 | 桌面端入口 | 移动端入口 |
|------|-----------|-----------|
| **图标** | `fa-desktop` 🖥️ | `fa-mobile-alt` 📱 |
| **颜色** | 蓝色系 (`blue-500/600`) | 绿色系 (`green-500/600`) |
| **文字** | "桌面端管理后台" | "移动端前端应用" |
| **链接** | `admin-index.html` | `mobile-index.html` |
| **功能标签** | 数据概览、学生管理、知识点管理、任务管理 | AI抽背、要点背诵、记忆曲线、收藏分享 |
**交互效果：**
- 卡片悬停：上移8px + 增强阴影
- 按钮悬停：背景色加深
- 平滑过渡：`transition: all 0.3s ease`
```
---
## 📝 执行命令
在容器内执行以下命令来更新技能文件：
```bash
# 1. 进入技能目录
cd /workspace/group/.claude/skills/generate-prototype-grid-temp/generate-prototype-grid
# 2. 备份原文件
cp SKILL.md SKILL.md.backup
# 3. 在第309行后插入新内容（创建临时文件）
cat > /tmp/step3_addition.md << 'EOF'
[插入上面准备的第一部分内容]
EOF
# 4. 执行插入
sed -i '309r /tmp/step3_addition.md' SKILL.md
# 5. 替换Step 4的内容
cat > /tmp/step4_replacement.md << 'EOF'
[插入上面准备的第二部分内容]
EOF
# 6. 执行替换（注意行号会变化，因为前面插入了内容）
# 需要重新计算Step 4的行号
```
---
## ✅ 验证更新
更新完成后，检查以下内容是否正确添加：
1. ✅ Step 3 之后有 "⚠️ 移动端和桌面端双端项目处理" 章节
2. ✅ Step 4 包含 "⚠️ 关键：根据项目类型生成不同的统一入口"
3. ✅ 提供了单端项目和双端项目的不同处理方式
4. ✅ 双端项目的统一入口包含桌面端和移动端的两个明确入口
---
## 📦 重新打包技能
更新完成后，重新打包技能：
```bash
cd /workspace/group/.claude/skills
tar -czf generate-prototype-grid.tar.gz -C generate-prototype-grid-temp .
```
---
**更新日期**：2026-03-28
**更新原因**：修复技能未明确说明双端项目处理的问题
**影响范围**：所有使用 generate-prototype-grid 技能生成的项目