Menu
UI原型图生成技能，根据需求描述生成页面设计草稿图、线框图和UI文档
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
简洁风格技能，禁止废话，采用caveman式简短直接的表达方式
个人文档管理技能，管理变更记录、方案设计Spec文档、测试报告等，统一存放在docs目录下
项目启动管理技能，支持Java Spring Boot和Vue项目的启动、重启、关闭操作，保持原有端口不变
方案调研技能，对方案设计、功能实现进行多方案比对分析，至少3个方案，建议5个左右的方案比对，包括业界标杆方案、大厂实现方案等
基于OpenAPI规范生成API文档，支持Swagger UI和ReDoc展示
提供后端单元测试指导和生成能力，支持JUnit 5、Mockito等框架
| name | common-ui-mockup |
| description | UI原型图生成技能，根据需求描述生成页面设计草稿图、线框图和UI文档 |
| trigger | 需要生成UI页面草稿图、线框图或设计文档时 |
| disable-when | 已有完整设计稿且无需修改时 |
| category | common |
| tags | ["ui","mockup","wireframe","prototype","design-doc"] |
| requires | ["common-ui-design-spec"] |
UI原型图生成技能根据需求描述生成页面设计草稿图、线框图和UI设计文档。支持多种格式输出，包括ASCII艺术图、Mermaid图表、HTML原型等，帮助团队快速可视化设计方案。
┌─────────────────────────────────────────────────────┐
│ [Logo] [导航菜单] [登录] │
├─────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────┐ │
│ │ Hero 区域 │ │
│ │ │ │
│ │ 标题：欢迎使用我们的产品 │ │
│ │ 副标题：一句话描述产品价值 │ │
│ │ │ │
│ │ [开始使用] [了解更多] │ │
│ └───────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 功能1 │ │ 功能2 │ │ 功能3 │ │
│ │ 描述文字 │ │ 描述文字 │ │ 描述文字 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────────────┤
│ [页脚信息] │
└─────────────────────────────────────────────────────┘
graph TD
A[首页] --> B[产品列表]
A --> C[关于我们]
B --> D[产品详情]
D --> E[购买页面]
E --> F[订单确认]
# 页面设计文档 - 用户列表页
## 页面概述
- 页面路径：/users
- 页面类型：列表页
- 目标用户：管理员
- 核心功能：用户管理、搜索、筛选
## 页面结构
| 区域 | 元素 | 说明 |
|------|------|------|
| 顶部栏 | 标题、搜索框、新增按钮 | 搜索和操作入口 |
| 列表区 | 表格、分页、批量操作 | 用户数据展示 |
| 侧边栏 | 筛选条件、排序选项 | 数据过滤 |
## 组件规范
### 表格行
| 状态 | 样式 | 说明 |
|------|------|------|
| 正常 | 默认背景 | 鼠标悬停高亮 |
| 选中 | 蓝色背景 | 支持批量选择 |
| 禁用 | 灰色背景 | 不可操作 |
## 交互规范
| 操作 | 触发方式 | 响应 |
|------|----------|------|
| 点击行 | 鼠标左键 | 展开详情或跳转到详情页 |
| 双击行 | 鼠标左键双击 | 编辑用户信息 |
| 批量删除 | 选择多行后点击删除 | 弹出确认对话框 |
桌面端（≥1200px）：
┌────────────────────────────────────────────┐
│ 导航 内容 │
│ ┌─────┐ ┌──────────────────────────┐ │
│ │侧边 │ │ 主内容区域 │ │
│ │栏 │ │ │ │
│ └─────┘ └──────────────────────────┘ │
└────────────────────────────────────────────┘
平板端（768-1199px）：
┌────────────────────────────────────┐
│ 导航栏 │
├────────────────────────────────────┤
│ │
│ 主内容区域 │
│ │
└────────────────────────────────────┘
移动端（<768px）：
┌──────────────────────┐
│ 顶部导航 │
├──────────────────────┤
│ │
│ 单列内容区域 │
│ │
├──────────────────────┤
│ 底部导航 │
└──────────────────────┘
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pageName | String | 是 | 页面名称 |
| pageType | String | 否 | 页面类型（list/detail/form/dashboard/landing） |
| elements | List<String> | 否 | 需要包含的页面元素 |
| layout | String | 否 | 布局类型（single/double/sidebar/dashboard） |
| targetDevice | String | 否 | 目标设备（desktop/tablet/mobile/all） |
| style | String | 否 | 风格（minimal/modern/corporate/playful） |
{
"mockup": {
"pageName": "用户列表页",
"pageType": "list",
"layout": "sidebar",
"targetDevice": "all",
"ascii": "...",
"mermaid": "...",
"designDoc": "...",
"responsive": {
"desktop": "...",
"tablet": "...",
"mobile": "..."
}
}
}
┌─────────────────────────────────────────────┐
│ 标题 [搜索] [新增] [筛选] │
├─────────────────────────────────────────────┤
│ ┌───────────────────────────────────────┐ │
│ │ 表头：列1 | 列2 | 列3 | 列4 | 操作 │ │
│ ├───────────────────────────────────────┤ │
│ │ 数据行1 │ │
│ │ 数据行2 │ │
│ │ 数据行3 │ │
│ └───────────────────────────────────────┘ │
├─────────────────────────────────────────────┤
│ 分页导航 │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│ [返回] 标题 │
├─────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────────────┐ │
│ │ 基本信息 │ │ 其他信息 │ │
│ │ │ │ │ │
│ │ 字段1: 值 │ │ 字段5: 值 │ │
│ │ 字段2: 值 │ │ 字段6: 值 │ │
│ │ 字段3: 值 │ │ │ │
│ │ 字段4: 值 │ └─────────────────────┘ │
│ └─────────────┘ │
├─────────────────────────────────────────────┤
│ [编辑] [删除] [相关操作] │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│ [返回] 标题 │
├─────────────────────────────────────────────┤
│ ┌───────────────────────────────────────┐ │
│ │ 字段1: [___________] │ │
│ │ 字段2: [___________] │ │
│ │ 字段3: [___________] │ │
│ │ 字段4: [___________] │ │
│ │ │ │
│ │ [保存] [取消] │ │
│ └───────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│ 仪表盘标题 [时间范围选择] │
├─────────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ KPI 1 │ │ KPI 2 │ │ KPI 3 │ │
│ │ 数值 │ │ 数值 │ │ 数值 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────┤
│ ┌───────────────────────────────────────┐ │
│ │ 图表区域 │ │
│ └───────────────────────────────────────┘ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ 表格/列表 │ │ 其他组件 │ │
│ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────┘
参考来源：