majiayu000 原型设计
概述
本 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