feat: 添加生成原型平铺展示技能
核心功能: - 根据方案文档自动生成原型平铺展示系统 - iframe 网格架构，所有页面同时显示 - 5步工作流：分析文档 → 拆分模块 → 生成页面 → 平铺入口 → 自动验证 - 支持桌面端和移动端响应式布局 技术特点: - 每个页面独立 HTML 文件，解耦维护 - CSS Grid 平铺布局（2列/3列/1列） - 本地预览服务器（端口 7357） - 自动验证测试（Playwright MCP + Image MCP） 适用场景: - 快速原型生成 - 客户演示和评审 - 设计验证和测试 - 一键总览整个系统 从 Gitee contract-demo 仓库复制而来 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude AI
598
.claude/skills/generate-prototype-grid/SKILL.md
Normal file
598
.claude/skills/generate-prototype-grid/SKILL.md
Normal file
@@ -0,0 +1,598 @@
|
||||
---
|
||||
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"> │ │
|
||||
│ │ 首页地图 │ 回水立管温度 │ 二次平衡率 │ │
|
||||
│ │ ───────────── │ ────────────── │ ────────── │ │
|
||||
│ │ [地图可视化] │ [机组数据统计] │ [平衡率分析] │ │
|
||||
│ └─────────────────────┴─────────────────────┴───────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────┬─────────────────────┬───────────────┐ │
|
||||
│ │ <iframe src=" │ <iframe src=" │ <iframe src= │ │
|
||||
│ │ pages/admin/ │ pages/admin/ │ pages/admin/ │ │
|
||||
│ │ room-temp.html"> │ station-data.html">│ device-mgmt. │ │
|
||||
│ │ │ │ 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 (平铺入口页面) │
|
||||
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
|
||||
│ │
|
||||
│ ┌──────────────────┐ ┌──────────────────┐ ┌───────────┐ │
|
||||
│ │ <iframe src=" │ │ <iframe src=" │ │ <iframe │ │
|
||||
│ │ pages/admin/ │ │ pages/admin/ │ │ src=... │ │
|
||||
│ │ index.html"> │ │ water-temp.html"> │ │ │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ 首页地图 │ │ 回水立管温度 │ │ 二次平衡率│ │
|
||||
│ └──────────────────┘ └──────────────────┘ └───────────┘ │
|
||||
│ │
|
||||
│ ┌──────────────────┐ ┌──────────────────┐ ┌───────────┐ │
|
||||
│ │ <iframe src=...> │ │ <iframe src=...> │ │ <iframe │ │
|
||||
│ │ │ │ │ │ src=... │ │
|
||||
│ │ 室温采集 │ │ 换热站数据 │ │ 设备管理 │ │
|
||||
│ └──────────────────┘ └──────────────────┘ └───────────┘ │
|
||||
│ │
|
||||
│ 💡 所有页面同时显示，一眼看完整个原型系统 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 桌面端平铺入口页面结构 (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>
|
||||
```
|
||||
|
||||
### 响应式平铺布局
|
||||
|
||||
```html
|
||||
<style>
|
||||
/* 大屏：3列平铺 */
|
||||
@media (min-width: 1400px) {
|
||||
.prototype-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
/* 中屏：2列平铺 */
|
||||
@media (min-width: 768px) and (max-width: 1399px) {
|
||||
.prototype-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
/* 小屏：1列平铺 */
|
||||
@media (max-width: 767px) {
|
||||
.prototype-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### iframe 配置要点
|
||||
|
||||
| 属性 | 值 | 说明 |
|
||||
|------|-----|------|
|
||||
| src | `pages/admin/xxx.html` | 加载独立 HTML 文件的路径 |
|
||||
| class | `prototype-iframe` | 统一样式类，固定高度和边框 |
|
||||
| title | 页面名称 | 辅助功能，iframe 标题 |
|
||||
| scrolling | `auto` 或 `yes` | 允许滚动（页面内容可能超过 iframe 高度） |
|
||||
| loading | `lazy` | 懒加载，优化性能（可选） |
|
||||
|
||||
### 平铺布局选项
|
||||
|
||||
| 布局 | CSS | 适用场景 |
|
||||
|------|-----|----------|
|
||||
| **2列网格** ⭐ | `grid-template-columns: repeat(2, 1fr)` | 默认，桌面端平铺 |
|
||||
| 3列网格 | `grid-template-columns: repeat(3, 1fr)` | 大屏幕，更多页面 |
|
||||
| 1列网格 | `grid-template-columns: 1fr` | 小屏幕，移动端 |
|
||||
|
||||
## Step 4: 生成统一入口页面
|
||||
|
||||
生成 `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`
|
||||
- **中文文件名支持**: URL 解码处理 `decodeURIComponent()`
|
||||
|
||||
### ⚠️ 中文文件名处理
|
||||
|
||||
**关键修复**: 文档渲染 API 必须处理 URL 编码的中文文件名
|
||||
|
||||
```javascript
|
||||
// server.js 中文档渲染端点
|
||||
app.get('/api/doc/:name', (req, res) => {
|
||||
const docName = decodeURIComponent(req.params.name); // 必须解码！
|
||||
// 如果文件名已包含 .md 后缀，不要再加
|
||||
const docPath = docName.endsWith('.md') ? docName : docName + '.md';
|
||||
const filePath = path.join(DOCS_DIR, docPath);
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
**问题原因**: 前端请求中文文件名时会自动 URL 编码（如 `%E5%8E%9F%E5%A7%8B...`），后端必须解码才能找到文件。
|
||||
|
||||
### ⚠️ 代码块样式处理
|
||||
|
||||
**关键修复**: Markdown 转 HTML 时必须保护代码块内容，避免换行被错误替换
|
||||
|
||||
```javascript
|
||||
// 使用占位符保护代码块
|
||||
const codeBlocks = [];
|
||||
let html = markdown
|
||||
// 先提取代码块，用占位符替换
|
||||
.replace(/```(\w*)\n?([\s\S]*?)```/g, (match, lang, code) => {
|
||||
const placeholder = `__CODE_BLOCK_${codeBlocks.length}__`;
|
||||
const isAsciiArt = /┌|│|└|├|─|┐|┘|┤/.test(code);
|
||||
const bgClass = isAsciiArt ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900';
|
||||
codeBlocks.push(`<pre class="${bgClass} p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm whitespace-pre"><code>${code}</code></pre>`);
|
||||
return placeholder;
|
||||
})
|
||||
// ... 其他处理 ...
|
||||
// 最后恢复代码块
|
||||
.replace(/__CODE_BLOCK_(\d+)__/g, (match, index) => codeBlocks[index]);
|
||||
```
|
||||
|
||||
**问题原因**: 直接用 `.replace(/\n/g, '<br>')` 会把代码块中的换行也替换成 `<br>`，导致每行都有背景。
|
||||
|
||||
**样式规范**:
|
||||
- ASCII图表代码块：`bg-gray-800 text-gray-100`（深色背景+浅色文字）
|
||||
- 普通代码块：`bg-gray-100 text-gray-900`（浅色背景+深色文字）
|
||||
- 内联代码：`bg-gray-200 text-gray-800`（浅灰背景+深色文字）
|
||||
|
||||
### ⚠️ Markdown 代码块样式
|
||||
|
||||
**关键修复**: 代码块必须正确处理，避免白字白底无法阅读
|
||||
|
||||
```javascript
|
||||
// 代码块正则（支持带或不带换行符的格式）
|
||||
.replace(/```(\w*)\n?([\s\S]*?)```/g, (match, lang, code) => {
|
||||
// 判断是否为ASCII图表（包含框线字符）
|
||||
const isAsciiArt = /┌|│|└|├|─|┐|┘|┤/.test(code);
|
||||
// 如果是ASCII图表，使用深色背景+浅色文字；否则使用灰色背景
|
||||
const bgClass = isAsciiArt ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-800';
|
||||
return `<pre class="${bgClass} p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm whitespace-pre"><code>${code}</code></pre>`;
|
||||
})
|
||||
```
|
||||
|
||||
**问题原因**: Markdown 代码块可能使用 ``` 后面直接跟内容（无换行符），正则必须兼容这种格式。同时需要为 ASCII 图表使用深色背景以提升可读性。
|
||||
|
||||
### 使用方法
|
||||
|
||||
```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. 平铺布局验证（⭐ 重点）
|
||||
- [ ] 所有页面同时可见（2列3行网格）
|
||||
- [ ] iframe 高度足够显示完整内容（750px）
|
||||
- [ ] 每个页面独立加载，无相互影响
|
||||
- [ ] 页面标签清晰可见
|
||||
- [ ] 网格间距合理，视觉舒适
|
||||
- [ ] 成功实现"一键总览"目标
|
||||
|
||||
#### 3. 样式验证（通过图片 MCP）
|
||||
- [ ] 配色方案符合规范
|
||||
- [ ] 字体大小合适
|
||||
- [ ] 间距布局合理
|
||||
- [ ] 阴影和圆角统一
|
||||
- [ ] 响应式适配正常
|
||||
|
||||
#### 4. 需求符合度验证
|
||||
- [ ] 功能模块完整
|
||||
- [ ] 数据字段齐全
|
||||
- [ ] 交互流程正确
|
||||
- [ ] 与需求文档描述一致
|
||||
|
||||
### 验证报告模板
|
||||
|
||||
```markdown
|
||||
# 原型验证报告
|
||||
|
||||
## 测试概览
|
||||
- 测试时间: 2026-xx-xx
|
||||
- 测试页面: 6 个
|
||||
- 截图数量: X 张
|
||||
- 验证方式: Playwright MCP + Image MCP
|
||||
|
||||
## 链接验证结果
|
||||
| 页面 | 链接状态 | 跳转正确 | 备注 |
|
||||
|------|---------|---------|------|
|
||||
| index.html | ✅ | ✅ | 正常 |
|
||||
| admin-index.html | ✅ | ✅ | 平铺入口 |
|
||||
| docs-index.html | ✅ | ✅ | 文档系统 |
|
||||
|
||||
## 平铺布局验证结果 ⭐
|
||||
| 验证项 | 结果 | 说明 |
|
||||
|--------|------|------|
|
||||
| 所有页面同时可见 | ✅ | 2列3行网格，6个页面全部显示 |
|
||||
| iframe 高度足够 | ✅ | 1000px 高度可显示完整页面内容 |
|
||||
| 页面独立加载 | ✅ | 每个页面独立 HTML 文件 |
|
||||
| 页面标签清晰 | ✅ | 蓝色标签显示页面名称 |
|
||||
| 网格间距合理 | ✅ | 16px gap，视觉舒适 |
|
||||
| 一键总览目标 | ✅ | 成功实现，无需切换页面 |
|
||||
|
||||
## 样式分析结果（Image MCP）
|
||||
### 美观度评分: 9/10
|
||||
- 配色: 9/10 - 蓝色系主色调，状态色区分清晰
|
||||
- 布局: 9/10 - 2列3行网格，模块分布均匀
|
||||
- 字体: 9/10 - sans-serif 统一风格
|
||||
- 整体: 9/10 - 专业数据仪表盘风格
|
||||
|
||||
### Image MCP 分析结论
|
||||
- ✅ 所有6个页面同时可见并平铺展示
|
||||
- ✅ 750px 高度足够显示完整页面内容
|
||||
- ✅ 2列3行网格布局合理
|
||||
- ✅ 美观度与专业性强
|
||||
- ✅ 成功实现"一键总览"目标
|
||||
|
||||
### 问题列表
|
||||
1. [问题描述]
|
||||
- 位置: [页面/元素]
|
||||
- 建议: [改进建议]
|
||||
|
||||
## 需求符合度
|
||||
| 需求项 | 符合度 | 备注 |
|
||||
|--------|--------|------|
|
||||
| 功能模块1 | ✅ 100% | 完全符合 |
|
||||
| 功能模块2 | ⚠️ 80% | 部分符合 |
|
||||
|
||||
## 改进建议
|
||||
[根据分析结果提出的改进建议]
|
||||
```
|
||||
|
||||
## 设计规范参考
|
||||
|
||||
详细设计规范参见 [design-patterns.md](references/design-patterns.md)：
|
||||
- 桌面端平铺网格布局规范（2列/3列网格）
|
||||
- iframe 容器样式标准
|
||||
- 颜色主题系统
|
||||
- 组件样式标准
|
||||
|
||||
## 模式选择
|
||||
|
||||
| 模式 | 入口页面 | 布局特点 | 适用场景 |
|
||||
|------|---------|---------|---------|
|
||||
| **平铺展示** ⭐ | admin-index.html | CSS Grid 网格平铺<br>所有页面同时显示 | 原型展示、评审、演示 |
|
||||
| 大屏平铺 | admin-index.html | 3列网格布局<br>所有页面同时显示 | 大屏幕、页面较多时 |
|
||||
| 标准平铺 | admin-index.html | 2列网格布局<br>所有页面同时显示 | 默认桌面端展示 |
|
||||
| 移动端 | admin-index.html | 1列网格布局<br>所有页面垂直排列 | 小屏幕、移动设备 |
|
||||
|
||||
## 工作示例
|
||||
|
||||
参考当前项目实现：
|
||||
- `/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`
|
||||
@@ -0,0 +1,333 @@
|
||||
# 原型设计规范
|
||||
|
||||
## 移动端布局规范
|
||||
|
||||
### 手机框架
|
||||
- **尺寸**: 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-600
|
||||
边框: gray-200
|
||||
```
|
||||
|
||||
#### 功能颜色映射
|
||||
```
|
||||
数据看板: blue-500
|
||||
用户管理: green-500
|
||||
内容管理: purple-500
|
||||
订单管理: orange-500
|
||||
财务管理: amber-500
|
||||
系统设置: gray-500
|
||||
```
|
||||
|
||||
## 组件样式标准
|
||||
|
||||
### 移动端组件
|
||||
|
||||
#### 卡片
|
||||
```
|
||||
圆角: rounded-2xl (16px)
|
||||
内边距: p-4 (16px)
|
||||
阴影: shadow-sm
|
||||
背景: bg-white (前端) / bg-white (后端内容区)
|
||||
```
|
||||
|
||||
#### 按钮
|
||||
```
|
||||
主要按钮: bg-gradient-to-r from-amber-400 to-orange-500
|
||||
次要按钮: bg-gray-100
|
||||
圆角: rounded-xl (12px)
|
||||
内边距: py-3 px-4 (垂直12px 水平16px)
|
||||
```
|
||||
|
||||
### 桌面端组件
|
||||
|
||||
#### 导航菜单项
|
||||
```
|
||||
内边距: px-4 py-3
|
||||
圆角: rounded-lg (8px)
|
||||
颜色: text-slate-300
|
||||
悬停: hover:bg-slate-700 hover:text-white
|
||||
间距: mb-1
|
||||
图标宽度: w-5 (20px)
|
||||
```
|
||||
|
||||
#### 页面卡片
|
||||
```
|
||||
圆角: rounded-xl (12px)
|
||||
阴影: shadow-sm
|
||||
悬停阴影: hover:shadow-md
|
||||
内边距: p-6 (24px)
|
||||
边框: border-l-4 (左侧彩色边框)
|
||||
```
|
||||
|
||||
#### 按钮组
|
||||
```
|
||||
主要按钮: bg-blue-500 hover:bg-blue-600
|
||||
次要按钮: bg-slate-800 hover:bg-slate-700
|
||||
圆角: rounded-lg (8px)
|
||||
内边距: px-4 py-2
|
||||
文字大小: text-sm
|
||||
```
|
||||
|
||||
## 页面分类
|
||||
|
||||
### 移动端前端分类
|
||||
|
||||
1. **核心页面** (蓝色)
|
||||
- 首页/资源列表
|
||||
- 资源详情
|
||||
- 音频详情（试听）
|
||||
- 搜索页面
|
||||
- 分类浏览
|
||||
|
||||
2. **用户中心** (绿色)
|
||||
- 微信授权登录
|
||||
- 个人中心
|
||||
- 设置页面
|
||||
- 关于我们
|
||||
|
||||
3. **订单支付** (橙色)
|
||||
- 确认订单
|
||||
- 支付页面
|
||||
- 支付结果
|
||||
- 我的订单
|
||||
|
||||
4. **会员分佣** (紫色)
|
||||
- 会员充值
|
||||
- 我的钱包
|
||||
- 邀请推广
|
||||
- 提现申请
|
||||
|
||||
### 移动端后端分类
|
||||
|
||||
1. **数据看板** (amber-500)
|
||||
- 后台首页
|
||||
- 数据统计
|
||||
- 收入报表
|
||||
- 用户分析
|
||||
|
||||
2. **资源管理** (blue-500)
|
||||
- 文件列表
|
||||
- 文件上传
|
||||
- 价格管理
|
||||
- 批量设置
|
||||
- 分类管理
|
||||
|
||||
3. **订单管理** (green-500)
|
||||
- 订单列表
|
||||
- 订单详情
|
||||
- 退款管理
|
||||
- 交易记录
|
||||
|
||||
4. **会员分佣** (purple-500)
|
||||
- 套餐管理
|
||||
- 会员列表
|
||||
- 分佣设置
|
||||
- 提现审核
|
||||
|
||||
5. **系统设置** (red-500)
|
||||
- 用户管理
|
||||
- 微信配置
|
||||
- 支付配置
|
||||
- 系统设置
|
||||
|
||||
### 桌面端管理后台分类
|
||||
|
||||
1. **数据看板** (blue-500)
|
||||
- 仪表盘
|
||||
- 数据统计
|
||||
- 图表分析
|
||||
|
||||
2. **用户管理** (green-500)
|
||||
- 用户列表
|
||||
- 用户详情
|
||||
- 权限管理
|
||||
|
||||
3. **内容管理** (purple-500)
|
||||
- 文章管理
|
||||
- 分类管理
|
||||
- 标签管理
|
||||
|
||||
4. **订单管理** (orange-500)
|
||||
- 订单列表
|
||||
- 订单详情
|
||||
- 退款处理
|
||||
|
||||
5. **财务管理** (amber-500)
|
||||
- 收入统计
|
||||
- 提现审核
|
||||
- 财务报表
|
||||
|
||||
6. **系统设置** (gray-500)
|
||||
- 基本设置
|
||||
- 支付配置
|
||||
- 系统日志
|
||||
|
||||
## 响应式设计原则
|
||||
|
||||
### 移动端网格系统
|
||||
```
|
||||
小屏 (1列): grid-cols-1
|
||||
中屏 (2列): md:grid-cols-2
|
||||
大屏 (3列): lg:grid-cols-3
|
||||
超大屏 (4列): xl:grid-cols-4
|
||||
```
|
||||
|
||||
### 桌面端网格系统
|
||||
```
|
||||
小屏 (1列): grid-cols-1
|
||||
中屏 (2列): md:grid-cols-2
|
||||
大屏 (3列): lg:grid-cols-3
|
||||
超大屏 (4列): xl:grid-cols-4
|
||||
宽屏 (5列): 2xl:grid-cols-5
|
||||
```
|
||||
|
||||
### 间距规范
|
||||
```
|
||||
移动端页面边距: px-4 (16px)
|
||||
桌面端页面边距: px-6 或 p-6 (24px)
|
||||
卡片间距: gap-4 (16px) 或 gap-6 (24px)
|
||||
章节间距: mb-6 或 mb-8 (24px或32px)
|
||||
元素间距: gap-3 (12px)
|
||||
```
|
||||
|
||||
## iframe 路径规范
|
||||
|
||||
### 移动端入口页面
|
||||
```
|
||||
相对路径: pages/front/xxx.html 或 pages/back/xxx.html
|
||||
示例: <iframe src="pages/front/home.html"></iframe>
|
||||
```
|
||||
|
||||
### 桌面端入口页面
|
||||
```
|
||||
相对路径: pages/admin/xxx.html
|
||||
示例: <iframe src="pages/admin/dashboard.html"></iframe>
|
||||
或直接加载页面内容（不使用iframe）
|
||||
```
|
||||
|
||||
### 文档首页
|
||||
```
|
||||
相对路径: docs/index.html
|
||||
示例: <iframe src="docs/index.html"></iframe>
|
||||
```
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **CSS框架**: Tailwind CSS (CDN: https://cdn.tailwindcss.com)
|
||||
- **图标**: Font Awesome 6.4.0 (CDN: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css)
|
||||
- **HTML版本**: HTML5
|
||||
- **字符编码**: UTF-8
|
||||
- **视口**:
|
||||
- 移动端: width=device-width, initial-scale=1.0
|
||||
- 桌面端: width=device-width, initial-scale=1.0
|
||||
|
||||
## 模式选择指南
|
||||
|
||||
### 使用移动端模式当：
|
||||
- 目标用户主要使用移动设备
|
||||
- 需要展示移动应用原型
|
||||
- 需要 H5 页面展示
|
||||
- 需要小程序原型
|
||||
|
||||
### 使用桌面端模式当：
|
||||
- 目标用户主要使用电脑
|
||||
- 需要展示管理后台系统
|
||||
- 需要数据看板展示
|
||||
- 需要复杂的数据管理界面
|
||||
Reference in New Issue
Block a user