diff --git a/.claude/skills/generate-prototype-grid/SKILL.md b/.claude/skills/generate-prototype-grid/SKILL.md index bf04195..9657462 100644 --- a/.claude/skills/generate-prototype-grid/SKILL.md +++ b/.claude/skills/generate-prototype-grid/SKILL.md @@ -141,6 +141,78 @@ prototype/ └── device-management.html # 设备管理(独立文件) ``` +#### 📁 场景分类与目录结构 + +根据项目需求,选择合适的目录结构: + +**场景 1: 纯桌面端项目** +- 适用对象:管理后台、数据看板、桌面应用 +- 目录结构: + ``` + prototype/ + ├── admin-index.html # 桌面端平铺入口 + ├── index.html # 统一入口 + ├── docs-index.html # 文档中心 + ├── view-doc.html # 文档查看器 + ├── server.js + └── pages/ + └── admin/ # 桌面端管理页面 + ``` + +**场景 2: 纯移动端项目** +- 适用对象:移动应用、手机网页 +- 目录结构: + ``` + prototype/ + ├── mobile-index.html # 移动端平铺入口 + ├── index.html # 统一入口 + ├── docs-index.html # 文档中心 + ├── view-doc.html # 文档查看器 + ├── server.js + └── pages/ + └── mobile/ # 移动端页面 + ``` + +**场景 3: 桌面端+移动端混合项目(推荐)⭐** +- 适用对象:全栈应用、多端支持 +- 目录结构: + ``` + prototype/ + ├── index.html # 统一入口 + ├── admin-index.html # 桌面端平铺入口 + ├── mobile-index.html # 移动端平铺入口 + ├── docs-index.html # 文档中心 + ├── view-doc.html # 文档查看器 + ├── server.js # 唯一服务器 + └── pages/ + ├── admin/ # 桌面端管理页面 + └── mobile/ # 移动端页面 + ``` + +#### ⚠️ 不推荐的方案 + +**❌ 错误示例:使用两个独立目录** +``` +prototype/ # 桌面端 +├── server.js +└── pages/admin/ +prototype-mobile/ # 移动端 +├── server.js # 重复! +└── pages/mobile/ +``` + +**为什么不推荐:** +- ❌ 维护困难:需要同步更新两个目录 +- ❌ 资源浪费:两个 server.js,两个端口 +- ❌ 代码重复:文档系统、工具函数重复 +- ❌ 不符合统一管理原则 + +**✅ 正确做法:统一管理** +- ✅ 一个 prototype/ 目录 +- ✅ 一个 server.js +- ✅ 通过 pages/admin/ 和 pages/mobile/ 组织页面 +- ✅ 共享文档系统和工具函数 + #### 桌面端页面结构(独立 HTML 文件) ```html