# Prototype Design

> 原型界面设计工具。当用户需要根据 PRD 生成高保真原型页面、快速出原型确认需求、或进行 UI/UX 设计验证时使用。支持移动端和 PC 端应用。

- Skill: `majiayu000/prototype-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/prototype-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/prototype-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/prototype-design

---


# 原型设计

## 概述
本 Skill 用于根据需求文档生成高保真的原型界面，支持移动端和 PC 端应用。

## 核心原则（必须遵守）

1. **必须为 PRD 中定义的每个页面生成对应的 HTML 文件**
2. **禁止只生成部分页面**
3. **必须生成 index.html 主入口文件**
4. **必须生成 css/styles.css 样式文件**
5. **必须生成 js/main.js 交互逻辑文件**
6. **必须生成 js/mock-data.js Mock 数据文件**

---

## 执行流程

```
[1] 阅读 PRD 文档
     ↓
[2] 提取页面清单
     ↓
[2.5] 选择设计风格（用户确认）
     ↓
[3] 创建 css/styles.css
     ↓
[4] 创建 js/main.js
     ↓
[5] 创建 js/mock-data.js
     ↓
[6] 逐个生成页面
     ↓
[7] 生成 index.html 主入口
     ↓
[8] 完整性检查
```

---

## 设计风格选择

### UI 样式
| 序号 | 样式名称 | 推荐场景 |
|:---:|---------|---------|
| 1 | Minimalism（极简主义） | 企业应用、SaaS 平台 |
| 2 | Glassmorphism（毛玻璃） | 高端 SaaS、金融仪表盘 |
| 3 | Dark Mode（深色模式） | 开发工具、视频平台 |
| 4 | Bento Grid（便当盒） | 仪表盘、数据展示 |
| 5 | Flat Design（扁平化） | 移动应用、工具类产品 |

### 配色方案
| 序号 | 方案名称 | 主色 | 推荐行业 |
|:---:|---------|:----:|---------|
| 1 | SaaS 蓝 | #2563EB | SaaS、企业软件 |
| 2 | 科技紫 | #7C3AED | AI 产品、科技公司 |
| 3 | 商务深蓝 | #1E40AF | 金融科技、B2B |
| 4 | 清新绿 | #059669 | 医疗健康、教育 |
| 5 | 活力橙 | #EA580C | 电商、社交 |

---

## 原型文件结构

```
prototype/
├── index.html          # 主入口
├── css/styles.css      # 全局样式
├── js/main.js          # 交互逻辑
├── js/mock-data.js     # Mock 数据
├── login.html          # 登录页
├── dashboard.html      # 仪表盘
└── {page}.html         # 功能页面
```

---

## 页面交互要求

| 组件 | 说明 |
|-----|------|
| Toast 提示 | 成功/错误/警告提示 |
| Modal 弹窗 | 新增/编辑/删除确认 |
| 表单验证 | 必填项、格式验证 |
| 侧边栏/导航 | 菜单展开/收起 |

---

## 设计规范

### PC 端
| 属性 | 值 |
|-----|-----|
| 最小宽度 | 1200px |
| 侧边栏宽度 | 240px |
| 卡片圆角 | 8px |

### 移动端
| 属性 | 值 |
|-----|-----|
| 界面尺寸 | 393 x 852 |
| 圆角 | 16px |
| 安全区域 | 底部 34px |

---

## 推荐资源

- **图标库**: Lucide Icons
- **图表库**: Chart.js
- **字体**: Poppins + Open Sans