Product Prototype Design

快速生成高保真的产品交互原型（单个独立 HTML 文件），适用于产品经理、创业者、设计师快速验证想法。当用户提到原型设计、产品原型、交互原型、demo 制作、产品 Mock、界面原型、H5 原型、产品页面设计、MVP 原型、Landing Page、产品概念验证，或需要快速将产品想法可视化为可交互页面时，请使用此 skill。即使未明确提及'原型'，只要用户想快速做一个产品页面/界面/Demo，也应触发此 skill。

yz6214589-hash@yz6214589-hash

Install

openclaw skills install @yz6214589-hash/product-prototype-design

产品原型设计

快速生成高保真交互原型，单文件独立 HTML，无需部署即可体验。

设计流程

Step 1: 需求收集

使用 AskUserQuestion 收集关键信息：

markdown

请告诉我关于原型的基本信息：

1. **产品类型** (单选)
   - SaaS 应用
   - 移动 App
   - 电商网站
   - 内容平台
   - 工具类产品
   - 其他

2. **目标用户** (单选)
   - 企业用户 (B2B)
   - 个人消费者 (B2C)
   - 开发者
   - 创造者
   - 学生
   - 其他

3. **核心功能** (多选最多3项)
   [ ] 用户注册/登录
   [ ] 数据展示/列表
   [ ] 搜索/筛选
   [ ] 内容创建/编辑
   [ ] 购买/支付
   [ ] 社交分享
   [ ] 数据分析/报表
   [ ] 设置/个人中心

4. **风格偏好** (单选)
   - 现代简约
   - 专业商务
   - 活力创新
   - 科技未来
   - 温情人文
   - 其他

Step 2: 页面规划

根据收集的信息，规划原型包含的关键页面：

markdown

产品原型将包含以下页面：

✅ Page 1: 首页/仪表盘
- 主要数据展示
- 快捷操作入口
- 核心功能预览

✅ Page 2: 核心功能页
- [根据选择的3个核心功能]

✅ Page 3: 详情/配置页
- 详细设置选项
- 高级功能

✅ Page 4: 个人中心
- 用户信息
- 偏好设置

确认这个规划是否符合您的预期？

Step 3: 行业风格应用

查询 references/industry-design-specs.md 获取对应行业的设计规范：

根据产品类型选择配色方案
应用推荐的视觉风格
使用行业标准的交互模式

Step 4: 生成原型

调用 Write 工具创建单文件 HTML 原型：

文件命名规范: product-prototypes/{产品类型}_{时间戳}.html

技术栈:

HTML5 语义化标签
Tailwind CSS (CDN)
原生 JavaScript (ES6+)
微交互动画 (CSS transitions)
模拟数据 (JSON)

Step 5: 交付说明

markdown

✅ 原型已生成！

文件位置: product-prototypes/{产品类型}_{时间戳}.html

使用方法:
1. 双击 HTML 文件即可在浏览器打开
2. 无需任何服务器或部署
3. 所有交互都是可点击的
4. 点击页面顶部的导航可切换页面

预览链接: [如果支持在线预览]

📝 原型说明:
- 包含 {N} 个核心页面
- 实现了 {M} 个交互功能
- 包含 {K} 个微动效
- 响应式设计，支持移动端

原型模板库

SaaS 仪表盘模板

text

关键元素:
- 侧边导航栏
- 顶部用户信息
- 数据图表区域
- 快速操作卡片
- 最近活动列表

电商产品页模板

text

关键元素:
- 商品轮播图
- 价格/购买按钮
- 规格选择器
- 商品描述标签
- 相关推荐

内容平台模板

text

关键元素:
- 内容瀑布流
- 筛选/排序
- 点赞/收藏
- 评论互动
- 创作者信息

工具类产品模板

text

关键元素:
- 功能输入区
- 实时预览
- 操作按钮
- 历史记录
- 导出/分享

高级功能

数据可视化

Chart.js 图表展示
动态数据更新
交互式筛选

表单交互

步骤式表单
实时验证
拖拽排序

列表管理

虚拟滚动
批量操作
拖拽上传

通知系统

Toast 提示
Badge 徽章
弹窗模态

最佳实践

1. 快速原型原则

80/20 法则：实现核心 20% 的功能，呈现 80% 的效果
灰度模式：先布局后上色
渐进增强：基础交互 → 微动画 → 复杂功能

2. 用户体验

3 秒规则：3秒内理解页面价值
一致性：保持全局设计语言统一
反馈：每个操作都有视觉反馈

3. 技术实现

组件化思维：可复用的 UI 模块
性能优化：懒加载防抖节流
移动优先：响应式设计

示例输出

文件结构

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品原型 - {产品名称}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 自定义样式和动画 */
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <!-- 页面内容 -->
    <!-- 交互逻辑 -->
    <script>
        // 所有交互代码
    </script>
</body>
</html>

交互示例

javascript

// 页面切换
function showPage(pageId) {
    document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
    document.getElementById(pageId).classList.remove('hidden');
}

// 模态框控制
function showModal(content) {
    // 显示模态框逻辑
}

// 表单验证
function validateForm() {
    // 验证逻辑
}

扩展功能

数据持久化

LocalStorage 保存设置
导出/导入配置

分享功能

生成分享链接
导出为图片
分享到社交平台

协作功能

评论标注
版本对比
反馈收集

交付物清单

[✅] product-prototype-{timestamp}.html (主文件)
assets/ (静态资源，如需要)
README.md (使用说明)
changelog.md (版本记录)

后续优化建议

添加真实 API 集成
实现后端数据存储
增加用户认证系统
优化移动端体验
添加无障碍支持

Product Prototype Design

Install

产品原型设计

设计流程

Step 1: 需求收集

Step 2: 页面规划

Step 3: 行业风格应用

Step 4: 生成原型

Step 5: 交付说明

原型模板库

SaaS 仪表盘模板

电商产品页模板

内容平台模板

工具类产品模板

高级功能

数据可视化

表单交互

列表管理

通知系统

最佳实践

1. 快速原型原则

2. 用户体验

3. 技术实现

示例输出

文件结构

交互示例

扩展功能

数据持久化

分享功能

协作功能

交付物清单

后续优化建议

Related skills