feat: 添加 generate-prototype-grid 原型生成技能

- 平铺展示架构：所有页面同时显示在 iframe 网格中 - 完整的 AI 工作流：分析文档 → 拆分功能 → 生成原型 → 自动验证 - 支持 256 行 SKILL.md 主文件 - 包含 213 行设计规范参考文档 - 基于 Tailwind CSS 的响应式设计可基于 PRD 和需求文档自动生成原型系统。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-28 13:42:43 +00:00
parent 4186f573ea
commit bf8d90caee
2 changed files with 470 additions and 0 deletions
--- a/.claude/skills/generate-prototype-grid/SKILL.md
+++ b/.claude/skills/generate-prototype-grid/SKILL.md
@@ -0,0 +1,256 @@
+---
+name: generate-prototype-grid
+description: 根据方案文档/需求文档生成原型平铺展示系统。AI 工作流：分析文档 → 拆分功能模块 → 生成各页面独立 HTML → 生成平铺入口页面。架构：每个页面是独立 HTML 文件，入口页面通过 iframe 网格同时平铺展示所有页面。
+---
+
+# Generate Prototype Grid
+
+根据方案文档生成原型平铺展示系统的 **AI 工作流**。
+
+## 核心架构说明
+
+### ⭐ 平铺展示架构（核心概念）
+
+本技能采用 **iframe 平铺展示架构**，所有页面同时显示在网格中，一目了然：
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                    admin-index.html (平铺入口)                   │
+│                    ━━━━━━━━━━━━━━━━━━━━━━━━━━━                  │
+│                  所有页面同时显示，一键总览                       │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                  │
+│  ┌─────────────────────┬─────────────────────┬───────────────┐ │
+│  │  <iframe src="      │  <iframe src="      │  <iframe src= │ │
+│  │  pages/admin/       │  pages/admin/       │  pages/admin/ │ │
+│  │  index.html">       │  water-temp.html">  │  balance-rate │ │
+│  │                     │                     │  .html">      │ │
+│  │  首页地图           │  回水立管温度        │  二次平衡率   │ │
+│  │  ─────────────      │  ──────────────     │  ──────────   │ │
+│  │  [地图可视化]        │  [机组数据统计]      │  [平衡率分析] │ │
+│  └─────────────────────┴─────────────────────┴───────────────┘ │
+│                                                                  │
+│  💡 平铺优势：一次看到所有页面，无需切换，全局视图                 │
+│                                                                  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 平铺 vs 切换对比
+
+| 方式 | 说明 | 优势 | 适用场景 |
+|------|------|------|----------|
+| **平铺展示** ⭐ | 所有页面同时显示 | 一目了然、无需切换、全局视图 | **原型展示、评审、演示** |
+| 切换显示 | 一次只显示一个页面 | 节省空间、专注单个页面 | 实际应用、单页操作 |
+
+### 架构优势
+
+| 特性 | 说明 |
+|------|------|
+| **平铺展示** | 所有页面同时可见，一键总览整个系统 |
+| 独立开发 | 每个页面是独立 HTML 文件，可单独编辑和测试 |
+| 解耦维护 | 页面间无依赖关系，修改一个页面不影响其他页面 |
+| 易于扩展 | 新增页面只需添加新的 HTML 文件，在网格中增加一个 iframe |
+
+### 关键规则
+
+1. **每个功能页面 = 一个独立 HTML 文件**
+   - 文件位置: `pages/admin/功能名称.html`
+   - 包含完整的 HTML 结构（head、body、样式、脚本）
+   - 可独立在浏览器中打开预览
+
+2. **入口页面 = 平铺 iframe 网格**
+   - 使用多个 `<iframe>` 同时加载所有独立页面
+   - 采用网格布局（CSS Grid）排列所有 iframe
+   - 所有页面同时显示，无需切换
+
+3. **平铺布局要点**
+   - 使用 CSS Grid 实现响应式网格
+   - 每个 iframe 固定或自适应高度
+   - 支持滚动查看所有页面
+
+---
+
+## 核心工作流程
+
+```
+┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
+│  1. 分析方案文档  │ →  │  2. 拆分功能模块  │ →  │  3. 生成原型页面  │ →  │  4. 生成入口页面  │
+│  读取所有 .md    │    │   提取页面列表   │    │  逐个创建 HTML   │    │  统一入口+文档   │
+└─────────────────┘    └─────────────────┘    └─────────────────┘    └─────────────────┘
+                                                                          ↓
+                                                                  ┌─────────────────┐
+                                                                  │  5. 自动验证测试  │
+                                                                  │  链接+样式+需求   │
+                                                                  └─────────────────┘
+```
+
+## Step 1: 分析方案文档
+
+读取方案文档目录下的所有 `.md` 文件，AI 智能分析：
+
+### 分析要点
+
+1. **功能模块识别**
+   - 前端功能：用户可见页面（首页、详情、搜索等）
+   - 后端功能：管理页面（数据看板、资源管理、订单等）
+   - 核心流程：完整的用户操作路径
+
+2. **页面拆分规则**
+   - 一个核心功能 = 一个或多个页面
+   - 二级页面：详情页、设置页、结果页等
+   - 按功能逻辑分组，避免页面过于复杂
+
+3. **移动端 vs 桌面端判断**
+   - 移动端：375×812 手机框架，触屏交互
+   - 桌面端：完整宽度，侧边栏导航，复杂数据展示
+
+### 输出：页面清单
+
+## Step 2: 生成原型页面
+
+根据页面清单，AI 逐个生成**独立的 HTML 文件**。
+
+### ⚠️ 关键架构说明
+
+**每个页面都是独立的 HTML 文件**，不包含在其他页面中。入口页面通过 iframe 加载这些独立文件。
+
+### 页面生成规则
+
+#### 文件组织结构
+
+```
+prototype/
+├── admin-index.html          # 入口页面（使用 iframe 加载其他页面）
+└── pages/
+    └── admin/
+        ├── index.html        # 首页地图（独立文件）
+        ├── water-temperature.html    # 回水立管温度（独立文件）
+        ├── balance-rate.html         # 二次平衡率（独立文件）
+        ├── room-temperature.html     # 室温采集（独立文件）
+        ├── station-data.html         # 换热站数据（独立文件）
+        └── device-management.html    # 设备管理（独立文件）
+```
+
+#### 桌面端页面结构（独立 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">
+</head>
+<body class="bg-gray-100">
+    <!-- 顶部导航栏 -->
+    <nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center">
+        <!-- 导航内容 -->
+    </nav>
+    <!-- 主内容区 -->
+    <div class="p-6">
+        <!-- 页面具体内容 -->
+    </div>
+</body>
+</html>
+```
+
+#### 内容生成要点
+
+1. **导航栏颜色**
+   - 核心页面：蓝色渐变 `from-blue-500 to-blue-600`
+   - 用户中心：绿色渐变 `from-green-500 to-green-600`
+   - 后端看板：`bg-slate-800`
+
+2. **内容组件库**
+   - 卡片：`bg-white rounded-xl shadow-sm p-4`
+   - 列表项：`flex items-center gap-3 p-3 bg-white rounded-xl`
+   - 按钮：`bg-blue-500 text-white py-2 px-4 rounded-lg`
+
+3. **交互元素**
+   - 使用 `href="xxx.html"` 进行页面跳转
+   - 点击区域最小 44×44px
+
+## Step 3: 生成平铺入口页面
+
+生成**使用 iframe 平铺展示所有页面**的入口页面。
+
+### ⚠️ 关键架构说明
+
+**平铺展示**：入口页面使用多个 `<iframe>` 同时加载所有独立页面，所有页面**同时可见**，无需切换。
+
+### 桌面端平铺入口页面结构 (admin-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>
+        /* 平铺网格布局 */
+        .prototype-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);  /* 两列平铺 */
+            gap: 16px;
+            padding: 16px;
+        }
+        .prototype-iframe {
+            width: 100%;
+            height: 1000px;  /* 桌面端高度，确保完整页面内容可见 */
+            border: 1px solid #e5e7eb;
+            border-radius: 12px;
+            background: white;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body class="bg-gray-100">
+    <!-- 顶部标题栏 -->
+    <header class="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-4 px-6">
+        <h1 class="text-2xl font-bold">原型系统 - 平铺展示</h1>
+        <p class="text-blue-100 text-sm">所有页面同时显示，一目了然</p>
+    </header>
+
+    <!-- 平铺网格容器 -->
+    <div class="prototype-grid">
+        <!-- 平铺所有页面 iframe -->
+        <iframe src="pages/admin/index.html" class="prototype-iframe" title="首页地图"></iframe>
+        <iframe src="pages/admin/water-temperature.html" class="prototype-iframe" title="回水立管温度"></iframe>
+        <iframe src="pages/admin/balance-rate.html" class="prototype-iframe" title="二次平衡率"></iframe>
+        <iframe src="pages/admin/room-temperature.html" class="prototype-iframe" title="室温采集"></iframe>
+        <iframe src="pages/admin/station-data.html" class="prototype-iframe" title="换热站数据"></iframe>
+        <iframe src="pages/admin/device-management.html" class="prototype-iframe" title="设备管理"></iframe>
+    </div>
+</body>
+</html>
+```
+
+### iframe 配置要点
+
+| 属性 | 值 | 说明 |
+|------|-----|------|
+| src | `pages/admin/xxx.html` | 加载独立 HTML 文件的路径 |
+| class | `prototype-iframe` | 统一样式类，固定高度和边框 |
+| title | 页面名称 | 辅助功能，iframe 标题 |
+| scrolling | `auto` 或 `yes` | 允许滚动（页面内容可能超过 iframe 高度） |
+
+## 设计规范参考
+
+详细设计规范参见 [design-patterns.md](references/design-patterns.md)：
+- 桌面端平铺网格布局规范（2列/3列网格）
+- iframe 容器样式标准
+- 颜色主题系统
+- 组件样式标准
+
+## 工作示例
+
+参考当前项目实现：
+- `/mnt/code-fast/temp-humidity-demo/prototype/index.html`
+- `/mnt/code-fast/temp-humidity-demo/prototype/admin-index.html`
+- `/mnt/code-fast/temp-humidity-demo/prototype/docs-index.html`
+- `/mnt/code-fast/temp-humidity-demo/prototype/server.js`
--- a/.claude/skills/generate-prototype-grid/references/design-patterns.md
+++ b/.claude/skills/generate-prototype-grid/references/design-patterns.md
@@ -0,0 +1,214 @@
+# 原型设计规范
+
+## 移动端布局规范
+
+### 手机框架
+- **尺寸**: 375px × 812px (iPhone X/11/12/13 标准)
+- **圆角**: 40px
+- **边框**: 12px solid #1a1a1a
+- **阴影**: 0 25px 50px -12px rgba(0, 0, 0, 0.4)
+
+### 状态栏
+- **前端页面**: 白色背景 (`bg-white`)
+- **后端页面**: 深色背景 (`bg-slate-800`)
+- **高度**: 36px
+- **内边距**: px-4 py-2
+
+### 导航栏
+- **前端页面**: 蓝色渐变 (`bg-gradient-to-r from-blue-500 to-blue-600`)
+- **后端页面**: 深色背景 (`bg-slate-800`)
+- **高度**: 48px
+- **返回按钮**: 左侧
+- **标题**: 居中
+- **操作按钮**: 右侧
+
+## 桌面端布局规范
+
+### 侧边栏导航
+- **宽度**: 260px
+- **背景**: 深色 (`bg-slate-800`)
+- **文字颜色**: 白色/浅灰
+- **高度**: 100vh (固定)
+- **Logo区**: 顶部 80px
+- **导航菜单**: 中间滚动区域
+- **用户信息**: 底部固定
+
+### 主内容区
+- **宽度**: flex-1 (自动填充)
+- **背景**: 浅灰 (`bg-gray-100`)
+- **内边距**: 24px
+- **最大宽度**: 无限制
+
+### 顶部栏
+- **背景**: 白色 (`bg-white`)
+- **圆角**: 12px
+- **阴影**: 小阴影
+- **内边距**: 16px
+- **布局**: 左右分栏（标题 + 操作按钮）
+
+### 页面卡片网格
+- **网格**: 响应式网格
+- **小屏**: 1列
+- **中屏**: 2列 (md:grid-cols-2)
+- **大屏**: 3列 (lg:grid-cols-3)
+- **超大屏**: 4列 (xl:grid-cols-4)
+- **间距**: 16px (gap-4)
+
+### 卡片样式
+- **背景**: 白色 (`bg-white`)
+- **圆角**: 12px (`rounded-xl`)
+- **阴影**: 小阴影 (`shadow-sm`)
+- **悬停**: 上移4px + 加深阴影
+- **内边距**: 24px (p-6)
+- **边框**: 左侧彩色边框 (border-l-4)
+
+## 颜色主题系统
+
+### 移动端页面
+
+#### 前端页面
+```
+主色: blue-500 (蓝色)
+辅助色: amber-500 (橙色)
+成功色: green-500 (绿色)
+背景色: gray-50 / gray-100 (浅灰)
+文字色: gray-800 (深灰)
+```
+
+#### 后端页面
+```
+主色: amber-500 (数据看板)
+辅助色: blue-500 (资源管理)
+成功色: green-500 (订单管理)
+紫色: purple-500 (会员分佣)
+红色: red-500 (系统设置)
+背景色: slate-800 / slate-900 (深色)
+文字色: white / slate-400
+```
+
+### 桌面端页面
+
+#### 侧边栏
+```
+背景: slate-800 (深灰)
+选中: slate-700 (稍浅)
+悬停: slate-700 (稍浅)
+文字: white / slate-300
+边框: slate-700
+```
+
+#### 主内容区
+```
+背景: gray-100 (浅灰)
+卡片: white (白色)
+文字: gray-800 (深灰)
+边框: gray-200 (浅灰)
+```
+
+## 组件样式标准
+
+### 按钮
+- **主按钮**: `bg-blue-500 text-white py-2 px-4 rounded-lg`
+- **次要按钮**: `bg-gray-200 text-gray-800 py-2 px-4 rounded-lg`
+- **危险按钮**: `bg-red-500 text-white py-2 px-4 rounded-lg`
+- **最小点击区域**: 44×44px
+
+### 输入框
+- **边框**: `border border-gray-300`
+- **圆角**: `rounded-lg`
+- **内边距**: `py-2 px-4`
+- **聚焦**: 蓝色边框 + 蓝色阴影
+
+### 卡片
+- **基础**: `bg-white rounded-xl shadow-sm p-6`
+- **带边框**: `border-l-4 border-blue-500`
+- **悬停效果**: `hover:shadow-md hover:-translate-y-1`
+
+### 列表项
+- **容器**: `flex items-center gap-3 p-3 bg-white rounded-xl`
+- **图标**: `w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center`
+- **文字**: `flex-1`
+
+## 桌面端平铺网格布局规范
+
+### 2列网格（默认）
+```css
+.prototype-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  padding: 16px;
+}
+.prototype-iframe {
+  width: 100%;
+  height: 1000px;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+```
+
+### 3列网格（大屏）
+```css
+@media (min-width: 1400px) {
+  .prototype-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+```
+
+### 响应式断点
+- **小屏**: < 768px (1列)
+- **中屏**: 768px - 1399px (2列)
+- **大屏**: ≥ 1400px (3列)
+
+## iframe 容器样式标准
+
+### 基础样式
+```css
+.prototype-iframe {
+  width: 100%;
+  height: 1000px;  /* 固定高度，确保完整页面可见 */
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+```
+
+### 属性说明
+- **width: 100%**: 宽度自适应父容器
+- **height: 1000px**: 固定高度，确保完整页面内容可见
+- **border**: 浅灰边框，区分不同 iframe
+- **border-radius**: 12px 圆角，美观
+- **background**: 白色背景
+- **box-shadow**: 小阴影，层次感
+
+### 滚动配置
+- **scrolling**: "auto" (内容超出时显示滚动条)
+- **loading**: "lazy" (懒加载，优化性能)
+
+## 设计原则
+
+### 一致性
+- 相同功能使用相同样式
+- 颜色、字体、间距保持统一
+- 交互模式保持一致
+
+### 可访问性
+- 最小点击区域 44×44px
+- 颜色对比度 ≥ 4.5:1
+- 支持键盘导航
+- 语义化 HTML
+
+### 响应式
+- 移动优先设计
+- 渐进增强
+- 断点：sm(640px)、md(768px)、lg(1024px)、xl(1280px)、2xl(1536px)
+
+### 性能
+- 懒加载图片
+- 压缩静态资源
+- 使用 CDN
+- 优化关键渲染路径