| name | prototype-design |
| description | 原型界面设计工具。当用户需要根据 PRD 生成高保真原型页面、快速出原型确认需求、或进行 UI/UX 设计验证时使用。支持移动端和 PC 端应用。 |
原型设计
概述
本 Skill 用于根据需求文档生成高保真的原型界面，支持移动端和 PC 端应用。
核心原则（必须遵守）
- 必须为 PRD 中定义的每个页面生成对应的 HTML 文件
- 禁止只生成部分页面
- 必须生成 index.html 主入口文件
- 必须生成 css/styles.css 样式文件
- 必须生成 js/main.js 交互逻辑文件
- 必须生成 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