Menü
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/bage2014/study --skill common-ui-mockupDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
SKILL.md wird angezeigt
UI设计规范技能，提供设计系统、配色方案、排版规则、无障碍标准等专业UI设计指导
项目规范技能，提供项目结构、文档管理、代码忽略等方面的标准和最佳实践
MCP Apps项目规范 - 后端驱动UI渲染架构。所有页面由后端生成HTML通过MCP协议返回渲染。Invoke when developing or maintaining MCP Apps projects, especially when creating new pages, tools, or stores.
Basierend auf der SOC-Berufsklassifikation
| 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 │ │
│ │ 数值 │ │ 数值 │ │ 数值 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────┤
│ ┌───────────────────────────────────────┐ │
│ │ 图表区域 │ │
│ └───────────────────────────────────────┘ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ 表格/列表 │ │ 其他组件 │ │
│ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────┘
参考来源：