d8dfun/contract-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新原型生成技能为最新AI驱动版本

Browse Source 
- 从 temp-humidity-demo 复制最新技能版本
- 增加 5 步 AI 工作流（含自动验证测试）
- 优化 AI 驱动的生成流程描述

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
D8D Developer
2026-03-24 09:41:57 +00:00
parent 721988cbf6
commit 36506df0db
1 changed files with 202 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
.claude/skills/generate-prototype-grid/SKILL.md
View File

@@ -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
<!DOCTYPE html>
@@ -86,128 +61,39 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI
<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-50">
<!-- 状态栏 -->
<div class="bg-white h-9 px-4 py-2 flex items-center justify-between">
<span class="text-xs font-medium">9:41</span>
<div class="flex items-center gap-1">
<i class="fas fa-signal text-xs"></i>
<i class="fas fa-wifi text-xs"></i>
<i class="fas fa-battery-full text-xs"></i>
</div>
</div>
<!-- 导航栏 -->
<div class="bg-gradient-to-r from-blue-500 to-blue-600 h-12 px-4 flex items-center">
<a href="home.html" class="text-white"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-white font-semibold ml-4 flex-1">页面标题</h1>
<button class="text-white"><i class="fas fa-ellipsis-v"></i></button>
</div>
<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-4">
<div class="p-6">
<!-- 页面具体内容 -->
</div>
<!-- 底部导航（仅一级页面） -->
<div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-2">
<div class="flex justify-around">
<a href="home.html" class="flex flex-col items-center text-blue-500">
<i class="fas fa-home"></i>
<span class="text-xs mt-1">首页</span>
</a>
<!-- ... 更多导航项 -->
</div>
</div>
</body>
</html>
```
#### 内容生成要点
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
<!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>
.phone-frame {
width: 375px;
height: 812px;
border: 12px solid #1a1a1a;
border-radius: 40px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}
.phone-frame iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body class="bg-gradient-to-br from-slate-800 to-slate-900 min-h-screen p-8">
<!-- 标题 -->
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-white mb-2">项目原型</h1>
<p class="text-slate-400">移动端页面平铺展示</p>
</div>
<!-- 分类导航 -->
<div class="flex flex-wrap gap-3 justify-center mb-8">
<a href="#section1" class="px-4 py-2 bg-blue-500 text-white rounded-full">分类1</a>
<a href="#section2" class="px-4 py-2 bg-green-500 text-white rounded-full">分类2</a>
</div>
<!-- 页面网格 -->
<section id="section1" class="max-w-7xl mx-auto mb-12">
<h2 class="text-2xl font-bold text-white mb-6">分类1标题</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<div class="phone-frame bg-white">
<iframe src="pages/front/page1.html"></iframe>
</div>
<div class="phone-frame bg-white">
<iframe src="pages/front/page2.html"></iframe>
</div>
<!-- ... 更多页面 -->
</div>
</section>
</body>
</html>
```
### 桌面端入口页面 (admin-index.html)
```html
@@ -223,45 +109,196 @@ description: 根据方案文档/需求文档生成原型平铺展示系统。AI
<body class="bg-gray-100">
<div class="flex min-h-screen">
<!-- 侧边栏 260px -->
<div class="w-260 bg-slate-800 text-white">
<div class="p-6 border-b border-slate-700">
<h1 class="text-xl font-bold">项目名称</h1>
</div>
<nav class="p-4">
<a href="#section1" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-700">
<i class="fas fa-chart-line w-5"></i>
<span>数据看板</span>
</a>
<!-- ... 更多导航 -->
</nav>
<div class="w-72 bg-slate-800 text-white">
<!-- 导航菜单 -->
</div>
<!-- 主内容区 -->
<div class="flex-1 p-6">
<section id="section1" class="mb-8">
<h2 class="text-xl font-bold mb-4">数据看板</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition p-6 border-l-4 border-blue-500">
<h3 class="font-bold mb-2">仪表盘</h3>
<a href="pages/admin/dashboard.html" class="text-blue-500 text-sm">查看页面 →</a>
</div>
<!-- ... 更多卡片 -->
</div>
</section>
<!-- 页面卡片网格 -->
</div>
</div>
</body>
</html>
```
## 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<br>back-index.html | 375×812 iPhone 框架<br>响应式网格（1-4列） | 移动应用、H5、小程序 |
| 桌面端 | admin-index.html | 260px 侧边栏<br>主内容区卡片网格 | 管理后台、数据看板 |
## 工作示例
参考当前项目实现：
- `/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`