9fe6deae7c
## 更新内容 ### Step 3 之后新增章节 - ⚠️ 移动端和桌面端双端项目处理 - 判断标准表格（移动端 vs 桌面端特征对比） - 双端平铺入口页面命名规则 - 移动端平铺入口页面结构完整示例 - 双端平铺入口对比表格 ### Step 4 完全重写 - ⚠️ 关键：根据项目类型生成不同的统一入口 - 单端项目处理方式 - 双端项目处理方式（重点） - 设计要求表格（图标、颜色、文字、链接、功能标签） - 交互效果说明 ## 问题解决 修复了原技能未明确说明如何处理同时包含移动端和桌面端项目的问题。 ## 实际验证 已在模板244（AI智能抽背助手）中验证成功： - ✅ 自动识别了7个桌面端页面和6个移动端页面 - ✅ 生成了 admin-index.html（桌面端平铺） - ✅ 生成了 mobile-index.html（移动端平铺） - ✅ index.html 提供了桌面端和移动端的两个明确入口 ## 文件变更 - .claude/skills/generate-prototype-grid.tar.gz (重新打包) - generate-prototype-grid-skill-review-report.md (审查报告) - generate-prototype-grid-skill-update.md (更新指南) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
323 lines
12 KiB
Markdown
323 lines
12 KiB
Markdown
# 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
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>移动端原型 - 平铺展示</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
/* 移动端平铺网格布局 - 1列垂直排列 */
|
||
.mobile-prototype-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr; /* 移动端使用1列 */
|
||
gap: 24px;
|
||
padding: 24px;
|
||
max-width: 420px; /* 限制最大宽度，模拟手机 */
|
||
margin: 0 auto;
|
||
}
|
||
.mobile-iframe {
|
||
width: 100%;
|
||
height: 850px; /* iPhone X 高度 + 状态栏 + 底部导航 */
|
||
border: 12px solid #1a1a1a; /* 手机边框 */
|
||
border-radius: 40px; /* 手机圆角 */
|
||
background: white;
|
||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-100">
|
||
<!-- 顶部标题栏 -->
|
||
<header class="bg-gradient-to-r from-green-500 to-green-600 text-white py-4 px-6">
|
||
<h1 class="text-2xl font-bold">移动端原型 - 平铺展示</h1>
|
||
<p class="text-green-100 text-sm">所有移动端页面同时显示</p>
|
||
</header>
|
||
|
||
<!-- 平铺网格容器 -->
|
||
<div class="mobile-prototype-grid">
|
||
<!-- 平铺所有移动端页面 iframe -->
|
||
<iframe src="pages/mobile/home.html" class="mobile-iframe" title="首页"></iframe>
|
||
<iframe src="pages/mobile/ai-quiz.html" class="mobile-iframe" title="AI抽背"></iframe>
|
||
<iframe src="pages/mobile/quiz-report.html" class="mobile-iframe" title="抽背报告"></iframe>
|
||
<iframe src="pages/mobile/memory-curve.html" class="mobile-iframe" title="记忆曲线"></iframe>
|
||
<iframe src="pages/mobile/card-recite.html" class="mobile-iframe" title="卡片背诵"></iframe>
|
||
<iframe src="pages/mobile/profile.html" class="mobile-iframe" title="个人中心"></iframe>
|
||
</div>
|
||
</body>
|
||
</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
|
||
<!-- 英雄区域按钮 -->
|
||
<div class="flex justify-center gap-4">
|
||
<a href="admin-index.html" class="px-8 py-3 bg-white text-blue-600 rounded-xl">
|
||
<i class="fas fa-th mr-2"></i>查看平铺展示
|
||
</a>
|
||
<a href="docs-index.html" class="px-8 py-3 bg-white/20 backdrop-blur-sm text-white rounded-xl">
|
||
<i class="fas fa-book mr-2"></i>查看文档
|
||
</a>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
#### 双端项目（同时包含桌面端和移动端）⭐
|
||
|
||
**当项目同时包含移动端和桌面端时，统一入口必须提供两个明确的入口！**
|
||
|
||
**页面结构要求：**
|
||
|
||
1. **导航栏（顶部）** - 提供两个入口按钮
|
||
```html
|
||
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
||
<div class="flex items-center gap-4">
|
||
<a href="admin-index.html" class="px-4 py-2 bg-blue-600 text-white rounded-lg">
|
||
<i class="fas fa-desktop mr-1"></i>桌面端
|
||
</a>
|
||
<a href="mobile-index.html" class="px-4 py-2 bg-green-600 text-white rounded-lg">
|
||
<i class="fas fa-mobile-alt mr-1"></i>移动端
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
```
|
||
|
||
2. **英雄区域** - 三个主要入口
|
||
```html
|
||
<section class="hero-gradient text-white py-20">
|
||
<div class="flex justify-center gap-4">
|
||
<a href="admin-index.html" class="px-8 py-3 bg-white text-blue-600 rounded-xl">
|
||
<i class="fas fa-desktop mr-2"></i>桌面端管理后台
|
||
</a>
|
||
<a href="mobile-index.html" class="px-8 py-3 bg-white text-green-600 rounded-xl">
|
||
<i class="fas fa-mobile-alt mr-2"></i>移动端应用
|
||
</a>
|
||
<a href="docs-index.html" class="px-8 py-3 bg-white/20 backdrop-blur-sm text-white rounded-xl">
|
||
<i class="fas fa-book mr-2"></i>查看文档
|
||
</a>
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
3. **快速入口区域** - 两个大卡片展示
|
||
```html
|
||
<section class="py-16 bg-white">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<!-- 桌面端卡片 -->
|
||
<a href="admin-index.html" class="card-hover bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<div class="w-16 h-16 bg-blue-500 text-white rounded-2xl flex items-center justify-center">
|
||
<i class="fas fa-desktop text-3xl"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-2xl font-bold text-gray-800">桌面端管理后台</h3>
|
||
<p class="text-gray-600">数据看板、学生管理、系统配置</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="px-3 py-1 bg-blue-200 text-blue-800 rounded-full text-sm">数据概览</span>
|
||
<span class="px-3 py-1 bg-blue-200 text-blue-800 rounded-full text-sm">学生管理</span>
|
||
<span class="px-3 py-1 bg-blue-200 text-blue-800 rounded-full text-sm">知识点管理</span>
|
||
<span class="px-3 py-1 bg-blue-200 text-blue-800 rounded-full text-sm">任务管理</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- 移动端卡片 -->
|
||
<a href="mobile-index.html" class="card-hover bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-8">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<div class="w-16 h-16 bg-green-500 text-white rounded-2xl flex items-center justify-center">
|
||
<i class="fas fa-mobile-alt text-3xl"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-2xl font-bold text-gray-800">移动端前端应用</h3>
|
||
<p class="text-gray-600">AI抽背、记忆曲线、学习任务</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="px-3 py-1 bg-green-200 text-green-800 rounded-full text-sm">AI 抽背</span>
|
||
<span class="px-3 py-1 bg-green-200 text-green-800 rounded-full text-sm">要点背诵</span>
|
||
<span class="px-3 py-1 bg-green-200 text-green-800 rounded-full text-sm">记忆曲线</span>
|
||
<span class="px-3 py-1 bg-green-200 text-green-800 rounded-full text-sm">收藏分享</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
**设计要求：**
|
||
|
||
| 位置 | 桌面端入口 | 移动端入口 |
|
||
|------|-----------|-----------|
|
||
| **图标** | `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 技能生成的项目
|