diff --git a/.claude/skills/generate-prototype-grid/SKILL.md b/.claude/skills/generate-prototype-grid/SKILL.md index 0712ca3..186d4c3 100644 --- a/.claude/skills/generate-prototype-grid/SKILL.md +++ b/.claude/skills/generate-prototype-grid/SKILL.md @@ -10,15 +10,15 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI ## 核心工作流程 ``` -┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ -│ 1. 分析方案文档 │ → │ 2. 拆分功能模块 │ → │ 3. 生成原型页面 │ -│ 读取所有 .md │ │ 提取页面列表 │ │ 逐个创建 HTML │ -└─────────────────┘ └─────────────────┘ └─────────────────┘ - ↓ - ┌─────────────────┐ - │ 4. 生成入口页面 │ - │ 平铺展示所有页面 │ - └─────────────────┘ +┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ +│ 1. 分析方案文档 │ → │ 2. 拆分功能模块 │ → │ 3. 生成原型页面 │ → │ 4. 生成入口页面 │ +│ 读取所有 .md │ │ 提取页面列表 │ │ 逐个创建 HTML │ │ 统一入口+文档 │ +└─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘ + ↓ + ┌─────────────────┐ + │ 5. 自动验证测试 │ + │ 链接+样式+需求 │ + └─────────────────┘ ``` ## Step 1: 分析方案文档 @@ -43,38 +43,13 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI ### 输出：页面清单 -示例格式： - -```markdown -## 前端页面 - -### 核心页面 (蓝色) -- [ ] home.html - 首页/资源列表 -- [ ] detail.html - 资源详情 -- [ ] audio-detail.html - 音频详情（试听） - -### 用户中心 (绿色) -- [ ] profile.html - 个人中心 -- [ ] settings.html - 设置页面 - -## 后端页面 - -### 数据看板 (amber) -- [ ] dashboard.html - 后台首页 -- [ ] statistics.html - 数据统计 - -### 资源管理 (蓝色) -- [ ] file-list.html - 文件列表 -- [ ] file-upload.html - 文件上传 -``` - ## Step 2: 生成原型页面 根据页面清单，AI 逐个生成原型页面。 ### 页面生成规则 -#### 移动端页面结构 +#### 桌面端页面结构 ```html @@ -86,128 +61,39 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI - - -
- 9:41 -
- - - -
-
- - -
- -

页面标题

- -
- + + + -
+
- - -
-
- - - 首页 - - -
-
``` #### 内容生成要点 -1. **状态栏颜色** - - 前端页面：白色 `bg-white` - - 后端页面：深色 `bg-slate-800` - -2. **导航栏颜色** +1. **导航栏颜色** - 核心页面：蓝色渐变 `from-blue-500 to-blue-600` - 用户中心：绿色渐变 `from-green-500 to-green-600` - - 订单支付：橙色渐变 `from-orange-500 to-orange-600` - - 会员分佣：紫色渐变 `from-purple-500 to-purple-600` - 后端看板：`bg-slate-800` -3. **内容组件库** - - 卡片：`bg-white rounded-2xl shadow-sm p-4` +2. **内容组件库** + - 卡片：`bg-white rounded-xl shadow-sm p-4` - 列表项：`flex items-center gap-3 p-3 bg-white rounded-xl` - - 按钮：`bg-gradient-to-r from-amber-400 to-orange-500 text-white py-3 px-4 rounded-xl` - - 输入框：`w-full bg-white border border-gray-200 rounded-xl px-4 py-3` + - 按钮：`bg-blue-500 text-white py-2 px-4 rounded-lg` -4. **交互元素** - - 点击区域最小 44×44px +3. **交互元素** - 使用 `href="xxx.html"` 进行页面跳转 - - 二级页面不显示底部导航 + - 点击区域最小 44×44px ## Step 3: 生成入口页面 生成平铺展示所有页面的入口页面。 -### 移动端入口页面 (front-index.html / back-index.html) - -```html - - - - - - 项目原型 - - - - - - -
-

项目原型

-

移动端页面平铺展示

-
- - -
- 分类1 - 分类2 -
- - -
-

分类1标题

-
-
- -
-
- -
- -
-
- - -``` - ### 桌面端入口页面 (admin-index.html) ```html @@ -223,45 +109,196 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI
-
-
-

项目名称

-
- +
+
-
-
-

数据看板

-
-
-

仪表盘

- 查看页面 → -
- -
-
+
``` -## Step 4: 生成文档首页 +## Step 4: 生成统一入口页面 -生成 `docs/index.html`，整合所有文档入口。 +生成 `index.html` 作为项目统一入口，整合原型系统和文档系统。 + +### 页面结构 + +- 深色渐变背景 +- 顶部项目信息栏 +- 双卡片入口（原型系统 + 文档系统） +- 快速链接导航 +- 项目概览信息 + +## Step 5: 生成文档系统 + +生成 `docs-index.html` 文档首页，自动读取和展示 `docs/` 目录下的 Markdown 文件。 + +### 功能特性 +- 自动扫描 `docs/` 目录 +- 实时 Markdown 转 HTML +- 文档搜索功能 +- 卡片/内容双视图切换 + +## Step 6: 生成本地预览服务器 + +生成 `server.js` 文件，提供静态文件服务和文档渲染 API。 + +### 服务器功能 +- 静态文件服务 +- Markdown 转 HTML +- 文档列表 API: `GET /api/docs` +- 文档渲染 API: `GET /api/doc/:name` + +### 使用方法 + +```bash +cd prototype/ +node server.js +# 访问: http://localhost:7357 +``` + +### 端口说明 +- **默认端口**: 7357 (偏门端口) +- **统一入口**: http://localhost:7357/index.html +- **原型系统**: http://localhost:7357/admin-index.html +- **文档系统**: http://localhost:7357/docs-index.html + +--- + +## Step 7: 自动验证与测试 + +使用 **Playwright MCP** 和 **图片 MCP** 进行自动化验证。 + +### 验证流程 + +``` +┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ +│ 1. 启动服务器 │ → │ 2. 遍历页面链接 │ → │ 3. 截图保存 │ +│ node server.js │ │ Playwright导航 │ │ 保存到screenshots│ +└─────────────────┘ └─────────────────┘ └─────────────────┘ + ↓ + ┌─────────────────┐ + │ 4. AI分析验证 │ + │ 图片MCP+需求对比│ + └─────────────────┘ +``` + +### 使用 Playwright MCP 进行验证 + +```javascript +// 1. 启动浏览器 +mcp__playwright__browser_navigate +url: http://localhost:7357/index.html + +// 2. 获取页面快照 +mcp__playwright__browser_snapshot + +// 3. 截图保存 +mcp__playwright__browser_take_screenshot +filename: prototype/screenshots/01-index.png +fullPage: true + +// 4. 点击原型系统入口 +mcp__playwright__browser_click +ref: [找到原型系统卡片的链接] + +// 5. 验证原型系统页面 +mcp__playwright__browser_snapshot +mcp__playwright__browser_take_screenshot +filename: prototype/screenshots/02-prototype-index.png + +// 6. 遍历所有页面链接 +// 重复上述步骤... +``` + +### 使用图片 MCP 分析截图 + +```javascript +// 分析页面布局和样式 +mcp__zai-mcp-server__analyze_image +imageSource: prototype/screenshots/01-index.png +prompt: 详细描述这个页面的布局结构、设计风格、配色方案、组件样式，评估其美观度和专业性 + +// 验证与需求文档的符合度 +mcp__zai-mcp-server__ui_diff_check +expected_image_source: docs/参考设计图.png +actual_image_source: prototype/screenshots/actual.png +prompt: 对比参考设计与实际实现，指出差异和问题 +``` + +### 验证检查清单 + +#### 1. 链接验证 +- [ ] 所有导航链接可点击 +- [ ] 页面跳转正确 +- [ ] 无 404 错误 +- [ ] 返回链接正常 + +#### 2. 显示验证 +- [ ] 页面标题正确 +- [ ] 导航栏显示正常 +- [ ] 侧边栏菜单完整 +- [ ] 内容区域布局正确 +- [ ] 数据卡片显示正常 + +#### 3. 样式验证（通过图片 MCP） +- [ ] 配色方案符合规范 +- [ ] 字体大小合适 +- [ ] 间距布局合理 +- [ ] 阴影和圆角统一 +- [ ] 响应式适配正常 + +#### 4. 需求符合度验证 +- [ ] 功能模块完整 +- [ ] 数据字段齐全 +- [ ] 交互流程正确 +- [ ] 与需求文档描述一致 + +### 验证报告模板 + +```markdown +# 原型验证报告 + +## 测试概览 +- 测试时间: 2026-xx-xx +- 测试页面: X 个 +- 截图数量: X 张 + +## 链接验证结果 +| 页面 | 链接状态 | 跳转正确 | 备注 | +|------|---------|---------|------| +| index.html | ✅ | ✅ | 正常 | +| admin-index.html | ✅ | ✅ | 正常 | + +## 样式分析结果 +### 美观度评分: X/10 +- 配色: X/10 +- 布局: X/10 +- 字体: X/10 +- 整体: X/10 + +### 问题列表 +1. [问题描述] + - 位置: [页面/元素] + - 建议: [改进建议] + +## 需求符合度 +| 需求项 | 符合度 | 备注 | +|--------|--------|------| +| 功能模块1 | ✅ 100% | 完全符合 | +| 功能模块2 | ⚠️ 80% | 部分符合 | + +## 改进建议 +[根据分析结果提出的改进建议] +``` ## 设计规范参考 详细设计规范参见 [design-patterns.md](references/design-patterns.md)： -- 移动端布局规范（375×812 手机框架） - 桌面端布局规范（侧边栏 260px） - 颜色主题系统 - 组件样式标准 @@ -270,12 +307,12 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI | 模式 | 入口页面 | 布局特点 | 适用场景 | |------|---------|---------|---------| -| 移动端 | front-index.html
back-index.html | 375×812 iPhone 框架
响应式网格（1-4列） | 移动应用、H5、小程序 | | 桌面端 | admin-index.html | 260px 侧边栏
主内容区卡片网格 | 管理后台、数据看板 | ## 工作示例 参考当前项目实现： -- `/mnt/code-fast/bp3-demo/bp3-main/prototype/front-index.html` -- `/mnt/code-fast/bp3-demo/bp3-main/prototype/back-index.html` -- `/mnt/code-fast/bp3-demo/bp3-main/prototype/pages/` +- `/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`